468,291 Members | 1,503 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,291 developers. It's quick & easy.

weird IE bug?

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 &copy; 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!

Jul 1 '06 #1
4 1421
Mark wrote:
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.
What did you change?
Provide an URL to a test case.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Jul 2 '06 #2

Jim Moe wrote:
Mark wrote:
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.
What did you change?
Provide an URL to a test case.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
I wish I knew, or I would know what my problem was, wouldn't I? I
don't have a backup to a working version.

Current version can be viewed at http://www.xailus.com/v3/?c=test2

Jul 2 '06 #3
To further the education of mankind, "Mark" <mn*******@gmail.com>
vouchsafed:
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.
I'm not wading thru all the m/u but looks like a z-index thing.

--
Neredbojias
Infinity has its limits.
Jul 2 '06 #4
Mark wrote:
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.
Add "width:99.99%" to #ft.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Jul 3 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Gabriel Afana | last post: by
3 posts views Thread by redneck_kiwi | last post: by
82 posts views Thread by nobody | last post: by
reply views Thread by P Pulkkinen | last post: by
reply views Thread by Teichintx | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.