Forum Moderators: not2easy

Message Too Old, No Replies

Margins/padding IE, Mozilla, Netscape

Something different to do?

         

renvac

2:25 pm on Mar 20, 2004 (gmt 0)

10+ Year Member



Hi again - My problem this time are the margins - I use IE but when I check on Mozilla and Netscape the margins are off - Is there a special way to set the margins so they look the same in all? This is one of the ones that Im having a problem with but it seems I always have a problem getting them to look the same in the different browsers? Im still new at this so any help would be appreciated! Can anyone see what Im doing wrong?

CSS

body{
background-attachment: fixed;
background-image: url(bgoldback.gif) }
margin: 0;
padding: 0;
height: 100%;
}

a:link {color: #fff;}
a:visited {color: #fff;}
a:hover {background-color: #fff; color: #000; }
a:active {text-decoration: none; }

#top
{
position: absolute;
top: 20px;
left: 0;
right: 0;
width: 100%;
padding: 5px 0;
height: 80px;
background-color: #000;
color: #dccf5c;
border: 2px solid #dccf5c;
z-index: 10;
}

#content {
position: absolute;
background-color : #000;
left : 225px;
top : 120px;
right: 45px;
height: 100%;
padding: 10px 25px 5px;
z-index: 20;
}
#top img{
position: absolute;
top: 10px;
left: 230px;
}
#leftnav {
position : absolute;
top: 0;
left: 0;
width : 180px;
height : 100%;
border-right : 3px solid #dccf5c;
padding: 35px 0 0 35px;
background-color : #000;
z-index: 30;
}
#leftnav img
{
position: absolute;
top: 380px;
left: 25px;
}
h1
{
font: bold 1.5em garamond,helvetica,sans-serif;
color: #fff;
margin-left: 12px;
}
h2
{
font: bold 1.2em garamond,helvetica,sans-serif;
color: #fff;
margin-left: 120px;
}

p
{font:bold 1em/140% garamond,helvetica,sans-serif;
color: #dccf5c;
}
.small
{
font:bold 0.80em/140% garamond,helvetica,sans-serif;
color: white;
text-align: center;
}

ul{
margin: 0;

list-style-type: inline;
}
ul li{
color: #fff;
background-color: transparent;}

ul li a{
color: #fff;
text-decoration : underline;
}

ul li a:hover{
color: black;
background-color: white;
text-decoration : none;
}

HTML:

<div id="content">Blah blah</div>
<div id="leftnav">blah blah</div>
<div id="top>blah blah</div>

Content has space left, top and right to show background, when viewed in Netscape or Mozilla there is hardly any space on the left side - the left nav and content almost meet. The spaces show pretty evenly on IE.
What am I doing wrong or what do I have to do to get them alike? Please any HELP!

Oh, the other thing is when window is shrunk, my left nav doesnt fill the whole length of that side? Is that suppose to be that way? Or did I do something wrong there too?

Thanks
RenVac

Rambo Tribble

3:06 pm on Mar 20, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



To get reasonably consistent cross-browser results you need to set both the margins and padding. Even then, Moz and IE calculate their margins differently. I'll let you guess which one does is according to spec (hint: it isn't IE). The work around is found in "Eric Meyer on CSS", ISBN 0-7357-1245-X

renvac

12:29 am on Mar 21, 2004 (gmt 0)

10+ Year Member



Thanks for the response, not sure it helped but I did check out Eric Meyer's site -
RenVac

bumpaw

10:57 pm on Mar 21, 2004 (gmt 0)

10+ Year Member



Renvac, Have you checked your DOCTYPE? It was something that I missed for a while till someone posted this reference CSS Enhancements in Internet Explorer 6 [pchousekeeping.com]

<added>

Renvac,
I notified Brett by sticky of my error, and here is an attempt to get the link right.
CSS Enhancements in Internet Explorer 6 [msdn.microsoft.com] It's a Microsoft page on DOCTYPE.

</added>

[edited by: Brett_Tabke at 12:46 pm (utc) on Mar. 22, 2004]

renvac

3:11 am on Mar 22, 2004 (gmt 0)

10+ Year Member



Bumpaw-
This is the doctype that I have been using -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

And the link that you posted - was that the right one?

Thanks
RenVac

renvac

5:44 pm on Mar 22, 2004 (gmt 0)

10+ Year Member



Bumpaw - thanks
I did get the right url from your new post! I pretty much got my codes fixed - and it validates now too.
I kind of had the margins and paddings messed up, once I fixed them they look the same now in the browsers!
Renee