CSS Forum

**silverglade** · 03-26-2009, 05:32 AM

hi, i have a simple page im doing for my new homepage, its messed up in firefox. the #wrapper div pushes way down to the 200px height of the #navigation_buttons div. i have no idea why. any help greatly appreciated.
derek.
here is the page i am talking about.

http://derekvanderven.com/newfront/home.html

here is my css

Code:

@charset "utf-8";
/* CSS Document */


 body {
 margin: 0px;
 padding: 0px;
 }

#wrapper {
margin: 0 auto 0 auto;
width: 950px;
height: 700px;
background-image: url( slices_off/header_footer.jpg);
background-repeat:no-repeat;
 
}

 
 
 #navigation_buttons {
 margin: 200px auto 0 auto;
 width: 950px;
 height: 88px;
 }

and here is my html

Code:

<!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>Derek Van Derven Website Design</title>


 
<link href="newfront.css" rel="stylesheet" type="text/css"/>
<title>Derek Van Derven Web Design</title>
</head>

<body>
     <div id="wrapper">
     
     <div id="navigation_buttons"><img src="slices_off/home_off.jpg"/>     </div>
</div> 
     <!--end wrapper-->

</body>
</html>

**simster** · 05:56 AM

try this css

Code:

@charset "utf-8";
/* CSS Document */


 body {
 margin: 0px;
 padding: 0px;
 }

#wrapper {
margin: 0 auto;
width: 950px;
height: 700px;
background-image: url( images/header_footer.jpg);
background-repeat:no-repeat;
padding-top:186px;
}

My idea to make the nav to use less html is this: each nav button is a <a href=""> tag and in css you give all #navigation_buttons a (a set height and width; and each specific one an image and a hover image)

rough code for my idea of the nav

Code:

html:
<div id="navigation_buttons">
<a href="" id="home"> </a> 
etc.
</div>


css:
#navigation_buttons a 
{
height:???px;
Width:???px;
}

#navigation_buttons a#home
{
background-image:???;
}
#navigation_buttons a#home:hover
{
background-image:???;
}

**silverglade** · 03-26-2009, 07:50 AM

youre awesome simster! i spent all night trying to figure out that problem and i think my problem was i wasnt thinking in layers. thanks very much for fixing that and showing me the less coded version of rollovers. derek