SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    positioning in Internet Explorer

    I currently have a problem with IE6 and IE7 on a site I'm building, which is to do with where the navigation items appear within the header/banner. Using Firefox on Windows Vista and Mac, and Safari on a Mac, the navigation appears exactly where I want it, but using Internet Explorer (either version) the navigation appears much higher. It's difficult to find a compromise position for the navigation items which looks OK in IE and also in the other browsers. Although I'm a bit of a newcomer to CSS, I've used relative positioning for the banner so I can put the navigation exactly where I want to inside it with absolute positioning. Could this be a quirk with CSS positioning in Internet Explorer, or maybe something much simpler? If anyone could help I'd really appreciate it - I'm attaching the CSS I've used...



    #banner {
    position: relative;
    }

    #navigation ul {
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    color: #990000;
    position: absolute;
    top: 115px;
    left: 312px;
    font-size: 115%;
    }

    #navigation li {
    display: inline;
    padding-right: 10px;
    padding-left: 10px;
    font-family: Arial, Helvetica, sans-serif;
    }

  2. #2
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know there are discussions going elsewhere here about the suitability of using it but have you tried including either *{margin: 0; padding: 0;} or body{margin: 0; padding: 0;} and then setting your margins/padding individually for each element?

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    uk
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by shamwari View Post
    I currently have a problem with IE6 and IE7 on a site I'm building, which is to do with where the navigation items appear within the header/banner. Using Firefox on Windows Vista and Mac, and Safari on a Mac, the navigation appears exactly where I want it, but using Internet Explorer (either version) the navigation appears much higher. It's difficult to find a compromise position for the navigation items which looks OK in IE and also in the other browsers. Although I'm a bit of a newcomer to CSS, I've used relative positioning for the banner so I can put the navigation exactly where I want to inside it with absolute positioning. Could this be a quirk with CSS positioning in Internet Explorer, or maybe something much simpler? If anyone could help I'd really appreciate it - I'm attaching the CSS I've used...

    I'd ditch the relative/absolute stuff. See if this gets you any closer to waht it is you are trying to achieve:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    }
    #banner {
    background-color:#FF9900;
    padding-top: 115px;
    }
    #navigation {
    list-style-type: none;
    color: #990000;
    margin: 0 0 0 312px;
    font-size: 115%;
    padding: 0;
    }
    #navigation li {
    display: inline;
    margin: 0;
    padding: 0 10px;
    }
    #navigation a {
    text-decoration: none;
    padding: 3px 10px;
    }
    </style>
    </head>

    <body>
    <div id="banner">
    <ul id="navigation">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
    </ul>
    </div>
    </body>
    </html>


Bookmarks

Posting Permissions

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