...

View Full Version : Resolved CSS navigation bar in IE ...Helps!



mikemacx
05-29-2009, 12:04 AM
I decided to change my navigation bar to straight CSS to clean it up. I'm on Mac and it looks fine in FF and Safari, but i just knew there would be problems when it went to IE for Windows. The layout of the site name and the thin line goes quacky!

I'm a bit knew to the margins and width/height in CSS, so any help would be great.

Link: http://www.oldmasterhands.com/banner2.html

CSS and code:


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

<head>
<title></title>
<style type="text/css">

html {


body { background: #808080;
font-family: "Helvetica Neue", Helvetica, sans serif; color: #cccccc; }

.nav{
width:750px;
height: 100px;
border: none;
text-align: right;
position: relative;
left: 250px
top: 50px;
padding-left: 25px;

}

.nav ul {
display: inline;
float: left;
list-style: none;
height: 50px;
width: 750px;
margin: 0 0 0 5px;
padding: 0;
}

.nav ul li {
display: inline;
margin; 0;
padding: 0;
float: left;
vertical-align: bottom;
}

.nav ul li a, a:visited {
font-size: 16px;
font-weight: lighter;
float: left;
margin-bottom: 3px;
width: 125px;
height: 25px;
text-decoration: none;
color: #cccccc;
display: inline;
text-align: left;
position: relative;
left 200px;
top: 28px;
outline: none;
}

.nav ul li#big {font-weight: bold;
float: left;
font-size: 30px;
margin-left: -4.5em;
width: 400px;
height: 100px;
padding-left: 0;
padding-right: 40px;
padding-bottom: 0px;
line-height: 220%;
display:inline

}

.nav ul li a:hover {
color: #ffffff;
}
#logo {
float:left;
border: 1px solid #cccccc;
float: left;
margin-top:15px;

}

#line {
width: 650px;
w\idth:650px;
height: 2px;
heigh\t: 2px;
padding: 0;
margin: 0;
position: relative;
left: 80px;
top: 53px;
background: #cccccc;
}

</style>
</head>
<body>

<div Class="nav">

<div id="line">
</div>
<ul>
<img id="logo" src="/images/OMH.gif" width=60>
<li id="big">Old Master Hands</li>
<li><a href="index.html" "target="_top"> Home</a></li>
<li><a href="/drawings/drawings.html" target="_top">Drawings</a></li>
<li><a href="/paintings/paintings.html" target="_top">Paintings</a></li>
<li><a href="/links/linkspage.html" target="_top">Links</a></li>
<li><a href="/contact/contact.html" target="_top">Contact</a></li>
<li><a href="/commission/commission.html" target="_top">Commission</a></li>


</div>
</body>
</html>Nevermind this post. I just validated and realized the errors. Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum