PDA

View Full Version : Css problem



jpdcab
06 Aug 2007, 04:40 PM
Ok, its a easy one, but the css is killing me....


<html>
<head>
<meta name="description" content="Web Design, Haddonfield, New Jersey, pennsylvania, pa, nj" />
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<title>Joseph ****inson | Web Designer</title>
</head>

<BODY>

<div id="CONTAIN">

<div id="header">
<div class="nav">
| <a href="index.html">Home</a>
| <a href="pages/portfolio.html">Portfolio</a> |
<a href="pages/about.html">About</a> |
<a href="pages/contact.php">Contact</a> |
</div>
</div>


<h3><img src="images/arrow.jpg" alt="Portfolio Design"> About</h3>
<div id="content">
<div id="left">
<p> Is web design not your cup of tea? No problem, I am a freelance web designer here to help and assist you in establishing an exposure on the web. Unlike your typical, overpriced freelance designer, I design sites on shoe-string budgets. My pricing not only meets your budget but also your expectations. [ <a href="pages/about.html" title="Joseph ****inson Portfolio">More </a> ] </p>
<hr>
<strong> Why hire me?</strong><br>
<p>My idea of proper web design is very different from what your typical web design firm. Unlike my competitors, I use up-to-date css (cascading stylesheets) and xhtml standards. These <a href="http://www.w3.org/Style/CSS/">standards</a> insure that your site will work on any platform, at any resolution , on any browser . </p>
<hr />
<strong>Is your website cross-browser compatible?</strong> <br>
<img src="images/xbrowser.jpg" alt="Cross browser compatible Websites" />Unfortunately, many websites lack this, leaving customers in the water.
<hr>
</div> <! -- end the LEFT -- >

<div id="right">
<p>This is the right side</p>
</div> <! -- end the RIGHT -- >



</div> <! -- end all the content -- >
<! -- Copyright &copy 2007 Joseph ****inson . All Rights Reserved. -- >
</div> <! -- end the CONTAINER -- >


</BODY>

</head>
</html>


stylesheet.....



/* 99CC00(green) 353535(dblack) 4F4F4F(lblack) F2F3ED(Lightgrey) */

BODY { background-color:#4F4F4F; margin:0px auto 0px auto; font-family:Georgia, serif; }

#CONTAIN { width:984px; height:625px; margin:1px auto 0px auto; background-color:#353535; border:2px solid #9fa19b; }

#header { margin:0px auto 0px auto; height:122px; background-image:url(../images/header.jpg); background-repeat:no-repeat; }
.nav { text-align:center; padding:50px 30px 0px 0px; text-align:right; }
.nav a:link { font-size:14pt; color:#353535; text-decoration:none; }
.nav a:visited { font-size:14pt; color:#353535; text-decoration:none; }
.nav a:hover { color:#F2F3ED; text-decoration:overline; }

/* -- to align all the pages other than main -- */
#content { margin:inherit; width:968px; padding:0px 5px 0px 10px; color:#F2F3ED; }
#content2 { margin:inherit; width:968px; padding:0px 5px 0px 45px; color:#F2F3ED; } /* Align client images */

.thumbs { width:150px; height:180px; float:left; padding:5px 5px 5px 5px; border:1px solid #4F4F4F; margin:5px; } /* controls the client images */
.thumbs a:link { border-bottom:5px solid #4F4F4F; }
.thumbs a:visited { border-bottom:5px solid #4F4F4F; }
.thumbs a:hover { border-bottom:5px solid #99CC00; }

/* -- for the home layout -- */
#left { width:795px; height:475px; float:left; font-size:12pt; }
#left a:link { color:#99CC00; text-decoration:none; font-weight:bold }
#left a:visited { color:#99CC00; text-decoration:none; font-weight:bold }
#left a:hover { color:#F2F3ED; text-decoration:none; font-weight:bold; border-bottom:1px dashed #F2F3ED; }

#right { width:150px; height:400px; float:left; font-size:12pt; BORDER:2PX SOLID #99CC00; margin:0px 0px 0px 10px; }
#right a:link { color:#99CC00; text-decoration:none; font-weight:bold; }
#right a:visited { color:#99CC00; text-decoration:none; font-weight:bold }
#right a:hover { color:#F2F3ED; text-decoration:none; font-weight:bold }



hr { width:785px; }
h1, h2, h3, h4, h5 { color:#99CC00; margin:0px 5px 5px 5px; padding-top:0px; }
p { margin:0; color:#F2F3ED; font-size:12pt; }
strong { color:#99CC00; font-weight:bold; }

a { color:#99CC00; }
a:visited { color:#99CC00; }
a:hover { color:#F2F3ED; border:0; }



My problem: Simply in IE6 it isnt center, it firefox it is? It's probably a minor little problem. If anyone sees it let me know. Thanks

Joe

Wickham
07 Aug 2007, 01:06 AM
Add this at the very top of the html file, before the <html> tag:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

My IE7 was also showing your page on the left instead of centralised so I didn't check IE6, it's probably the same in all IE which is using "quirks mode" instead of the CSS2 standards for padding and margins.