6 replies [Last post]
Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 8 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Site in question

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
chrome10-xp.pngmsie6-xp.png

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 Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 hours 41 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9742
Points: 3821

Remove the left margin from

Remove the left margin from #contentwide. For IE6 (why are you supporting the dinosaur?), add {zoom: 1;}.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 8 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Hi Gary Thanks for that So

Hi Gary

Thanks for that Smile 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 Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 hours 41 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9742
Points: 3821

A bug?

Quote:

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 8 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

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 Smile

J wrote:

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 Smile

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 Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 hours 41 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9742
Points: 3821

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 2 years 8 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

.

Bloviated? Big smile Only you would know that one...I had to go look it up - and I concur Laughing out loud

Quote:

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 Smile

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 Smile