PDA

View Full Version : browsers adding space between my vertical navigation buttons


silverglade
04-15-2009, 10:40 PM
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

@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

<!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>






<script type="text/JavaScript" language="JavaScript">

<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->

</script>
</head>


<body link="#333333" alink="#333333" vlink="#333333" onload="MM_preloadImages('images/navigation/home_on.jpg','images/navigation/about_on.jpg','images/navigation/menus_on.jpg','images/navigation/contact_on.jpg','images/navigation/locations_on.jpg')">


<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><a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/navigation/about_on.jpg',1)" href="about.html"><img id="Image2" border="0" name="Image2" alt="about" src="http://www.cafevanilleboston.com/images/navigation/about_off.jpg"/></a><a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/navigation/menus_on.jpg',1)" href="menus/index.html">

<img id="Image3" border="0" name="Image3" alt="menus" src="http://www.cafevanilleboston.com/images/navigation/menus_off.jpg"/></a>
<a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/navigation/contact_on.jpg',1)" href="contact.html">

<img id="Image4" border="0" name="Image4" alt="contact" src="http://www.cafevanilleboston.com/images/navigation/contact_off.jpg"/></a>
<a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/navigation/locations_on.jpg',1)" href="/locations.html"></a><a href="locations.html"><img src="images/navigation/locations_off.jpg" width="143" height="35" border="0" /></a><br />
<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>

pete
04-15-2009, 11:10 PM
try adding a new CSS rule:

a img {
border:none!important;
}

silverglade
04-16-2009, 12:06 AM
thank you. but it the nav is still pushing the images on the left down. any more help greatly appreciated. thanks. derek

silverglade
04-16-2009, 04:09 AM
ok after straining my brain i found a weird fix. i backspaced all the navigation code into one long stream so that there were no spaces in between the code lines. when i previewed it in ie6 and ff, the spaces between the nav buttons were gone. notice the packed navigation code in one block below. here is the new page done.

http://derekvanderven.com/boston_coffee/index.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">
<!--[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" border="0" /></a><a href="index.html"><img src="images/navigation/home_on.jpg" alt="this is alt" 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/index.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" border="0" /></div>

<!---end navigation-->

<div id="middle"></div>



<div id="right">

<div id="welcome"><img src="index_files/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>