Consistant cross-browser page margins

pinkshiro

08-16-2005, 03:19 AM

Hey there,

Is it at all possible to get consistant, cross-browser page margins?? :confused: This seems like quite a common problem, but I can't seem to get a 10px top and bottom page margin in WIN IE, netscape, opera and firefox.

I'll introduce my html, body & div#container css first:

html {
height: 100%;
width: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height: 100%;
width: 100%;
background-color: #AAAAAA;
text-align: center;
}

div#container {
margin-left: auto;
margin-right: auto;
width: 757px;
height: 100%;
text-align: left;
padding: 0px 0px 0px 0px;
}

As you can see, html & body have both their margins and padding set to zero, which totally removes all all margins top and bottom, correct? div#container is for centering the content on my page.

Now here's my html, followed by the rest of my css:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.: OpsCentre :.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/testcss.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div class="topbar"></div>
<div id="banner"></div>
<div class="topbar1"><span class="topbar">The Home of Software Solutions for the Passenger Transport Industry</span></div>
<div id="bodybg">
<div class="hundred">

</div>
</div>
<div class="botbar">
<div class="floatleft"><a class="bottom" href="contact.html?name=4">Click here to contact the webmaster</a></div>
<div class="floatright"><span class="topbar">Copyright © 2005, Transport Management Systems Ltd. (NZ)</span></div>
</div>
</div>
</body>
</html>

div.topbar {
margin-top: 10px;
margin-bottom: 0px;
vertical-align: top;
line-height: 17px;
background-image: url(../images/topbar_bg.jpg);
height: 17px;
width: 755px;
font-family: arial, helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-align: right;
text-indent: 10px;
border-style: solid;
border-color: #000000;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
}

div.topbar1 {
margin-top: 0px;
margin-bottom: 0px;
vertical-align: top;
line-height: 17px;
background-image: url(../images/topbar_bg.jpg);
height: 17px;
width: 755px;
font-family: arial, helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-align: right;
text-indent: 10px;
border-style: solid;
border-color: #000000;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
}

div.botbar {
margin-bottom: 0px;
vertical-align: top;
line-height: 17px;
background-image: url(../images/topbar_bg.jpg);
height: 17px;
width: 755px;
font-family: arial, helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-align: left;
text-indent: 5px;
border-style: solid;
border-color: #000000;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px
}

div#banner {
vertical-align: top;
background-image: url(../images/index_04.jpg);
background-repeat: no-repeat;
height: 102px;
width: 755px;
border-style: solid;
border-color: #000000;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 0px;
border-left-width: 1px;
}

div#bodybg {
vertical-align: top;
background-color: #ffffff;
height: 100%;
width: 755px;
margin: 0px 0px 0px 0px;
padding: 10px 0px 10px 0px;
border-style: solid;
border-color: #000000;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 0px;
border-left-width: 1px;
}

div.hundred {
height: 100%;
width: 150px;
background-color: #cccccc;
margin: 0px 10px 0px 10px;
padding: 0px 0px 0px 0px;
}

From the html above, you can see that the first thing sitting inside the container tag is <div class="topbar">, which I have set to have a margin-top="10px"....that seems to take care of the top 10px margin that I want. But nothing I do can consistently make a 10px bottom margin. Here's what I have tried so far:

Adding 'margin-bottom: 10px' to div.botbar (the last div within #container). This working in WINIE, but not netscape, firefox or opera.

Changing the CSS of html: 'margin: 0px 0px 0px 0px;' to 'margin: 0px 0px 10px 0px'. This worked in everything except Opera. I have alternated between 'margin' and 'padding', even trying to set both to '0px 0px 10px 0px' at the same time, but it still wont affect the bottom margin in opera (v. 8.0).

All I want is a nice cross-platform top and bottom 10px margin :(

_Aerospace_Eng_

08-16-2005, 03:33 AM

Can you post a link to your page please?

pinkshiro

08-16-2005, 03:59 AM

here ya go

http://www.opscentre.co.nz/tester.html

The above example is using:

html {
height: 100%;
width: 100%;
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 0px;
}

body {
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 0px;
height: 100%;
width: 100%;
background-color: #AAAAAA;
text-align: center;
}

to set the bottom margin. If you look at it in opera v8.0, the bottom margin doesnt work...all other browsers seem to accept this.

pinkshiro

08-16-2005, 11:31 PM

Surely this is quite a common problem?? someone must have an answer >.< :)

_Aerospace_Eng_

08-17-2005, 02:33 AM

You could try this for the CSS
/* CSS Document */
html, body {
margin:0;
padding:0;
background-color: #AAAAAA;
text-align: center;
height: 100%;
}

div#container {
margin:10px auto 0 auto;
width: 757px;
height: 100%;
text-align: left;
}

a.bottom:link {
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
line-height: 17px;
}
a.bottom:visited {
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
line-height: 17px;
}
a.bottom:hover {

font-weight: normal;
color: #FFFFFF;
text-decoration: underline;
line-height: 17px;
}

div.floatright {
float: right;
}

div.floatleft {
float: left;
}

div.topbar {
line-height: 17px;
background-image: url(../images/topbar_bg.jpg);
height: 17px;
width: 755px;
font-family: arial, helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-align: right;
text-indent: 10px;
border: 1px solid #000000;
}

div.topbar1 {
line-height: 17px;
background-image: url(../images/topbar_bg.jpg);
height: 17px;
width: 755px;
font-family: arial, helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-align: right;
text-indent: 10px;
border: 1px solid #000000;
}

div.botbar {
margin-bottom: 10px;
line-height: 17px;
background-image: url(../images/topbar_bg.jpg);
height: 17px;
width: 755px;
font-family: arial, helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-align: left;
text-indent: 5px;
border:1px solid #000000;
}

span.topbar {
padding-right: 5px;
}

span.botbar {
padding-left: 5px;
}

div#banner {
background-image: url(../images/index_04.jpg);
background-repeat: no-repeat;
height: 102px;
width: 755px;
border:1px solid #000000;
border-top:0;
border-bottom:0;
}

div#bodybg {
background-color: #ffffff;
height: 100%;
width: 755px;
margin: 0px 0px 0px 0px;
padding: 10px 0px 10px 0px;
border:1px solid #000000;
border-top:0;
border-bottom:0;
}

a.leftmenu1 {
background-image: url(../images/navbar_03a.jpg);
text-decoration: none;
border-bottom: 0px solid #000000;
text-indent: 10px;
color: #000000;
width: 150px;
display: block;
}

a.leftmenu1:hover {
background-image: url(../images/navbar_02a.jpg);
width: 150px;
background-repeat: repeat-y;
}

a.leftmenu2 {
background-image: url(../images/navbar_02a.jpg);
background-repeat: repeat-y;
text-decoration: none;
border-bottom: 0px solid #000000;
text-indent: 10px;
color: #000000;
width: 150px;
display: block;
}

a.leftmenu2:hover {
background-image: url(../images/navbar_02a.jpg);
width: 150px;
background-repeat: repeat-y;
}

a.leftmenu3 {
background-image: url(../images/navbar_03a.jpg);
text-decoration: none;
border-bottom: 0px solid #000000;
padding-left: 20px;
color: #005FA9;
}

a.leftmenu3:hover {
background-image: url(../images/navbar_02a.jpg);
}

a.leftmenu4 {
background-image: url(../images/navbar_02a.jpg);
text-decoration: none;
border-bottom: 0px solid #000000;
padding-left: 20px;
color: #005FA9;
}

a.leftmenu4:hover {
background-image: url(../images/navbar_02a.jpg);
}

div.master {
vertical-align: top;
height: 100%;
width: 150px;
padding: 10px 10px 10px 10px;
margin: 0;
border-style: solid;
border-color: #000000;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 5px;
border-left-width: 1px;
}

div.hundred {
height: 100%;
width: 150px;
background-color: #cccccc;
margin: 0px 10px 0px 10px;
padding: 0px 0px 0px 0px;
}

ul {
font-family: arial, helvetica, sans-serif;
font-size: 11px;
color: #000000;
list-style: none;
text-indent: 10px;
background-image: url(../images/navbar_03a.jpg);
background-repeat: repeat-y;
margin: 0px;
padding: 0px;
width: 150px;
height: 100%;
}

ul li {
display: block; /* this gets rid of the gaps */
list-style: none;
margin: 0;
padding-top: 5px;

}

li.nogap {
padding-top: 0px;
}

ul li a {
color: #000000;
text-decoration: none;
display: block;
width: 150px; /* or use height (tricks IE into letting you click anywhere on the block, not just the text */
}

ul li a:hover {
color: #000000;
background-image: url(../images/navbar_02a.jpg);
background-repeat: repeat-y;
width: 150px;
text-decoration: none;
}
.clear {
clear: both;
font-size: 1px;
line-height: 0;
}
and this for the html
<div id="container">
<div class="topbar"></div>
<div id="banner"></div>
<div class="topbar1"><span class="topbar">The Home of Software Solutions for the Passenger Transport Industry</span></div>
<div id="bodybg">
<div class="hundred">

</div>
</div>
<div class="botbar">
<div class="floatleft"><a class="bottom" href="contact.html?name=4">Click here to contact the webmaster</a></div>
<div class="floatright"><span class="topbar">Copyright © 2005, Transport Management Systems Ltd. (NZ)</span></div>
</div>
<div class="clear"> </div>
</div>
That gets you the top 10px space and a bottom 10px space