SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    ireland
    Posts
    482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    margin-left:0px; problem i think: Please help!

    I am have difficulty get my nav bar lined up exactly in IE and FF in the forum section of my website:

    www.askaboutvalidation.com/forum

    Here is my nav code

    #navlist li {
    display:inline;
    padding:0 .9em;
    border-right:1px solid #FFFF00;

    }
    #navlist li.last {
    border:none;

    }

    #navlist {
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-size:.9em;
    font-weight:normal;
    text-align:left;
    margin-left:0px;
    padding-top:6px;
    padding-bottom:8px;
    }

    #navlist a {
    color:#FFF;
    text-decoration:none;

    }
    #navlist a:hover {
    color:#FFF;
    text-decoration:underline;

    }


    I think the problem lies in the #navlist {} section where I have margin-left:0px;

    For my link to align far left in IE i need to include this as if I don't it goes more to the right but in FF
    it doesn't move and is not in the same position as that in IE.

    Is there any trick to make it align equally in both.

    Here is the entire code which is incorporated into the header section of vbulletin

    <meta http-equiv="Content-Type" content="text/html; charset=$stylevar[charset]" />
    <meta name="generator" content="vBulletin $vboptions[templateversion]" />
    <if condition="$show['threadinfo']">
    <meta name="keywords" content="$threadinfo[title], $vboptions[keywords]" />
    <meta name="description" content="<if condition="$pagenumber>1"><phrase 1="$pagenumber">$vbphrase[page_x]</phrase>-</if>$threadinfo[title] $foruminfo[title_clean]"

    />
    <else />
    <if condition="$show['foruminfo']">
    <meta name="keywords" content="$foruminfo[title_clean], $vboptions[keywords]" />
    <meta name="description" content="<if condition="$pagenumber>1"><phrase 1="$pagenumber">$vbphrase[page_x]</phrase>-</if>$foruminfo[description_clean]" />
    <else />
    <meta name="keywords" content="$vboptions[keywords]" />
    <meta name="description" content="$vboptions[description]" />
    </if>
    </if>

    <!-- CSS Stylesheet -->
    $style[css]
    <if condition="is_browser('opera') AND !is_browser('opera', '8.0.1')">
    <style type="text/css">
    ul, ol { padding-left:20px; }
    </style>
    </if>
    <!-- / CSS Stylesheet -->

    <script type="text/javascript">
    <!--
    var SESSIONURL = "$session[sessionurl_js]";
    var IMGDIR_MISC = "$stylevar[imgdir_misc]";
    var vb_disable_ajax = parseInt("$vboptions[disable_ajax]", 10);
    // -->
    </script>

    <script type="text/javascript" src="clientscript/vbulletin_global.js?v=$vboptions[simpleversion]"></script>
    <if condition="$show['popups']"><script type="text/javascript" src="clientscript/vbulletin_menu.js?v=$vboptions[simpleversion]"></script></if>
    <if condition="$vboptions['externalrss']">
    <link rel="alternate" type="application/rss+xml" title="$vboptions[bbtitle] RSS Feed" href="external.php?type=RSS2" />
    <if condition="$show['foruminfo'] OR $show['threadinfo']">
    <link rel="alternate" type="application/rss+xml" title="$vboptions[bbtitle] - $foruminfo[title_clean] - RSS Feed"

    href="external.php?type=RSS2&amp;forumids=$foruminfo[forumid]"

    />
    </if>
    </if>



    <style type="text/css">

    /*Links for forum links under header */

    A:link.color11 { color:#0033FF;font: 12px 'arial', sans-serif; font-weight:normal;text-decoration:underline;}
    A:visited.color11 {color:#0033FF;font: 12px 'arial', sans-serif; font-weight:normal;text-decoration:underline;}
    A:hover.color11 {color:#FF6600;font: 12px 'arial', sans-serif; font-weight:normal;text-decoration:underline;}
    A:active.color11 {color:#0033FF;font: 12px 'arial', sans-serif; font-weight:normal;text-decoration:underline;}


    #container
    {
    width:100&#37;;
    background:#FFF;/*this colour will be left column colour */
    margin:auto;/* centre for compliant browsers*/
    }

    #header
    {
    height:100px;
    margin-left:23px;
    margin-right:23px;
    margin-bottom:0px;
    background:#fff;
    }


    #header2
    {

    margin-left:23px;
    margin-right:23px;
    margin-top:-15px;

    margin-bottom:-15px;
    background:#006600;
    }



    html {
    SCROLLBAR-FACE-COLOR: #fff;
    SCROLLBAR-HIGHLIGHT-COLOR: #FFF;
    SCROLLBAR-SHADOW-COLOR: black;
    SCROLLBAR-ARROW-COLOR: black;
    SCROLLBAR-TRACK-COLOR: #FFF;
    SCROLLBAR-DARKSHADOW-COLOR: #666;
    }


    #navlist li {
    display:inline;
    padding:0 .9em;
    border-right:1px solid #FFFF00;

    }
    #navlist li.last {
    border:none;

    }
    #navlist {
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-size:.9em;
    font-weight:normal;
    text-align:left;
    margin-left:0px;
    padding-top:6px;
    padding-bottom:8px;

    }
    #navlist a {
    color:#FFF;
    text-decoration:none;

    }
    #navlist a:hover {
    color:#FFF;
    text-decoration:underline;

    }



    </style>




    <!-- Start of container also know as wrapper -->
    <div id="container">

    <div id="header">
    <div style="float:left;margin-top:18px;"><a href="http://www.askaboutvalidation.com"><img border style="none" alt="www.askaboutvalidation.com" src=

    "images2/askaboutvalidationlogo.png"></a>
    </div>
    <div style="float:right;margin-top:80px;margin-right:5px;">
    <a class="color11" title="" href="http://www.askaboutvalidation.com/forum/">Forum</a>
    &nbsp;&nbsp
    <a class="color11" title="" href="http://www.askaboutvalidation.com/forum/register.php">Register</a>
    &nbsp;&nbsp
    <a class="color11" title="" href="http://www.askaboutvalidation.com/site_map.php">Site Map</a>
    &nbsp;&nbsp
    <a class="color11" title="" href="http://www.askaboutvalidation.com/contact.php">Contact</a>

    </div>

    </div>


    <div id="header2">


    <ul id="navlist">
    <li><a href="http://www.askaboutvalidation.com">Home</a></li>
    <li><a href="http://www.askaboutvalidation.com/forum">Forum</a></li>
    <li><a href="http://www.askaboutvalidation.com/featured_articles.php">Articles</a></li>
    <li><a href="http://www.askaboutvalidation.com/white_papers.php">White Papers</a></li>
    <li><a href="http://www.askaboutvalidation.com/forum/register.php">Register</a></li>
    <li class="last"><a href="http://www.askaboutvalidation.com/contact.php">Contact Us</a></li>
    </ul>


    </div>
    </div>



    Any help would be greatly appreciated.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Haven't look at you page or code yet bus sounds as though you haven't reset the default padding on the ul to zero. Ie uses a default left margin for the bullet space and firefox use a default left padding. You need to address both margin and padding on all the elements you use.

    Code:
    ul{margin:0;padding:0}
    If that's not the problem then i'll take another look

    PS Please use code tags when pasting code

  3. #3
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    ireland
    Posts
    482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Chris,

    That was the problem you were spot on.

    I can't thank you enough.

    Thanks again

    Best Regards

    Graham

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Who's Chris

  5. #5
    SitePoint Evangelist
    Join Date
    Jan 2005
    Location
    ireland
    Posts
    482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry Paul, was working with a fella called Chris today!

    thanks again


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
  •