Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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

    Code:
    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>
    Code:
    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>

    Code:
    .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" />


    Can someone help me check my coding for conflicts?
    Last edited by noodlebaby; 12-18-2009 at 02:54 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    The above link is not available.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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. Check out the links about validation in my sig below.


    ...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes I look at those errors* but it didn;t relate to my problem><

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
    <!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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #7
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    nvm i know how to do it ;p thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •