Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
browsers adding space between my vertical navigation buttons
Old 04-15-2009, 06:37 PM browsers adding space between my vertical navigation buttons
Webmaster Talker

Posts: 611
Trades: 0
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..
silverglade is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 04-16-2009, 12:08 AM Re: browsers adding space between my vertical navigation buttons
Webmaster Talker

Posts: 611
Trades: 0
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

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" 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>
silverglade is offline
Reply With Quote
View Public Profile
 
Old 04-16-2009, 03:21 PM Re: browsers adding space between my vertical navigation buttons
LadynRed's Avatar
Defies a Status

Posts: 10,017
Location: Tennessee
Trades: 0
That's not weird, it's typical of IE to have to remove the spaces between the tags like that.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to browsers adding space between my vertical navigation buttons
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.25922 seconds with 12 queries