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

any idea why there's a gap that appears between my banner div and my middle div? here's the site: http://www.rosariosinhoboken.com. it doesnt happen in firefox but does have in i.e.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Most likely (I don't have IE

Most likely (I don't have IE running), you're seeing a difference in the way IE and Firefox overflow inline elements. If the image was smaller, you would see the same gap on Firefox. Inline elements align along the text baseline, leaving a small gap underneath for letters with descenders. Make the banner image display:block (or make it vertical-align: bottom).

jadexsoln
jadexsoln's picture
Offline
Regular
Leicestershire, England
Last seen: 12 years 48 weeks ago
Leicestershire, England
Joined: 2009-02-18
Posts: 31
Points: 0

Common Problem

Hi,

I've tripped across this quite a few times and I've seen FF do it. Often I've fixed by specifying a top border to the lower div thus:

border-top: 1px solid transparent;

Somehow specifying a top border seems to close the DIVS (perhaps one of the experienced guys can explain why.

But IE6 doesn't support transparency so then specifying for IE6 border-top: none - turning it back off seems to cure it. However just this week had the same problem as yourself - fine if FF but not in IE6. Then I tripped across the following trick which you apply to IE 6 only.

border-top: none;
border-color: pink; 
width: 100%;
filter: progid:DXImageTransform.Microsoft.Chroma(color=pink);	

What this is doing is basically firstly turning the border off, then setting it to pink (the trick is to pick a color that isn't used anywhere else in the DIV). Then apply an ActiveX component that basically filters out pink from the DIV. Worked a treat.

I can't take the credit for any of this - found it on the following blog:

http://acidmartin.wordpress.com/2008/08/24/emulating-border-color-transparent-in-internet-explorer-6/

Hope this helps! Smile

Neil Taylor
Jadex Solutions Ltd.
Small Business Web Site Design

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

thanks but none of the

thanks but none of the solutions seems to have worked. any other ideas?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Move the MAP out of #banner.

Move the MAP out of #banner. Ensure the #banner tags are wrapped around the img without any whitespace.

You'll still have the small gap.

Now put display:block on #banner img.

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

didn't work.

didn't work.

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

Does work Now put

Does work

Now put display:block on #banner img . the bold css selectors are called descendent selectors the display block needs to go on the IMG element I see only display:block on the parent, and no rules for the image

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

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

still no luck...assuming i

still no luck...assuming i correctly understood and implemented your suggestion. please advise. thanks.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

<style

<style type="text/css">
<!--
.style1 {font-size: 24px}
#banner img { display: block; }
-->
</style>
<!-- InstanceEndEditable -->
<link href="rosarios.css" rel="stylesheet" type="text/css">
</head>
 
<body>
<div id="wrapper">
  <div id="banner"><img src="pics/template_pics/banner.jpg" alt="Rosario's Pizza and Restaurant of Hoboken" border="0" usemap="#Map"></div>
    <map name="Map">
      <area shape="circle" coords="133,128,122" href="ordering.htm">
      <area shape="rect" coords="282,62,800,167" href="index.htm">
    </map>
  <!-- end banner div-->

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

that seems to have worked.

that seems to have worked. thank you.

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

What was the issue Chris? as

What was the issue Chris? as you placed the decs in the head (embedded) I'm guessing that it was a specificity/cascade issue ? if so it perhaps ought to be explained to our friend what was happening and how to deal with future occurrences?

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

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Issue was two things -

Issue was two things
- whitespace in the div(*)
- inline image aligned along text baseline.

Both had to be fixed to solve. Putting the style rule in the header was for convenience, I don't believe there was any existing rule affecting display on that img element.

(*) This one caught me out. As a matter of course I'll tight wrap a header image in both a div and an anchor, so I don't run into any white space issues.

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

Hm yep the white space would

Hm yep the white space would have had me puzzled, only for a few seconds mind Smile

Useful to clarify this though for the OP's sake and others.

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