Is my css code wrong? the website looks different on other computers

http://foundationofyou.com/skincare.php



This page of the website looks different on different computers either using the same browser or different browsers. Something to do with the h3 and h4 class


This is h3 class and all the colors should be in pink

<div class="pack clearfix"><div class="dots"><h3>Back to Basics</h3></div>
<span class="pink">$40</span></div>


This is h4 class and all the colors should be in green

<div class="pack clearfix"><div class="dots1"><h4>Foundation of Youth</h4></div>
<span class="green">varied</span></div>



.clearfix:after {
content: ".";
display: block;
position:relative;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
a img { border:none; }
a {color:#ccc;text-decoration:underline;}
a:hover {color:#ca86aa;}
.center {text-align:center;}
body {background-color:#333; color:#999; font-family:tahoma;arial, verdana, sans-serif; font-size:12px;margin:0;padding:0;}

#wrap {width:770px;margin:0 auto;padding:0;background-color:#111;color:#666;
border-left:1px solid #ccc;border-right:1px solid #ccc;}
#header {background:url('images/header2.jpg') no-repeat 0 0; width:770px;overflow: hidden;
padding:200px 0 0 0;
height: 0px !important;
height /**/:200px;
}
#footer {
/* background:url('images/footer.jpg') no-repeat 0 0;height:100px; */
border-top:2px #f338b3 solid;
width:750px;padding:10px;text-align:center;}

#content {color:#fff; margin:0 2px 0 136px; line-height:150%; background:#000; padding: 25px 15px 30px 15px;border-left:1px solid #333;}

h1,h2 {font-family:papyrus,arial, sans-serif; color:#fff;font-size:20px;padding:0;background:#F338B3; border-bottom:1px solid #fff;
margin:0 0 0 136px;overflow: hidden; border-left:1px solid #ccc;
padding:50px 0 0 0;
height: 0px !important;
height /**/:50px;
}
h2 {border-top:1px solid #fff;}
h1#home { background:#F338B3 url('images/h2_home.gif') no-repeat 0 0;}
h1#makeuppackages { background:#F338B3 url('images/h2_makeuppackages.gif') no-repeat 0 0;}
h2#packages_wedding { background:#F338B3 url('images/h2_packages_wedding.gif') no-repeat 0 0;}
h2#packages_group { background:#F338B3 url('images/h2_packages_group.gif') no-repeat 0 0;}
h2#packages_advice { background:#F338B3 url('images/h2_packages_advice.gif') no-repeat 0 0;}
h2#packages_info { background:#F338B3 url('images/h2_packages_info.gif') no-repeat 0 0;}
h1#skin { background:#99CC00 url('images/h2_skin.gif') no-repeat 0 0;}
h2#skin_skinmenu { background:#99CC00 url('images/h2_skin_skinmenu.gif') no-repeat 0 0;}
h2#skin_wax { background:#99CC00 url('images/h2_skin_wax.gif') no-repeat 0 0;}
h2#skin_beauty { background:#99CC00 url('images/h2_skin_beauty.gif') no-repeat 0 0;}
h1#photos { background:#F338B3 url('images/h2_photos.gif') no-repeat 0 0;}
h1#production { background:#F338B3 url('images/h2_production.gif') no-repeat 0 0;}
h1#fashion { background:#F338B3 url('images/h2_fashion.gif') no-repeat 0 0;}
h1#headshots { background:#F338B3 url('images/h2_headshots.gif') no-repeat 0 0;}
h1#weddings { background:#F338B3 url('images/h2_weddings.gif') no-repeat 0 0;}
h1#tips { background:#F338B3 url('images/h2_tips.gif') no-repeat 0 0;}
h2#services { background:#F338B3 url('images/h2_services.gif') no-repeat 0 0;}
h2#maid-of-honor { background:#F338B3 url('images/h2_maid-of-honor.gif') no-repeat 0 0;}
h2#vocal { background:#F338B3 url('images/h2_vocal.gif') no-repeat 0 0;}
h1#weddings { background:#F338B3 url('images/h2_weddings.gif') no-repeat 0 0;}
h1#testimonials { background:#F338B3 url('images/h2_testimonials.gif') no-repeat 0 0;}
h1#resume { background:#F338B3 url('images/h2_resume.gif') no-repeat 0 0;}
h1#contact { background:#F338B3 url('images/h2_contact.gif') no-repeat 0 0;}

h3 {font-family:papyrus,arial, sans-serif; color:#f338b3;font-size:22px;line-height:34px;margin:0;text-align:left;}
h4 {font-family:papyrus,arial, sans-serif; color:#99CC00;font-size:22px;line-height:34px;margin:0;text-align:left;}

table {margin:0 auto 20px auto;}
th, th a {text-decoration:none;font-family:papyrus, arial, sans-serif; color:#f338b3;font-size:18px;margin:0;text-align:left;}
td {text-align:left;}
table.price {width:500px;padding:0;margin:0 30px;}
table.price tr {background:url('images/dot2.gif') repeat-x 0 10px;}
table.price td span {background-color:#000; }
.odd {color:#ccc;font-weight:bold;}


.pack h3, .pink {font-family:papyrus,arial, sans-serif; color:#f338b3;font-size:22px;line-height:34px;margin:0;height:34px;}
.pack .dots {float:left;width:540px;background:url("images/dot.gif") repeat-x 0 5px;}
.pack h3 {width:250px;margin:0px;padding:0px;}
.pack .pink {float:left;width:40px;text-align:right; color:#f338b3;}


.pack h4, .green {font-family:papyrus,arial, sans-serif; color:#99CC00;font-size:22px;line-height:34px;margin:0;height:34px;}
.pack .dots1 {float:left;width:540px;background:url("images/dot1.gif") repeat-x 0 5px;}
.pack h4 {width:250px;margin:0px;padding:0px;}
.pack .green {float:left;width:40px;text-align:right; color:#99CC00;}


a.download {background:url('images/buttonbg.jpg') no-repeat 0 0;display:block;padding-top:8px;margin:0 auto;color:#f338b3;font-weight:bold;
Width:420px; height:36px; text-align:center;font-size:13px;text-transform:uppercase;text-decoration:none;}
a.download:hover {color:#666;}

/****** services menu *******/
#menu_services {
position:relative; border:1px solid #fff;
list-style:none;
margin:0 0 0 50px; padding:0;
height:340px;
width:425px;
background:#fff url('images/servicesmenu.jpg') no-repeat 0 0;
}
#menu_services li {
margin: 0;
padding: 0;
list-style: none;
top: 0px;
}
#menu_services li, #menu_services li a {
height: 85px;
display: block;
}
#menu_services li a {
left: 0px; width: 425px;
padding: 85px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:85px;
}

#sermoh a:hover, #sermoh a.active { background: url("images/servicesmenu.jpg") 0px -341px no-repeat; }
#serski a:hover, #serski a.active { background: url("images/servicesmenu.jpg") 0px -426px no-repeat; }
#servoc a:hover, #servoc a.active { background: url("images/servicesmenu.jpg") 0px -511px no-repeat; }


/****** main menu ********/

#menu {

position:absolute;
top:200px;
list-style:none;
margin:0; padding:0;
height:240px;
width:136px;
background:#fff url('images/menu2.gif') no-repeat 0 0;
}
#menu li {
margin: 0;
padding: 0;
list-style: none;
top: 0px;
}
#menu li, #menu li a {
height: 30px;
display: block;
}
#menu li a {
left: 0px; width: 136px;
padding: 30px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:30px;
}

#mpack a:hover, #mpack a.active { background: url("images/menu2.gif") 0px -244px no-repeat; }
#mgal a:hover, #mgal a.active { background: url("images/menu2.gif") 0px -274px no-repeat; }
#mtip a:hover, #mtip a.active { background: url("images/menu2.gif") 0px -304px no-repeat; }
#mser a:hover, #mser a.active { background: url("images/menu2.gif") 0px -334px no-repeat; }
#mres a:hover, #mres a.active { background: url("images/menu2.gif") 0px -364px no-repeat; }
#mtest a:hover, #mtest a.active { background: url("images/menu2.gif") 0px -394px no-repeat; }
#mcon a:hover, #mcon a.active { background: url("images/menu2.gif") 0px -424px no-repeat; }
#mhome a:hover, #mhome a.active { background: url("images/menu2.gif") 0px -454px no-repeat; }

.submenu {
list-style:none;
background-color:#666;
margin: 0 0 0 115px;
padding: 0;
width:140px;
}
.submenu li {margin:0;height:24px;display:block;}
.submenu li a {text-decoration:none;color:#fff;width:130px; height:10px; padding:7px 5px;border-bottom:#ccc 1px solid;display:block;font-size:10px;font-weight:bold;}
.submenu li a:hover {color:#f338b3;background-color:#ccc;}

#subgal {position:absolute; top:235px; z-index:10; visibility: hidden; }
#subser {position:absolute; top:297px; z-index:10; visibility: hidden; }

#flash {position:absolute; top:0;height:200px;width:760px; overflow:hidden;}

/******* GALLERY PAGES ************/
#mainimg {height:650px;}
.mainwrap {position:absolute;top:525px;width:590px;text-align:center;}
.mainwrap img {visibility:hidden;border:3px solid #ccc;}
#thumbs a img { border: 1px solid #fff; }
#thumbs a:hover img { border:1px solid #681a68;
filter:alpha(opacity=60);
opacity: 0.6;
-moz-opacity:0.6;
}


/******* Form stuff ************/
form strong {float:left; width:120px; }
form input, form textarea {border:1px solid #714f80;background-color:#eee;}
form .submit {background-color:#333; color:#fff;font-weight:bold;font-family:trebuchet ms, arial, sans-serif;}

/******* Tips ************/
.q {color:#999999;font-weight:bold;}
.q span {display:block;text-indent:20px;}
.a {margin:10px 30px 10px 30px;}

.em {color:#f338b3; font-weight:bold;}

/* These are standard sIFR styles... do not modify */

.sIFR-flash {
visibility: visible !important;
margin: 0;
}

.sIFR-replaced {
visibility: visible !important;
}

span.sIFR-alternate {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
overflow: hidden;
}


/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h2 {}

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />


http://i48.tinypic.com/4iipt3.png

Can someone help me check my coding for conflicts?

http://foundationofyou.com/services_skin-care.php The above link is not available.

Hello noodlebaby,
This link works a little better - http://foundationofyou.com/skincare.php

There are a couple errors the validator finds that may be connected to your problem.
Look at the markup errors here (http://validator.w3.org/check?verbose=1&uri=http%3a%2f%2ffoundationofyou.com%2fskincare.php). Check out the links about validation in my sig below.


...

Yes I look at those errors* but it didn;t relate to my problem><

If .pack h3 {width:250px;margin:0px;padding:0px;background:#000;} doesn't work for you because of the width you have to set on the h3, then you will need to use another approach.

Try using <span></span> tags instead of block level h3. You could code the spanned text to look just like the h3 text and you would not have to give it a width so, it's black background would not extend further than needed like you h3 does with the above fix.
Try this - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100.1% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
#container {
width: 500px;
margin: 30px auto;
background: #999;
overflow: auto;
font-size: 0.8em;
}
.line {
height: 24px;
clear: both;
background: #000 url(http://foundationofyou.com/images/dot.gif) repeat-x;
}
.left {
float: left;
padding: 0 5px;
background: #000;
color: #f9f;
line-height: 24px;
}
.right {
float: right;
padding: 0 5px;
background: #000;
color: #f9f;
line-height: 24px;
}
</style>
</head>
<body>
<div id="container">
<div class="line"><span class="left">Back to Basics</span><span class="right">$40</span></div>
<!--end container--></div>
</body>
</html>

You should fix those errors anyway. Some will give you problems if you don't.

i tried to use the new codes and it works^___^

http://www.foundationofyou.com/test%20page.php

but one problem is how do i keep the container fixed so the heading wont move up and down when mouse is scrolling:confused:

nvm i know how to do it ;p thanks!