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 strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

simple box, looks as it should in FF/NS, not IE

Status
Not open for further replies.

taval

Programmer
Jul 19, 2000
192
GB
Hi,

I have a simple red box which looks right in FF/NS but not in IE.

The code is

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<style>

#redBorder {
position:absolute;
background-color:#CC0000;	
top:94px;
left:0px;
height:6px;
width:750px;
line-height:0px;
}

</style>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div id="redBorder"></div>
</body>
</html>

I can make this look the same in all browsers by having some character (I choose a non breaking space) in-between the div tags. I was just wondering, is there a way to make this look the same without using a character in-between the div tags?

Cheers.
 
Add this:

Code:
overflow:hidden;

to your CSS for redBorder

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Hi,

Cheers for that it works. I have no idea why thats needed but it does the job. Must have been a bug with IE which is corrected with adding "overflow:hidden;" I guess.
 
You could also try setting [tt]font-size: 0;[/tt]. IE likes to make space for text within the box and that is why the box looks bigger. Dan said that text overflowing the size should just be cropped (hence the box size remained 6px) and I say font should be size 0, hence 6px height was enough to accomodate. Hope it explains it.
 
Thanks guys for sorting me out. Both methods work great. I unserstand it now.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top