By mshepherd on

I'm having some odd rendering problems on Webkit browsers, particularly Chrome. Please take a look at http://gup.illuminateweb.org.uk/

The header to this site (still in the early stages of theme development using Fusion as parent theme) render correctly in Firefox / IE7&8 / Opera, but always renders incorrectly in Safari and (here's the odd bit) sometimes renders incorrectly in Chrome.

Here's the way it should look. Screenshot from Chrome:
http://screencast.com/t/uAdcPsJi4Fi9

After nothing more than a page refresh, here's how it looks, again in Chrome:
http://screencast.com/t/WVzYcIUn2BRb

Safari seems always to give the 2nd (incorrect) version. And Chrome, it seems randomly, renders boths ways.

I've read a couple of things around this subject, so I don't think I'm alone in finding this puzzling. Here's a discussion on the subject:
http://robertnyman.com/2010/03/09/is-webkit-too-fast-for-its-own-good/

So my question is has anyone had a similar problem and been able to reorganise the html in some way to make it behave properly. And, if I fix it so that it renders properly in Safari, will it always then load properly in Chrome?

Yours, puzzled,
Matthew

Thanks.

⋅ Categories: Drupal 6.x

Comments

mshepherd’s picture

mshepherd commented

Update:
This occurrs with Chrome 6.0.472.63 on Windows and Chromium 6.0.472.62 in Linux

gaurav_m’s picture

gaurav_m commented

That is interesting!! on chrome [Windows XP]
I tried that loading the url - http://gup.illuminateweb.org.uk/
At first shot the header images moved below the G:up logo

after reloading it again and again The page layout turned out to be fine


What i was able to get that is

#block-views-banner_images-block_1 .inner {} width was coming out to be more as ideally it should be
width: 766px;


Try with this code and lemme know if that works for you or not.

#block-views-banner_images-block_1, #block-views-banner_images-block_1 .inner {
	width: 766px;
	display: block;
}
mshepherd’s picture

mshepherd commented

Thanks, I'll try that in a moment.

Using the Inspect Element feature of Chrome, I was able to see that the width of outer block element #block-views-banner_images-block_1 was sometimes being miscalculated as 776px wide when (as you point out) it should be 766px.

I'd already tried setting the width of the #block-views-banner_images-block_1 element to 766px, which made no difference, but I'll try what you suggest and report back.

Many thanks for your reply.

gaurav_m’s picture

gaurav_m commented

Your Welcome!

mshepherd’s picture

mshepherd commented

Small update:

Another difference between the 2 renderings. The distance between the images and the menu bar is correct (at least it matches Firefox's interpretation) when the images drop to line 2. When the images are displayed in the correct position, the distance between the images and menu is too much.

Border as it should be, but images in the wrong place:
http://screencast.com/t/n9NzxysPN4

Images as they should be, but border wrong.
http://screencast.com/t/CVrQ2amQqKR

mshepherd’s picture

mshepherd commented

If I manually set the width to 766px for the 2 elements you suggested, the banner (logo and then 4 images) displays correctly in Chrome and Safari, so that's great news, thanks for that :) I've never encountered a problem like that before.

However, the border between the images and the menu bar is still wrong on Chrome and Safari, but I guess we're back to the usual trawl through all the elements that could be causing this!

...

I just spotted a likely looking candidate:
http://screencast.com/t/O2eHk98i

I'll try hiding that by telling it to hide the overflow...

Thanks again for your help.

mshepherd’s picture

mshepherd commented

It's now working as expected with:

#block-views-banner_images-block_1,
block-views-banner_images-block_1 .inner {
  width: 766px;
  height: 184px;
  overflow: hidden;
}

Thanks again.

gaurav_m’s picture

gaurav_m commented

Glad that worked for you :D
I had previously checked the screenshot scenarios after that I suggested for the #css solution.

Many thanks for the Thanks!