Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

internet explorer insists my gifs have too much height 2

Status
Not open for further replies.
seantuk

seantuk

Programmer
Mar 22, 2005
62
GB
the content for a page i am building begins and ends with two gifs. these gifs are as wide as the content, not very tall, and are there to create rounded corners. the page displays correctly in everything except for ie (only tested on pc so far). in ie, i get extra space above and bellow the gifs, which means they don't meet the content. to try and track this error down, i created this page

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>a page</title>
</head>
<body>
<img src="myPic.gif" width="740" height="4" />
<img src="myPic.gif" width="740" height="4" />
</body>
</html>

you could use anything for the gif. if you view this page in firefox, the two gifs will meet. if you view it in ie, there will be space between them.

how can i remove the space in ie, without hurting firefox?
 
Sort by date Sort by votes
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>a page</title>
</head>
<body>
<img src="myPic.gif" width="740" height="4" /><img src="myPic.gif" width="740" height="4" />
</body>
</html>

*cLFlaVA
----------------------------
[tt]a frickin' twelve-gauge, what do you think?[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
thanks, but it didn't help. remember, on the final version there's a load of divs between these two gifs.
 
Upvote 0 Downvote
img {float: left ;} in the stylesheet worked for me. You may want to play around with that and review w3 Float

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
i don't own the copyright for the original code.
 
Upvote 0 Downvote
You still need to give the REAL code to get a real answer. The answer cLFlaVA gave you was for the code you provided. We're not mind readers here, so you need to copy and paste the code you want help with.

Lee
 
Upvote 0 Downvote
If the original code has spaces after the last element, and you can't change the original code, you are scr3wed unless you can somehow parse them out.
 
Upvote 0 Downvote
and, as always, i suggest using a style definition instead of height/width attributes:

Code: 
<img src="myImaginaryPic1.gif" style="height: 4px; width: 740px;" />
<img src="myImaginaryPic2.gif" style="height: 4px; width: 740px;" />

*cLFlaVA
----------------------------
[tt]a frickin' twelve-gauge, what do you think?[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
What I would suggest is using [tt]display: block;[/tt] on the images. The problem you're experiencing is with IE's incorrect interpretation of whitespace. While you treat is as nicely indented code, IE believes you actually want spaces between the pictures. And that is why it renders gaps in pictures. What Greg suggested makes sense in its own right, because it transforms the image from it's original inline level to block level. This is described on W3 website. However, you get the added trouble of dealing with floated elements, when you actually don't have to. Just using display: block; should give you all the benefits of floating the image without the problems floating brings to document flow. Hope that helps.
 
Upvote 0 Downvote
Much better answer than mine, Vragabond.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
traingamer - cheers, works a treat.

cLFlaVA & trollacious - the answer cLFlaVA gave me didn't even work for the example code. i've used this forum on and off for years without handing out original code.

Vragabond - helpful information, cheers. i might still need your code if it doesn't work in one of the many browsers the client intends it to work in (perhaps ie on the mac).
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
666
spamjim
spamjim
SitesMasstec
  • Locked
  • Question
How to have an HTML opened automatically in an e-mail
Replies
3
Views
107
spamjim
spamjim
tyutghf
  • Locked
  • Question
Which website accessibility tool do you use?
Replies
0
Views
68
tyutghf
tyutghf
nvhuser
  • Locked
  • Question
Internet explorer - Automation/Scripting 2
Replies
12
Views
156
nvhuser
nvhuser
lupidol
  • Locked
  • Question
Elements with same atttributes are differenly positioned on my page
Replies
1
Views
73
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top