Welcome to WebmasterWorld Guest from 54.163.100.58

Forum Moderators: incrediBILL

text on send line in block starts earlier in IE6

   
4:10 pm on Feb 24, 2009 (gmt 0)

10+ Year Member



Hello,
I'm doing some html&css atm and have a little problem with... IE6.
I am trying to display a list of divs each having a 2 blocks. first block displays current time. 2nd block displays a title.
When the title is longer than the divs space, it breaks, and continues on the next line.
The second line starts strangly a little more to the left than the first line of text. this only happens in IE6, not firefox.

I hope a little code can clarify:


<div id="headlines" class="border">
<div class="headline"><span class="older">Headline Headline Headline Headline</span></div>
<div class="headline">
<h3 title="Title Title Title Title Title Title Title Title Title Title Title Title Title Title">
<div class="tijd"><a href="http://example.com/archief-test/article658.ece/Title_Title_Title_Title_Title Title_Title_Title_Title_Title_Title_Title_Title_Title">10:40</a></div>
<div class="hl_txt"><a href="http://example.com/archief-test/article658.ece/Title_Title_Title_Title_Title Title_Title_Title_Title_Title_Title_Title_Title_Title">Title Title Title Title Title Title Title Title Title Title Title Title Title Title</a></div>

</h3>
</div>

<div class="headline">
<h3 title="Title Title Title Title Title Title Title Title Title Title Title Title Title Title">
<div class="tijd"><a href="http://example.com/archief-test/article658.ece/Title_Title_Title_Title_Title Title_Title_Title_Title_Title_Title_Title_Title_Title">10:40</a></div>
<div class="hl_txt"><a href="http://example.com/archief-test/article658.ece/Title_Title_Title_Title_Title Title_Title_Title_Title_Title_Title_Title_Title_Title">Title Title Title Title Title Title Title Title Title Title Title Title Title Title...</a></div>

</h3>
</div>

</div>

little part of the css which should put it all in place:


div.tijd{
float:left;
background-color:yellow;

}
div.hl_txt{
background-color:green;

margin-left: 30px;
display:block;
}
div.headline{
background-color:red;

}
div.headline>h3{
background-color:purple;
margin:0px;
}

[edited by: tedster at 8:03 pm (utc) on Feb. 24, 2009]
[edit reason] use example.com in code [/edit]

11:01 pm on Feb 24, 2009 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



I've not yet tried your code but just noticed this line...
div.headline>h3{

IE6 does not support the child selector so this rule will not do anything in IE6 and the margin on the h3 will not be 0 (whereas it will in FF). (?)

11:22 pm on Feb 24, 2009 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



search for "3px jog" [google.com] ... one of the many well known IE bugs.

BTW: validate your code.

12:11 pm on Feb 25, 2009 (gmt 0)

10+ Year Member



thanks a lot. it appears to be 3px jog bug
 

Featured Threads

Hot Threads This Week

Hot Threads This Month