CSS Behaves Different on MAC vs PCI C

[crockettkid]

I finally got the code for my banner to work and it viewed perfectly on MAC but when viewed from a PC the bannner and the bio info was jumbled and repeated down the page any idea as to why that happens?

This is what I have (had before I noticed the problem) in front of the bio:

<div class="masthead"><span></span</div>

<style type="text/css">table table {margin-top:120px;}
div table table, table table table {margin-top:0;}
</style>

<style>
.masthead {width: 567px; height: 102px; position: absolute; margin-left: 250px; left: 12%; top: 200px; background-image: url(http://i371.photobucket.com/albums/oo15 … copy-1.jpg);}
</style>

AND THIS FOLLOWS THE BIO:

<style>
table, td, tr, span, li, p, div, textarea,
DIV
{
background-color: transparent;
}
body
{
background-image:
url(http://img175.imageshack.us/img175/8302 … rd2by3.jpg);
background-repeat: repeat;
background-attachment: fixed;
}

.r{}* MODIFYING THE TABLE**/
table, td
{
background-color: transparent;
border: 0px;
}

table table table
{
background-color:cccccc;
}

table table table
{
border-width:2;
border-color:333333;
border-style: solid;
}

table table table table
{
border:0px;
}
.r{}* Text and Link Properties * */
input
{
background-color:transparent !important;
}

td, span, div, input, a, table td div div font,
body div table tbody tr td font
{
font-size:9 pt;
font-family:Arial MT !important;
}

td, span, div, input, table td div div font,
body div table tbody tr td font
{
color:2b3856 !important;
}

.nametext, .whitetext12, .lightbluetext8, .orangetext15, .blacktext12,
.redtext, .redbtext, .blacktext10
{
color:25383c !important;
}

a
{
color:000000 !important;
text-decoration:none !important;
text-transform:none !important;
font-weight:normal!important;
font-style:normal !important;
}

a:hover
{
color:000000 !important;
text-decoration:none !important;
text-transform:none !important;
font-weight:normal !important;
font-style:normal !important;
}
.r{}* Other Stuff * */
img
{
border:0px;
}

.text
{
align:left;
</style>

Thanks for the help

[mikes]

At a glance I noticed that you are missing a closing brace at the end:

Code:

.text
{
align:left;

Also, if you don’t mind a suggestion, you might restructure your css a bit.
1. You are referencing a table with "table table table table" which will work but is unclear and will affect every table nested four deep. This will accomplish the same thing and is less prone to get you into trouble:

Code:

TABLE.marginTop { margin: 120px; }
-and-

2. You are assigning a color code to a number of classes named for various colors (white, black, red, etc). First off, what’s the point of naming one white and one black if the color is neither?

A better method would be naming them for their use:

.highlight { font-weight: 700; background-color: #ffff00; }
.handwriting { color: #8080ff; font-style: italic; }
etc.

My names aren’t the best semantic examples but I think you get the idea.
Just an observation. hth.

[crockettkid]

Thank you so much for your response. In case you haven’t figured it out, I’m really new at this so I appreciate your advice. I’ll give the changes a shot and see if that fixes it. Thanks again

[Author]

Posts