...

View Full Version : 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? :thumbsup:

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

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


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 (http://www.quirksmode.org/css/condcom.html) 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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum