Problem in IE

Hey guys,

there’s a small problem with IE, the text appears in the same line where the <hr /> tag is instead of above it (the dates on the left side), how can i fix that?

u can look at it here from IE, while in chrome it works fine
http://sospets.brinkster.net/stories.asp

CSS related to those lines:


.stories{width:95%;list-style-type:none;list-style-position:inside;}
.stories li {list-style-type:none;list-style-position:inside;}
.leftdates {font-weight:bold;float:left;}

thanks

Hi,
The problem is that your floated span does not come first in the source of the LI contents. Floats must come first in the source for IE7 and under so as a general rule you should always bring your floats first for all browsers to avoid problems with IE.

<ul class="stories">
    <li>
        [B][COLOR=Blue]<a[/COLOR][/B] href="javascript:;" onclick="sospets('62');">&#1495;&#1513;&#1493;&#1489; &#1502;&#1488;&#1493;&#1491; - &#1492;&#1499;&#1503; &#1499;&#1500;&#1489;&#1498;/&#1495;&#1514;&#1493;&#1500;&#1498; &#1500;&#1497;&#1493;&#1501; &#1492;&#1506;&#1510;&#1502;&#1488;&#1493;&#1514;[B][COLOR=Blue]</a>[/COLOR][/B]
        [COLOR=Black][B][COLOR=Red]<span class="leftdates">[/COLOR][/B]07/05/2008[B][COLOR=Red]</span>[/COLOR][/B][/COLOR]
        <div id="a62" class="hiddens"></div>
        <hr />
    </li>
</ul>

how can i fix that?
To fix your page you can float the anchor to the right, that way you will be giving IE two floats instead of one float lower in the source.

You will need to add a new selector to force the <hr> to clear the floats above it.
I don’t think the hidden div will be an issue since it is display:none until the js kicks in.

.right ul li a, [B].stories li a[/B] {
[COLOR=Blue]float:right;[/COLOR]
color:#484848;
text-decoration:none;
}

[B].stories li hr[/B] {
[COLOR=Blue]clear:both;[/COLOR]
}

Hope that helps :slight_smile:

yeah it helped, thanks :slight_smile:

got another question regarding this…

how can i make all browsers have the same space between the lists/hr tags, just like IE got atm? (its the first time i like the way IE looks more than any other browsers :lol: )

Try taking out the <hr /> and giving the <li> elements a
css bottom-border:1px solid #000;

<hr /> renders differently in different browsers. The bottom border is much more controlled.