Web Hosting Talk






PDA

View Full Version : 9px browser discrepancyv

djcubez
06-12-2008, 10:43 AM
I'm having a problem with my layout where there seems to be a padding-top of 9px that firefox reads, it's entirely messed up. I spent all day looking over my code yesterday and could not find out why the image in the div was being pushed down so low, it makes no effing sense and i'm at a breaking point on this.

You can see it here: http://www.thedjcubez.com/work/knuckleheads/
Here's a side-by-side comparison: http://www.thedjcubez.com/work/knuckleheads/Screenshot_SBS.jpg

index.html
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Knuckleheads Tobacco</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="border">
<div id="header">
<div id="header_top"><img src="images/header/top.jpg" alt=""></div>
<div id="navigation"><img src="images/header/left.jpg" alt=""><img src="images/navigation/home_reg.jpg" alt=""><img src="images/navigation/products_reg.jpg" alt=""><img src="images/navigation/stores_reg.jpg" alt=""><img src="images/header/mid.jpg" alt=""><img src="images/navigation/employees_reg.jpg" alt=""><img src="images/navigation/policies_reg.jpg" alt=""><img src="images/header/right.jpg" alt=""></div>
<div id="header_bottom"><img src="images/header/bottom.jpg" alt=""></div>
</div>
<div id="container">
<img src="images/space_bar.gif" alt="spacer" />
<div id="content">
<p>Hello and welcome to www.knuckleheadstobacco.com!!! We are glad to debut our much anticipated website. After a lot of time and effort it is finally here for your viewing pleasure.</p>
<p>Established in 1995 Knuckleheads has always strived to stay ahead of the competition and provide Madison and Milwaukee with the most complete tobacco and accessories stores in Wisconsin. Come on in and check out all the new and exciting products we have in stock and will continue to develop in the future.</p>
<p>Thanks for your patronage!!!</p>
</div>
</div>
</div>
<img src="images/footer.jpg" alt="footer" />
</div>
</body>
</html>

style.css
/* Defaults */
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
text-align: center;
background-color: black;
}
img {
border: 0;
}

/* IDS */
#border {
width: 800px;
background-image: url("images/background_border.gif");
background-repeat: repeat-y;
}
#container {
width: 700px;
text-align: left;
margin-left : 50px;
margin-right: 50px;
}
#content {
padding: 15px;
font-size: 11px;
font-family: arial, sans-serif;
}
#header {
width: 800px;
height: 200px;
}
#header_bottom {
width: 800px;
height: 6px;
}
#header_top {
width: 800px;
height: 172px;
}
#wrapper {
width: 800px;
margin-left: auto;
margin-right: auto;
}

/* Navigation */
#navigation {
width: 800px;
height: 22px;

}
the_pm
06-12-2008, 10:48 AM
This might sound weird, but try adding:

#header div { float:left }

and add clear:both to #container

The fact that each item within the header has an explicit width will cause them to stack even though they're floated, and this should erase any unwarranted padding, which is usually caused by the browser making room for text descenders whenever it sees any inline objects within a div - though I always thought setting explcit heights solved this.

But give it a try and see if it works :)
djcubez
06-12-2008, 10:51 AM
This might sound weird, but try adding:

#header div { float:left }

and add clear:both to #container

The fact that each item within the header has an explicit width will cause them to stack even though they're floated, and this should erase any unwarranted padding, which is usually caused by the browser making room for text descenders whenever it sees any inline objects within a div - though I always thought setting explcit heights solved this.

But give it a try and see if it works :)

Thanks for the suggestion but still no bananas :/
the_pm
06-12-2008, 10:57 AM
What if you set the top and bottom images as backgrounds (nest your divs two levels, instead of piling them), apply upper and lower padding to #navigation and removed all of your ornamental imagery from your HTML? So you'd have something like this:

#nav1 { background:url(images/header/top.jpg) top left no-repeat }
#nav2 { background:url(images/header/bottom.jpg) bottom left no-repeat ; height:22px ; padding:172px 0 6px 0 ; width:800px }

<div id="nav1">
<id="nav2">
Navigation goes here
</div>
</div>That's a rough idea, but it should work, if not out-of-the-box, certainly with a tweak or two (if you share the output for additional tweaking).
djcubez
06-12-2008, 11:02 AM
I added this to header_bottom {
position: absolute;
border: 1px solid red;
background-color: blue;
}

to show what's happening. It's weird, the image seems to not even be inside the div, it's being pushed out. It's not like it's too big...
djcubez
06-12-2008, 11:06 AM
What if you set the top and bottom images as backgrounds (nest your divs two levels, instead of piling them), apply upper and lower padding to #navigation and removed all of your ornamental imagery from your HTML? So you'd have something like this:

#nav1 { background:url(images/header/top.jpg) top left no-repeat }
#nav2 { background:url(images/header/bottom.jpg) bottom left no-repeat ; height:22px ; padding:172px 0 6px 0 ; width:800px }

<div id="nav1">
<id="nav2">
Navigation goes here
</div>
</div>That's a rough idea, but it should work, if not out-of-the-box, certainly with a tweak or two (if you share the output for additional tweaking).
Decent idea, I'll give it a go.
djcubez
06-12-2008, 11:13 AM
PM you're friggin brilliant. It didn't work exactly but your concept was easy enough to tweak :D
the_pm
06-12-2008, 11:16 AM
Cool. Glad that worked for you :)