Forum Moderators: not2easy
The site has a background image of a left column with a dropshadow. The graphic is 780px wide and y-repeats. I am attempting to overlay a page header graphic that should be located at the top of the page.
In IE6 the page header graphic aligns correctly at the top of the page but is off approx. 1 px off the left edge.
In Firefox, the page header renders correctly on the left edge but is about 25px below the top of the page.
Here is a the link:
htpp://www.gldwebservices.com/whalingwest/WhalingWestDesign.htm
Here is the CSS:
body {
margin:0;
padding:0;
text-align:center;
background-image:url(images/left_border.jpg);
background-repeat:repeat-y;
background-position: top center;
background-color:#000000
}
#CenterPage {
width:780px;
margin:0px auto;
text-align:left;
padding:0;
}
#header {
/*image*/
position: absolute;
top: 0px;
left; 0px;
background: url(images/page_header.jpg) no-repeat;
/*image size*/
padding-top: 220px;
width: 780px;
/*hiding text*/
overflow: hidden;
/*IE5 hack*/
height: 0px!important;
height /**/: 220px;
}
Here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="whaling_west.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="CenterPage">
<h1 id="header">Whaling West Packaging Corporation</h1>
</div>
</body>
</html>
Any help will be greatly appreciated.
I am certainly no expert in CSS...more of a beginner, but I am able to correctly render your page in FF and IE by adding the tag (margin-top:0px;) to the header ID as follows:
#header {
/*image*/
position: absolute;
top: 0px;
left; 0px;
margin-top:0px;
background: url(images/page_header.jpg) no-repeat;
/*image size*/
padding-top: 220px;
width: 780px;
/*hiding text*/
overflow: hidden;
/*IE5 hack*/
height: 0px!important;
height /**/: 220px;
}
top:0px;
left;10px;
Neither of these are valid arguments in CSS...at least not that I am aware of and the second is formated with two semicolons instead of a colon followed by a semicolon.
please correct me if i am wrong though
..
I added the "margin-top: 0px;" to the header ID. That corrected the top alignment in FF. I also corrected the "left; 0px;" argument to "left: 0px;" and changed from absolute to relative positioning.
In IE6, the header is still 1px off on the left. I changed the background color from black to white to see the alignment better.
I tried margin_left: 1px and left: 1px; These correct the rendering in IE6 but screw it up on FF.
Any suggestions?
Thanks
In Opera 8 the repeated-y left column is not appearing below the header item!? Maybe because I don't have any content there!? I'll add some stuff and see what happens.
Thanks
Any thoughts on correcting this?
Thanks
I have added 1px on the left margin and padding in the body element and it corrects the left alignment of the header with the repeating background in IE6. In FF, Netscape, Mozilla, & Opera, depending whether the browser window is maximized or the horizantal size of the window, the body element background image can be off by 1px.
Any help would be most appreciated.
Thanks
