SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    $postcount++; koomann's Avatar
    Join Date
    Feb 2003
    Location
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Looks fine in Mozilla, not IE and Opera

    This is the page. I'm new to CSS, and it's my first outting with the stuff. If you're using Mozilla, it should look fine. In IE, the image isn't aligned properly (1 pixel difference between it and the background), and the links aren't padded evenly. In Opera, it looks fine, except for the same image problem in IE.

    Here's the code:
    Code:
    <html>
    
    <head>
    	<style type="text/css">
    	<!--
    
    	body {
    			margin: 0px 0px 0px 0px;
    			padding: 0px 0px 0px 0px;
    			background-color: #EAEAEA;
    		 }
    
    	div.top {
    
    			background-color: #A9AFB5;
    			width: 100%;
    			height: 25px
    
    			}
    
    	div.bottom {
    			background-color: #A9AFB5;
    			width: 100%;
    			height:9px;
    			border-bottom-width: 1px;
    			border-top-width: 0px;
    			border-left-width: 0px;
    			border-right-width: 0px;
    			border-style: solid;
    			border-color: #000000;
    
    
    
    			}
    
    
    	div.header {
    			border-style: solid;
    			border-bottom-width: 1px;
    			border-top-width: 1px;
    			border-left-width: 0px;
    			border-right-width: 0px;
    			border-color: #000000;
    			background-image: url("http://www.cerebralserenity.com/v2/test/images/header_bg.gif");
    			width: 100%;
    			height: 61px;
    				}
    
    	.logo {
    			position: absolute;
    			top: 26px;
    			left: 48px;
    			border-style: solid;
    			border-bottom-width: 1px;
    			border-top-width: 0px;
    			border-left-width: 0px;
    			border-right-width: 0px;
    			border-color: #000000;
    		}
    
    
    	.nav_bg {
    			position: absolute;
    			top:58px;
    
    			right: 5%;
    			margin: 1px 1px 1px 1px;
    
    
    		}
    
    
    		a.nav {
    
    			padding-left: 30px;
    			padding-top: 5.5px;
    			padding-right: 30px;
    			padding-bottom: 5.5px;
    			border-style: solid;
    			border-width: 1px;
    			border-color: #C2C3C3;
    			background-color: #5A5D61;
    			font-family: verdana;
    			font-size: 10px;
    			font-weight: bold;
    			color: #E0E3E6;
    			text-decoration: none;
    		}
    
    		a.nav:hover {
    
    			padding-left: 30px;
    			padding-top: 5.5px;
    			padding-right: 30px;
    			padding-bottom: 5.5px;
    			border-style: solid;
    			border-width: 1px;
    			border-color: #FFFFFF;
    			background-color: #696E75;
    			font-family: verdana;
    			font-size: 10px;
    			font-weight: bold;
    			color: #E0E3E6;
    			text-decoration: none;
    			}
    
    
    		.content {
    			width: 100%;
    			height: 70%;
    			border-style: solid;
    			border-color: #000000;
    			border-top-width: 1px;
    			border-bottom-width: 1px;
    			border-left-width: 0px;
    			border-right-width: 0px;
    			background-color: #CECECE;
    
    		}
    
    		.content_text {
    			font-family: tahoma;
    			font-size: 11px;
    			padding-left: .5cm;
    			padding-right: .5cm;
    			padding-top: .5cm;
    			padding-bottom: .5cm;
    		}
    
    
    
    		-->
    	</style>
    
    </head>
    
    
    
    <body>
    
    <div class="top">&nbsp</div>
    
    <div class="header">
    
    <span class="nav_bg">
    
    		<a class="nav" href="#">Hi. Linkage</a>
    		<a class="nav" href="#">Ello. Moreso</a>
    		<a class="nav" href="#">I Love Cheese</a>
    
    </span>
    
    
    <span class="logo"><img src="images/logo.jpg" width="233" height="61"></span>
    
    
    
    </div>
    <div class="bottom">&nbsp</div><br/>
    
    <div class="content"><font class="content_text">Filler, filler, and some more filler.</font></div>
    
    </body>
    
    </html>
    [--Wings--]

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,286
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to account for the broken box model as you are not using a doctype and working in quirks mode. (See FAQ for a full explanation on the broken box model.)

    Borders (and padding) must be accounted for when you alse set width and heights. As its explained fully in the FAQ I'll just give you the solution.

    The links are not showing equal padding as ie needs position relative on the anchor to show all the padding.

    Add this code yo the end of your stylesheet (or after the initial declarations).

    Code:
    * html div.header {height:63px}/* box model hack assuming quirks mode*/
    a.nav {position:relative;}/*makes padding show on inline elements*/
    Hope that helps.

    Paul


Bookmarks

Posting Permissions

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