Click to See Complete Forum and Search --> : IE Layout problems - Some help please


PDG
12-03-2009, 01:26 PM
Ive developed my first CMS site - still a novice so I know the CSS and html is a bit messy!

But basically I had it all working accross all main browsers and then I decided to do a complete re-design off the site. Thing is now I cant get it working on IE. Ive been trying to sort it out today but havent got very far and could do with a bit of a hand to get me going again.

I know the code is messy but just need to get the layout looking correct as I have to move onto another project and will return to this once I get time but just need to get the layout sorted so it looks OK

Its working fine in firefox and safari but there are several problems in IE(theres a change), some of which I havent got round to yet, the one I am stuck on is the larger margin to the right of the main div, this only appears on the homepage and im not sure which div is causing it (guessing its the bottom lower div as this is the only page it appears on and the only page with the problem) but I cant seem to correct it no matter what I change. Ive tried setting all margins back to 0 and going from there but still cant get it sorted..

heres the link: http://bit.ly/1j4kJv

If you're into fashion feel free to leave some store ratings :)

Thanks

slaughters
12-03-2009, 02:23 PM
"middle1" and "middle2" are larger than their container "middleColumn"

middleColumn - width 250px;

middle1 - width 250px + padding-left 10px + padding-right 10px + margin-right 5px = 275px wide
middle2 - width 250px + padding-left 10px + padding-right 10px + margin-right 5px = 275px wide

PDG
12-03-2009, 02:34 PM
Thanks for the fast reply stan, I am currently testing in IE6 and for IE6 I call a seperate style sheet, Ive tried setting the inner divs to 250 and outer to 275 and there was no change, also if this is causing the problem how come it only occurs on the homepage and none of the other pages?

PDG
12-03-2009, 04:00 PM
Ive managed to control the gap using padding on the left container div, but the probelm I am having is the homepage padding shows differently to the other pages, so I can either set the padding to be correct on the homepage and the other pages will be messed up up or correct on all the other pages and not the homepage.

I could probably get round this if I made a different div ID for the homepage, but surely someone knows what causing the problem?

EDIT: Ive Just noticed that the header "latest store reviews" in the middle column on the homepage links to one of the discount that is at the bottom of the left hand div! This is probably causing the text to jump (in IE6) and may alsobe causing the cap problem, anyone explain why the dicoutn link has gone into the middle column as a line aswell as the left column?

EDIT2: Solved the issue with the header div linking - I hadnt closed the image tags for the discount image :oops: Anyone know a solution to the different padding on different pages or is my best bet to create a seperate div ID for the left colum on the homepage?

Other problems if anyone can help:

- Footer divs 2 and 4 have weird spacing for some reason

PDG
12-03-2009, 07:06 PM
All sorted thanks.