I wonder if anyone can help me?
I'm currently designing a site that hopefully will look like this,
http://www.tropicagraphicdesign.co.uk/rersnew23.jpg
My problem is the bottom of the curved white box, in IE7 and FF its fine, in IE it goes to far down.
Here is my code:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css" title="layout" media="screen"> @import
url("style.css"); </style>
</head>
<body>
<div id="container">
<div class="contentheader"></div>
<div class="maincontainer">
<div><ul class="navbar">
<li><a href="#" class="nav">Home</a></li>
<li><a href="#" class="nav">About Us</a></li>
<li><a href="#" class="nav">Products</a></li>
<li><a href="#" class="nav">Contact</a></li>
</ul></div>
</div>
<div id="right">
</div>
<div class="content"></div>
</div>
<div class="bottom"></div>
<div class="footer">
</div>
</body>
</html>
and my CSS
HTML Code:
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#8c0304;
margin-left:auto;
margin-right:auto;
font-size:9pt;
color:#000;
line-height:10pt;
text-align:center;
padding:0;
}
#container {
width:720px;
height:527px;
background:url(images/mainbg.gif) repeat;
margin-right:auto;
margin-left:auto;
text-align:left;
}
.contentheader {
background:url(images/header.gif) no-repeat;
background-color:#ffffff;
width:727px;
height:149px;
margin-left:auto;
margin-right:auto;
color:#000;
}
.bottom {
background:url(images/bottom.gif) no-repeat;
width:720px;
height:59px;
margin-right:auto;
margin-left:auto;
}
.maincontainer {
width:718px;
margin:0px 0px 0px 7px;
background:#8c0304;
}
#nav {
background:url(images/redbg.gif) #fff repeat;
text-align:center;
margin-top:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:8pt;
color:#000;
font-weight:700;
padding-top:0px;
padding-bottom:0px;
text-decoration:none;
}
#nav a {
background:#fff;
color:#000;
text-decoration:none;
}
#nav a:active {
background:#fff;
color:#CC2527;
}
#nav a:hover {
background:#fff;
color:#000;
font-size:8pt;
padding-bottom:2px;
border-bottom:dotted #CC2527;
}
.footer {
background:#8c0304;
width:320px;
margin-right:auto;
margin-left:auto;
color:#ffffff;
font-size:11px;
text-align:center;
}
.footer a,.footer a:active {
background:#8c0304;
color:#fff;
font-weight:700;
text-decoration:none;
}
ul.navbar {
list-style-type:none; float:left; display:block; width:714px;
line-height:0.1em;
clear:both; margin:0; padding:0; background-color:#000000;}
ul.navbar li {
display:inline;}
a.nav:link, a.nav:visited {
display:block; float:left; width:19.5%; padding:1.2em 1.2em 1.2em
1.2em; margin:0;
text-decoration:none; background-color:#000000; color:#FFFFFF;}
a.nav:hover {
display:block; float:left; width:19.5%; padding:1.2em 1.2em 1.2em
1.2em; margin:0;
text-decoration:none; background-color:#8c0304; color:#FFFFFF;}
a.nav:active {
display:block; float:left; width:19.5%; padding:1.2em 1.2em 1.2em
1.2em; margin:0;
text-decoration:none; background-color:#000000; color:#FFFFFF;}
#right
{
background:url(images/hand.jpg) no-repeat;
height:411px;
width:177px;
margin:0px 0px 0px 0px;
padding:0px;
float:right;
}
.content {
padding:15px 40px 2px 20px;
}
I really appreciate any help with this at all, thank you 
Last edited by Tropica; 04-11-2007 at 07:13 AM..
|
