Topic: IE compatibility problem (did I hear as usual ?) Pages that link to <a href="https://ozoneasylum.com/backlink?for=11153" title="Pages that link to Topic: IE compatibility problem (did I hear as usual ?)" rel="nofollow" >Topic: IE compatibility problem (did I hear as usual ?)\

 
Author Thread
Moon Shadow
Paranoid (IV) Inmate

From: Rouen, France
Insane since: Jan 2003

IP logged posted posted 02-19-2004 22:57 Edit Quote

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).]

Cameron
Bipolar (III) Inmate

From: Brisbane
Insane since: Jan 2003

IP logged posted posted 02-20-2004 15:32 Edit Quote

Why do you have so many in-line styles?

You really shouldn't need to use *any* in-line styles, it just makes everything harder to work with.

I should also point out that the site looks pertty much the same in IE6 and Mozilla, so it's possibly Opera7 at fault here. You really should check your stylesheets & layouts in as many browsers as you can as often as you can. This way you'll catch these problems when they happen and then you'll know what's wrong because it would have been something you've added in the last 5 minuites.

In any event, it looks like a fairly simple 3 column layout. Pop over to www.glish.com/css/ and steal the template there, that should set you straight.

Oh and you have two validation errors, they prolly ain't helping matters any either.

You also have widths in there specifying percentage values, remember to be careful mixing percentages with fixed pixel values, you might be over stepping your limits with un checked border/padding/margin values and the like. They often trip me up when using percentages.

Moon Shadow
Paranoid (IV) Inmate

From: Rouen, France
Insane since: Jan 2003

IP logged posted posted 02-20-2004 16:21 Edit Quote

Cameron :

This layout is already the one used at glish.com. I tweaked it a bit though, so I'll restart the coding from the beginning to see where lies the error. However, I didn't notice the two validation errors, thanks I'll check that.

Oh, and I don't know what you mean by "in-line" styles.

Edit 2 :

Ok, I found what was wrong and corrected it. Everything is fine now.

[This message has been edited by Moon Shadow (edited 02-20-2004).]

[This message has been edited by Moon Shadow (edited 02-21-2004).]



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu