homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

Internet Explorer leaves a gap between image bottom and border
graphic/border problem

 3:17 pm on Sep 1, 2005 (gmt 0)

I am using a few images on top of each other below a sidebar.
The images have a 1px border that render ok in the compliant browsers but IE6 leaves a small gap between the bottom of the graphic and the border leaving me with white space.

I can obviously change it to suit IE but then its skewd in the other browsers. Is this a box model problem. I have seen hacks that seem to cater for width but I have not seen anything for height.

Hope you can help a newbie. TIA



 4:56 pm on Sep 1, 2005 (gmt 0)

1. This extra white space can happen in IE when there are line breaks within the mark-up -- it renders them as visible space in some cases. Try removing any line breaks in the code for that region of the page and see if anything changes.

2. If there is a box model issue involved, it is most likely related to standards/quirks mode -- however, I would expect to see the problem cross-browser in that case, not just in IE. What doctype are you using?


 6:39 pm on Sep 1, 2005 (gmt 0)

My doctype is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

I have no <br /> tags in the code but I do have line breaks.
My sidebar is a series of links made into block level elements by css - ie display: block;



 6:48 pm on Sep 1, 2005 (gmt 0)

Sorry not looking at my code properly.

My images do have /> tags like this:
<img id="poppy" src="images/poppy.jpg" width="148" height="198" alt="poppy" />

could that be the cause of it. How else would you input that image in xhtml.

Thanks for your time.


 7:34 pm on Sep 1, 2005 (gmt 0)

First, you didn't mention it, so I'll ask - does the page validate?

W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]

We shouldn't work too hard on rendering troubles unless we first know the mark-up validates - you can run in circles otherwise.

Assuming it does validate, then the issue will probably not be with just one elemetm, but with how they are put together. Can you paste in some code from the section where you see the extra white space? If there any domain names in there, just change them to example.com


 7:41 pm on Sep 1, 2005 (gmt 0)

I believe that in standards-compliance mode (triggered by your doctype), images are set to display as inline by default, which leaves a space underneath the image (the baseline underneath inline elements). Have you tried adding
display:block; to the img element, either directly or in your stylesheet?

If that doesn't work, can you post a short and relevant snippet of your markup?


 8:15 pm on Sep 1, 2005 (gmt 0)

Thanks for your replies. Here is what I have:
CSS is linked via style sheet.

.sidebar {

.sidebar a {
background:#fff2c8 url(images/EdgedCircle8.gif) 5px 50% no-repeat;
display: block;
text-decoration: none;
font-size: 75%;
overflow: hidden;
border: 1px solid black;
padding-left: 25px;

<div class="sidebar">
<a id="home">Home </a>
<a href="page1.php" id="page">description</a>
<a href="page2.php" id="page">description</a>
<div id="lowersb">
<img id="poppy" src="images/poppy.jpg" width="148" height="198" alt="poppy" />
<img id="badge" src="images/hall1.jpg" width="148" height="238" alt="hall line colours" />

hope thats enough code I can post the lot if required.


 11:15 am on Sep 2, 2005 (gmt 0)

try not line break the images

<div id="lowersb">
<img id="poppy" src="images/poppy.jpg" width="148" height="198" alt="poppy" name=
"poppy" /><img id="badge" src="images/hall1.jpg" width="148" height="238" alt=
"hall line colours" name="badge" />


 12:03 pm on Sep 2, 2005 (gmt 0)

Nice one, Vinilois.

That did the trick. A new lesson learnt for me. Thank you vm.

Thanks also, Tedster, Encylo for your help. Appreciate your time.


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved