![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
Hah! Sudden brainwave pays off. I have now (I hope) got my journal to display exactly as I want in IE6, N6 and Mozilla. So now what I need is for everyone to have a look and see if it works on their browsers (you need to scroll down to check that there's 5% of white space on all sides of the box all the way down) as I think IE 5 is a bit different again and I haven't got that here.
So, the problem is that unless you set the width of the parent element, IE doesn't implement clear properly for text elements. So you set the width to be 100% (just explicitly declaring auto doesn't seem to work either). Which looks fine on IE6 but mucks up in Mozilla/Netscape because IE6 has actually made a mistake (IE doesn't understand the box model correctly) and included the margins in the width of the page. Moz/N6 correctly don't do this, meaning that the entry box now looks wider than the main box. So we add a tiny hack to correct this, taking advantage of cascading and the CSS selector which IE doesn't understand we add the line
to the bottom of the stylesheet which causes N6 and Moz to correctly read the width too. So there!
So, the problem is that unless you set the width of the parent element, IE doesn't implement clear properly for text elements. So you set the width to be 100% (just explicitly declaring auto doesn't seem to work either). Which looks fine on IE6 but mucks up in Mozilla/Netscape because IE6 has actually made a mistake (IE doesn't understand the box model correctly) and included the margins in the width of the page. Moz/N6 correctly don't do this, meaning that the entry box now looks wider than the main box. So we add a tiny hack to correct this, taking advantage of cascading and the CSS selector which IE doesn't understand we add the line
html>body .main .entry { width:auto; }to the bottom of the stylesheet which causes N6 and Moz to correctly read the width too. So there!
