PDA

View Full Version : CSS Tabbed Menu quirk



PonchoX
Apr 12th, 2009, 04:13 AM
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
Apr 12th, 2009, 04:46 AM
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-CSS-rollover/index.html - that one uses images but you might be able to adapt it to your menu with no images

PonchoX
Apr 12th, 2009, 05:17 AM
I will check. Be right back.

Excavator
Apr 12th, 2009, 05:25 AM
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
Apr 12th, 2009, 05:25 AM
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
Apr 12th, 2009, 05:28 AM
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
Apr 12th, 2009, 05:31 AM
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
Apr 12th, 2009, 05:35 AM
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
Apr 12th, 2009, 05:36 AM
Just read your last post on div elim.

See a link about divitis - http://www.tyssendesign.com.au/articles/faqs/what-is-divitis/

PonchoX
Apr 12th, 2009, 05:51 AM
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
Apr 12th, 2009, 06:01 AM
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
Apr 12th, 2009, 04:36 PM
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
Apr 12th, 2009, 06:47 PM
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
Apr 12th, 2009, 09:31 PM
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. =)