Border bottom: none thing

HTML & CSS
1

Hi guys,

The code below is taken from a tutorial book. The thing I cannot figure out is that when I get rid of the code “border-bottom: none” in ‘ul a’ the menu boxes get smaller in vertical direction. Can someone please tell me why this happening?

Any help appreciated…

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=ISO-8859-1” />
<title>mysite</title>
<style type=“text/css”>
/* reset styles /
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
}
table { border-collapse: collapse; border-spacing: 0; }
td, th, caption { font-weight: normal; text-align: left; }
img, fieldset { border: 0; }
ol { padding-left: 1.4em; list-style: decimal; }
ul { padding-left: 1.4em; list-style:square; }
q:before, q:after { content:‘’; }
/ end reset */

/* BASIC */
body {
font: 62.5% Verdana, Arial, Helvetica, sans-serif;
padding: 20px;
}

ul {
margin-left: 0px;
padding-left: 0px;
list-style: none;
border-bottom: 1px dashed #000;
overflow: hidden;
}

ul li {
float: left;
}

ul a {
width: 12em;
display: block;
border: 1px dashed #000;
border-bottom: none;
padding: 5px;
margin-right: 5px;
background-color: #eaeaea;
text-decoration: none;
color: #333;
text-align: center;

}

</style>
</head>

<body id=“home”>

<ul id=“mainnav”>
<li><a href=“/index.html” id=“homeLink”>Home</a></li>
<li><a href=“/features/” id=“featureLink”>Features</a></li>
<li><a href=“/experts/” id=“expertLink”>Experts</a></li>
<li><a href=“/quiz/” id=“quizLink”>Quiz</a></li>
<li><a href=“/projects/” id=“projectLink”>Projects</a></li>
<li><a href=“/horoscopes/” id=“horoscopeLink”>Horoscopes</a></li>
</ul>

</body>
</html>

2

Hi, the problem is that borders (vertical borders anyway, top and bottom) add to the total height of the anchor (it was set on the anchor)
So lets say the anchor (theoretical) has a height of 30px
2px vertical borders altogether make it 32px height. If you specify border-bottom:none; then you make the height 31px and thus shrinking it.

3

As you have already seen, this is a horizontal menu and in fact it gets shrung much much more than 1px. You can try it by copying the code into your text editor, do what I did and see the results. Or am I still missing something?

4

Sorry it was my fault.:slight_smile: What I actually did was, I deleted only ‘none’ and left the rest of the text left to it. So the menus got shrunk in a very weird way. However, when I deleted the code completely, as you have told me, it got shrung only by 1 px. It is all solved now. Thanks for your hand…:slight_smile:

5

Sorry I didn’t test your code out I only looked at the anchors CSS (since that was the trouble issue). Silly mistake and now you have learned from it.

I’m glad all is fixed now :).

6

Actually, the real code should be

border: 0;

Not

border:none;
7

Just so you know, if you deleted hte word none (and the semi colon) it would basically have hte property be this

border-bottom:
padding: 5px;

Which is invalid so BOTH would be stricken. So that’s 10px vertical padding gone which is probably waht you were seeing :).

Edit:

And Blake no, it can be either. Border:0; will stop an IE6 bug on an element…but completely irrelevant in this case since that element isn’t even IN the code above… Either or will work just perfectly :slight_smile:

8

I’m not seeing that effect. When i remove the border-bottom:none, the 1px dashed border bottom you have on the ul appears more pronounced and gives the anchor a 1 px more height. Removing the border on the ul and the border:none on the anchor gives no difference in vertical height. So i’m not sure what you’re seeing on your end…

oops, to late with my reply lol

9

Well both are correct as the “none” will refer to border-style and if border-style is none then no border should be drawn according to the specs (no matter what the border width is).

However there are some bugs in older browsers so border:0 (or border:0 none) is actually safer anyway :slight_smile: