now my css is crap

[dyers78]

Thanks to all who have been helping me out.

I got my includes to work and this the first pure css site I have done so please be patient as I learn.

My page is looking great in firefox and safari but IE is breaking it up. It's making the header way too tall and pushing the navigation to the next line under the main box instead of the right side.

Here is the css:


body {background-color: #fff; background-image: url(../img/SiteWide/MainBG.gif); background-repeat: repeat-x;}
h1 {font: normal 13pt Arial san-serif; color: #0E2F80; line-height: 12pt}
p {font-family: Arial san-serif; font-size: 10pt; color: #999; line-height: 11pt; }
select {font-family: Arial san-serif; font-size: 9pt; color: #999}


/*general navigation links */
a:link { color: #999 ; text-decoration: none;}
a:visited { color: #999; text-decoration: none;}
a:hover { color: #0e2f80; text-decoration: underline}
a:active { color: #0e2f80; text-decoration: underline}





/* main container centering all content*/
#main {width: 900px; margin-top: 15px; margin-left: auto; margin-right: auto; text-align: left;}

/* container holding left content inside the main container*/
#container {float: left; width: 698px; background-color: #fff; border: 1px solid #999; text-align: left}

/* heading */
#heading {width: 100%; height: 120px;}
#leftheading {width: 40%; height: 115px; float: left;}
#leftheading h1 {padding: 18px 0 15px 21px;}
#quickLinks {width: 100%; padding-left: 21px;}

/* header navigation */
#headnav {width: 60%; height: 115px; float: right; text-align: right;}
#headnav ul {margin: 0; padding: 93px 15px 0 0;}
#headnav li {display: inline; list-style-type: none}
#headnav li a {padding: 7px 10px; font: normal 10pt Arial san-serif;}
#headnav li a:link {color: #d12c1d; text-decoration: none;}
#headnav li a:visited {color: #d12c1d; text-decoration: none;}
#headnav li a:hover {color: #999; text-decoration: underline;}
#headnav li a:active {color: #999; text-decoration: underline;}

/* highlighted stories */
#flashMovie {width: 99%; height: 300px; margin: 4px; border-bottom: solid 1px #999; border-top: 1px solid #999}


/* overall container for focus group news boxes */
#news {float: left; width: 100%; margin: 4px;}
#news a {font: normal 8pt Arial san-serif;}
#news a:link { color: #d12c1d; text-decoration: none;}
#news a:visited {color: #d12c1d; text-decoration: none;}
#news a:hover {color: #999; text-decoration: underline;}
#news a:active {color: #999; text-decoration: underline}
#news h1 {text-align: left; font: bold 8pt Arial san-serif; color: #0e2f80; line-height: 9pt}
#news p {font: normal 8pt Arial san-serif; line-height: 11pt; color: #999; padding-right: 15px; height: 60px; }

/* successful children and youth box*/
#children {width: 24%; height: 130px; float: left; border-right: 1px solid #999;}
/* caring community box */
#community {width: 24%; height: 130px; float: left; border-right: 1px solid #999; padding-left: 4px; }
/* strong box */
#families {width: 24%; height: 130px; float: left; border-right: 1px solid #999; padding-left: 4px;}
/* healthy self reliant people box */
#reliantPeople {width: 24%; height: 130px; float: left; padding-left: 4px;}


/* mission */
#mission {float: left; width: 99%; margin: 4px auto 4px auto; padding: 0; border-top: 1px solid #999}
#mission img {padding:28px 0 0px 18px}


/* container holding main navigation */
#nav {float: left; width: 190px;}
#nav img {margin: 0; padding: 15px 0 35px 30px;}
#nav ul {margin: 0; padding: 0 0 0 30px; }
#nav li {list-style-type: none; font: bold 8pt Arial san-serif; color: #0e2f80}
#nav li a {line-height: 12pt; font-weight: normal }
#nav li a:link {color: #0e2f80; text-decoration: none;}
#nav li a:visited {color: #0e2f80; text-decoration: none;}
#nav li a:hover {color: #999; text-decoration: none;}
#nav li a:active {color: #999; text-decoration: none;}
.mainnavtitles {padding: 10px 0 5px 0;}

/* container holding footer */
#footer { float: left; border: 1px solid #999; text-align: left; width: 698px; margin-top: 5px;}
#footer p {font-family: Arial; font-size: 7pt; color: #999; padding-left: 25px}


can you see anything at all that would be causing this? my first though is that the margins are too tight? Perhaps I need more room for errors. I am going top play with this but if you see aomething that looks out of sorts please let me know.

[chris_bcn]

I don't have time to read through it all I'm afraid.

Off the top of my head, change the doctype to strict - if it's transitional it throws IE into quirks mode and will use the wrong box model

[Jackimalyn]

IE is evil.

[EC]

you need to post your html.

is it IE 6 that's giving you errors?

[dyers78]

edit*


<!DOCTYPE html PUBLIC "‑//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>United Way of the Quad Cities Area</title>
<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
<?php error_reporting(E_ALL); ?>
</head>

<body>
<div id="main">
<div id="container">

<div id="heading">

<div id="leftheading">
<h1>United Way<br />of the Quad Cities Area</h1>
<form id="quickLinks" action="#" method="get" name="quickLinks">
<select name="search quicklinks">
<option selected="selected">search site quick links</option>
<option value="two">40 assets</option>
<option value="three">communication tools</option>
</select>
</form>
</div>

<div id="headnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">InfoLINK/211</a></li>
<li><a href="#">Success By 6</a></li>
</ul>
</div>

</div>

<div id="flashMovie">
<p>Flash Movie Here highlighting what's up.</p>
</div>

<div id="news">

<div id="children">
<h1>Successful<br />Children &amp; Youth</h1>
<p>Learn how United Way is dealing with the root problems concerning area youth through the 40 Assets.</p>
<p><a href="http://www.unitedwayqc.org/html/AssetMicroSite/intro2.html">Be an Asset Builder</a></p>
</div>

<div id="community">
<h1>Caring<br />Community</h1>
<p>Working to promote and encourage volunteerism here in the Quad Cities.</p>
<p><a href="http://www.unitedwayqc.org/html/AssetMicroSite/intro2.html">Volunteer Opportunities</a></p>
</div>

<div id="families">
<h1>Strong<br />Families</h1>
<p>Offering solutions to problems effecting faiies of all types.</p>
<p><a href="http://www.unitedwayqc.org/html/AssetMicroSite/intro2.html">Discover Family Phazes</a></p>
</div>

<div id="reliantPeople">
<h1>Healthy,<br />Self-Reliant People</h1>
<p>Focused on discovering the root causes of poverty and how it effects people.</p>
<p><a href="http://www.unitedwayqc.org/html/AssetMicroSite/intro2.html">Ruby to Present</a></p>
</div>


<div id="mission">
<img src="img/mission.gif" alt="To improve lives and make a positive impact in our community." border="0">
</div>

</div>
</div>

<div id="nav">
<img src="img/SiteWide/uw_rgb_ful_qc.gif" alt="United Way logo">
<?php include("html/mainnav.html") ?>
</div>

<div id="footer">
<p>copyright 2007 United Way of the Quad Cities Area | Privacy Policy</p>
</div>

</div>

</body>

</html>


I added the html. I have not had a chance to try what Chris suggested. I tested in IE7 and it's fine except it's not calling the specified font (arial). I am guessing theat is because of the order I have the font attributes listed?

SO yes it seems IE6 is the culprit.

[Benjamin]

No, XHTML Transitional does not throw IE6 into quirks mode, unless you include an XML declaration (apparently). Check out the following page for more details but basically you're not in quirks mode with your code:

http://hsivonen.iki.fi/doctype/

[dyers78]

any idea why this would not be rendering the font correctly?

It seems to just be IE6. I changed all the font attributes to just san-serif and rearranged the order according to w3c and it is still being rendered in Times on computers with ie6.

Can someone load this and see what the font is? Also, let me know if the navigation (which should be along the right side listed down the right margin of the main block) is being bumped down under the main content and browser you are seeing it on.

[Benjamin]

At a guess: maybe you need a comma between your fonts.

font-family: Arial, sans-serif;

NOT

font-family: Arial sans-serif;

Validating your CSS will help you pick up these kinds of things easily.

[dyers78]

just run it through the w3c validator? I have not had a chance to look over that yet. keeping up with this webstuff is full time work. I will check that out.

thanks a bunch -

[dyers78]

i ran this through a validator and it came back with no errors on the css.

However it is flagging an error on the html side but it's saying line 112... there is no 112 is this some cruel joke the w3c does to people the first time they try to validate something 8-)

[resdog]

what is the error on line 112?

[John G]

When it validates your code it validates your whole viewed page. That means when you throw your *includes in there, it's looking at everything thrown into it. Specifically if you were to go to your website and view-> source, that's what it's validating, not your original code. So look there first, then go find it in your original code and fix that area.

[dyers78]

sweet got it. It was the include. It was flagging a '&' wanting a '&amp;'. cool!