...

View Full Version : CSS Tabbed Menu quirk



PonchoX
04-12-2009, 03: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
04-12-2009, 03: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
04-12-2009, 04:17 AM
I will check. Be right back.

Excavator
04-12-2009, 04: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
04-12-2009, 04: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
04-12-2009, 04: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
04-12-2009, 04: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
04-12-2009, 04: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
04-12-2009, 04: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
04-12-2009, 04: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
04-12-2009, 05: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
04-12-2009, 03: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
04-12-2009, 05: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
04-12-2009, 08: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. =)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum