PDA

View Full Version : IE Creating gaps in navigator bar



quickstar
Apr 28th, 2009, 02:26 PM
Hello

IE is creating a gap between by navigation bar images. FF, Safari and Chrome all displaying fine.

as can be seen here (http://phrydrentals.co.uk)

It happened after I fixed the problem with IE not centering the web pages properly, by making sure the doctype was included in the html.

It was never appearing properly in IE, but at least the spaces werent there.


Please could you advise how to fix.

html here


<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">

<div id="Table_01">

<div id="header"></div>
<div id="nav-bar"></div>
<div id="navi"><table width="304" height="67" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="65" valign="top"><div align="center"><a href="index.html"><img src="images/home.png" alt="Home" width="52" height="76"/></a></div></td>
<td width="68" valign="top"><a href="fleet.html">
<img src="images/fleet.png" alt="Fleet" width="52" height="76"/></a></td>
<td width="61" valign="top"><a href="booking.html"><img src="booking.png" alt="Booking" width="52" height="76"/></a></td>
<td width="65" valign="top"><a href="about.html"><img src="images/About.png" alt="about" width="52" height="76"/></a></td>
</tr>
</table>
</div>
<div id="nav-bar004">
<img src="images/nav_bar-04.png" width="218" height="76" alt=""/> </div>
<div id="logo"><img src="images/logo.png" alt="logo" width="218" height="223"/></div>
<div id="slogan"><img src="images/slogan.png"alt="A unique car hire company"/></div>
<div id="image-right"><img src="images/boxster.png" alt="car"/></div>
CSS

/* ########### Body Styles ############ */
h1

{
font-family: Arial, Helvetica, sans-serif;
color:#FF9900;
font-size:14px;
margin-left:8px;
margin-top: 5px;
}
p {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color: #999999;
}
img
{
border:none;
padding-right: padding-right;
}
ul {
font-family:"Lucida Grande";
color:#3366FF;
font-size: 12px;
}
h3
{
color:#6699FF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}

h4
{
color:#FFCC99;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-style: oblique;
}
H5 {
font-size:40px;
color: black;
font-family:Arial, Helvetica, sans-serif;}
/* ########### Container ############ */

#Table_01 {
position:relative;
left:0px;
top:0px;
width:800px;
height:847px;
margin-left : auto ;
margin-right : auto ;
}
/* ########### Header ############ */
#header {
position:absolute;
left:0px;
top:0px;
width:800px;
height:88px;
}
/* ########### Navigation Bar ############ */
#nav-bar {
position:absolute;
left:0px;
top:88px;
width:282px;
height:76px;
background-image: url(images/nav_bar.png);
}

#nav {
position:absolute;
left:322px;
top:88px;
width:257px;
height:76px;
}

#nav-bar004 {
position:absolute;
left:579px;
top:88px;
width:218px;
height:76px;
}

#navi{
position: absolute;
top: 88px;
height:1px;
background-image: url(butt.png);
width: 297px;
left: 282px;
margin: 0;
}

#navi a {
top:92px;
height:76px;
background-image: url(images/nav_gradient.jpg);
display: block;
background-repeat: repeat-x;
margin: 0;
}

#navi a:hover {
height:76px;
background-image: url(grad.png);}

/* ########### Main Content ############ */
#Table_02 {
position:absolute;
left:0px;
top:200px;
width:796px;
height:auto;
}

#Slice {
position:absolute;
left:0px;
top:204px;
width:211px;
height:37px;
}

thanks!

Rowsdower!
Apr 28th, 2009, 03:02 PM
How about this:
#navi table {background-image:url(images/nav_gradient.jpg);}

This is a band-aid though. What you really need to do is validate your code:
http://validator.w3.org/check?uri=http%3A%2F%2Fphrydrentals.co.uk%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&ss=1&verbose=1

Currently there are 15 errors that need mending. Once those are addressed IE might fall in line on its own...

abduraooft
Apr 28th, 2009, 03:16 PM
I'd recommend you to check why tables for layout is stupid (http://www.hotdesign.com/seybold/) and how to get rid of divitis (http://csscreator.com/?q=divitis).

voxecho
Apr 28th, 2009, 03:22 PM
QuickStar -

no matter what people say about tables vs div... it is irrelevent to the question you posted, so i will answer your question.

IE reads line breaks as a "space" if between two elements ... this is annoying when the two elements are:


<td>
<img/>
</td>


As you end up with a small gap. I've been aware of this for 10 years and it's never been fixed.

simple solution - break your lines INSIDE the tags, and make the ><'s always touch...



<td
width="68"
valign="top"
><a
href="fleet.html"
><img
src="images/fleet.png"
alt="Fleet"
width="52"
height="76"
/></a></td>

quickstar
Apr 28th, 2009, 03:37 PM
abdu.. if i could have done a completely tableless design, i would have, ive just been learning css for about 3 weeks, gimme a break.. theres no need to be pedantic especially when you have failed to offer a solution.

voxecho.. thanks for replying. the first reply fixed it however.. will take note of the line breaking though for future projects.


How about this:
#navi table {background-image:url(images/nav_gradient.jpg);}


thanks! been looking at this for days and that fixed it. now on to the validation!:thumbsup:

SB65
Apr 28th, 2009, 03:42 PM
Just seen you have a solution :), but I also noticed you have the empty <li> tags that are contributing as well:


<div class="urbangreymenu">

<h3 class="headerbar"><a href="fleet.html">Sports</a></h3>
<ul class="submenu">
<li><a href="car-rental-ford-mustang.html">Ford Mustang</a></li>
<li><a href="car-rental-chevrolet-camaro.html">Chevrolet Camaro</a></li>
<li></li>
<li></li>
</ul>

<h3 class="headerbar"><a href="fleet.html#luxury">Luxury</a></h3>
<ul class="submenu">
<li><a href="car-rental-cadillac-deville.html" >Cadillac Deville</a></li>
<li><a href="car-rental-cadillac-eldorado.html">Cadillac Eldorado</a></li>
<li></li>
</ul>

<h3 class="headerbar"><a href="fleet.html#suv">SUV</a></h3>
<ul class="submenu">
<li><a href="car-rental-lincoln-navigator.html" >Lincoln Navigator</a></li>
<li><a href="car-rental-cadillac-escalade.html">Cadillac Escalade</a></li>
<li><a href="car-rental-chevrolet-astro.html">Chevrolet Astrovan</a></li>
<li></li>
<li></li>
</ul>

</div>

I also suspect the default margin-top for <h3> isn't quite the same in FF and IE and that's causing them to look slightly different as well. You can get around this by setting the value explicitly rather than relying on the default the browser uses - usually a good idea to do this anyway.