Help with table design, IE and netscape display different results

L

liunx

Guest
I need help with some 'boxes'(tables) I'm trying to design. The red box at my website, <!-- m --><a class="postlink" href="http://www.SetAFocus.com">http://www.SetAFocus.com</a><!-- m --> ,comes out really weird on netscape but perfect on IE.

The weirdest thing is that it is exactly the same as my orange and blue boxes (which turned out perfectly in both browsers)! The only thing I changed was the colour codes! :(

I tried numerous times copying and pasting the codes of the orange or blue boxes, and only changed the colours in it, but in vain.

I've prepared the screenshots:

IE example:
<!-- m --><a class="postlink" href="http://www.setafocus.com/ie.jpg">http://www.setafocus.com/ie.jpg</a><!-- m -->

Netscape example:
<!-- m --><a class="postlink" href="http://www.setafocus.com/netscape.jpg">http://www.setafocus.com/netscape.jpg</a><!-- m -->

My CSS codes:


<!-- Say hello to orange -->
A.orange:link { color: #A7871D }

A.orange:active { color: black }

A.orange:visited { color: #A7871D }

A.orange:hover { color: black }

table.orange
{
background-color: #FFFF97;
border-style: solid;
border-color: #CC972D;
border-top-width: 0px;
border-left-width: 1px;
border-right-width: 1px;
border-bottom-width: 0px;
width: 160;
font-size: 11;
color: #A7871D;
line-height: 15px;
}

table.orangemid
{
background-color: #FFFF97;
border-style: solid;
border-color: #CC972D;
border-top-width: 0px;
border-left-width: 1px;
border-right-width: 1px;
border-bottom-width: 0px;
width: 95%;
font-size: 11;
color: #A7871D;
line-height: 15px;
}

table.orange2
{
background-color: #FFFF97;
border-style: solid;
border-color: #CC972D;
border-top-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
width: 100%;
font-size: 11;
color: #A7871D;
}


td.orangetop
{
background-color: #FFCC2F;
border-style: solid;
border-color: #CC972D;
border-top-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-bottom-width: 1px;
font-weight: bold;
font-size: 12;
}

<!-- Say bye to orange -->

<!-- Say hello to red -->
table.red
{
background-color: #FFCCCC;
border-style: solid;
border-color: #FF6666;
border-top-width: 0px;
border-left-width: 1px;
border-right-width: 1px;
border-bottom-width: 0px;
width: 160;
font-size: 11;
color: #330000;
line-height: 15px;
}

td.redtop
{
background-color: #CC3333;
border-style: solid;
border-color: #FF6666;
border-top-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-bottom-width: 1px;
font-weight: bold;
font-size: 12;
}
<!-- Say bye to red -->
[/code]



My HTML codes for red

Code: 
<!-- ONE BIG RED TABLE -->
<img src=http://www.webdeveloper.com/forum/archive/index.php/"common/redtop.gif"><br>
<table class="red" cellpadding="5" cellspacing="0">
        <tr>
              <td class="redtop">Sponsored links</td>
        </tr>
        <tr>
              <td><center>blah blah blah</center></td>
</tr>
</table><img src=http://www.webdeveloper.com/forum/archive/index.php/"common/redbtm.gif"><br>
<P>

<!-- ONE BIG ORANGE TABLE -->
<img src=http://www.webdeveloper.com/forum/archive/index.php/"common/orangetop.gif"><br>
<table class="orange" cellpadding="5" cellspacing="0">
        <tr>
              <td class="orangetop">Features</td>
        </tr>
        <tr>
              <td>blahblahblah


</td>
        </tr>

</table><img src=http://www.webdeveloper.com/forum/archive/index.php/"common/orangebtm.gif"><br>
<P>



Thanks for anyone who has the time to help me out!For your page to work anything like expected, it needs to use valid code. That means you need to add a doctype (<!-- m --><a class="postlink" href="http://www.webdevfaqs.com/html.php#doctype">http://www.webdevfaqs.com/html.php#doctype</a><!-- m -->) then  validate your HTML (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->).

You can also validate your CSS here: <!-- m --><a class="postlink" href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A//www.littlebigsite.com/focus/">http://jigsaw.w3.org/css-validator/vali ... com/focus/</a><!-- m -->

AdamAs far as I could figure things out, it looks like this: 

Mozilla adds paddings to div size; MSIE doesn't. (If you have a width and hight of 100px (always specify sizes in px, if you wnat it to be px), and a padding of 10px, you will get a div of 120/120px in Mozilla and 100/100px in MSIE.)

Plus, other that MSIE, Mozilla adds borders to the cell; it doesn't include a div's border in the borders size; MSIE does. So, if if you arrange two divs in vertical order, both specified as 20px high, plus 1px border each, the two of them will make 24px of height.

I haven't tested this extensively, but with this recipy, I made the CSS working in the site I'm currently working on.If what you say in you last post is actually correct, you are a victim of IE and it's improper rendering of the box model.  Do a quick serch for "box model hack" and see what you come up with.  Netscape is actually right more than likely.  Many people are fooled by thinking IE is rendering things correctly when it is actuall a piece of cr*p.

Check your desings in Netscape/mozilla and "hack" to make them work in IE....

MNSSurprize surprize: IE 6 displays your page like Netscape and not like IE 5. As pointed correctly by others, this is due to the incorrect box-model in IE 5.
 
You must log in or register to reply here.
Back
Top