CSS Forum

**Redcau** · 03:56 AM

Good Evening!

I am currently constructing a css based layout, but is running into a few problems, some exists in all (IE, Mozilla, Opeara) broswers, while some are present only in Internet Explorer. I invite anyone with a greater experience to offer assistance, Thank you!

Here goes:

LIVE VERSION:
http://sbogames.com/csspwnage/1/index.html

MARKUP/CSS:

HTML Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--

body {
    margin:0px;
    padding:0;
    width:780px;
    background:#555555;
    background-image:url(images/lo_08.gif);
    background-repeat:repeat-y;
}
#back {
    width:780px;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #666666;    
}
#nav{
    width:780px;
    height:32px;
    margin:0px;
    background:#444444;
    background-image:url(images/lo_01.gif);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 900;
    color: #666666;
    text-decoration: none;
    text-align:right;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
}
#nav a{
    margin-right:10px;
    margin-left:10px;
    text-decoration:none;
    color: #666666;
}
#nav a:hover, a:focus{
    padding-bottom:16px;
    height:32px;
    background-image:url(images/lo_01h.gif);
    color: #666666;
}
#header{
    width:780px;
    height:60px;
    margin:0px;
    background:#444444;
}
#gbar{
    width:780px;
    background-image:url(images/lo_05.gif);
}
#left{
    float:left;
    height:500px;
    width:146px;
    background:#444444;
    margin-top: 3px;
    margin-right: 0px;
    margin-bottom: 3px;
    margin-left: 7px;
    overflow: auto;
}
#right{
    float:right;
    height:500px;
    width:616px;
    margin-top: 3px;
    margin-right: 7px;
    margin-bottom: 3px;
    margin-left: 3px;
    background:#444444;
    overflow: auto;
}
-->
</style>
</head>

<body>
<div id="nav"><a href="#">Home</a><a href="#">Forums</a><a href="#">Games</a><a href="#">Arts</a><a href="#">Flash</a><a href="#">Web</a><a href="#">Affiliates</a></div>
<div id="header"><img src="images/lo_03.gif" alt=""/><img src="images/lo_04.gif" alt=""/></div>
<div id="gbar"><img src="images/lo_05.gif" alt=""/></div>
<img src="images/lo_07.gif" alt=""/><br />
<div id="left">navigation is here lol</div><div id="right">contents are here lol</div>
</body>
</html>

THE VISUALS

Two parallel <div> doesnt show up right in IE.

Top Navigation text will not center, occur in all broswers.

Side Margin error in Internet explorer.

Well, basiclly, I want to line up the two <div>'s, align the text in the middle(vertically), and fix the margin problem.

If you can make my first experience with css layouts pleasant; you will receive my infinate gratitude!

**lythande1** · 11-12-2005, 01:20 PM

Not a lot of time here, but I'll help you as much as I can. (If you still need help, I'll be back on this evening.)

Menu text not centering:

If this were my mark up, here's what I'd do. I would first off put my navigation in a ul (because it is, after all, a list of links), and then style it thusly

Code:

#nav { text-align: center; etc.(this will center the ul in IE)
#nav ul, nav li {
display: inline;
margin: 0px auto; (this will center the ul in Mozilla, firefox, NS)
text-align: right; (resetting the alignment for the IE hack)
etc.}

IE pwned:

You have to remember that in IE, the box model is different. In Firefox, Mozilla etc. the box model works like this: width+margin+padding+border=
size of the box. In IE, the size of the box is width. Margin, padding and border are all added in after the width is specified. To correct this, you use a box model hack to feed IE the correct width (i.e. the width of the box -padding -margin - border)

Here's the box model hack that I use, known as the smbh:

Code:

* html <selector> {
width: <width -padding-border-margin >;
w/idth: <width - padding-border-margin>;
}

I am not sure that this is going to fix all of the problems in your layout because you're using floats and there is about a 4 px jog that IE adds to floats sometimes, but try it. If IE adds the jog, post back.

**lythande1** · 11-12-2005, 01:39 PM

Okay, may have misunderstood you on the menu. You want it centered vertically, not horizontally. Forgive me, but I get stupid occassionally.

Ammended fix. Put the links in a ul as above, and add margin or padding to the top of the ul. This will give you space between the top of the document and your link list. Box model hack will be needed here again.

One other d'oh..do you want to have the left and right columns the same length? If so, I'd use faux columns with this layout. You do that by taking a horizontal slice of your layout and using it as a background image for a container (like the body tag, but I usually use a container so I don't get the IE pixel jog.). Tile it along the y axis, and then position your columns on top of it. In this way, your columns will always be the same length no matter how much content they contain. There's an article on this on alistapart. http://www.alistapart.com/articles/fauxcolumns/

**Redcau** · 11-12-2005, 07:33 PM

Thank you for your help, lythande!
I was able to fix the top navigation following what you have told me. However, I am still quite confused as to how to fix the to columns, making them sit next to each other, do you mind explaining the fix? I dont understand how to intergrate that into my css.

**Redcau** · 11:27 PM

UPDATED CODE

HTML Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--

body {
    margin:0px;
    padding:0;
    width:780px;
    background:#555555;
    background-image:url(images/lo_08.gif);
    background-repeat:repeat-y;
}
#back {
    width:780px;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #666666;    
}
#nav{
    width:780px;
    height:32px;
    margin:0px;
    background:#444444;
    background-image:url(images/lo_01.gif);
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 900;
    color: #666666;
    text-decoration: none;
    text-align:right;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 32px;
}
#nav a{
    margin-right:10px;
    margin-left:10px;
    text-decoration:none;
    color: #666666;
}
#nav a:hover, a:focus{
    padding-bottom:14px;
    background-image:url(images/lo_01h2.gif);
    color: #666666;
}
#header{
    width:780px;
    height:60px;
    margin:0px;
    background:#444444;
}
#gbar{
    width:780px;
    background-image:url(images/lo_05.gif);
}
#left{
    float:left;
    height:500px;
    background:#444444;
    padding: 3px;
    margin-top: 3px;
    margin-right: 3px;
    margin-bottom: 3px;
    margin-left: 7px;
    width:182px;
    voice-family: "\"}\"";
    voice-family:inherit;
    width:166px;
    overflow: auto;
}
#right{
    height:500px;
    width:585px;
    background:#444444;
    overflow: auto;
    padding: 3px;
    margin-top: 3px;
    margin-right: 3px;
    margin-bottom: 3px;
    margin-left: 0px;
}
-->
</style>
</head>

<body>
<div id="nav"><a href="#">Home</a><a href="#">Forums</a><a href="#">Games</a><a href="#">Arts</a><a href="#">Flash</a><a href="#">Web</a><a href="#">Affiliates</a></div>
<div id="header"><img src="images/lo_03.gif" alt=""/><img src="images/lo_04.gif" alt=""/></div>
<div id="gbar"><img src="images/lo_05.gif" alt=""/></div>
<img src="images/lo_07.gif" alt=""/><br />
<div id="left">navigation is here lol</div><div id="right">
  <p>contents are here lolm,n,mm</p>
  <p>k</p>
  <p>k</p>
  <p>k</p>
  <p>k  </p>
</div>
</body>
</html>

Now gives me the results:

http://sbogames.com/csspwnage/ff.gif
FIRE FOX

http://sbogames.com/csspwnage/ie.gif
INTERNET EXPLORER

http://sbogames.com/csspwnage/o.gif
OPERA

Please shed some light on how to get IE and opera to render it like Firefox does.

**rosanda** · 11-15-2005, 10:11 AM

instead of floating the left bar to the left and the right to the right, you have to float both to the left.

#left{
float:left;
height:500px;
width:146px;
background:#444444;
margin-top: 3px;
margin-right: 0px;
margin-bottom: 3px;
margin-left: 7px;
overflow: auto;
}
#right{
float:left;
height:500px;
width:616px;
margin-top: 3px;
margin-right: 7px;
margin-bottom: 3px;
margin-left: 3px;
background:#444444;
overflow: auto;
}