Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Help with CSS Centred layout

Status
Not open for further replies.
dthomas31uk

dthomas31uk

Technical User
Oct 19, 2003
107
GB
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. Please refer to #right in the CSS as this is where the problem lies.

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>
 
Sort by date Sort by votes
Do you have a complete and valid doctype at the top of your document? If not, add it and see what happens. If you do, you might want to start omitting some of the browser dependant hacks in your css.
 
Upvote 0 Downvote
Yeah. The following is the doctype I am using.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="
I think the problem lies with the margin tag margin: 22px 150px 0px 0px; The 150px is where the problem lies with the different browsers.
 
Upvote 0 Downvote
Is there any reason you're using absolute positioning?

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
771
3esolar
3
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
816
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
642
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
229
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top