IE height issues with floating css — OZONE Asylum, home of the Mad Scientists

XML - XSL - XSLT - XHTML - CSS - DOM

IE height issues with floating css

This page's ID: 11170

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	I apoligize in advance if this has already been discussed, but I failed to find an answer by doing a search on this forum. [url=http://home.comcast.net/~ddade11/oroboros/index2.html]Test page[/url] This is the page I'm working on. The problem is that I'm using floating DIV's to layout the page from an earlier version that was built with tables. Originally, the table called for a top row 52px tall with a background followed by a second row only 2px tall of black to act as a line. Well, when converting over to css, I simply made the DIV that was to replace the black line "height: 2px", however when viewed in IE, it is MUCH bigger than 2px tall. It appears to work perfectly in both Firebird and Opera7.1. Below is the code for the page, and any help to resolve this issue would be greatly appreciated. [CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>CSS Float Testing</title> <style type="text/css" media="screen"><!-- #layer1 { background-image: url(generalimages/orobackground5.jpg); position: absolute; z-index: 0; top: 52px; left: 40px; width: 1000px; height: 550px; visibility: visible; display: block } #layer2 { background-image: url(generalimages/lightbluetile.jpg); position: absolute; z-index: 0; top: 0px; left: 0px; width: 100%; height: 52px; visibility: visible; display: block } #layer3 { background-color: #000; border: 0px; position: absolute; z-index: 1; top: 50px; left: 0px; width: 100%; height: 2px; visibility: visible; display: block } DIV#footer { background-image: url(generalimages/lightbluetile.jpg); position: absolute; bottom: 0px; width: 100%; height: 25px } DIV#footer2 { background-color: black; position: absolute; bottom: 25px; width: 100%; height: 2px } --></style> </head> <body background="generalimages/orotile.jpg" bgcolor="#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0"> <div id="layer1"> </div> <div id="layer2"></div> <div id="layer3"></div> <div id="footer2"></div> <div id="footer"></div> </body> </html>[CODE] Again, any insight as to how to fix this issue will be greatly appreciated. X-Spider [email]ddade11@comcast.net[/email] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu