Problem with Borders

fro0ty · 01-31-2007, 08:11 PM

Hi I am having some difficulties with borders;

http://suheal.googlepages.com/index.html

The border does not display properly with IE6, can anyone help me?

mbannonb · 01-31-2007, 08:16 PM

Try putting the border style inside the li tag.

Excavator · 01-31-2007, 08:23 PM

Hello fro0ty,
It looks like IE is cutting off the bottom because your ul is set to height:32px;
The 2px border makes the height 36px.
Try this CSS (I'm just guessing as I do not have IE6 running right now):

Code:

ul#menu {
color: #000000;
width: auto;
height: 36px;
margin: 0;
padding: 0;
list-style: none;
}		
ul#menu li {
font-size: 25px;
height: 36px;
float: left;
display: inline; /* IE 6 */
margin: 0 10px 0 0;
padding: 0;
}

Arbitrator · 01-31-2007, 10:58 PM

Code:

ul#menu li {
font-size: 25px;
height: 35px;
float: left;
display: inline; /* IE 6 */
margin: 0 10px 0 0;
padding: 0;
}

Inline elements cannot have specified dimensions. Thus, if you want to specify the height, get rid of the display: inline declaration. Fortunately, that declaration doesn’t seem to be doing anything here except wasting space since float: left overrides it; floated elements are block‐level regardless of the display property’s value.

Code:

ul#menu li a {
padding: 2px 5px 5px 5px;
color: #FF0000;
text-decoration: none;
display: inherit;
height: 32px;
}

I’m guessing that this is supposed to be some kind of exploit for Internet Explorer? I would avoid exploits that aren’t forward compatible. Use conditional comments if you have to.

Anyway, the solution seems to be to float the anchor elements to the left. I’d put a border around the div or ul elements though so that you can see the resulting issue: the height is not large enough to accommodate your text, resulting in different cross‐browser appearances between Firefox and Internet Explorer 6. Internet Explorer 7 looks the same as Firefox, however.