Topic: IE height issues with floating css $Pages that link to <a href="https://ozoneasylum.com/backlink?for=11170" title="Pages that link to Topic: IE height issues with floating css" rel="nofollow" >Topic: IE height issues with floating css\$

Author	Thread
X-Spider Obsessive-Compulsive (I) Inmate From: Insane since: Mar 2004	posted 03-13-2004 18:01 I apoligize in advance if this has already been discussed, but I failed to find an answer by doing a search on this forum. Test page 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 ddade11@comcast.net
DL-44 Maniac (V) Inmate From: under the bed Insane since: Feb 2000	posted 03-13-2004 19:25 1) It'd be much better to make the top div have a "border-bottom:#000 2px solid;" than to have another div try to accomplish that simple visual cue. It'd also be much cleaner mark-up: the 2nd div would be strictly a style thing, whereas the markup should be only the structure of the page. 2) The reason you have issues with the height is the line-height attrribute. By default, the line-height is calculated based on your font size. So, you sepcify the div to be 2px tall, and the browser also adds the logical space for text to appear given the line-height. If you set the line-height to 0, it should sove the issue. 3) Please use the method in number 1 to fix this problem. Number 2 explains why, but won't fix the inherent problem of using markup to solve stylistic issues and will only continue to cause problems of various kinds. 4) get rid of the 'transitional' doctype. strict is, IMO, the only way to go. [This message has been edited by DL-44 (edited 03-13-2004).]
X-Spider Obsessive-Compulsive (I) Inmate From: Insane since: Mar 2004	posted 03-14-2004 01:05 DL-44, Thank you very much for your input...It was exactly what I was looking for. I'm just learning CSS and had no clue that the borders worked independently from each other. I guess I'm still thinking tables. Well, thank you again. X-Spider
DL-44 Maniac (V) Inmate From: under the bed Insane since: Feb 2000	posted 03-14-2004 17:10 CSS is truly a beautiful thing =) Keep in mind that it works best when combined with clean well strutured Mark up. It's always best to start with the least amount of elements possible, and only add them when you need to. I've found (through my own experience in the past, and with replying to posts here) that the biggest mistake people make - especially when making that initial shift from tabled layouts to non-tabled layouts - is to simply put too much "stuff" in their mark up. check out both the tutorials and the links at the Gurus Network for more good CSS info http://development.gurusnetwork.com/tutorials/coding/css/ http://development.gurusnetwork.com/links/15/date/

Topic: IE height issues with floating css\$

Author

Thread

X-Spider
Obsessive-Compulsive (I) Inmate

From:
Insane since: Mar 2004

posted 03-13-2004 18:01

I apoligize in advance if this has already been discussed, but I failed to find an answer by doing a search on this forum.

Test page

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"></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
ddade11@comcast.net

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted 03-13-2004 19:25

1) It'd be much better to make the top div have a "border-bottom:#000 2px solid;" than to have another div try to accomplish that simple visual cue. It'd also be much cleaner mark-up: the 2nd div would be strictly a style thing, whereas the markup should be only the structure of the page.

2) The reason you have issues with the height is the line-height attrribute. By default, the line-height is calculated based on your font size. So, you sepcify the div to be 2px tall, and the browser also adds the logical space for text to appear given the line-height. If you set the line-height to 0, it should sove the issue.

3) Please use the method in number 1 to fix this problem. Number 2 explains why, but won't fix the inherent problem of using markup to solve stylistic issues and will only continue to cause problems of various kinds.

4) get rid of the 'transitional' doctype. strict is, IMO, the only way to go.

[This message has been edited by DL-44 (edited 03-13-2004).]

X-Spider
Obsessive-Compulsive (I) Inmate

From:
Insane since: Mar 2004

posted 03-14-2004 01:05

DL-44,

Thank you very much for your input...It was exactly what I was looking for. I'm just learning CSS and had no clue that the borders worked independently from each other. I guess I'm still thinking tables. Well, thank you again.

X-Spider

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted 03-14-2004 17:10

CSS is truly a beautiful thing =)

Keep in mind that it works best when combined with clean well strutured Mark up. It's always best to start with the *least* amount of elements possible, and only add them when you *need* to.

I've found (through my own experience in the past, and with replying to posts here) that the biggest mistake people make - especially when making that initial shift from tabled layouts to non-tabled layouts - is to simply put too much "stuff" in their mark up.

check out both the tutorials and the links at the Gurus Network for more good CSS info http://development.gurusnetwork.com/tutorials/coding/css/ http://development.gurusnetwork.com/links/15/date/

Post Reply

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	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: IE height issues with floating css

Insert Slimies »

Insert UBB Code »

Topic: IE height issues with floating css $Pages that link to <a href="https://ozoneasylum.com/backlink?for=11170" title="Pages that link to Topic: IE height issues with floating css" rel="nofollow" >Topic: IE height issues with floating css\$