Site looks fine in Firefox and Safari. Disasterous in any IE

[magichew]

Hi all

I’ve just finished, or thought I’d finished my first WordPress theme. I’m an amature building the site for the organisation I work for. The site looks as it should in Firefox and Safari but I loaded it in IE and it looks terrible.

I know that there are some hacks and ways to make things look right but I have no idea how I would make it happen.

Could someone take a look at it and see if they can point me in the right direction please?

The site is http://mfcstudysupportcentre.co.uk

[Rob MacKay]

damn I hate IE lol

Errm, without looking though it all, make sure you have done things like not positioning divs with margin or padding, closing any <div>’s that might have been left open, been really specific with height and width – make sure you havent left any "unit of measure" of the end of any of the hight specs (px, em, %).

Sorry I dont have much time today really… :(

[magichew]

Thanks for your reply. I’m sure that every unit of measurement is right. I have positioned dics with padding though. How else can I position them? Could I just create a separate style sheet for IE without a lot of the "eye candy" on?

[Rob MacKay]

"magichew" wrote:

Thanks for your reply. I’m sure that every unit of measurement is right. I have positioned dics with padding though. How else can I position them? Could I just create a separate style sheet for IE without a lot of the "eye candy" on?

in positioning of block elements, like divs, you really need to use the "position" value.

here is an example

#mydiv {
width:300px;
height:300px;
position:relative;
top:10px;
left:10px;
}

the wrong way would be like this:

#mydiv {
width:300px;
height:300px;
padding-top:10px ;
padding-left:10px;
}

The reason its wrong is firstly, padding is more about content formatting – say if you gave a padding:10px to a div that would push everything in from the edge of the div by 10px, margin is much the same except it pushes the outside away from other elements. IE likes to make up its own rules about padding… as you would expect lol – its all about the box model – especially in IE6, as you can see here

Positioning is a long topic to try and explain in a quick post lol, I might post some more later – does that help at all?

[magichew]

Yes I think it helps a lot. So if I swap my padding that I’ve used to position my divs for relative positioning with the same values as my padding it should look better?

[Rob MacKay]

"magichew" wrote:

Yes I think it helps a lot. So if I swap my padding that I’ve used to position my divs for relative positioning with the same values as my padding it should look better?

yes… but beware – you might have to adjust other things… just go through the code and see what happens – I normally add to the top of my css:

div {position: relative}

Then I dont have to add it to everyone, and as relative positioning is quite passive, unlike static or absolute, you dont have to worry about it :)

[Author]

Posts