...

View Full Version : Google Chrome vs. FF and IE



flyboysd
05-12-2010, 11: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:
http://dl.dropbox.com/u/565673/screenshot.jpg

The CSS for the image reads:

.upperheaderimg {
position:relative;
top:-16px;
left:300px;
border:0;
}


and the HTML is a unique div

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



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

Thanks!

code beginner
05-13-2010, 01: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.

VIPStephan
05-13-2010, 02: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?

flyboysd
05-13-2010, 02: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)

http://flywheelstudios.com/eco-stream/services/

Any other things to look at are much appreciated!

abduraooft
05-18-2010, 10:48 AM
Try

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

#flowers{
clear: both; float: right; margin-top: -16px;
}

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

flyboysd
05-19-2010, 04: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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum