Website Assistance

[Tdata]

I am in need of some help with my website.

In Firefox it works rather well, except for one instance, but in IE it looks horribly misaligned. I can't seem to fix it so it works on both. Can someone help me? I can never seem to get any site done with CSS to work on both.

The Site's address is http://anime.impur.org/index.php
Here is a copy of the CSS:

<div class="css" id="{CB}" style="font-family: monospace;"><ol> 

body 

{

    background-color:<span style="color: #cc00cc;">#<span style="color: #933;">000;

    background-image<span style="color: #3333ff;">:url(../images/background<span style="color: #6666ff;">.png);

    background-position<span style="color: #3333ff;">:center <span style="color: #993333;">center;

    background-repeat<span style="color: #3333ff;">:repeat;

}

 

<span style="color: #cc00cc;">#pagewidth 

{

    width<span style="color: #3333ff;">:<span style="color: #933;">1024px; 

    text-align<span style="color: #3333ff;">:left;  

    margin-left<span style="color: #3333ff;">:auto; 

    margin-right<span style="color: #3333ff;">:auto; 

}

 

<span style="color: #cc00cc;">#header

{

    position<span style="color: #3333ff;">:relative; 

    height<span style="color: #3333ff;">:<span style="color: #933;">500px; 

    background-image<span style="color: #3333ff;">:url(../images/header<span style="color: #6666ff;">.png);

    background-repeat<span style="color: #3333ff;">:no-repeat; 

    background-position<span style="color: #3333ff;">:center <span style="color: #993333;">center;

    width<span style="color: #3333ff;">:<span style="color: #933;">1024px;

}

<span style="color: #6666ff;">.hdr_left

{

    background-image<span style="color: #3333ff;">:url(../images/Button_<span style="color: #6666ff;">.png);

    background-repeat<span style="color: #3333ff;">:no-repeat; 

    background-position<span style="color: #3333ff;">:center <span style="color: #993333;">center;

    width<span style="color: #3333ff;">:<span style="color: #933;">25px;

    float<span style="color: #3333ff;">:left;

}

<span style="color: #6666ff;">.hdr_right

{

    background-image<span style="color: #3333ff;">:url(../images/Button_<span style="color: #6666ff;">.png);

    background-repeat<span style="color: #3333ff;">:no-repeat; 

    background-position<span style="color: #3333ff;">:center <span style="color: #993333;">center;

    width<span style="color: #3333ff;">:<span style="color: #933;">25px;

    float<span style="color: #3333ff;">:right;

}

 

 

<span style="color: #cc00cc;">#leftcol

{

    

    background-image<span style="color: #3333ff;">:url(../images/bg<span style="color: #6666ff;">.png);

    width<span style="color: #3333ff;">:<span style="color: #933;">200px; 

    float<span style="color: #3333ff;">:left; 

    position<span style="color: #3333ff;">:relative;

}

<span style="color: #cc00cc;">#rightcol

{

    background-image<span style="color: #3333ff;">:url(../images/bg<span style="color: #6666ff;">.png);

    width<span style="color: #3333ff;">:<span style="color: #933;">200px; 

    float<span style="color: #3333ff;">:right; 

    position<span style="color: #3333ff;">:relative;

}

 

<span style="color: #cc00cc;">#maincol

{

    width<span style="color: #3333ff;">:<span style="color: #933;">600px; 

    display<span style="color: #3333ff;">:inline; 

    position: <span style="color: #993333;">relative;

    float<span style="color: #3333ff;">:left;

    background-image<span style="color: #3333ff;">:url(../images/bg<span style="color: #6666ff;">.png);

    margin-left<span style="color: #3333ff;">:<span style="color: #933;">12px;

     }

 <span style="color: #cc00cc;">#content

 {

     padding-top<span style="color: #3333ff;">:<span style="color: #933;">7px;

     padding-right<span style="color: #3333ff;">:<span style="color: #933;">7px;

     padding-left<span style="color: #3333ff;">:<span style="color: #933;">7px;

     padding-bottom<span style="color: #3333ff;">:<span style="color: #933;">7px;

     

 }

 

 <span style="color: #cc00cc;">#righttop

 {

     background-image: <span style="color: #993333;">url(<span style="color: #933;">../images/round2<span style="color: #6666ff;">.png);

     background-position: top right;

     background-repeat: <span style="color: #993333;">no-repeat;

 }

 <span style="color: #cc00cc;">#lefttop

 {

     background-image: <span style="color: #993333;">url("../images/round1.png");

     background-position: top left;

     background-repeat<span style="color: #3333ff;">:no-repeat;

 }

 <span style="color: #cc00cc;">#rightbottom

 {

     background-image: <span style="color: #993333;">url(<span style="color: #933;">../images/round4<span style="color: #6666ff;">.png);

     background-position: bottom right;

     background-repeat: <span style="color: #993333;">no-repeat;

 }

 <span style="color: #cc00cc;">#leftbottom

 {

     background-image: <span style="color: #993333;">url("../images/round3.png");

     background-position: bottom left;

     background-repeat<span style="color: #3333ff;">:no-repeat;

 }

 <span style="color: #6666ff;">.navul

 {

     list-style-image<span style="color: #3333ff;">:url(../images/button<span style="color: #6666ff;">.png);

     margin-left: -<span style="color: #933;">6px;

     margin-top: -<span style="color: #933;">6px;

 }

 <span style="color: #6666ff;">.navhr

 {

     font-weight: <span style="color: #993333;">bold;

     text-decoration: <span style="color: #993333;">underline;

     text-align<span style="color: #3333ff;">:center;

     width<span style="color: #3333ff;">:<span style="color: #933;">200px;

     height<span style="color: #3333ff;">:<span style="color: #933;">35px;

     line-height<span style="color: #3333ff;">:<span style="color: #933;">35px;

     background-image<span style="color: #3333ff;">:url(../images/navhdr<span style="color: #6666ff;">.png);

     background-repeat<span style="color: #3333ff;">:no-repeat;

     background-position: <span style="color: #993333;">center <span style="color: #993333;">center;

     margin-left<span style="color: #3333ff;">:-<span style="color: #933;">41px;

 }

 

 <span style="color: #cc00cc;">#passthough

 {

     height: <span style="color: #933;"><span style="color: #933;">80%;

     width: <span style="color: #933;"><span style="color: #933;">100%;

     background-image<span style="color: #3333ff;">:url('../images/base.png');

     background-position<span style="color: #3333ff;">:center <span style="color: #993333;">center;

     background-repeat<span style="color: #3333ff;">:no-repeat;

     text-align<span style="color: #3333ff;">:center;

  }

  <span style="color: #cc00cc;">#pass

  {

      text-align<span style="color: #3333ff;">:center;

      color:<span style="color: #cc00cc;">#fff;

  }

  <span style="color: #cc00cc;">#contenthdr

  {

      background-image<span style="color: #3333ff;">:url(../images/bg<span style="color: #6666ff;">.png);

      background-repeat<span style="color: #3333ff;">:repeat;

  }

  

  <span style="color: #6666ff;">.flleft

  {

      float<span style="color: #3333ff;">:left;

  }

  

  <span style="color: #6666ff;">.flright

  {

      float<span style="color: #3333ff;">:right;

  }

  

  <span style="color: #6666ff;">.num

{

    float<span style="color: #3333ff;">:right;

}

<span style="color: #6666ff;">.name

{

    float<span style="color: #3333ff;">:left;

}

 

<span style="color: #6666ff;">.anihead

{

    font-size<span style="color: #3333ff;">:xx-large;

    background-image<span style="color: #3333ff;">:url(../images/bg<span style="color: #6666ff;">.png);

    background-repeat<span style="color: #3333ff;">:repeat;

    margin-top: -<span style="color: #933;">5px;

    width<span style="color: #3333ff;">:<span style="color: #933;">75%;

}

 

<span style="color: #6666ff;">.anibg1 

{

    background-image<span style="color: #3333ff;">:url(../images/anibg<span style="color: #6666ff;">.png);

    background-repeat<span style="color: #3333ff;">:repeat;

    height<span style="color: #3333ff;">:<span style="color: #933;">18px;

    line-height<span style="color: #3333ff;">:<span style="color: #933;">18px;

    width<span style="color: #3333ff;">:<span style="color: #933;">75%;

    

}

 

<span style="color: #6666ff;">.anibg2

{

    background-image<span style="color: #3333ff;">:url(../images/anibg<span style="color: #6666ff;">.png);

    background-repeat<span style="color: #3333ff;">:repeat;

    height<span style="color: #3333ff;">:<span style="color: #933;">18px;

    line-height<span style="color: #3333ff;">:<span style="color: #933;">18px;

    width<span style="color: #3333ff;">:<span style="color: #933;">75%;

    

}

<span style="color: #6666ff;">.leftside

{

    position<span style="color: #3333ff;">:relative;

    float<span style="color: #3333ff;">:left;

    width<span style="color: #3333ff;">:<span style="color: #933;">45%;

    padding-left<span style="color: #3333ff;">:<span style="color: #933;">2%;

    

}

<span style="color: #6666ff;">.rightside

{

    position<span style="color: #3333ff;">:relative;

    float<span style="color: #3333ff;">:right;

    width<span style="color: #3333ff;">:<span style="color: #933;">45%;

    padding-right<span style="color: #3333ff;">:<span style="color: #933;">2%;

}

 

 

[e]

Looks pretty much to same the me, except the navigation list on the left hand side, which isn't centered in IE7. I haven't tested in IE6, so I don't know how it behaves.

 

[Tdata]

Any Idea how to write it to align in both? It seems to stem from my use of the negative margin to align the images for Firefox. I rarely use IE as I have never been able to code a CSS Layout that looked how I wished. :blank:

I fixed the big issue myself after posting the thread. I missed removing an extra </div> tag... :smile:

 

[___]

Negative margins fail in IE6. If you force IE to give it layout (use position:relative) it will sometimes work, but no guarantees.

 

[Tdata]

So, how would I fix it?

 

[Kelevra]

I tested it in a few more browsers. Here's what I came up with for browser compatibility.

Works In: Fire Fox, Opera, & Flock.

It Failed In: Google Chrome, IE7, AOL Explorer, Maxthon, and Safari.

I'll fix it and post edited CSS tomorrow.