Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    96
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Exclamation Vertical alignment between IE and Firefox - CSS problem

    Hi,

    I'm just setting up a header on a html page and the vertical alignment between IE and firefox is out. FF is putting the links about 20px below where they appear on IE.

    My HTML code is:

    <div id="header">
    <div id="logo"><a href="<?=SITE_URL?>/"><img src="<?=SITE_URL?>/museums/images/banner_homepage_pathe.gif" alt="British Pathe Logo" /></a></div>
    <div id="nav">
    <ul>
    <li><a href="<?=SITE_URL?>/museums/contact.php" id="contact_nav">Contact Us</a></li>
    <li><a href="<?=SITE_URL?>/museums/order.php" id="order_nav">Bankers Standing Order</a></li>
    <li><a href="<?=SITE_URL?>/museums/license.php" id="license_nav">The License Agreement</a></li>
    <li><a href="<?=SITE_URL?>/museums/signup.php" id="signup_nav">How to sign up for your license</a></li>
    <li><a href="<?=SITE_URL?>/museums/factors.php" id="factors_nav">Key Factors of this offer</a></li>
    <li><a href="<?=SITE_URL?>/museums/" id="home_nav">Home</a></li>
    </ul>
    </div>
    <br style="clear:left " />
    </div>


    And my CSS is:

    #header{
    width:100%;
    min-width:1000px;
    height:36px;
    background:#131313 url(../images/banner_bg.jpg) repeat-x 0 0;
    }
    #logo{
    margin: 0;
    float:left;
    display:inline;
    width:173px;
    height:35px;
    }
    /* Main navigation */
    #nav{
    float:left;
    font-weight:bold;
    font-size:12px;
    display:inline;
    margin-top:0;
    margin-right:0;
    margin-left:0;
    height:36px;
    width: 800px;
    }
    #nav ul{
    list-style-type:none;
    }
    #nav ul li{
    float:right;
    }
    #nav ul li a{
    display:block;
    padding:6px 4px 6px 4px;
    }


    Does anyone have any clues? I'm tearing my hair out over this as I've got a tight deadline!!

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Try:

    Code:
    #nav ul{ 
    list-style-type:none; margin:0;padding:0
    }
    Firefox is applying a different default margin to the ul element.
    Last edited by SB65; 10-28-2009 at 04:28 PM.

  • Users who have thanked SB65 for this post:

    icklechurch (10-28-2009)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello icklechurch,
    A perfect example of why *{margin:0;padding:0;} should go at the top of your CSS file.

    Read about what that does here - http://perishablepress.com/press/200...-reset-styles/
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    icklechurch (10-28-2009)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •