Welcome to WebmasterWorld Guest from 54.205.96.97

Forum Moderators: incrediBILL

Internet Explorer leaves a gap between image bottom and border

graphic/border problem

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

5+ Year Member



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

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

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

5+ Year Member



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

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

5+ Year Member



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

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

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

5+ Year Member



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

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

5+ Year Member



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" />
</div>

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

5+ Year Member



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

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month