I am currently writing a new version of Moon Shadow (my website). Even though the page looks perfect under Opera, under IE 6 there are three bugs that I want to get rid of :
- The left, central and right parts do not match exactly each other
- The blue images do not stick to the thin black lines
- The text area do not wrap around the "Quotes of the day" part.
I've tried different things, but I didn't manage to fix these bugs. Does anybody know what is wrong with my code ?
Below are excerpts of the codes of my index page and my CSS file.
code:
<body>
<div id="banner">
</div>
<div id="left">
<? include ("pages/menu.php") ?>
</div>
<div id="center">
<p>
<div id="other">
<h1>Quotes of the day :</h1>
<? include ("pages/quote.php") ?>
</div>
<div id="news">
[i]Some stuff[/i]
</div>
</p>
</div>
<div id="right">
<? include ("shoutbox/shoutbox.php") ?>
</div>
</body>
</html>
code:
body {
background-color: #666;
margin: 10px 10px 10px 10px;
padding: 0px;
}
#banner {
background: #fff url(images/back.jpg) 0 0 no-repeat fixed;
height: 50px;
border: solid 1px #000;
border-bottom: 0px ;
}
html>body #banner {
height:49px;
}
p,h1 {
margin: 0px 0px 10px 10px;
font-family: Verdana;
}
p {
font-size: 11px;
font-weight: normal;
text-decoration: none;
}
h1 {
padding-top: 20px;
font-size: 12px;
font-weight: bold;
text-decoration: underline;
}
#left {
position: absolute;
left: 10px;
top: 60px;
width: 200px;
border: solid 1px #000;
background: #fff;
text-align: center;
}
#center {
margin-left: 199px;
margin-right: 199px;
background: #fff;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 201px;
margin-right: 201px;
border: 1px solid #000;
}
html>body #center {
margin-left: 201px;
margin-right: 201px;
}
#right {
position: absolute;
right: 10px;
top: 60px;
width: 200px;
background: #fff;
border: 1px solid #000;
}
#news {
position: relative;
top: -10px;
left: 0px;
width: 100%;
}
#other {
position: relative;
top: -10px;
right: 0px;
width: 44%;
border-left : 1px #000 dotted;
border-bottom : 1px #000 dotted;
margin-left: 10px;
float: right;
voice-family: "\"}\"";
voice-family: inherit;
width: 24%;
}
html>body #other {
width: 40%;
}
----
If wishes were fishes, we'd all cast nets.
[This message has been edited by Moon Shadow (edited 02-20-2004).]