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!

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

IE6 Gap

Status
Not open for further replies.

braves07

Technical User
Apr 24, 2007
40
US
First I want to say sorry for posting 2x the last few days. Here is the situation: I have a page that is displaying correctly in IE7 and Firefox but has a gap about 5px in IE6 and I can't figure out for the life of me why this is occuring. I don't have any margin's or padding set for the <div> above or below and I also don't have any p or h1 elements with margin's to create this gap. The header is larger than the rest of the page so I have a container that is 858px then I have another div that is holding the rest of the content on the page that is 779px. The gap is appearing between the 2 containers. Any help would be greatly appreciated.


You should find the test page and the css doc.

Thanks,

braves07
 
It's IE rendering whitespace. You can add "overflow: hidden" to your left_ban and right_ban CSS to remove this.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
As Jeff says, it's IE rendering whitespace. I normally find it's whitespace immediately after images that causes the issue.

You can run with the CSS fix, or you can remove the whitespace altogether by closing your image tags on the next line... so change this:

Code:
<div id="topban">
	<div id="left_ban">
		<img src="images/pin_board.png" alt="Homework Helper and Tutoring Navigation" width="386" height="292" border="0" usemap="#Map" />
	</div>
	<div id="right_ban">
		<img src="images/right_toptest.jpg" width="472" height="292" />
	</div>
</div>

into this:

Code:
<div id="topban">
	<div id="left_ban">
		<img src="images/pin_board.png" alt="Homework Helper and Tutoring Navigation" width="386" height="292" border="0" usemap="#Map"[!]
	/>[/!]</div>
	<div id="right_ban">
		<img src="images/right_toptest.jpg" width="472" height="292"[!]
	/>[/!]</div>
</div>

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top