...

View Full Version : CSS tabs: IE cuts off top border



name _F1
01-23-2008, 08:47 AM
I've written/adapted some CSS tabs for use on my site. Firefox and Opera display them perfectly (as far as I can tell), but, for some reason, IE (7 is all I've tested with) cuts off the top border of the inactive tabs (all the tabs without the class "active").

I'm lost as to why this is happening. Perhaps someone could shed some light on the subject?


<?xml version="1.0" encoding="iso-8859-1"?>

<!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" />
<style type="text/css">
.box {
background-color:#1C1C1C;
color:#DBDBDB;
border:1px solid #353535;
}
p {
margin-left:5px;
}
table {
margin:5px auto;
}
body {
background-color:#000000;
color:#DBDBDB;
}
/* Universal info */
ul.tabs {
text-align:left;
margin:0px;
list-style-type:none;
padding:4px;
font-size:12px;
}
ul.tabs li {
display:inline;
}
ul.tabs li.active a {
position:relative;
top:1px;
padding-top:4px;
}
ul.tabs li a {
padding:4px 10px;
text-decoration:none;
border-bottom:0 !important;
}
.tabcontent {
margin-top:0 !important;
padding:3px;
border-top:0;
}
.box {
margin:1%;
padding:2px;
font-size:11px;
}
/* Color info */
ul.tabs {
border-bottom:1px solid #353535;
}
ul.tabs li.active {
border-bottom:1px solid #1C1C1C;
background-color:#1C1C1C;
}
ul.tabs li.active a {
background-color:#1C1C1C;
}
ul.tabs li a:hover {
background-color:#1E1E1E;
}
ul.tabs li.active a:hover {
background-color:#1C1C1C;
}
ul.tabs li a {
border:1px solid #353535;
background-color:#141414;
color:#DBDBDB;
}
</style>
</head>
<body>
<ul class="tabs" style="width:40%;margin-left:30%;margin-top:5%;" id="tabs">
<li class="active"><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
<li><a href="#">Tab 4</a></li>
</ul>
<div class="tabcontent box" style="width:40%;margin-left:30%" id="data">
<p>Testing tabs.</p>
</div>
</body>
</html>

I'd appreciate any help as to how to fix the problem. :)

effpeetee
01-23-2008, 09:33 AM
Try removing the first line.

<?xml version="1.0" encoding="iso-8859-1"?>

It sometimes causes funny effects.:confused:

Frank

name _F1
01-23-2008, 10:51 AM
Nope, that didn't work. :( Thanks for the suggestion, though.

harbingerOTV
01-23-2008, 04:17 PM
It appears that the display: inline was the issue (or one of the issues). Another was that when you hovered a link, IE jumped up. I played around with it and basically turned out a simpler form of the same thing you had but appears to look and work identical on both IE and FF now. You'll notice the bottom border of the UL is not there but is now the top border of the DIV. It's better this way because the ul was over shooting the div by 1-2 px and didn't look good.



<!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>m</title>
<style type="text/css">

.box {
background-color:#1C1C1C;
color:#DBDBDB;
border:1px solid #353535;
padding:2px;
width:40%;
}

p {
margin-left:5px;
}

table {
margin:5px auto;
}

body {
background-color:#000000;
color:#DBDBDB;
font: 1.2em sans-serif;
}

.tabcontent p {
padding:12px;
margin: 0;
}


/* Universal info */

ul.tabs {
text-align:left;
margin: 0 0 -1px 0;
list-style-type:none;
padding: 0;
width:40%;
overflow: auto;
position: relative;
z-index: 10;
}

ul.tabs li {
float: left;
border: 1px solid #353535;
padding: 0;
margin: 0 4px;
}

ul.tabs li a {
padding: 3px 10px;
display: block;
text-decoration:none;
color: #666;
}

ul.tabs li a:hover {
background: #1C1C1C;
color: #999;
}

ul.tabs li.active {
border-bottom: 1px solid #1C1C1C;
}

ul.tabs li.active a, ul.tabs li.active a:hover {
background: #1C1C1C;
color: #DBDBDB;
}



/* Color info */

/* ==== COMMENTED ALL THIS OUT FOR TESTING

ul.tabs {
border-bottom:1px solid #353535;
}
ul.tabs li a {
border:1px solid #353535;
background-color:#141414;
color:#DBDBDB;
}
ul.tabs li.active {
border-bottom:1px solid #353535;
background-color:#1C1C1C;
}
ul.tabs li.active a {
background-color:#1C1C1C;
}
ul.tabs li a:hover {
background-color:#1E1E1E;
}
ul.tabs li.active a:hover {
background-color:#1C1C1C;
border-bottom:1px solid #353535;
}
==== */

</style>
</head>
<body>
<ul class="tabs">
<li class="active"><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
<li><a href="#">Tab 4</a></li>
</ul>
<div class="tabcontent box" id="data">
<p>Testing tabs.</p>
</div>
</body>
</html>

effpeetee
01-24-2008, 11:37 AM
harbingerOTV

I found this to work better on my PC

<body>
<ul class="tabs">
<li class="active">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
<li><a href="#">Tab 4</a></li>
</ul></li>

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum