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 14 of 14
  1. #1
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post

    CSS Tabbed Menu quirk

    Hi.

    Just created CSS-based tabbed menu. IE displays with no fine black line between tabs and 2px bottom border, but FF and Seamonkey do (display a thin black line between tabs and 2px bottom border).

    Could some kind soul pls tell me how to ELIMINATE this this black line that is appearing in FF and Seamoney?

    Here be the page:

    http://radified.com/index.rad

    The menu is centered at the very top (can't miss it).

    Here be the CSS:

    /* CSS-based Tabbed Menu */

    #navigation ul, #navigation ul li {
    list-style: none;
    margin: 1em 0 0 0;
    padding: 0;
    }

    #navigation ul {
    text-align: center;
    border-bottom: 2px #699 solid;
    }

    #navigation ul li {
    display: inline;
    margin-right: .75em;
    }

    #navigation ul li.last {
    margin-right: 0;
    }

    #navigation li a {
    padding: 1px 1em;
    }

    #navigation ul li a {
    background: #699 100% 0;
    color: black;
    padding: 0;
    text-decoration: none;
    border-bottom: 1px #699 solid
    }

    #navigation ul li a span {
    background: #699;
    padding: 1px 1em;
    font-weight: bold;
    }

    #navigation ul li a:hover span {
    color: #000;
    text-decoration: none;
    background-color:#6CC;
    font-weight: bold;
    }
    I tried. Got most of the code here:>

    http://24ways.org/2005/centered-tabs-with-css
    Last edited by PonchoX; 04-12-2009 at 04:17 AM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello PonchX,
    What happens in other browsers when you give the ul and li a height?
    Like this -
    Code:
    /* CSS-based Tabbed Menu */
    
    #navigation ul, #navigation ul li {
         list-style: none;
         margin: 1em 0 0 0;
         padding: 0;
    height: 19px;
     }
    Have a look at another approach here - http://nopeople.com/CSS/menu%20tabs-...ver/index.html - that one uses images but you might be able to adapt it to your menu with no images
    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
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post
    I will check. Be right back.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Could get rid of an extra div like this -
    markup
    Code:
        <p><a title="Links to News archives dating back to the site's beginning in June, 2000" href="http://radified.com/Archives/">News Archives</a></p>
      <p><a href="http://radified.com/splash.rad" title="Splash page (7-second timer kicks you back here)">Splash 
          Page</a></p>
      </div>
      <div style="height: 4587px;" id="mainContent" class="column">
                          <!-- CSS Tabs -->
         <ul id="navigation">
              <li><a href="http://radified.com/index.rad"><span>Home</span></a></li>
              <li><a href="http://radified.com/cgi-bin/yabb2/YaBB.pl"><span>Forums</span></a></li>
              <li><a href="http://mt4.radified.com/"><span>Blog</span></a></li>
              <li><a href="http://radified.com/About/"><span>About</span></a></li>
            <li class="last"><a href="http://radified.com/no_spam/contact.htm"><span>Contact</span></a></li>
         </ul>
    
        <p class="adlinks">
          <script type="text/javascript"><!--
    google_ad_client = "pub-144321553056470
    CSS
    Code:
    /* CSS-based Tabbed Menu */
    
    ul#navigation, #navigation li {
    height: 19px;
         list-style: none;
         margin: 1em 0 0 0;
         padding: 0;
     }
    ul#navigation {
         text-align: center;
    	 border-bottom: 2px #699 solid;
     }
    
     #navigation li {
         display: inline;
         margin-right: .75em;
     }
    
     #navigation li.last {
         margin-right: 0;
     }
     
     #navigation li a {
         padding: 1px 1em;
     }
     
     #navigation li a {
         background: #699 100% 0;
         color: black;
         padding: 0;
         text-decoration: none;
    	 border-bottom: 1px #699 solid
     }
    
     #navigation li a span {
         background: #699;
         padding: 1px 1em;
    	 font-weight: bold;
     }
    
     #navigation li a:hover span {
         color: #000;
         text-decoration: none;
    	 background-color:#6CC;
    	 font-weight: bold;
     }
    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:

    PonchoX (04-12-2009)

  • #5
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post
    You are a wizard!

    I would've never thought of that. I was looking at borders and padding.

    I still see the black line in Dreamweaver's "Live view" .. which I believe uses the web-kit rendering engine .. same as Google chome (which I don't have installed) and Safari (which I also don't have installed) .. tho I'm not concerned about those ancillary browsers.

    How/why did you think of that solution and how did you arrive at 19px? (I'm trying to learn.)
    Last edited by PonchoX; 04-12-2009 at 05:29 AM.

  • #6
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post
    Just read your last post on div elim. You are obviously a true CSS guru. CSS is not as simple as one might be inclined to think at the outset .. so I'm sure you must have tons of experience.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by PonchoX View Post
    You are a wizard!

    I would've never thought of that. I was looking at borders and padding.

    I still see thr black line in Dreamweaver's "Live view" .. which I believe uses the web-kit rendering engine .. same as Google chome (which I don't have installed) and Safari (whicjh I also don't have installed) .. tho I'm not concerned about those ancilary browsers.

    How/why did you think of that solution and how did you arrive at 19px? (I'm trying to learn.)
    DW's design view can be handy but it's definitely not a browser so you can't depend on it to render code reliably. I always like to preview in a standards compliant browser - FireFox (see the tagline in my sig).

    Figured to try a height when I put background:#f00; on the ul and it enclosed the li and the bottom-border: 2px solid #699;
    Got 19px by playing with it a while.
    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

  • #8
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post
    I see you're in Alaska. I read Into the Wild .. (and saw the movie). Loved that book. Tho I hear most Alaskans think he was foolish.

    Would love to have your CSS skills.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by PonchoX View Post
    Just read your last post on div elim.
    See a link about divitis - http://www.tyssendesign.com.au/artic...at-is-divitis/
    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

  • #10
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post
    Why did you pick

    style="height: 4587px;

    I don't understand how you got that number.

    Will that force my page length longer than necessary?

    Cuz it fluctuates.

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by PonchoX View Post
    Why did you pick

    style="height: 4587px;

    I don't understand how you got that number.

    Will that force my page length longer than necessary?

    Cuz it fluctuates.
    That's all you. I changed the stuff in red, nothing else.
    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

  • #12
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Excavator View Post
    That's all you. I changed the stuff in red, nothing else.
    Interesting. Must be inserted by the matching_columns javascript, cuz it's not in my source html.

    I incorporated your code to eliminate a div. Thanks. I'm impressed how quickly you were able to crank out the mod .. made it look easy.

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Must be inserted by the matching_columns javascript, cuz it's not in my source html.
    Sorry, I guess that wasn't yours at all. That came from the rendered code as FireFox was viewing it and, since that's where I was editing it, the style came over with the copy/paste.
    My mistake - I hope you didn't waste too much time looking for that.
    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

  • #14
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Excavator View Post
    hope you didn't waste too much time looking for that.
    I don't know enough yet to waste much time looking for something like that. =)


  •  

    Posting Permissions

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