Forum Moderators: not2easy
<body>
<div id="header">this is header</div>
<div id="mainContainer">
something here
</div><!--EO mainContainer -->
<div id="bottombar">this is copyright and showoff</div>
</body>
and CSS:
body {
margin:0;
text-align:center;
background-color:#000000;
color:#993399;
font:Georgia small;
}
#header {
width:1000px;
text-align:left;
height:100px;
}
#mainContainer {
width:1000px;
position:static;
text-align:left;
}
#bottombar {
position: fixed;
bottom:0;
background-color:#330000;
color:#666666;
height:15px;
width:100%;
font-size:xx-small;
font: Verdana;
}
-----------------------------------------------
the issue is, this HTML looks different in Firefox and IE.
Firefox, the #header and #mainContainer are aligned left but in IE it is center aligned.
In IE, the #bottombar is center aligned to, where it starts the background color from the center instead from far left.
By the way, font type is not showing up what I have written in the CSS.
Please help. thank you.
and a warm welcome to these forums. ;)
Try it like this...
<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" type="text/css" rel="stylesheet" media="screen" /><style type="text/css">
body {
font-family:georgia,serif;
font-size:small;
color:#939;
text-align:center;
background-color:#000;
margin:0;
}
#header {
width:1000px;
height:100px;
text-align:left;
margin:auto;
}
#mainContainer {
position:static;
width:1000px;
text-align:left;
margin:auto;
}
#bottombar {
position:fixed;
bottom:0;
width:100%;
height:15px;
font-family:verdana,sans-serif;
font-size:xx-small;
color:#666;
text-align:left;
background-color:#300;
}
</style><!--[if lte IE 7]>
<style type="text/css">
#bottombar {
position:absolute;
bottom:0;
left:0;
}
</style>
<![endif]--></head>
<body><div id="header">this is the header</div>
<div id="mainContainer">something here</div><!--EO mainContainer -->
<div id="bottombar">this is copyright and showoff</div>
</body>
</html>
birdbrain
but are these known issues? (eg, font not render, IE centered everything etc)
font: [font-style] [font-variant] [font-weight] [font-size/line-height ] [font-family ]
...which you did not follow. ;)
You used text-align:center to align block level elements.
This may be OK for IE, which is still a law unto itself, but cannot be used for compliant browsers like Opera or Firefox.
Compliant browsers use margin:auto to center elements and provided that a valid dtd is used IE will render it also.
I hope that this helps. :)
birdbrain
