Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Trouble with CSS layout, might be the margin:0 auto;

C

coyote78

macrumors newbie
Original poster
Mar 13, 2007
3
0
Hello.
I am new to mac, just bought me a Imac. Guess my surprise when i saw that a web page i just made was totally messed up in all my browsers (IE, Safari, Opera and Firefox) on my mac. They all worked fine on my PC.

I am using Joomla CMS, and have a Structure.css file to define the layout. If i take away the margin auto code (marked red in code below), the section looks fine but is not centered. If i put it back in the section goes bananas again. Do anyone know what causes this?

The page can be found at www.undertun.com

kind regards


#wrap {width:800px; height:185px;/*570px;*/ margin:0 auto; background-color:#FFFFFF; vertical-align:middle;} /* Main area of the page */
#toplogo {background-image:url(../images/header.gif); height:120px; width:800px;}
#menuarea {background-image:url(../images/nav_bk.gif); width:800px; height:65px; text-align:left;}
#menu {float:left; width:600px; padding-left:75px; padding-top:10px; margin-left:0px;}
#lang {float:left; padding-top:49px; padding-left:40px;}

#wrap2 {width:800px; height:385px; margin:0 auto; background-color:#FFFFFF;}
#leftside {float:left; width:60px; height:385px; background-image:url(../images/left_bk.gif); padding:0px; margin:0px;}
#contentwrap {float:left; width:680px; height:385px;}
#content {width:650px;/*650px;*/ height:295px;/*295px;*/ padding:10px; margin:5px; overflow:auto;}
#footer {width:680px; height:60px; background-image:url(../images/footer.gif);}
#rightside {float:right; width:60px; height:385px; background-image:url(../images/right_bk.gif);}
 
LtRammstein said:
What you defined to be the problem is correct. You need to define margin as being 0 OR auto, it can't be both.

Steve
Click to expand...

Whoa. No. "margin: 0 auto" is a perfectly valid CSS rule. It stays that you want 0 margin on the top/bottom and automatic margins (center for non-IE 6- browsers) on the left/right.

Why that's causing something to muck up, I'm not entirely sure. I'm at work with Windows right now and the site looks fine in FF2. I'm astounded that it might look different in FF2 on Mac, though, as the rendering engine is exactly the same.

My guess, however, is the problem is somewhere in the HTML, but (again) without being at home and on my Mac to see, it's hard to say.
 
More of the code that might be wrong, any more ideas?

It is still a mystery to me. As you said the CSS code should be right, but it is still messing up the design.

Here is some of the HTML code.


</head>
<body>
<br>
<br>
<br>

<div id="wrap"> <!-- Main site area -->
<div id="toplogo"></div>
<div id="menuarea">
<div id="menu"><?php mosLoadModules ( 'user1' ); ?></div>
<div id="lang"><?php mosLoadModules ( 'user3' ); ?></div>
</div>
</div>
<div id="wrap2">
<div id="leftside"></div>
<div id="contentwrap">
<div id="content"><?php mosMainBody(); ?></div>
<div id="footer"></div>
</div>
<div id="rightside"></div>
</div>
<br />
</body>
</html>

And here is some of the main CSS code.

body {
text-align:left; margin: 0px auto;
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
color:#333;
background-color:#CCCCCC;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #BBC9EF;
scrollbar-shadow-color: #919BBE;
scrollbar-3dlight-color: #BBC9EF;
scrollbar-arrow-color: #919BBE;
scrollbar-track-color: #FFFFFF;
scrollbar-darkshadow-color: #BBC9EF;
}

Does any of this look wrong?

kind regards
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back