SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Location
    Washington, DC
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need Help With CSS

    Hi,

    I'm having some issues with my design. Can someone look at this and tell me what's wrong w/ my code? Thank you so much.

    http://jasonpbauer.com/ultrasona/anxious/anxious.html

    Here's the HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>

    <head>
    <title>See your baby before your due date at Ultrasona St. Louis</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <? //include("functions/meta.php");?>
    <script type="text/javascript"></script>
    <style type="text/css" media="all">
    @import url(css/anxious.css);
    </style>
    </head>

    <body>
    <div id="main">
    <br /><br /><br /><br /><br /><br /><br />
    <div id="frame">
    <div id="anxiousHeader"><img src="css/anxious_02.jpg"></div>
    <div id="anxiousRight"><img src="css/anxious_06.jpg"></div>
    <div id="anxiousLeft"><img src="css/anxious_04.jpg"></div>
    <div id="middleText">
    <p>Now you can see your baby in clear 3D like never before. No more squinting
    and explaining to the images to others. 3D ultrasound produces sharp, clear
    pictures that show the baby's features. Starting as early as 34 weeks you
    can share your miracle with your family and friends.</p>
    <p>Take a moment to view <a href="http://www.ultrasonastlouis.com/samples.php">samples</a> of images we have
    captured in our O'Fallon, MO office.</p>
    <p>Our <a href="http://www.ultrasonastlouis.com/services.php">services</a> are very affordable starting at $135 for a 3D ultrasound.</p>
    <p>Our <a href="http://www.ultrasonastlouis.com/faq.php">FAQ</a> page can provide answers to many of your
    questions.</p>
    <p>Don't hesitate, contact us today to schedule your session via email or gives us a call at 636-978-8778 or 866-717-8778.</p>
    </div>
    <br clear="all" /><!-- without this little <br /> NS6 and IE5PC do not stretch the frame div down to encopass the content DIVs -->
    </div>
    <div id="footer"><a href="http://www.ultrasonastlouis.com/index.php"><img class="link" src="css/anxious_10.jpg" alt="Ultrasona St. Louis Home"></a>
    <div id="bottomText"><a href="mailto:info@ultrasonastlouis.com">info@ultrasonastlouis.com</a><br />636-978-8778 or 866-717-8778</div>
    </div>

    </div>
    </body>

    </html>

    Here's the CSS:

    body {
    font: 11px/15px arial, verdana, georgia;
    color: #000000;
    background:#494439;
    margin: 0px;
    border: 0px;
    padding: 0px;
    text-align: left;
    }

    #main {
    text-align: left;
    margin: 0px;
    width: 949px;
    background: #ece7d4;
    margin: auto;
    margin-top: 0px;
    padding:0px;
    voice-family: "\"}\"";
    voice-family: inherit;
    }
    html>body #main {
    width: 949px;
    }

    /***************** Frame Code **********************/
    #frame {
    width:949px;
    margin-right:auto;
    margin-left:auto;
    padding-top:322px;
    text-align:left;
    }

    #frame pre {
    margin:0px 0px 0px 0px;
    }

    #footer {
    position: absolute;
    background: #d0c09e;
    height: 130px;
    width: 949px;
    font: 11px arial, times new roman, times;
    text-decoration: none;
    color: #ffffff;
    font-size:10px;
    text-align:center;
    padding-bottom:2px;
    padding-top:20px;
    border-top: 2px solid #382912;
    }

    img.link {
    BORDER-RIGHT: 0px;
    BORDER-TOP: 0px;
    BORDER-LEFT: 0px;
    BORDER-BOTTOM: 0px;
    TEXT-DECORATION: none
    }

    #anxiousHeader {
    position: absolute;
    top:0px;
    left:437px;
    z-index: 2;
    }

    #anxiousRight {
    position: absolute;
    top:46px;
    left:830px;
    }

    #anxiousLeft {
    position: absolute;
    top:20px;
    left: 240px;
    z-index: 1;

    }

    #middleText {
    position: absolute;
    Z-INDEX: 2;
    TOP: 80px;
    LEFT: 500px;
    WIDTH: 335px;
    COLOR: #494439;

    }


    #middleText a:link {
    COLOR: #2b7e37
    }

    #middleText a:visited {
    COLOR: #2b7e37
    }

    #middleText a:hover {
    COLOR: #ad8b45
    }

    #bottomText {
    text-align: center;
    Z-INDEX: 11;
    COLOR: #494439;
    padding-left: 20px;
    }

    #bottomText a:link {
    COLOR: #2b7e37
    }

    #bottomText a:visited {
    COLOR: #2b7e37
    }

    #bottomText a:hover {
    COLOR: #ad8b45
    }

  2. #2
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What exactly is going wrong with it?

    One thing that jumps out at me is that you're using the xhtml 1.1 doctype served as text/html which is incorrect. I'd recommend dropping down to XHTML 1.0 Strict or even HTML 4.01 Strict.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Location
    Washington, DC
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All of the images are shifting to the right in IE7 and FF2.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well for starters you have a mix of structural and presentational HTML. BR elements are to be used as line breaks, not margins or padding - and your top three images could probably be served as backgrounds.

    You're also using absolute positioning when floats and margins may be the better alternative.

    Do you have a link to a live demo or example of this page I could look at by any chance? (Please post it here; do not PM the link to me.)

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Location
    Washington, DC
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://jasonpbauer.com/ultrasona/anxious/anxious.html

    I appreciate the help. Thank you so much.

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just out of curiosity (before I dispense my advice), what is the font you're using for the "Anxious to see your baby..." text?

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Location
    Washington, DC
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know it's not a good practice, but I actually made that text a JPEG. I'm not sure what the font was and I don't have accesss to the PSD files right now. Thanks again.

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When done properly as part of an image substitution technique, it can be a good idea. I was just asking for the sake of curiosity (and to see if it would be possible to duplicate with plain HTML and CSS).

  9. #9
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Location
    Washington, DC
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You suggested using floats. Should I do something like this?

    #anxiousRight {
    float: right;
    top:46px;
    clear: both;
    }

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No. Using a clear will literally clear the element, especially if it's placed after the float. Also, top: 46px; isn't a valid property when using floats - it only works with positioning.

  11. #11
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Location
    Washington, DC
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it to work in IE7 and FF2. I haven't tested anything else yet. The only thing that I'd like to fix is the image in the footer that says Ultrasona. It is centered using <center> around a div. I know this isn't the proper way to do it. How can I center this image horizontally in css? Also, if there is anything else that isn't done properly in the code, let me know. Thanks so much

    http://jasonpbauer.com/ultrasona/anxious2/anxious.html

    Code:
     
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html>
    
    <head>
    <title>See your baby before your due date at Ultrasona St. Louis</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <? //include("functions/meta.php");?>
    <script type="text/javascript"></script>
    <style type="text/css" media="all">
    		@import url(css/anxious.css);
    </style>
    </head>
    <body>
    <div id="main">
    	<div id="frame">
    		<div id="anxiousHeader"><img src="css/anxious_02.jpg"></div>
    		<div id="anxiousRight"><img src="css/anxious_06.jpg"></div>
    		<div id="anxiousLeft"><img src="css/anxious_04.jpg"></div>	
    		<div id="middleText">
    			<p>Now you can see your baby in clear 3D like never before. No more squinting
    			and explaining to the images to others. 3D ultrasound produces sharp, clear
    			pictures that show the baby's features. Starting as early as 34 weeks you
    			can share your miracle with your family and friends.</p>
    			<p>Take a moment to view <a href="http://www.ultrasonastlouis.com/samples.php">samples</a> of images we have
    			captured in our O'Fallon, MO office.</p>
    			<p>Our <a href="http://www.ultrasonastlouis.com/services.php">services</a> are very affordable starting at $135 for a 3D ultrasound.</p>
    			<p>Our <a href="http://www.ultrasonastlouis.com/faq.php">FAQ</a> page can provide answers to many of your
    			questions.</p>
    			<p>Don't hesitate, contact us today to schedule your session via email or gives us a call at 636-978-8778 or 866-717-8778.</p>
    		</div>
    	<br clear="all" /><!-- without this little <br /> NS6 and IE5PC do not stretch the frame div down to encopass the content DIVs -->
    	</div>
    	<center>
    <div id="footer"><a href="http://www.ultrasonastlouis.com/index.php"><img class="link" src="css/anxious_10.jpg" alt="Ultrasona St. Louis Home"></a>
    <div id="bottomText"><a href="mailto:info@ultrasonastlouis.com">info@ultrasonastlouis.com</a><br />636-978-8778 or 866-717-8778</div></center>
    </div>
    </div>
    </body>
    </html>
    Code:
    body {  
    	font: 11px/15px  arial, verdana, georgia; 
    	color: #000000;
    	background:#494439;
    	margin: 0px;
    	border: 0px;
    	padding: 0px;
    	text-align: left;
    	}
    
    #main { 	
    	text-align: left;
    	margin: 0px;
    	width: 949px;
    	background: #ece7d4;
    	margin: auto;
    	margin-top: 0px;
    	padding:0px;
    	voice-family: "\"}\"";
    	voice-family: inherit;
    		}
    	html>body #main {
    	width: 949px;
    	}
    
    /***************** Frame Code **********************/
    #frame {
    	width:949px;
    	margin-right:auto;
    	margin-left:auto;
    	padding-top:0px;
    	text-align:left;
    	}
    
    #frame pre {
    	margin:0px 0px 0px 0px;
    	}
    
    #footer {
    	background: #d0c09e;
    	margin-left:auto; 
    	margin-right:auto
    	height: 125px;
    	width: 949px;
    	font: 11px arial, times new roman, times;
    	text-decoration: none;
          color: #ffffff;
    	font-size:10px;
    	padding-bottom:2px;
    	padding-top: 5px;
    	border-top: 2px solid #382912;
    	}
    
    
    img.link {
    	BORDER-RIGHT: 0px; 
    	BORDER-TOP: 0px; 
    	BORDER-LEFT: 0px; 
    	BORDER-BOTTOM: 0px; 
    	TEXT-DECORATION: none
    	}
    
    img {
    display:block;
    }
    
    #anxiousHeader {
    	float: right;
    	padding: 0;
    	clear: both; 
    	}
    
    #anxiousRight {
    	float: right;
    	margin-left:0px;
    	padding: 0;
    	clear: both;
    	}
    
    #anxiousLeft {
    	float: left;
    	margin-top: 0px;
    	margin-left: 40px;
    	padding: 0;
    	}
    
    #middleText {
    	position: absolute;
    	width: 400px;
    	margin-top: 80px;
    	left: 318px; 
    	COLOR: #494439; 
    	}
    
    
    #middleText a:link {
    	COLOR: #2b7e37
    	}
    
    #middleText a:visited {
    	COLOR: #2b7e37
    	}
    
    #middleText a:hover {
    	COLOR: #ad8b45
    	}
    
    #bottomText {
    	text-align: center;
    	Z-INDEX: 11; 
    	COLOR: #494439; 
    	padding-left: 20px;
    	}
    
    #bottomText a:link {
    	COLOR: #2b7e37
    	}
    
    #bottomText a:visited {
    	COLOR: #2b7e37
    	}
    
    #bottomText a:hover {
    	COLOR: #ad8b45
    	}

  12. #12
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Location
    Washington, DC
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If someone could please look at this, I'd really appreciate it. I'm having problems with the text not staying in a fixed location when the browser window is resized. Thanks.

  13. #13
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Location
    Washington, DC
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is what I have now. It works with the exception of two things. I want to center the the logo in the footer using CSS. Currently I'm using the <center> tag around the containing div. Also the polaroids on the left are placed lower in FF2 than they are in IE7. Can someone please take a look at this. Also if there is anything else that you notice that is wrong, let me know. Thanks.

    http://jasonpbauer.com/ultrasona/anxious/anxious.html

    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html>
    
    <head>
    <title>See your baby before your due date at Ultrasona St. Louis</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <? //include("functions/meta.php");?>
    <script type="text/javascript"></script>
    <style type="text/css" media="all">
    		@import url(css/anxious.css);
    </style>
    </head>
    <body>
    <div id="main">
    	<div id="frame">
    		<div id="anxiousHeader"><img src="css/anxious_02.jpg"></div>
    		<div id="anxiousRight"><img src="css/anxious_06.jpg"></div>
    		<div id="anxiousLeft"><img src="css/anxious_04.jpg"></div>	
    		<div id="middleText">
    			<p>Now you can see your baby in clear 3D like never before. No more squinting
    			and explaining the images to others. 3D ultrasound produces sharp, clear
    			pictures that show the baby's features. Starting as early as 34 weeks you
    			can share your miracle with your family and friends.</p>
    			<p>Take a moment to view <a href="http://www.ultrasonastlouis.com/samples.php">samples</a> of images we have
    			captured in our O'Fallon, MO office.</p>
    			<p>Our <a href="http://www.ultrasonastlouis.com/services.php">services</a> are very affordable starting at $135 for a 3D ultrasound.</p>
    			<p>Our <a href="http://www.ultrasonastlouis.com/faq.php">FAQ</a> page can provide answers to many of your
    			questions.</p>
    			<p>Don't hesitate, contact us today to schedule your session via email or gives us a call at 636-978-8778 or 866-717-8778.</p>
    		</div>
    	<br clear="all" /><!-- without this little <br /> NS6 and IE5PC do not stretch the frame div down to encopass the content DIVs -->
    	</div>
    	<center>
    <div id="footer"><a href="http://www.ultrasonastlouis.com/index.php"><img class="link" src="css/anxious_10.jpg" alt="Ultrasona St. Louis Home"></a>
    <div id="bottomText"><a href="mailto:info@ultrasonastlouis.com">info@ultrasonastlouis.com</a><br />636-978-8778 or 866-717-8778</div></center>
    </div>
    </div>
    </body>
    </html>

    CSS:
    Code:
    body {  
    	font: 12px/16px  arial, verdana, georgia; 
    	color: #000000;
    	background:#494439;
    	margin: 0px;
    	border: 0px;
    	padding: 0px;
    	text-align: justify;
    	line-height: 17px;
    	}
    
    #main { 	
    	text-align: justify;
    	margin: 0px;
    	width: 949px;
    	background: #ece7d4;
    	margin: auto;
    	margin-top: 0px;
    	padding:0px;
    	voice-family: "\"}\"";
    	voice-family: inherit;
    		}
    	html>body #main {
    	width: 949px;
    	}
    
    /***************** Frame Code **********************/
    #frame {
    	width:949px;
    	margin-right:auto;
    	margin-left:auto;
    	padding-top:0px;
    	text-align:justify;
    	}
    
    #frame pre {
    	margin:0px 0px 0px 0px;
    	}
    
    #footer {
    	background: #d0c09e;
    	margin-left:auto; 
    	margin-right:auto
    	height: 125px;
    	width: 949px;
    	font: 11px arial, times new roman, times;
    	text-decoration: none;
          color: #ffffff;
    	font-size:10px;
    	padding-bottom:2px;
    	padding-top: 5px;
    	border-top: 2px solid #382912;
    	}
    
    
    img.link {
    	BORDER-RIGHT: 0px; 
    	BORDER-TOP: 0px; 
    	BORDER-LEFT: 0px; 
    	BORDER-BOTTOM: 0px; 
    	TEXT-DECORATION: none
    	}
    
    img {
    display:block;
    }
    
    #anxiousHeader {
    	float: right;
    	padding: 0;
    	clear: both; 
    	}
    
    #anxiousRight {
    	float: right;
    	margin-left:0px;
    	padding: 0;
    	clear: both;
    	}
    
    #anxiousLeft {
    	float: left;
    	margin-top: 0px;
    	margin-left: 40px;
    	padding: 0;
    	}
    
    #middleText {
    	float: left;
    	margin-top: 30px;
    	margin-left: 35px;
    	width: 380px;
    	COLOR: #494439;
    	}
    
    
    #middleText a:link {
    	COLOR: #2b7e37
    	}
    
    #middleText a:visited {
    	COLOR: #2b7e37
    	}
    
    #middleText a:hover {
    	COLOR: #ad8b45
    	}
    
    #bottomText {
    	text-align: center;
    	Z-INDEX: 11; 
    	COLOR: #494439; 
    	padding-left: 20px;
    	}
    
    #bottomText a:link {
    	COLOR: #2b7e37
    	}
    
    #bottomText a:visited {
    	COLOR: #2b7e37
    	}
    
    #bottomText a:hover {
    	COLOR: #ad8b45
    	}

  14. #14
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Location
    Washington, DC
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could someone help with this? It's not aligning properly in IE 6 and below either......................


Bookmarks

Posting Permissions

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