View Full Version : Google Chrome vs. FF and IE

May 12th, 2010, 10:56 PM
Well I can't believe this but somehow my page works well in both Firefox and IE but it is Google Chrome that is causing me issues.

I am positioning an image and for some reason Chrome is putting the image around 180 pixels to the left.

You can see a screenshot here - note the flowers:

The CSS for the image reads:

.upperheaderimg {

and the HTML is a unique div

<img class='upperheaderimg' src='uploads/site-images/sunflower-header.png' />

Am I missing something obvious here? (I suspect I am.)


code beginner
May 13th, 2010, 12:44 AM
a good thing to do is perform a global whitespace reset in your css file. that will make the upper left corner of your viewport be 0-0, the way it should be.

not sure of chrome in particular. but it's always good to force the vendor to call the upper left hand corner 0-0 pixels, rather than having it start at 50 pixels to the right or something ridiculous like that.

May 13th, 2010, 01:24 AM
A good thing to start with is by checking your code for errors (http://validator.w3.org/).
Then a relative position is always relative to its original position in the natural flow of elements. How dows it look without the positioning applied?

May 13th, 2010, 01:59 AM
Good comments. Thanks.

Yup, no errors and the issue is still showing.

and yes, there is a reset in the css for body of padding and margin.. (Is that what you menat?)

Check it out here. (still in progress)


Any other things to look at are much appreciated!

May 18th, 2010, 09:48 AM

<img alt="right header image" src="http://flywheelstudios.com/eco-stream/wp-content/uploads/site-images/sunflower-header.png" id="flowers">

clear: both; float: right; margin-top: -16px;

PS: Are you suffering from divitis (http://csscreator.com/divitis)? :)

May 19th, 2010, 03:00 PM
That's great for the cross browser issue. Thanks! (although there looks to be a few pixel difference in vertical placement. I'll check padding and margin.)

However, now the height of this image is pushing down the whole next div (#sub_page_header) which pushes down the content. Would it help to implement this header image as a background image?