Internet Explorer leaves a gap between image bottom and border

Forum Moderators: open

Message Too Old, No Replies

Internet Explorer leaves a gap between image bottom and border

graphic/border problem

shug

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
Hugh

tedster

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?

shug

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

Hi,
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;

Hugh

shug

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.
Hugh

tedster

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

encyclo

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?

shug

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 {
float:left;
width:150px;
\width:170px;
w\idth:150px;
margin:0;
margin-right:0;
padding:10px;
background-color:#fff;
}

.sidebar a {
background:#fff2c8 url(images/EdgedCircle8.gif) 5px 50% no-repeat;
color:#648ceb;
display: block;
text-decoration: none;
font-size: 75%;
overflow: hidden;
border: 1px solid black;
margin-top:2px;
height:25px;
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>
ETC
<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" />
</div>
</div>

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

vinilios

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

try not line break the images

shug

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.

Hugh