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

Visit PubCon.com
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
shug




msg:591329
 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




msg:591330
 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




msg:591331
 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




msg:591332
 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




msg:591333
 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




msg:591334
 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




msg:591335
 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




msg:591336
 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" />
</div>

shug




msg:591337
 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

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