Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    85
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Consistant cross-browser page margins

    Hey there,

    Is it at all possible to get consistant, cross-browser page margins?? 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:

    Code:
    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:

    Code:
    <!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">	
    					<!--<ul>
    						<li class="nogap"><a href="#">Home</a></li>
    						<li><a href="#">Products</a></li>
    						<li><a href="#">Packages</a></li>
    					</ul>-->
    			</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>
    Code:
    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

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Can you post a link to your page please?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    85
    Thanks
    3
    Thanked 0 Times in 0 Posts
    here ya go

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

    The above example is using:

    Code:
    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.

  • #4
    New Coder
    Join Date
    Mar 2005
    Posts
    85
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Surely this is quite a common problem?? someone must have an answer >.<

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You could try this for the CSS
    Code:
    /* 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
    Code:
    	<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">	
    					<!--<ul>
    						<li class="nogap"><a href="#">Home</a></li>
    						<li><a href="#">Products</a></li>
    						<li><a href="#">Packages</a></li>
    					</ul>-->
    			</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 &copy; 2005, Transport Management Systems Ltd. (NZ)</span></div>	
    		</div>
    		<div class="clear">&nbsp;</div>
    	</div>
    That gets you the top 10px space and a bottom 10px space
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •