CSS Forum

**BubbaBob** · 01-20-2008, 09:57 PM

Im trying to learn CSS.

Ive hit a roadblock. Im trying to get the ground work laid for my site, but am having diffifulty getting browsers to see my site the same. In IE, it seems as if a DIV "margin" starts at another margin. However, in Opera, a (top) "margin" starts at the top of the top of the page.

If that makes sence. Great.

If not. Here's the code. If you have opera... take a peek.

http://divingnutz.com/csstest.php

Quote:

<body>
<div id="menu">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Dive Sites</a></li>
<li><a href="#">News</a></li>
<li><a href="#"></a></li>
</ul>
</div>
<div id="header">
<h1>TESTING!!!!</h1>
</div>
</body>

Quote:

body {
background-image: url(header.jpg);
background-position: center top;
background-repeat: no-repeat;
background-color: #7AAEE2;
}
#menu {
width: 900px;
margin: 0 auto;
padding: 0px 0px 0px 0px;
position: static;
}

#menu ul {
margin: 0px 0px;
padding: 0px 0px;
list-style: none;
line-height: normal;
}

#menu li {
display: inline;
margin: 0px;
padding: 0px;
}

#menu a {
display: block;
float: left;
width: 149px;
height: 53px;
padding: 147.5px 0 0 0;
text-decoration: none;
text-align: center;
font-size: 28px;
color: #FFFFFF;
}
#menu a:hover {
color: #CCCCCC;
}

#menu .active a {
color: #E80732;
}
#header {
margin: 200px auto;
width: 900px;
background-color: #FFFFFF;

}

**Arwen** · 01-21-2008, 01:28 AM

I'm not 100% certain but I think Opera is a browser that automatically adds like an 8px margin or padding if you don't define it in your css stylesheet. I noticed that on the #menu a that you have padding specified but not the margins. Try defining the margin property and see what happens.

Arwen

**LadynRed** · 01-21-2008, 11:54 AM

Always, always zero out the default margins and padding in your CSS, this will level the playing field. You can do it like this:

* {margin: 0; padding: 0;}

Then you add margins and padding back in where YOU want them.

**BubbaBob** · 01-21-2008, 01:26 PM

Ok, defining the margins cleared up one problem I was having. However, Opera still starts the top margin at the top of the page, and IE starts below the other DIV. (or so it seems, but like I said im new at this.)

I Attatched a screen shot from Opera. Just a tad different from IE

Thanks Yall

**chrishirst** · 01-21-2008, 01:55 PM

remove the position:static from #menu

**BubbaBob** · 01-21-2008, 02:32 PM

Quote:

Originally Posted by chrishirst

remove the position:static from #menu

DOH!

Thank You! That did the trick.

**mediarefined** · 01-24-2008, 01:11 AM

float nearly everything is the way