[WSG] IE6 behaving badly with floated spans

2006-04-10 Thread Björn Gustafsson

Hi,

I'm building a smaller site and I've ran into a problem with IE6 that I 
cannot solve.
I got a table-based design from a designer, which I've subsequently 
turned into xhtml+css, and it's working almost perfectly (with some 
minor fixes) between most major browsers, including FF 1.5, FF 2.0, IE7, 
Opera and whathaveyou.
What doesn't work perfectly though is IE6, and I can't say that I'm 
surprised.


What messes up is this little piece of code:

---8---
div class=entryHeader
span class=entryTitleLorem Ipsum/span
span class=entryTime11:22/span
span class=entryDate2006-07-08/span
/div
---8

both entryTime and entryDate are in the CSS floated right, effectively 
positioning Time to the right of Date, and both of them to the right 
within the (width-specified) Header. What IE6 does, however, is that it 
positions Time and Date on the next row, making my one line header a two 
line one. By using position:relative and top:-16px they both appear on 
the same line as the Title, but the Header is still two rows high, 
presenting a really big ugly black bar that shouldn't be there.


I've gone google-hunting for IE bugs, but I haven't found anything that 
applies to this particular behaviour, but I'm hoping that there's 
something I've overlooked or haven't found and that there's a simple fix 
to this :)


Regards,
   Björn



**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**



Re: [WSG] IE6 behaving badly with floated spans

2006-04-10 Thread Joseph Bernhardt
It's kind of hard to tell without seeing the actual site, but I would 
recommend an inline list instead of two right floats.  That way you 
wouldn't have to have separate spans for each set of content.


Jough

Björn Gustafsson wrote:

Hi,

I'm building a smaller site and I've ran into a problem with IE6 that 
I cannot solve.
I got a table-based design from a designer, which I've subsequently 
turned into xhtml+css, and it's working almost perfectly (with some 
minor fixes) between most major browsers, including FF 1.5, FF 2.0, 
IE7, Opera and whathaveyou.
What doesn't work perfectly though is IE6, and I can't say that I'm 
surprised.


What messes up is this little piece of code:

---8---
div class=entryHeader
span class=entryTitleLorem Ipsum/span
span class=entryTime11:22/span
span class=entryDate2006-07-08/span
/div
---8

both entryTime and entryDate are in the CSS floated right, effectively 
positioning Time to the right of Date, and both of them to the right 
within the (width-specified) Header. What IE6 does, however, is that 
it positions Time and Date on the next row, making my one line header 
a two line one. By using position:relative and top:-16px they both 
appear on the same line as the Title, but the Header is still two rows 
high, presenting a really big ugly black bar that shouldn't be there.


I've gone google-hunting for IE bugs, but I haven't found anything 
that applies to this particular behaviour, but I'm hoping that there's 
something I've overlooked or haven't found and that there's a simple 
fix to this :)


Regards,
   Björn



**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**






**
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**