Wed, 2011-09-14 00:56
It looks fine in...
FF6 on OS X (10.6.7)
FF3.6 and 6 on Windows
IE7, 8 and 9 on Windows XP
...according to Browsershots
However it bombs in...
Chrome 10 on Windows (and Chrome 13 on Snow Leopard)
IE6 on Win XP
Pics attached
Can someone help with the fixes please? The boxes should be 4 wide. Chrome is shrinking the #contentwide and ul.textbox. IE6 is not clearing the ul. Is the IE6 a clear:left? (I'm not handling the coding for this so can't just try it out).
(Chrome left, MSIE right) Again - the way it should look
Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again 
Wed, 2011-09-14 05:07
#1
Remove the left margin from
Remove the left margin from #contentwide. For IE6 (why are you supporting the dinosaur?), add {zoom: 1;}.
cheers,
gary
Wed, 2011-09-14 09:19
#2
Hi Gary Thanks for that So
Hi Gary
Thanks for that So we're giving IE6 HasLayout and removing the left margin works for Chrome without destroying anything, but what is Chrome objecting to? There should be room.
Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again
Wed, 2011-09-14 13:59
#3
A bug?
but what is Chrome objecting to? There should be room.
I don't know. It appears #contentwide is sucked under the float, or the width is reduced by the margin's value. That is not a bankable hypothesis.
cheers,
gary
Wed, 2011-09-14 14:38
#4
hmmm...the programmer's been
hmmm...the programmer's been doing some searching and has just come back to me with this (it does indeed do the same thing in Safari). I can see it's feeding a second div to Safari/chrome I just don't understand what it's doing and don't see the point in a hack if your two suggestions fix it - which it appears to
A quick search has lead me to the possibility of a CSS hack for Chrome/Safari (apparently Safari will have the same problem). It involves doing this to the CSS:
/* Main content */
#contentwide {
border-left: 1px solid #EAEAEA;
line-height: 1.5em;
margin: 0 0 5px 206px;
padding: 0;
background: #FFF;
overflow: hidden;
}
@media screen and (-webkit-min-device-pixel-ratio: 0 ) { <-- spread so we didn't get an angel
#contentwide {
line-height: 1.5em;
margin: 0 0 5px 0;
padding: 0;
background: #FFF;
overflow: hidden;
zoom: 1;
}
}
The trick is apparently that Chrome/Safari use the webkit device, so using the fact that later CSS rules override earlier ones, Chrome & Safari then pick up the second which has the modified margin and no border line... All the others (which don't use webkit) will ignore that second style, and thus get the first.
Guidance please o wise one
Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again
Wed, 2011-09-14 19:33
#5
Truly ugly hack
I'd go with my fix. There's no compelling reason for bloviated css that only serves to confuse.
If additional spacing is needed, add right margin to the float element.
cheers,
gary
Wed, 2011-09-14 23:32
#6
.
Bloviated? 
Only you would know that one...I had to go look it up - and I concur 
why are you supporting the dinosaur?
I forgot to answer this.
Because many of the govt departments are still tied in to IE6 mainly because much of their software has not yet been rewritten for later versions. Since the website organisation is looking for some govt funding, it makes sense for them to see what we've got as well as we can present it. Though the hideous banner is only there till we get the new logo.
Thanks Gary
Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again