Grow your CSS skills. Land your dream job.

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

  • # January 13, 2009 at 5:08 am

    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
    # January 13, 2009 at 7:30 am

    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… :(

    # January 13, 2009 at 8:34 am

    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?

    # January 13, 2009 at 8:50 am
    "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?

    yes you can: just use the same id’s and classes but put different code inside them to make IE look right & maybe slightly different

    but you need to specify what stylesheet is to be used by which browser in your html header

    Rob
    # January 13, 2009 at 8:57 am
    "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?

    # January 13, 2009 at 2:09 pm

    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
    # January 13, 2009 at 5:05 pm
    "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 :)

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".