hey all.
im just mainly tryin to make layouts here, and this one is fairly simple. it looks great in ie(once i add stuff), and it resizes fine with resolutions and stuff. but ie makes it look terrible. you will c what i mean if you try it..here's the code.
CSS:
#Container{width:100%;}
#Page{position:absolute;left:10%; width:80%;height:200%; background-color:black;}
#Top{float:left;left:0px;height:95px;width:100%;background-color:blue;}
#Nav{float:left;left:0px;height:25px;width:100%;background-color:red;}
#Footer{position:fixed;bottom:0px;height:25px;width:80%;background-color:blue;}
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" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"main.css"/>
<title>My Test Page</title>
</head>
<body>
<!--MAIN-->
<div id="Container">
<div id="Page">
<div id="Top">
</div>
<div id="Nav">
</div>
<div id="Middle">
</div>
<div id="Footer">
</div>
</div>
</div>
</body>
</html>
'like i said, fairly simple.if you could figure it out, that would be great, ill be goin at it all day
. and one more thing..whats the command on these forums so when i paste my code, it aint regular text, usually between brackets...??
thank you!I've reworked the layout to make it reasonably decent in IE and work properly in all the other browsers.
I have used an import specially chosen not to work in IE4 and NN4 or lower (some imports do work for IE4). This will prevent older browser from displaying something horrible when they don't understand some styles.
I have also used the html>body hack which does not work for any version of IE, this allows me to give certain styles to standards compliant browsers and hide them from IE, so you can have your layout in a good browser, but have a secondary layout in IE.hmm, thats interesting..never heard of this stuff..lol, although i did know you could have the 2 layouts for different browsers.i guess some layouts just don't work thank you!Well it's not really a whole other layout, it's just a slightly different one (not 100% height).
Usually I like to stay away from hacks but since you were going for 100% height I couldn't see any way around it.
Occasionally when I do get stuck I find this (<!-- m --><a class="postlink" href="http://centricle.com/ref/css/filters/">http://centricle.com/ref/css/filters/</a><!-- m -->) to be very helpful.
im just mainly tryin to make layouts here, and this one is fairly simple. it looks great in ie(once i add stuff), and it resizes fine with resolutions and stuff. but ie makes it look terrible. you will c what i mean if you try it..here's the code.
CSS:
#Container{width:100%;}
#Page{position:absolute;left:10%; width:80%;height:200%; background-color:black;}
#Top{float:left;left:0px;height:95px;width:100%;background-color:blue;}
#Nav{float:left;left:0px;height:25px;width:100%;background-color:red;}
#Footer{position:fixed;bottom:0px;height:25px;width:80%;background-color:blue;}
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" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"main.css"/>
<title>My Test Page</title>
</head>
<body>
<!--MAIN-->
<div id="Container">
<div id="Page">
<div id="Top">
</div>
<div id="Nav">
</div>
<div id="Middle">
</div>
<div id="Footer">
</div>
</div>
</div>
</body>
</html>
'like i said, fairly simple.if you could figure it out, that would be great, ill be goin at it all day
. and one more thing..whats the command on these forums so when i paste my code, it aint regular text, usually between brackets...??thank you!I've reworked the layout to make it reasonably decent in IE and work properly in all the other browsers.
I have used an import specially chosen not to work in IE4 and NN4 or lower (some imports do work for IE4). This will prevent older browser from displaying something horrible when they don't understand some styles.
I have also used the html>body hack which does not work for any version of IE, this allows me to give certain styles to standards compliant browsers and hide them from IE, so you can have your layout in a good browser, but have a secondary layout in IE.hmm, thats interesting..never heard of this stuff..lol, although i did know you could have the 2 layouts for different browsers.i guess some layouts just don't work thank you!Well it's not really a whole other layout, it's just a slightly different one (not 100% height).
Usually I like to stay away from hacks but since you were going for 100% height I couldn't see any way around it.
Occasionally when I do get stuck I find this (<!-- m --><a class="postlink" href="http://centricle.com/ref/css/filters/">http://centricle.com/ref/css/filters/</a><!-- m -->) to be very helpful.