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 9 of 9
  1. #1
    Regular Coder najkiie's Avatar
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    103
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Question Where is that Margin coming from? Really frustrating!! (menu issue) - please help..?

    Hi.

    Today, just a few hours ago, i started working on a new style for my website. I have set it up so that i have one main stylesheet file (for the most important things...) and then i have four other ones (i only load one of them at a time) that contains the colors etc... I also have a stylesheet switcher on the site so that the visitors can change style.

    Now to the problem:
    As i said above i started working on a new stylesheet file for my site. But i'm kind of stuck on the menu part...

    Here's the HTML code for the menu:
    Code:
    <div class="menubar">
       <li  class="current_page_item">
          <a href="http://PlanetTechSupport.com/b">Home</a>
       </li>
    
       <li class="page_item page-item-271">
          <a href="http://PlanetTechSupport.com/b/?page_id=271" title="Polls">Polls</a>
       </li>
       
       <li class="page_item page-item-2">
          <a href="http://PlanetTechSupport.com/b/?page_id=2" title="About &amp; Contact">About & Contact</a>
       </li>
    
    </div>
    As you can see i didn't wrap the <li> tags inside an <ul> or <ol> tag since i don't see the point with it. It will be listed as an Unordered List anyways. I don't think thats the problem.

    Here's the CSS.
    Code:
    .menubar {
    width: 960px;
    margin: 10px auto 0px auto !important;
    background: transparent url(http://planettechsupport.com/b/wp-content/themes/premium/images/menubg-4.gif) repeat-x !important;
    height: 35px !important;
    overflow: hidden;
    clear: both;
    padding: 0px !important;
    }
    
    .menubar li, .menubar li a, .page_item a,  .menubar li a:visited {
    list-style-type: none !important;
    height: 35px;
    
    line-height: 33px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    
    padding: 0px 5px 0px 5px !important;
    margin: 0px !important;
    
    background: transparent url(http://planettechsupport.com/b/wp-content/themes/premium/images/menubg-4.gif) repeat-x !important;
    }
    
    .menubar li a:hover, .page_item a:hover, current_page_item a {
    background: transparent url(http://planettechsupport.com/b/wp-content/themes/premium/images/menubg-hover-4.gif) repeat-x !important;
    color: #FFECE0;
    }
    As you can see there is no margin involved in the CSS at all (exept for the .menubar, but i need that to center the menu on the page). I used paddings, but that only gives extra space in the inside of the <li> tag right? But if you go to the site and hover over one of the menu items you will see that there is a few pixels of space between the li tags. I have no idea what it comes from. I've been trying to figure it out for about two hours now, its just frustrating!

    I've used a firefox addon called Firebug to figure out where the <li> tags loads the CSS from, and i can't find any margins in there either.

    Am i doing something wrong? I did try to add a <ul> tag before but that didn't solve anything (i also set the margin and padding for the ul tag to 0px).

    It looks the same in IE (IE 8).

    If you'd like to check it out yourself here is the link to my site:
    http://planettechsupport.com/b/?switchstyle=4
    That link will bring you to the site, and also set the style to the one i'm working on.

    And BTW, i'm using Wordpress. (thats the reason why i have those wicked classes for the <li> items in the menu)

    If you have any idea on what i'm doing wrong, then please, help me?
    -Nike
    Last edited by najkiie; 03-29-2009 at 06:32 PM.
    -Nike - PTS - Blubbz
    I would love to change the world, but they won't give me the source code.

  • #2
    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 najkiie,
    Why would you not wrap your unordered lis in ul tags? I don't understand.

    First you say
    As you can see i didn't wrap the <li> tags inside an <ul> or <ol> tag since i don't see the point with it. It will be listed as an Unordered List anyways. I don't think thats the problem anyways.
    And further down your post you explain exactyl why you do need it wrapped in ul tags.
    (exept for the .menubar, but i need that to center the menu on the page). I used paddings, but that only gives extra space in the inside of the <li> tag right?
    Have a look at a centered ul menu demo here - http://nopeople.com/CSS/menu-h_centered-ul/index.html View the source to see how it's done.
    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

  • #3
    Regular Coder najkiie's Avatar
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    103
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I didn't wrap it in an <ul> or <ol> tag because there is no point with it? Or is it?

    Further down i said i didn't use any margins at all exept for centering the whole menu div, i only used paddings. And the padding i used was for giving the <li> tags a little bit more extra space between the text in the <li> tag and the end of the <li> tag..

    like this:
    Without padding:
    <li>_Some text_</li>

    With padding:
    <li>____Some text____</li>

    I only want to get rid of the space between the <li> tags... like this:

    <li> item one </li>______-space-_____<li> item two </li>


    I tried adding wrapping it in an <ul> tag, but it still isn't working. Check it out, it looks the same.

    I added this CSS for the ul tag:
    Code:
    .menubar ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    width: auto;
    }

    EDIT: I couldn't add normal spaces above so i used "_"'s instead...
    Last edited by najkiie; 03-29-2009 at 06:48 PM.
    -Nike - PTS - Blubbz
    I would love to change the world, but they won't give me the source code.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Did you look at that demo I linked you to?
    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

  • #5
    Regular Coder najkiie's Avatar
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    103
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Yes i did. Two times now. I don't see what i'm doing wrong, what should i look at? I've looked at the code to.
    -Nike - PTS - Blubbz
    I would love to change the world, but they won't give me the source code.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Yours can work with minimal changes.
    CSS
    Code:
    }
    .edit-comment-admin-links {
    border-top: 1px solid #A6A6A6;
    padding-top: 5px;
    }
    
    .edit-comment-admin-links a {
    color: #619812 !important;
    font-weight: bold;
    }
    
    .edit-comment-admin-links a:hover {
    color: #0D619C !important;
    text-decoration: none;
    }
    
    .menubar {
    width: 960px;
    height: 35px;
    }
    ul#topnav {width: 400px;
    margin: 0 auto;
    }
    #topnav li {
    display: inline;
    text-align: center;
    }
    #topnav li a {
    width: 100px;
    float: left;
    display: block;
    line-height: 35px;
    color: #fff;
    text-decoration: none;
    }
    #topnav li a:hover {
    color: d8cbbd;
    }
    
    .ch-color {
    background: transparent none;
    margin: 0px;
    padding: 0px;
    border: none;
    outline: 0px;
    
    padding-top: 6px;
    
    float: right;
    width: 130px;
    height: auto;
    }
    markup
    Code:
    <!--****** START CUSTOM MENU ******-->
    <div class="menubar">
    <ul id="topnav">
    			<li class="current_page_item">
                <a href="http://PlanetTechSupport.com/b">Home</a>
                </li>
    
    			<li class="page_item page-item-271"><a href="http://PlanetTechSupport.com/b/?page_id=271" title="Polls">Polls</a></li>
    <li class="page_item page-item-2"><a href="http://PlanetTechSupport.com/b/?page_id=2" title="About &amp; Contact">About &amp; Contact</a></li>
    
    </ul>
    </div>
    <!--****** END CUSTOM MENU ******-->
    Do you see the need now for the ul tags? Properly formed code performs the way it's supposed to. If you start leaving things off then who knows how it's going to get rendered in different browsers?
    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

  • #7
    Regular Coder najkiie's Avatar
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    103
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks dude.

    I understand why i should wrap it up in an <ul> tag now, i had no idea what it was for before...

    It's working great now.
    -Nike - PTS - Blubbz
    I would love to change the world, but they won't give me the source code.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    A few other things to look at. Lots of these could be fixed.
    http://validator.w3.org/check?verbos...ort.com%2Fb%2F
    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

  • #9
    Regular Coder najkiie's Avatar
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    103
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks =D

    I'll take a look at that.
    -Nike - PTS - Blubbz
    I would love to change the world, but they won't give me the source code.


  •  

    Tags for this Thread

    Posting Permissions

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