13 replies [Last post]
newdude
newdude's picture
Offline
Enthusiast
Last seen: 5 years 4 weeks ago
Timezone: GMT-5
Joined: 2008-11-29
Posts: 187
Points: 285

In some older version of explorer there's a gap of about 5 pixels appearing between my "banner" div and my "top nav" div. i've tried every i.e. hack under the sun and can't figure it out. any ideas?

thanks in advance!

HTML

<div id="banner"><img src="../pics/banner_pic.jpg" border="0" usemap="#Map">
  <map name="Map">
    <area shape="rect" coords="9,9,468,63" href="../index.htm">
  </map>
</div>
<!-- end banner div-->
<div id="top_nav"><img src="../pics/left_logo.jpg" border="0"><a href="../index.htm" target="_top" onClick="MM_nbGroup('down','group1','home','../pics/home_down.jpg',1)" onMouseOver="MM_nbGroup('over','home','../pics/home_down.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img src="../pics/home.jpg" alt="" name="home" border="0" onload=""></a><a href="../services.htm" target="_top" onClick="MM_nbGroup('down','group1','services','../pics/services_down.jpg',1)" onMouseOver="MM_nbGroup('over','services','../pics/services_down.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img name="services" src="../pics/services.jpg" border="0" alt="" onLoad=""></a><a href="../clients.htm" target="_top" onClick="MM_nbGroup('down','group1','clients','../pics/clients_down.jpg',1)" onMouseOver="MM_nbGroup('over','clients','../pics/clients_down.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img name="clients" src="../pics/clients.jpg" border="0" alt="" onLoad=""></a><a href="../about.htm" target="_top" onClick="MM_nbGroup('down','group1','about','../pics/about_down.jpg',1)" onMouseOver="MM_nbGroup('over','about','../pics/about_down.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img name="about" src="../pics/about.jpg" border="0" alt="" onLoad=""></a><a href="../news.htm" target="_top" onClick="MM_nbGroup('down','group1','news','../pics/news_down.jpg',1)" onMouseOver="MM_nbGroup('over','news','../pics/news_down.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img name="news" src="../pics/news.jpg" border="0" alt="" onLoad=""></a><a href="../contact.htm" target="_top" onClick="MM_nbGroup('down','group1','contact','../pics/contact_down.jpg',1)" onMouseOver="MM_nbGroup('over','contact','../pics/contact_down.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img name="contact" src="../pics/contact.jpg" border="0" alt="" onLoad=""></a>
</div>
<!-- end top_nav div-->

CSS

#banner {
	background-image: url(pics/banner_pic.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	margin: 0px;
	padding: 0px;
	float: left;
	height: 65px;
	width: 850px;
}
#top_nav{
	margin: 0px;
	padding: 0px;
	float: left;
	height: 25px;
	width: 850px;
}

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 27 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Code snippets are next to

Code snippets are next to useless.
Please post all of your html and css or please provide us with a link.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

newdude
newdude's picture
Offline
Enthusiast
Last seen: 5 years 4 weeks ago
Timezone: GMT-5
Joined: 2008-11-29
Posts: 187
Points: 285

http://www.bridgeresource.com

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 27 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Try removing the set height

Try removing the set height on those two elements and see if that works.
I don't have IE6 loaded up right now.

Maybe someone else will come along and help out before I get a chance to load up my VM

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

newdude
newdude's picture
Offline
Enthusiast
Last seen: 5 years 4 weeks ago
Timezone: GMT-5
Joined: 2008-11-29
Posts: 187
Points: 285

i tried that but no dice.

i tried that but no dice. :shrug:

any other suggestions? thanks.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Make #banner img {

Make #banner img { vertical-align: bottom;}. See That mysterious gap under images.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 27 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

gary.turner wrote:Make

gary.turner wrote:

Make #banner img { vertical-align: bottom;}. See That mysterious gap under images.

There are probably viruses on that site... }:)

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Was going to reply earlier

Was going to reply earlier but thought I'd wait and see how long it took for the link to appear Tongue

And it's set image to display:block!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Either will work in this

Either will work in this case.

Why would I repeat myself, when I've already written up an explanation of what's going on?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

newdude
newdude's picture
Offline
Enthusiast
Last seen: 5 years 4 weeks ago
Timezone: GMT-5
Joined: 2008-11-29
Posts: 187
Points: 285

neither fix seems to be

neither fix seems to be working. right now i've got a display: block but perhaps its not properly applied? should the class be on the banner div that holds the image or on the image itself (how do i do that?), or on a div that holds the image, like i have now. thanks!

}
.block {
display: block;
}

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 27 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Go reread Hugo and Gary's

Go reread Hugo and Gary's posts.
Both tell you exactly what to do.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 27 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Go reread Hugo and Gary's

Edit: Stupid router froze...

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

newdude
newdude's picture
Offline
Enthusiast
Last seen: 5 years 4 weeks ago
Timezone: GMT-5
Joined: 2008-11-29
Posts: 187
Points: 285

i finally found a solution

i finally found a solution that works. i made the font size of my banner div = zero. beats me WHY that works but i'll take it.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

It worked for the reason

It worked for the reason described in the article I linked. The space is from the allowance for letter descenders. With a zero font size, there is zero descender space.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.