Forum Moderators: not2easy
I'm just finishing off a website design and as it stands at the moment I have got the CSS and markup validating with the W3C validation tool. The design looks perfect in Firefox but there is a slight problem in IE.
If you view it in Firefox you will see that the title bar, left menu, content and right content DIV's all butt onto one another and within the left menu DIV the actual menu items are aligned to the right of the DIV:
However, when viewed in IE 6, there is a gap between all of the 4 major DIV's and the menu items in the left menu DIV are not against the right hand side of the DIV:
The design used to work in IE however, when 'touching it up' in order to make it validate it has started to break in IE and I don't know what the problem is.
Please can someone advise on what I can do to fix this problem?
Many thanks in advance,
D1n1_81
<Sorry, no personal URLs.
See Terms of Service [webmasterworld.com]>
[edited by: tedster at 3:44 pm (utc) on Mar. 13, 2005]
Here is the code - the actual page has the CSS in a seperate style sheet which is referenced but to make things easier I have put the relevant CSS into this html document. Hopefully you can save this code and view it to help with mr problems described above.
Sorry about the size of it:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Test page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="JavaScript" type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
body {
font: normal 11px verdana, arial, helvetica, sans-serif;
background-color: #D3E4ED;
margin:10px 10px 0px 10px;
padding:0px;
}#title {
background:#fff;
height:127px;
border-top:2px solid #000033;
border-right:2px solid #000033;
border-left:2px solid #000033;
background: #000066 url(#) top right no-repeat;
text-align:left;
voice-family: "\"}\"";
voice-family: inherit;
height:125px;
}
html>body #banner {
height:125px;
}#title h1 {
color:#FFFFFF;
font: small-caps bold 28pt Times New Roman, Times, Serif;
padding:8px 10px 0px 140px;
margin:0px;
}#title a {
color: #ffffff;
font: italic bold 12pt verdana, arial, helvetica, sans-serif;
padding-left: 19px;
text-decoration: none;
}#centercontent2 {
background:#C0D9E6;
margin-left: 190px;
margin-right:200px;
border:2px solid #000033;
padding: 15px; padding-bottom:0px;voice-family: "\"}\"";
voice-family: inherit;
margin-left: 192px; margin-right:202px;
}
html>body #centercontent2 {
margin-left: 192px; margin-right:202px;
}.post {
padding: 15px; padding-left: 20px;
padding-right: 20px; padding-bottom:20px;
border: 3px solid #000066;
margin-bottom:15px;
background: #ffffff;
}.post h3 {
padding:0px;
font: bold 14px verdana, arial, helvetica, sans-serif;
text-decoration: underline;
color:#000066;
margin:0px; margin-bottom:15px;
}.post p {
font: normal 11px verdana, arial, helvetica, sans-serif;
}#rightcontent {
position: absolute;
right:10px; top:137px;
width:200px;
background:#fff;
border:2px solid #000033;
background:#80B3CC;
padding: 0px;
}
#rightinnercontent{
padding:10px; padding-top:12px;
}
#rightinnercontent p{
margin:0;
text-align: justify;
}#leftmenu {
position: absolute;
left:10px; top:137px;
width:190px;
background-color:#000066;
border:2px solid #000033; border-top:0;
padding-top:1px;
text-align:left;
}#leftmenu ul {
margin: 0;
padding-left: 20px;
list-style: none;
width: 170px; /* Width of Menu Items */
border-bottom: 1px solid #000066;
}#leftmenu ul li {
position: relative;
}#leftmenu li ul {
position: absolute;
width: 155px;
left: 170px; top: 0;
display: none;
padding:0;
}#leftmenu ul li a {
display: block;
text-decoration: none;
color: #ffffff;
background-color:#4d4d94;
padding: 5px;
border-top: 1px solid #000066;
border-left:15px solid #333385;
border-right: 10px solid #6666a3;
border-bottom: 0;
font: normal 12px verdana, arial, helvetica, sans-serif;
}* html #leftmenu ul li {
float: left;
height: 1%;
}* html #leftmenu ul li a {
height: 1%;
}#leftmenu ul li a:hover {
color: #fcc92f;
font-weight:bold;
background-color:#4d7194;
border-left:15px solid #1a4876;
border-right: 10px solid #6685a3;
}#leftmenu li ul li a {
background-color: #4d4d94;
border-left:15px solid #333385;
border-right: 10px solid #6666a3;
padding: 3px 5px;
}#leftmenu li ul li.sub a:hover {
background-color: #4d7194;
border-left:15px solid #1a4876;
border-right: 10px solid #6685a3;
}#leftmenu li:hover ul,
#leftmenu li.over ul {
display: block;
}
</style></head>
<body>
<div id="title"><div id="title_img"><img title="Logo" alt="Logo" src="#"/></div>
<h1>TITLE</h1><a href="#">website address</a></div><div id="centercontent2">
<div class="post">
<h3>Post title</h3>
<p>Foo Text...</p>
</div>
</div><div id="rightcontent">
<div id="rightinnercontent">
<p>foom text...</p>
</div>
</div><div id="leftmenu">
<ul id="nav">
<li><a href="#">1</a></li>
<li><a href="#">2</a>
<ul>
<li class="sub"><a href="#">a</a></li>
<li class="sub"><a href="#">b</a></li>
</ul>
</li>
<li><a href="#">3</a></li>
</ul>
<br/>
</div>
</body>
</html>
Thanks again in advance for any help - it really is appreciated!
[edited by: SuzyUK at 9:32 am (utc) on Mar. 14, 2005]
[edit reason] code examplified [/edit]
<?xml version="1.0" encoding="UTF-8"?>
Thanks very much.
