Forum Moderators: not2easy
I'm trying to build a css layout and it works fine except for ie. Here's the html I have:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/default.css" type="text/css" />
<title>Untitled Document</title>
</head>
<body>
<div id="container">
<div id="header">here goes the header</div>
<div id="info">here goes image 700px wide and 115px tall</div>
<div id="right">
<div id="headline">
<h2>some heading</h2>
<h3>sub heading</h3>
</div>
<div id="headlinecontent">
<p>some content</p>
<p>some other content</p>
</div>
<div id="rightcontent">
<p>some other content</p>
</div>
</div>
<div id="left">
<p>some content</p>
</div>
<div id="footer">here goes the footer</div>
</div>
</body>
</html>
And here's the css I have:
@charset "UTF-8";
/* CSS Document */
*{ margin: 0; padding: 0; }*
body { font: .9em Georgia, "Times New Roman", Sans-Serif; color: #333; }
a { color: #A82A15; text-decoration: none; }
img { border: 0; }
#container { width:1000px; margin:0 auto; }
#header { width:1000px; height:150px; direction:rtl; background:#00FF66; }
#info { position:absolute; top:170px; width:700px; height:110px; background:#FFFFFF; z-index:100; }
#right { float:right; width:500px; direction:rtl; margin-top:20px; }
#headline { background:#33CCFF; padding-top:15px; } /* headline, will have different styling from normal content */
#headlinecontent { background:#33CCFF; padding-top:70px; } /* headline content, will have different styling from normal content */
#rightcontent { margin-top:15px; } /* regular content, normal styling, for that reason separated from headline */
#left {float:left; width:475px; direction:rtl; margin-top:150px; }
#footer { float:right; width:1000px; height:100px; margin-top:50px; background:#FF0000; direction:rtl; }
Please notice the #info absolute position and its z-index. I did this so it would overlap part of the right column. It works fine as I mentioned in ff and safari but not on ie. The ie won't display the image inside the #info div.
I'm in no way css expert (I'm noob) and I'm sure there's much better way to do this, but for now I'd like if you could help me make ie display the content inside the #info.
Thank you all very much in advance,
krko
Here's the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/default.css" type="text/css" />
<title>Untitled Document</title>
</head>
<body>
<div id="infocontainer">
<div id="info"><img src="images/test/info.jpg" alt="test" /></div> <!-- placed outside container to work with ie -->
</div>
<div id="container">
<div id="header">here goes the header</div>
<div id="right">
<div id="headline">
<h2>some heading</h2>
<h3>sub heading</h3>
</div>
<div id="headlinecontent">
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="rightcontent">
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div id="left">
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="footer">here goes the footer</div>
</div>
</body>
</html>
And here's the css:
@charset "UTF-8";
/* CSS Document */
*{ margin: 0; padding: 0; }*
body { font: .9em Georgia, "Times New Roman", Sans-Serif; color: #333; }
a { color: #A82A15; text-decoration: none; }
img { border: 0; }
#container { width:1000px; margin:0 auto; }
#header { width:1000px; height:150px; direction:rtl; background:#00FF66; }
#right { float:right; width:500px; direction:rtl; margin-top:20px; }
#headline { background:#33CCFF; padding-top:15px; }
#headlinecontent { background:#33CCFF; padding-top:70px; }
#rightcontent { margin-top:15px; }
#left {float:left; width:475px; direction:rtl; margin-top:150px; }
#footer { float:right; width:1000px; height:100px; margin-top:50px; background:#FF0000; direction:rtl; }
/* ie6 */
#infocontainer {width:1000px; margin:0 auto; } /* we create container for info line, outside the regular container, 1000px centered */
#info { position:absolute; top:170px; } /* we position the info div inside its own container */
I'm sure you css experts would do it much better, but it's my solution to the problem so far :) I'd still very much like to hear how this can be done, maybe in some other way.
Thank you,
krko
don't add the second *. Make it like this:
*{ margin: 0; padding: 0; }
