hi, im having a problem of firefox and ie6 (especially ie6) adding space between my vertical navigation buttons, causing the left images to go further down than the rest of the page. any help greatly appreciated. derek
here is the page im talking about
http://derekvanderven.com/boston_coffee/index.html
here is the css
Code:
@charset "utf-8";
/* CSS Document */
body {
font-family: times;
background-color:#D0B8A0;
margin:0;
padding:0;
}
#wrapper {
margin: 50px auto 50px auto;
width: 580px;
}
#navigation {
float: left;
width: 143px;
}
#middle {
float: left;
width: 151px;
height: 470px;
background-image: url(images/img_middle.jpg);
background-repeat: no-repeat;
}
#right {
float: left;
margin: 0 -3px 0 auto; /****fix for IE6 repeating text in underdiv bug*/
width: 280px;
height: 470px;
background-image: url(images/img_right_middle.jpg);
background-repeat: no-repeat;
}
#welcome {
margin: 175px auto 0 auto;
clear: both;
width: 280px;
color: #ffffff;
}
#welcome p {
padding: 10px;
}
#welcome img {
padding: 10px;
}
#award {
margin: 0 auto 0 55px;
float: left;
width: 153px;
height: 72px;
background-image: url(images/best_boston.jpg);
background-repeat: no-repeat;
}
#footer {
float: left
clear: both;
width: 580px;
}
#footer a:link ,#footer a:hover, #footer a:visited{
color: #664A35;
}
.blue {
color: #A7D3DB;
}
/***********************about page****************************/
#about_middle {
float: left;
width: 151px;
height: 470px;
background-image: url(images/img_middle_about.jpg);
background-repeat: no-repeat;
}
#about_welcome {
margin: 160px auto 0 auto;
clear: both;
width: 280px;
color:#E2DCD7;
font-family:arial,verdana,sans-serif;
font-size:9pt;
font-weight:bold;
text-decoration:none;
}
#about_welcome a:link, a:hover, a:visited {
color: #ADDCE5;
text-decoration: none;
}
#about_welcome p {
padding: 10px;
}
#about_welcome img {
padding: 10px;
}
/*************************menus**************/
#menu_middle {
float: left;
width: 151px;
height: 470px;
background-image: url(images/img_middle_menus.jpg);
background-repeat: no-repeat;
}
/************************contact*********************/
#contact_middle {
float: left;
width: 151px;
height: 470px;
background-image: url(images/img_middle_contact.jpg);
background-repeat: no-repeat;
}
#contact_welcome {
width: 280px;
margin-top: 160px;
color: white;
}
#form_wrapper{
width: 200px;
margin-left: 40px;
}
/************************location*********************/
#location_middle {
float: left;
width: 151px;
height: 470px;
background-image: url(images/img_middle_locations.jpg);
background-repeat: no-repeat;
}
and here is the 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" />
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]-->
<link href="boston.css" rel="stylesheet" type="text/css"/>
<title>Boston Coffee Home</title>
</head>
<body>
<div id="wrapper">
<div id="navigation">
<a href="index.html"><img src="images/logo_top.jpg" width="143" height="95" /></a>
<a href="index.html"><img src="images/navigation/home_on.jpg" width="143" height="38" border="0" />
<a href="about.html"><img src="images/navigation/about_off.jpg" width="143" height="36" border="0" /><a href="menus.html"><img src="images/navigation/menus_off.jpg" width="143" height="35" border="0" />
<a href="contact.html"><img src="images/navigation/contact_off.jpg" width="143" height="34" border="0" />
<a href="locations.html"><img src="images/navigation/locations_off.jpg" width="143" height="35" border="0" /></a>
<img src="images/img_left_bottom.jpg" width="143" height="197" /></div>
<!---end navigation-->
<div id="middle"></div>
<div id="right">
<div id="welcome">
<img src="images/cv_welcome.gif" width="70" height="23" /><br/>
<p><span class="blue">F</span>resh, delectable French pastries are thefoundation of Boston Coffee's success.Stop in one of our three locations in the Boston area for classic Parisian sandwiches, coffees, and desserts - we offer a slice of France in a slice of cake.</p>
</div>
<!--end div welcome-->
<div id="award"></div>
</div> <!--end of right div-->
<div id="footer">© 2009 Boston Coffee
/Site Design:
<a target="_blank" href="http://derekvanderven.com">Derek Van Derven Web Design</a></div>
</div><!--end wrapper-->
</body>
</html>
Last edited by silverglade; 04-15-2009 at 10:23 PM..
|
