• From: Canada
  • Registered: 2004-12-12
  • Posts: 148

Topic: Mean little Gap Bug

This says it's troubleshooting, and this has something to do with punBBs layout. I think it's apropriate for this forum then. smile

I have several sites where I have a table or image directly above the <div class="pun"> tag, and it has roughly a 2-3 pixel gap. This happens for some reason when in the xhtml strict mode, but not as much in xhtml transitional: but even then this little misbehaviour occurs in some browsers regardless.

Take a look here for an example.

Internet Explorer 5.5 doesn't have the gap, while the newer browsers do. Of course that may be inacurate because IE isn't standards compliant.

Any suggestions on how to be rid of it?

~Creaturecorp

I don't HAVE a signature, ok?

creaturecorp's Website

2 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Mean little Gap Bug

First step is to eliminate the errors, specifically, the img tags need closing.

You can also try border-top: none instead of border-top-width: 0px.

It's impossible to see whats going on with everything having the same background colour. Give your table and .pun different backgrounds so you can see whats going on.

  • From: Canada
  • Registered: 2004-12-12
  • Posts: 148

Re: Mean little Gap Bug

Coloring the tables bgcolor yellow shows that it's the tables fault. I was using DIVs, but found later that the table behaved better. The divs still had the gap.

Closed the img tags and changed the attribute as instructed.

I don't HAVE a signature, ok?

creaturecorp's Website

  • Gizzmo
  • Senior Member
  • Offline
  • From: Earth, Milkyway Galaxy
  • Registered: 2004-01-27
  • Posts: 762

Re: Mean little Gap Bug

i was doin some testing, with no succes. i added the following code into a valid page useing css to add the background color. and it is still there...im totaly lost on why theres that padding 

<table cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="images/topcorner.gif" alt="" /></td>
  </tr>
</table>

i also looked at puting in a span with text in the td, with the span having a background of white, and there is a yellow line below it. its smaller but still there.....

5 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Mean little Gap Bug

Add line-height: 0 to the style declaration in the table tag.

Or add display: block to the img and object tags.

Basically all inline elements have a line-height the default value of which varies from browser to browser (I think gecko and Opera are 1.2). So you either have to get rid of the line-height or make the troublesome tags block level rather than inline.

For future reference, if you get layout problems particularly unwanted gaps where you have used images then a simple entry in the stylesheet img {display: block} cures 90% of them assuming of course your layout doesn't depend on images being inline.

  • From: Canada
  • Registered: 2004-12-12
  • Posts: 148

Re: Mean little Gap Bug

Paul wrote:

...a simple entry in the stylesheet img {display: block} cures 90% of them...

Indeed it does. smile It's fixed in all browsers now, and even my other website which was having the same problem is now error-free. Thank you so much for sharing this method, it works perfectly.

~~Creaturecorp

I don't HAVE a signature, ok?

creaturecorp's Website

7 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Mean little Gap Bug

Forgot to mention, if you have just added img {display: block) you will have to reverse the effect for posts otherwise you will have block level smilies etc. Just make sure you have div.postmsg img {display: inline} somewhere in your stylesheet.

  • From: Canada
  • Registered: 2004-12-12
  • Posts: 148

Re: Mean little Gap Bug

I just added style="display:block;" to the image and object tags, and it works fine. I don't think that I would want to put img {display:block;} in the stylesheet because that would mean that with all the other pages I do that contain images I'd need to enclose it in a special tag.

I don't HAVE a signature, ok?

creaturecorp's Website