PDA

View Full Version : IE7 bug causing a gap after an image



jaimebien
Jan 19th, 2009, 05:36 PM
The navigation bar of my website http://grobanwire.com/ becomes buggy in IE7. As Firefox, IE6 and Chrome, the little image (http://grobanwire.com/wp-content/themes/urban-life/images/nav/nav-top.png) just above at the top of the navigation bar which is above the link for "news" sits nicely without any gaps. However, in IE7, a gap will appear just under the image. I still can't pinpoint the problem, though I suspect it's to do with my styling for the listing of the links for the navigation bar.

Any help with be greatly appreciated. Thanks!

Excavator
Jan 19th, 2009, 05:45 PM
Hello jaimebien,
Does it work better like this? -
<div id="sidebar">
<div id="nav">
<img src="http://grobanwire.com/wp-content/themes/urban-life/images/nav/nav-top.png" alt="">
<ul>
<li><a href="http://grobanwire.com/" class="imglink"><img src="http://grobanwire.com/wp-content/themes/urban-life/images/nav/news.png" alt="news"></a></li>
<li><a href="http://grobanwire.com/josh/" class="imglink"><img src="http://grobanwire.com/wp-content/themes/urban-life/images/nav/josh.png" alt="josh"></a></li>
<li><a href="http://grobanwire.com/lyrics-and-translations/" class="imglink"><img src="http://grobanwire.com/wp-content/themes/urban-life/images/nav/lyrics.png" alt="lyrics and translations"></a></li>
<li><a href="http://gallery.grobanwire.com/" class="imglink"><img src="http://grobanwire.com/wp-content/themes/urban-life/images/nav/gallery.png" alt="gallery"></a></li>
<li><a href="http://grobanwire.com/grobanites/" class="imglink" title="fan area"><img src="http://grobanwire.com/wp-content/themes/urban-life/images/nav/grobanites.png" alt="grobanites"></a></li>
<li><a href="http://grobanwire.com/links/" class="imglink"><img src="http://grobanwire.com/wp-content/themes/urban-life/images/nav/links.png" alt="links"></a></li>
<li><a href="http://grobanwire.com/about/" class="imglink"><img src="http://grobanwire.com/wp-content/themes/urban-life/images/nav/about.png" alt="about"></a></li>
</ul>
<img src="http://grobanwire.com/wp-content/themes/urban-life/images/nav/nav-bottom.png" alt="">
</div>

jaimebien
Jan 19th, 2009, 06:22 PM
Excavator, thank you for your reply. I think I should explain why I coded the navigation bar as such:


<img src="http://grobanwire.com/wp-content/themes/urban-life/images/nav/nav-top.png" alt="" />
<div id="nav">
<ul>
<li><a href="http://grobanwire.com/" class="imglink"><img src="http://grobanwire.com/wp-content/themes/urban-life/images/nav/news.png" alt="news" /></a></li>
<li><a href="http://grobanwire.com/josh/" class="imglink"><img src="http://grobanwire.com/wp-content/themes/urban-life/images/nav/josh.png" alt="josh" /></a></li>
<li><a href="http://grobanwire.com/lyrics-and-translations/" class="imglink"><img src="http://grobanwire.com/wp-content/themes/urban-life/images/nav/lyrics.png" alt="lyrics and translations" /></a></li>

<li><a href="http://gallery.grobanwire.com/" class="imglink"><img src="http://grobanwire.com/wp-content/themes/urban-life/images/nav/gallery.png" alt="gallery" /></a></li>
<li><a href="http://grobanwire.com/grobanites/" class="imglink" title="fan area"><img src="http://grobanwire.com/wp-content/themes/urban-life/images/nav/grobanites.png" alt="grobanites" /></a></li>
<li><a href="http://grobanwire.com/links/" class="imglink"><img src="http://grobanwire.com/wp-content/themes/urban-life/images/nav/links.png" alt="links" /></a></li>
<li><a href="http://grobanwire.com/about/" class="imglink"><img src="http://grobanwire.com/wp-content/themes/urban-life/images/nav/about.png" alt="about" /></a></li>
</ul>
</div>
<img src="http://grobanwire.com/wp-content/themes/urban-life/images/nav/nav-bottom.png" alt="" />


As you see, I put the png image (which has a transparent background and is just there for looks and serves no real function other than to "cap" off the navigator bar) outside the div whose id is "nav". That is because within that, there is a repeating image (http://grobanwire.com/wp-content/themes/urban-life/images/nav/nav-body.png).

(When I designed the code initially, I'd envisaged that I would need to put more navigation links and I thought that would be easier. Well, I can see now that my code is very complicated and not the best designed.)

In response to your suggestion, yes, changing the code removes the gap from the top image but then the design becomes a little weird as you can see the aforementioned background image even behind this top image.

I'm open to other suggestions. Thanks!

Excavator
Jan 19th, 2009, 06:40 PM
Maybe it will work if we just move things around a little?
Using the html markup as I first posted, change your CSS to look like this:


#nav {}

#nav ul{
padding: 0;
margin: 0;
list-style: none;
background-image: url(http://grobanwire.com/wp-content/themes/urban-life/images/nav/nav-body.png);
}