Border-Bottom

**Scottix** · Sep 18, 2006 11:11

Here is the site

Site

In Firefox the border-bottom on the tab shows correctly but when i try to show it in IE the border-bottom doesn't show correctly any help would be nice.

**Ed Seedhouse** · Sep 18, 2006 12:28

Originally Posted by Scottix

In Firefox the border-bottom on the tab shows correctly but when i try to show it in IE the border-bottom doesn't show correctly any help would be nice.

Your doctype is putting browsers into "quirks" mode and if you want to make things look the same you need to put all browsers into standards mode.

Instead of this:

Code:

<!-- Not Logged in -->
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

You need something like this:

Code:

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
               "http://www.w3.org/TR/html4/strict.dtd">

Notice the complete path in the doctype.

Moreover anything before the doctype, e.g. an html comment like you have in your code, will leave IE in quirks mode.

Get your page rendering in standards mode accross browser and then see how things look, and come back then if necessary.

**Scottix** · Sep 18, 2006 15:37

Ok it is still doing it Argh...Here is more info

Here is my css file

Code:

body {
	color: #000000;
	font: Georgia, Times, serif;
	font-size: 14px;
	text-align: left;
}

a:link, a:visited {
	color:#000000;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

h1 {
	font-size: 14px;
	font-weight: bold;
	margin: 0px;
}

img.left {
	float: left;
	margin: 5px;
}

img.right {
	float: right;
	margin: 5px;
}

div.top {
	border-top: 1px solid #CCCCCC;
}

div.clear {
	clear: both;
}

table {
	border-collapse: collapse;
}

td.left {
	border-left: 1px solid #CCCCCC;
}

td.lefttop {
	border-top: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
}

#heading, #heading a:link, #heading a:visited {
	color: #000080;
	font-size: 20px;
	font-weight: bold;
}

#article {
	padding-left: 2px;
}

#byline {
	color: #808080;
	font-family: Arial, sans-serif;
	font-size: 12px;
}

#summary {
	color: #333333;
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
}

#summary a:link, #summary a:visited {
	color: #3399FF;
}

#leftnav {
	float: left;
	margin: 0px;
}

#rightnav {
	float: right;
	margin: 0px;
}

#tabmenu {
	color: #000000;
	margin: 1px 0px -1px 0px;
	padding-left: 10px;
}

#tabmenu ul, #tabmenu li {
	display: inline;
	list-style-type: none;
	margin: 0px;
}

#tabmenu a:link, #tabmenu a:visited {
	background-color: #CCCCCC;
	border: 1px solid black;
	padding: 0px 5px 0px 5px;
	margin: 0px;
}

#tabmenu a:hover {
	background-color: #999999;
	margin: 0px;
}

#tabmenu a.active:link, #tabmenu a.active:visited {
	background-color: #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	margin: 0px;
}

#subNav {
	border: 1px solid #000000;
	margin-bottom: -1px;
}

#subNav ul, #subNav li {
	display: inline;
	list-style-type: none;
	padding: 0px 5px 0px 5px;
}

#login {
	margin: 0px;
}

#login ul, #login li {
	display: inline;
	list-style-type: none;
	padding: 0px 2px 0px 2px;
	margin: 0px;
}

#container {
	border: 1px solid #000000;
	margin: 0px;
}

#header {
	text-align: center;
	border-bottom: 1px solid #CCCCCC;
	margin: 0px;
}

#leftcontent {
	float: left;
	width: 125px;
	margin: 0px 0px 0px 0px;
}

#leftcontent li, #leftcontent ul {
	display: compact;
	list-style-type: none;
	margin: 0px;
	padding: 0px 2px 0px 2px;
}

#leftcontent a:link, #leftcontent a:visited {
	font: "Times New Roman", Times, serif;
	font-weight: normal;
	color: #666666;
}

#content {
	margin: 0px;
}

#contentright { 
	text-align: middle;
	padding-left: 2px;
	margin: 0px;
}

#contentbottom {
	border-top: 1px solid #CCCCCC;
	margin: 0px;
}

#footer {
	text-align: center;
	font-size: 10px;
	margin: 0px;
}

#ad {
	text-align: center;
	padding: 0px;
	margin: 0px;
}

Here is the part having a problem

Code:

<div id="leftnav">
	<ul id="tabmenu">
		<li><a href="../index.htm">SALSU</a></li>
		<li><a class="active" href="criterion.htm">Criterion</a></li>
                <li><a href="../perspectives/">Perspectives</a></li>
		<li><a href="../rvp.htm">RVP</a></li>
		<li><a href="../svp.htm">SVP</a></li>
		<li><a href="../cabl.htm">CABL</a></li>
		<li><a href="../senate.htm">Senate</a></li> 
	</ul>
</div>

**Scottix** · Sep 23, 2006 00:31

bump

User Tag List

Thread: Border-Bottom

Thread Tools

Display

Border-Bottom

Bookmarks

Bookmarks

Posting Permissions