PDA

View Full Version : Text length overrides "width" in IE

jkiv
26th June 07, 05:44 AM
I ... wish to love CSS if it wasn't for IE. I made an awesome layout in Firefox but fails in IE. I've messed with it down to one last problem: the length of a piece of text in a <span> overrides both the width of the parent <a> and the <span>.

I have an <a> that is 40x40. Inside that is a <span> that is inside the <a> (i've tried floating it and relative position... same diff). Inside that I have text. It wraps if its more than one word, so I use &nbsp; instead of regular space. In firefox the text extends beyond the limits of the <a> but in IE it re-sizes the <a>.

If anyone has a better idea to have text to appear above a 40x40 link square link (i've tried float and margin-top: -1.1em... and decided to go position: relative; top: -1.1em) so the text looks right-justified (ends at the right side of the square link box)

Thanks (first time posting)

P.S.

HTML

<div class="nav">
<img src="menu_logo.jpg" style="float: left" />
<a class="a" href="#"><span class="label">Ruby&nbsp;Moon</span></a>
<!-- removed some links -->
<a class="b" href="#"><span class="label">Contact</span></a>
</div>




.label{
position: relative;
top: -1.2em;
text-align: right;
font-size: 1.1em;
height: 1.1em;
line-height: 1.1em;
color: #0f0;
visibility: hidden;
display: none;
width: 40px;
}
.a, .b, .c, .d {
float: right;
display: block;
height: 40px;
width: 40px;
}
.a:hover, .b:hover, .c:hover, .d:hover {
background: #000;
}
.a:hover span, .b:hover span, .c:hover span, .d:hover span{
color: #000;
margin-left: 0;
visibility: visible;
display: inline;
width: 40px;
}
jkiv
26th June 07, 06:23 AM
P.P.S...

this doesn't appear to align the text right on either browser.
chrishirst
26th June 07, 10:34 PM
A <span> is an in-line element so can't have height, or width applied to it.
It will always fit the content contained with the element, consequently it can't be aligned right, centred or left.
jkiv
27th June 07, 12:00 AM
A <span> is an in-line element so can't have height, or width applied to it.
It will always fit the content contained with the element, consequently it can't be aligned right, centred or left.

Changed spans to divs... same problem.


<div class="nav">
<a class="a" style="background-color: #311"><img src="flag.gif" style="margin: 13 10 13 9" /></a>
<!-- some links removed -->
<a class="b" href="#"><div class="label">Open&nbsp;for&nbsp;Lunch</div></a>
</div>




.label{
position: relative;
top: -1.2em;
width: 40px;
text-align: right;
font-size: 1.1em;
visibility: hidden;
white-space: nowrap;
overflow: visible;
}
.a, .b, .c, .d {
float: right;
display: block;
height: 40px;
width: 40px;
text-align: right;
}
.a:hover, .b:hover, .c:hover, .d:hover {
background: #000;
}
.a:hover .label, .b:hover .label, .c:hover .label, .d:hover .label{
color: #000;
visibility: visible;
}


Code running in Firefox:
http://i8.tinypic.com/4zk04gh.png

...in IE6:
http://i15.tinypic.com/535e4x1.png
jkiv
3rd July 07, 06:31 AM
Meh, just denying IE users labels for my link squares over learning javascript onhovers...

<!--[if IE 6]>
.label{
font-size: 0px;
}
<![endif]-->


That SHOULD work... I haven't tested it.
tominated
3rd July 07, 11:34 AM
Meh, just denying IE users labels for my link squares over learning javascript onhovers...

<!--[if IE 6]>
.label{
font-size: 0px;
}
<![endif]-->


That SHOULD work... I haven't tested it.

was going to say that.
jkiv
11th July 07, 08:49 PM
was going to say that.

Well, as it turns out, INTERNET EXPLORER DOESN'T RECOGNIZE MY CONDITIONAL!!!!
Seriously, it feels like my life is a joke up til this point and someone is going to jump out and surprise me.

Seriously. Why even have "if IE" if IE doesn't even recognize it? Seriously.

To make sure it wasn't just a weird thing IE did with boxes and font-sizes (like rendering the boxes before changing the font size) I tried "body{ font-size: 10em;}

No dice.

Someone please just give me what I need. I've settled for IE buttons not having labels, but how do I even implement that in CSS?


<head>
<link href="layout.css" rel="stylesheet" type="text/css">
<link href="colour_a.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<style>
.label { font-size: 0px; }
</style>
<![endif]-->
</head>


That's all that's different, and IE doesn't pick it up! If you want to see the site for yourself: http://www.rubymooncatering.com/beta

I'm fed up.
chrishirst
11th July 07, 09:56 PM
<!--[if IE]>
<style type="text/css">
jkiv
11th July 07, 10:00 PM
<!--[if IE]>
<style type="text/css">


Tried that in the meantime. I'm relieved. Also trying to validate with the w3c, I switched the <a ...><div...></div></a> to <a ...><span...></span></a> which still works. Also added !DOCTYPE and img alt's. Thanks again! WLC ftw!