Check these out, screen shots of IE and FF. Heres my code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="css/layout.css"
type="text/css">
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Fassist | Home</title>
<script type="text/javascript" language="JavaScript"
src="jscripts/search.js">
</script>
</head>
<body>
<div id="top">
<img id="logo" alt="Fassist Logo" title="Fassist Logo"
src="images/small_logo.png"><br>
<div id="menu">
<div id="spacer1"></div>
<div id="linkbox_1"><a href="http://fassist.webng.com/"><img
id="home"
onmouseout="this.src='images/homebuttons/homebutton_inactive.png'"
onmouseover="this.src='images/homebuttons/homebutton_active.png'"
alt="Home" title="Home"
src="images/homebuttons/homebutton_inactive.png"></a><br>
</div>
<div id="linkbox_2"><a href="/example"><img
id="example"
onmouseout="this.src='images/examplebuttons/examplebutton_inactive.png'"
onmouseover="this.src='images/examplebuttons/examplebutton_active.png'"
alt="Example" title="Example"
src="images/examplebuttons/examplebutton_inactive.png"></a>
<br>
</div>
<div id="linkbox_3"><a href="/request">Request</a></div>
<div id="linkbox_4"><a href="/link2us">Link2Us</a></div>
<div id="linkbox_5"><a href="/gallery">Gallery</a></div>
<div id="linkbox_6"><a href="/contact">Contact</a></div>
<div id="linkbox_7"><a href="#"
onclick="showHide('hidden_div'); return false;">Search</a></div>
<div id="spacer2"></div>
</div>
<div id="hidden_div">
<form method="get" action="http://www.google.com/search"><input
id="searchbox" name="q" size="25" maxlength="255"
value="" type="text"><input id="searchbutton"
value="Google Search" type="submit"></form>
</div>
</div>
<div id="main">
Some text...</div>
<a href="http://validator.w3.org/check?uri=referer"><img
id="w3c" src="http://www.w3.org/Icons/valid-html401-blue"
alt="Valid HTML 4.01 Transitional"></a>
</body>
</html>
CSS:
BODY
{
text-align: center;
background-color: #000000;
}
div#top
{
margin: auto;
height: 100px;
width: 650px;
color: #FFFFFF;
font-family: Arial;
font-size: 10pt;
background-color: #1C1C1C;
}
img#logo
{
height: 75px;
width: 75px;
border: 0px;
}
div#menu
{
margin: auto;
height: 20px;
width: 428px;
background-color: #1C1C1C;
}
div#linkbox_1
{
background-color: #000000;
border-top: 1px #4F4F4F solid;
border-left: 1px #4F4F4F solid;
border-bottom: 1px #4F4F4F solid;
height: 20px;
width: 60px;
float: left;
}
img#home
{
border: 0px;
height: 20px;
width: 60px;
}
div#linkbox_2, div#linkbox_3, div#linkbox_4, div#linkbox_5, div#linkbox_6
{
border-top: 1px #4F4F4F solid;
border-bottom: 1px #4F4F4F solid;
border-left: 1px #4F4F4F solid;
height: 20px;
width: 60px;
float: left;
background-color: #000000;
}
img#example
{
border: 0px;
height: 20px;
width: 60px;
}
img#request
{
border: 0px;
height: 20px;
width: 60px;
}
img#link2us
{
border: 0px;
height: 20px;
width: 60px;
}
img#gallery
{
border: 0px;
height: 20px;
width: 60px;
}
img#contact
{
border: 0px;
height: 20px;
width: 60px;
}
div#linkbox_7
{
border-top: 1px #4F4F4F solid;
border-right: 1px #4F4F4F solid;
border-left: 1px #4F4F4F solid;
border-bottom: 1px #4F4F4F solid;
height: 20px;
width: 60px;
float: left;
background-color: #000000;
}
img#search
{
border: 0px;
height: 20px;
width: 60px;
}
div#hidden_div
{
background-color: #000000;
margin: auto;
display: none;
height: 20px;
width: 350px;
}
#searchbox
{
background-color: #000000;
color: white;
border: 1px #CCCCCC solid;
}
#searchbutton
{
color: white;
border: 1px #CCCCCC solid;
background-color: #000000;
}
div#main
{
margin: auto;
height: 700px;
width: 650px;
color: #FFFFFF;
font-family: Arial;
font-size: 10pt;
background-color: #1C1C1C;
}
#read
{
color: #FF0000;
}
img#w3c
{
height: 31px;
width: 88px;
border: 0px;
}
A:link
{
text-decoration: none; color: #FFFFFF;
}
A:visited
{
text-decoration: none; color: #FFFFFF;
}
A:hover
{
text-decoration: none; color: #CCCCCC;
}
WHY IE, WHY!? :(
EDIT: Ok, I cleaned up the code and added in the fix for IE transparency, as to why my lines down I don't know... Its like IEs putting in padding, if I reduce size of image 1px, then the bar comes up 1px... I'm confused.
EDIT2: Hmm, I was messing with the code and for some reason even though I removed the background color of black (IE was applying it I thought) it remains black... I've refreshed, restarted, and cleared cache...IE sucks, Opera messes it up SLIGHTLY but its nothing that looks messed up.
EDIT3: Ok, hopefully my final edit, I got IE to display almost right, all thats left is the stupid almost-padding/margin problem. I uploaded a update of what IE looks like.