Optimizing CSS/HTML code for MAC's

programming web dev
1

I created the entire thing (other than flash and photoshop) in Notepad using css and php. The site appears fine but there seems to be an issue on MAC’s. If anyone has any ideas please let me knos

www.xtrasensory.net

THANKS!

All the code seems to work out but it obviously isn’t…here’s the style sheet if anyone has any ideas on streamlining or why it’s messed up on MAC platforms.

body {
  background-color: #FFFFFF;
  background-image: url("bar.gif");
  background-repeat: repeat-y;
  background-position: 200px;
}

h1 {font-family: times, arial, serif;
    font-size: 15px;
    color: #4c4c4c;}

h3 {font-family: verdana, arial, sans-serif;
    font-size: 14px;
    color: #666666;}

#logo {
	position:absolute;
	left: 110px;
	top: 70px;
        z-index: 2;
}

#texture
{	position:absolute;
	left: 0px;
	top: 0px;
        z-index: 1;
}

#mainlogo
{	position:absolute;
	left: 210px;
	top: 220px;
        z-index: 1;
}

#seclogo
{	position:absolute;
	left: 210px;
	top: 430px;
        z-index: 1;
}

#quote
{	position:absolute;
	left: 200px;
	top: 236px;
        z-index: 1;
}

#content
{
	margin-left:510px;
	margin-top:400px;

	p {font-family: verdana, trebuchet, arial, sans-serif;
	font-size: 10px;
	color: #666666;}
}

#ethos ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: right;
	font-weight: bold;
	font-family: verdana, arial, sans-serif;
	font-size: .6em;

	letter-spacing: .3em;
	position:absolute;
	left: 200px;
	top: 80px;
}

#ethos a
{
	display: block;
	color: #000;
	background-color: #fff5d6;
	width: 300px;
	padding: .7em .7em;
	text-decoration: none;
}

#ethos a:hover
{
	background-color: #333333;
	border-right-width: 10px;
	border-right-style: solid;
	border-right-color: #fff5d6;
	color: #FFF;
}

#eactive a
{
	background-color: #333333;
	border-right-width: 10px;
	border-right-style: solid;
	border-right-color: #fff5d6;
	color: #FFF;
}



#identity ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: right;
	font-weight: bold;
	font-family: verdana, arial, sans-serif;
	font-size: .6em;

	letter-spacing: .3em;
	position:absolute;
	left: 200px;
	top: 106px;
}

#ilist ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: left;
	font-family: verdana, arial, sans-serif;
	font-size: .6em;
	position:absolute;
	left: 520px;
	top: 100px;
}

#ilist li
{
	margin: 1em 0;
}

#ilist a
{
	text-decoration: none;
	color: #666;
}

#ilist a:hover
{
	background-color: #4c4c4c;
	color: #FFF;
}

#identity a
{
	display: block;
	color: #000;
	background-color: #ffe3aa;
	width: 300px;
	padding: .7em .7em;
	text-decoration: none;
}

#identity a:hover
{
	background-color: #333333;
	border-right-width: 10px;
	border-right-style: solid;
	border-right-color: #ffe3aa;
	color: #FFF;
}

#iactive a
{
	background-color: #333333;
	border-right-width: 10px;
	border-right-style: solid;
	border-right-color: #ffe3aa;
	color: #FFF;
}

#print ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-weight: bold;
	text-align: right;
	font-family: verdana, arial, sans-serif;
	font-size: .6em;

	letter-spacing: .3em;
	position:absolute;
	left: 200px;
	top: 132px;
}

#print a
{
	display: block;
	color: #000;
	background-color: #fecf10;
	width: 300px;
	padding: .7em .7em;
	text-decoration: none;
}

#print a:hover
{
	background-color: #333333;
	border-right-width: 10px;
	border-right-style: solid;
	border-right-color: #fecf10;
	color: #FFF;
}

#plist ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: left;
	font-family: verdana, arial, sans-serif;
	font-size: .6em;
	position:absolute;
	left: 520px;
	top: 100px;
}

#plist li
{
	margin: 1em 0;
}

#plist a
{
	text-decoration: none;
	color: #666;
}

#plist a:hover
{
	background-color: #4c4c4c;
	color: #FFF;
}

#pactive a
{
	background-color: #333333;
	border-right-width: 10px;
	border-right-style: solid;
	border-right-color: #fecf10;
	color: #FFF;
}


#creative ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-weight: bold;
	text-align: right;
	font-family: verdana, arial, sans-serif;
	font-size: .6em;

	letter-spacing: .3em;
	position:absolute;
	left: 200px;
	top: 158px;
}

#creative a
{
	display: block;
	color: #000;
	background-color: #e3830a;
	width: 300px;
	padding: .7em .7em;
	text-decoration: none;
}

#creative a:hover
{
	background-color: #333333;
	border-right-width: 10px;
	border-right-style: solid;
	border-right-color: #e3830a;
	color: #FFF;
}

#cactive a
{
	background-color: #333333;
	border-right-width: 10px;
	border-right-style: solid;
	border-right-color: #e3830a;
	color: #FFF;
}

#clist ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: left;
	font-family: verdana, arial, sans-serif;
	font-size: .6em;
	position:absolute;
	left: 520px;
	top: 100px;
}

#clist li
{
	margin: 1em 0;
}

#clist a
{
	text-decoration: none;
	color: #666;
}

#clist a:hover
{
	background-color: #4c4c4c;
	color: #FFF;
}

#contact ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-weight: bold;
	text-align: right;
	font-family: verdana, arial, sans-serif;
	font-size: .6em;

	letter-spacing: .3em;
	position:absolute;
	left: 200px;
	top: 184px;
}

#contact a
{
	display: block;
	color: #000;
	background-color: #ae4903;
	width: 300px;
	padding: .7em .7em;
	text-decoration: none;
}

#contact a:hover
{
	background-color: #333333;
	border-right-width: 10px;
	border-right-style: solid;
	border-right-color: #ae4903;
	color: #FFF;
}

#conactive a
{
	background-color: #333333;
	border-right-width: 10px;
	border-right-style: solid;
	border-right-color: #ae4903;
	color: #FFF;
}

#contactxt
{
	color: #AAA;
	font-family: verdana, arial, sans-serif;
	font-size: .8em;
	text-align: left;
	position:absolute;
	left:220px;
	top:250px;
}

#form
{
	margin-left:210px;
	margin-top:420px;
}