Jump to content

divs in table show up wrong in IE

Recommended Posts

Try this in the <head> of the document:<style type="text/css">img {margin-bottom: 0px;}</style>For some reason Internet Explorer puts a margin under the images.

Link to post
Share on other sites

That still didn't fix it. I've narrowed down the problem. It has nothing to do with tables. It is simply two divs are having a gap between them on Internet Explorer. Here is the updated test link and code.Link: http://www.k-state.edu/sctd/theatre/divsintabletest2.htm

<div style="style1">	<img src="slices/a-3.jpg" alt="Link to KSU page"></div><div style="style1"><img src="slices/a-2.jpg" alt="Link to SCTD portal">				</div>

Link to post
Share on other sites
Resolved.Old code
<div>	 why is there</div><div>	 a gap between these divs.</div>

new code

<div>because ie reads the return carriage</div><div>content  must be squeezed between div tags</div>

Just for clarification for other readers, the problem isn't necessarily with the carriage returns. The problem, really, is with the carriage returns where there are images. The above code will render exactly the same in IE whereas the following will not:
<div>	 <img src="http://www.w3schools.com/images/w3default80.jpg" /></div><div>	 <img src="http://www.w3schools.com/images/w3default80.jpg" /></div>

<div><img src="http://www.w3schools.com/images/w3default80.jpg" /></div><div><img src="http://www.w3schools.com/images/w3default80.jpg" /></div>

One of the ways to fix that is to either float the image (which makes the display "block") or explicitly setting the display to block. This will render as if there aren't any carriage returns:

<div>	 <img style="display:block;" src="http://www.w3schools.com/images/w3default80.jpg" /></div><div>	 <img style="display:block;" src="http://www.w3schools.com/images/w3default80.jpg" /></div>

Also keep in mind that this really only happens in IE.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...