Hi, I am creating a website using a centred 3 column Layout using CSS. I understand the box model problem when stating the width in CSS, but I have encountered a similar problem. My CSS layout works fine in Opera and Firefox but my right layout box(called right in the CSS code) in IE6 does not line up correctly. Can anyone help??? The problem lies within the margin tag of the CSS is there anyway I can get around this so that it is compatable on all 3 browsers. Hope someone can help cheers.
The following is the code created. #right in the CSS is where the problem lies. Cheers
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
color: #ccc;
background-color: #333;
}
a {
text-decoration: none;
font-weight: bold;
color: #ccc;
outline: none;
}
a:visited {
color: #ccc;
}
a:active {
color: #ccc;
}
a:hover {
color: #ccc;
text-decoration: underline;
}
.ahem {
display: none;
}
strong, b {
font-weight: bold;
}
p {
font-size: 12px;
line-height: 22px;
margin-top: 20px;
margin-bottom: 10px;
}
h1 {
font-size: 24px;
line-height: 44px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h2 {
font-size: 18px;
line-height: 40px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h3 {
font-size: 16px;
line-height: 22px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h4 {
font-size: 14px;
line-height: 26px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h5 {
font-size: 12px;
line-height: 22px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h6 {
font-size: 10px;
line-height: 18px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
img {
border: 0;
}
.nowrap {
white-space: nowrap;
font-size: 10px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
/* must be combined with nobr in html for ie5win */
}
.tiny {
font-size: 9px;
line-height: 16px;
margin-top: 15px;
margin-bottom: 5px;
}
#top {
margin: 50px 150px 0px 150px;
padding: 10px;
border: 1px solid #ccc;
background: #666;
height: 72px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 70px;
}
html>body #top {
height: 70px; /* ie5win fudge ends */
}
#left {
position: absolute;
top: 120px;
left: 0px;
margin: 22px 0px 0px 150px;
padding: 10px;
border-bottom: 1px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
background: #666;
width: 122px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 120px;
}
html>body #left {
width: 120px; /* ie5win fudge ends */
}
#middle {
margin: 0px 190px 20px 291px;
padding: 10px;
border-bottom:1px solid #ccc;
background: #666;
}
#right {
position: absolute;
top: 120px;
right: 0px; /* Opera5.02 will show a space at right when there is no scroll bar */
margin: 22px 150px 0px 0px;
padding: 0px;
border-bottom: 1px solid #ccc;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
background: #666;
width: 122px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 120px;
}
html>body #right {
width: 120px; /* ie5win fudge ends */
}
pre {
font-size: 12px;
line-height: 22px;
margin-top: 20px;
margin-bottom: 10px;
}
</style>
<title>Untitled Document</title>
</head>
<body>
<div id="top">
<p>1</p>
</div>
<div id="left">
<p>1</p>
</div>
<div id="middle">
</div>
<div id="right">
<p>1</p>
</div>
</body>
.. specially when I don´t understand CSS