CSS for Navbar, works in FF but not in IE7

Discussion in 'CSS' started by jp607, Sep 7, 2008.

0
  1. #1
    Hi

    My navbar breaks in Ie7 but works perfectly in firefox.

    Here are some screenshots.

    In Firefox

    [​IMG]

    This is how i want it to be. It's aligned left and the background image of the button works.

    In IE7

    [​IMG]

    As you can see my logo comes down, the navbar is out of place and also the button background image doesn't show up

    The only thing that works on both is the hover image.When you hover over any navbar button the state changes on both Firefox and IE7.

    I am a css noob so please can you help me :)

    This is my website address if you need it:
    http://aaronken.987mb.com/

    Thanks in advance.
     
    jp607, Sep 7, 2008 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    You will never get IE to attempt to perform like other modern browsers without a proper doctype. Use this one on the first line:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
     
    drhowarddrfine, Sep 7, 2008 IP
  3. jp607

    jp607 Active Member

    Messages:
    300
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    78
    #3
    Hey

    tried that and it broke the page even more :S

    or do i need that title and then change other stuff?
     
    jp607, Sep 7, 2008 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    It broke the page even more because when you first wrote the CSS (or whoever did), you were writing to IE in Retard Mode (acting like IE5.5 did!). Doc's right, the doctype is needed, cause that's the only way you'll get IE and FF/Opera/Safari/Konqueror/GoogleGarbage to work with the same CSS correctly.

    Unfortunately for you, it means your CSS needs to be written correctly (thus likely re-written). When you have the proper doctype, Ie7 will do almost everything like FF etc, while IE6 sometimes needs a little bit of help.

    Sorry to break bad news, that's just the way it is. This is the reason, btw, why you see so many sites, even big professional companies, with IE stylesheets along with the normal ones-- they don't have a Doctype or they have a spaceline or something before the doctype (also breaks IE) and couldn't for the life of them get IE to act like every other browser, so they send one CSS sheet to IE and another to normal browsers. This isn't necessary, but I'm assuming the builders of these sites simply aren't aware of it.

    I got bonus points ++ by my husband's new boss when I pointed out he was doing the same thing, with a proper Doctype but he had that XHTML xml prologue BS in front of it... you've probably seen it:
    <?xml blah blah version="1.0" charset="blah" ?>
    <!DOCTYPE blah blah...

    Even though supposedly you're supposed to have that <?xml line in xml documents, don't do it, cause it makes IE puke on your XHTML pages (and it's not needed anyway).

    Oh the cause of so many headaches...
     
    Stomme poes, Sep 7, 2008 IP