Hi.. I changed some of my CSS, and now I get this strange problem in
IE. See link: http://xailus.com/files/sample.gif. Left is firefox,
what it should look like, right is IE. The footer even varies in size
if you scroll or move it around or refresh and stuff.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Xailus</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="fonts.css" />
<link rel="stylesheet" type="text/css" href="174/style.css" />
</head>
<body>
<div id="bd">
<div id="hd">
<h1>mnbayazit</h1>
<p>a journey into the mind of m. n. bayazit</p>
</div>
<ul id="nav">
<li class="first"><a href="?c=blog">blog</a></li><li><a
href="?c=todo">todo</a></li><li><a
href="../phpbb">forums</a></li><li><a
href="?c=calendar">calendar</a></li><li><a
href="?c=gallery">gallery</a></li>
</ul>
<div id="col1">
<?php
if( file_exists($_GET['c'].'.php') && $_GET['c'] != 'index' )
include( $_GET['c'].'.php' );
else echo '404 - File not found';
?>
</div>
<div id="col2">
<h1>categories</h1>
<ul>
<li><a href="">life</a></li>
<li><a href="">web design</a></li>
<li><a href="">work</a></li>
<li><a href="">starcraft</a></li>
<li><a href="">programming</a></li>
</ul>
</div>
<div id="ft">
Copyright © Mark Bayazit 2006
</div>
</div>
</body>
</html>
style.css:
#bd {
margin: auto;
width: 600px;
background: url("bg.gif");
font:normal 11px Arial, Helvetica, Sans-serif;
color:#666;
}
#col1 {
float: left;
text-align: justify;
width: 460px;
padding: 10px;
}
#col2 {
float: right;
width: 100px;
padding: 10px;
}
#ft {
clear: both;
border-top: 1px solid white;
background: #666;
padding: 0 10px;
font: 10px tahoma;
color: white;
}
#hd {
height: 58px;
background: #666 url(logo.gif) no-repeat top left;
padding: 10px 0 10px 80px;
color: white;
}
#hd h1 {
font-size: 22px;
}
#hd p {
font: 8px verdana;
text-transform: uppercase;
color: #a5a5a5;
}
#nav {
background: #aaa9a9;
text-align: center;
border-top: 1px solid white;
border-bottom: 1px solid white;
}
#nav li {
display: inline;
border-left: 1px solid white;
}
#nav .first {
border-left: 0;
}
#nav a {
color: white;
padding: 0 10px;
}
#nav a:hover {
background: #ffa46b;
}
a {
text-decoration: none;
}
#col2 h1 {
color: white;
font-weight: bold;
font-size: 12px;
}
#col2 a {
color: white;
}
#col2 ul li {
padding: 0 0 0 10px;
background: transparent url(square.gif) no-repeat 0 50%;
}
#col2 a:hover {
color: #fcd2b8
}
reset.css:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,f orm,fieldset,input,p,blockquote,th,td
{
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style: normal;
font-weight: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-size: 100%;
}
q:before,q:after {
content: '';
}
fonts.css:
body {
font: 13px arial,helvetica,clean,sans-serif;
}
table {
font-size: inherit;
}
select, input, textarea {
font: 99% arial,helvetica,clean,sans-serif;
}
pre, code {
font: 115% monospace;
}
What's causing this, and how do I fix it? Thanks!
