CSS Tabbed Menu quirk

[PonchoX]

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

[Excavator]

Hello PonchX,
What happens in other browsers when you give the ul and li a height?
Like this -

/* 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

[PonchoX]

I will check. Be right back.

[Excavator]

Could get rid of an extra div like this -
markup

    <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

/* 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;
 }

[PonchoX]

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.)

[PonchoX]

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.

[Excavator]

Originally Posted by PonchoX

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.

[PonchoX]

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.

[Excavator]

Originally Posted by PonchoX

Just read your last post on div elim.

See a link about divitis - http://www.tyssendesign.com.au/artic...at-is-divitis/

[PonchoX]

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.

[Excavator]

Originally Posted by PonchoX

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.

[PonchoX]

Originally Posted by Excavator

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.

[Excavator]

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.

[PonchoX]

Originally Posted by Excavator

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. =)