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

CSS Div Absolute Positioning 1

Status
Not open for further replies.

new2this2002

Programmer
Jun 22, 2002
67
GB
I have the following code

<?xml version=\&quot;1.0\&quot; encoding=\&quot;utf-8\&quot;?>
<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot; &quot;>
<html xmlns=&quot; xml:lang=&quot;en&quot; lang=&quot;en&quot;>
<head>
</head>
<body>
<div style=&quot;position:absolute; left:910px; top:77px; width:12px; height:12px; z-index:5;background-color: #FFFFFF;font-size:2px;&quot;>
<img src=&quot;images.gif&quot; width=&quot;12&quot; height=&quot;12&quot; alt=&quot;Corner&quot;/>
</div>

<div style=&quot;position:absolute;z-index:1;background-color: #CC0000;width:789px;height:511px;top:77px;left:133px;margin:0px;&quot;>
</div>

</body>
</html>

The image being used is 12*12 pixels.

My question is that if i remove the 'font-size:2px' from the 'div' with the image within it, the page displays incorrectly in IE and Netscape but properly in Opera. Does anyone have idea why this maybe or another way to solve this problem. I can't work out why this affects the position of the layer, when the 'font-size' is removed the background colour of the layer comes through in IE and Netscape.

I am using the following browsers
IE 6 SP1
Opera 7.23
Netscape 7.1

If there are any problems with the HTML or CSS i am using or if this is a known issue could someone please tell me.
 
I believe what's happening is the image is being displayed inline instead of block and is therefore calculating it's height using the font-size. Try adding style=&quot;display: block&quot; to your image tag.

 
Excellent, thanks for the lightning fast response, that has solved it.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top