CSS Relative <DIV> Size Problem

andycain · November 29th, 2007, 04:53 AM

Hello,

Having a bit of an issue with my website I've recently just completed designing.

The problem I'm having is to with my layout DIVs. I have sized them all relativly and poisitoned them absoloutly.

The sizes are all correct and I am happy with the proportions, however when I load the page initially in IE, the DIVs scale incorreclty (always too large), until I adjust the browser size window and everything returns to normal.

I remember reaidng something about this when I was developing my site, but recentyl have been unable to find the reference to it.

I'm thinking it may be an IE problem because we all know how great IE is.

This problem has been occurring in IE 6. I am going to test it later in 7 but one of the aims of my site is for it to be compatbile in all browsers.

Any help would be appreciated guys.

Website URL: www.cainphotography.co.uk

Style Sheet: www.cainphotography.co.uk/style.css

Email: a_cain@tiscali.co.uk

For clairty I have attached a screenshot of the problem:

Screenshot.jpg

Notice the size of the icons on the menu bar and the "Cain Photography" logo at the top. It should scale to fit between the top of the browser window and the black line at the top. Additionally it should not be pixalated.

Cheers chaps.

Andy

dab42pat · November 29th, 2007, 06:15 AM

First thing I would do is remove your position absolutes and position your divs in px. just had a play around in firebug and that solved most of the problems you are having.

MikeHopley · November 29th, 2007, 06:54 AM

Also note that you have a parse error in your CSS:

Quote:

background color:#CCCCCC;

Search for that text string, and replace it with:

Quote:

background-color:#CCCCCC;

andycain · November 29th, 2007, 07:43 AM

Thanks for the feedback guys.

That parse error....the replacement text string is the same.

If I specify my DIV positioning with pixels will it still render correctly with different resoloutions?

welshstew · November 29th, 2007, 07:46 AM

Quote:

Originally Posted by andycain

That parse error....the replacement text string is the same.

If you look closely then you will see that one is hypenated and the other isn't

Quote:

Originally Posted by andycain

If I specify my DIV positioning with pixels will it still render correctly with different resoloutions?

It should be fine, but if you run into any issues just coome back to us and we can help.

dab42pat · November 29th, 2007, 07:49 AM

As welshstew said it should be fine.
When the changes are complete post your link again and we will check in different browsers for you.

andycain · November 29th, 2007, 11:32 AM

Thanks guys. Will make modifications asap and repost on this thread.

Really appreciate your help.