PDA

View Full Version : CSS div problem in IE


graphics@sn
05-20-2010, 03:24 AM
My home page is displaying properly in the latest versions of FF and Safari, but all versions of IE aren't working. The #contenttext div appears to be stretching all the way down the page and the sidebar is under that div as well. I am a graphic designer, learning web design, please bear with me, I'm a novice :p Any help would be greatly appreciated.

I tried to see if a hack was needed to make the divs behave in IE... didn't get anywhere. Maybe the bit of CSS3 code for border radius is causing the problem?

html:
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>Sonoran News May 19 &ndash;&nbsp;May 25, 2010</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<style type="text/css">

</style>

<link href="practice/stylehome.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--

-->
</style>
<div id="leaderboard"><a href="http://www.steelshieldsecurity.com/" target="_blank"><img src="advertising/Steel-Shieldspring.gif" alt="Steel Shield" width="900" height="100" border="0" /></a></div>
<div class="centerplain" id="container">
<div id="header">
<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="004863574485227464736:gneqxn8dzna" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="21" />
<input class="button" type="submit" name="Submit" value="GO" />
</div>

<div id="container2">

<div id="contenttext">
<h5><img src="archives/2010/100519/100519images/feature-stallion.jpg" alt="stallions" width="370" height="229" class="leftplain" />
<div/>
<a href="archives/2010/100519/equine.html">Wild horses in Arizona</a></h5>
<p><em>May 19, 2010</em><br />
</p>
</p>
<div id="kickers">
<div align="center">
<h3 class="h3">Unofficial Election Results: Prop. 100 Yes 64% No 36%</h3>
</div>
</div> <!--end kickers-->
</div> <!--end content text-->


<div class="center" id="sidebar">
<a href="http://www.shop.sonorannews.com" target="_blank"><img src="advertising/contribution.jpg" alt="contribute" width="250" height="125" class="center" /></a>
<a href="http://www.dialcomfort.com/" target="_blank"><img src="advertising/ACbyJay-250.gif" width="250" height="250" class="center" /></a>
<a href="http://solaruniverse.com/" target="_blank"><img src="advertising/Solar-Universe.gif" alt="Solar Universe" width="250" height="250" class="center" /></a>
<a href="http://www.tatumpc.com/" target="_blank"><img src="advertising/TatumPC.gif" alt="Tatum PC" width="250" height="250" class="center" /></a>
<img src="advertising/graduation.gif" alt="graduation" width="250" height="100" class="center" />
<div id="mail">
<!-- Begin MailChimp Signup Form -->
<!--[if IE]>
<style type="text/css" media="screen">
#mc_embed_signup fieldset {position: relative;}
#mc_embed_signup legend {position: absolute; top: -1em; left: .2em;}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css" media="screen">
.mc-field-group {overflow:visible;}
</style>
<![endif]-->
<script type="text/javascript" src="http://sonorannews.us1.list-manage.com/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://sonorannews.us1.list-manage.com/js/jquery.validate.js"></script>
<script type="text/javascript" src="http://sonorannews.us1.list-manage.com/js/jquery.form.js"></script>
<script type="text/javascript" src="http://sonorannews.us1.list-manage1.com/subscribe/xs-js?u=7471b63b05a3a25f79ece1054&amp;id=daf11b7b22"></script>
<div id="mc_embed_signup">
<form action="http://sonorannews.us1.list-manage.com/subscribe/post?u=7471b63b05a3a25f79ece1054&amp;id=daf11b7b22" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" style="font: normal 100% Arial;font-size: 12px;">
<fieldset style="-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;border: 1px solid #000000;padding-top: 1.5em;margin: .5em 0;background-color: #ffffff;color: #333333;">
<legend style="text-transform: capitalize;font-weight: bold;color: #ffffff;background: #ff0000;padding: .5em 1em;border: 1px solid #000000;-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;font-size: 1.2em;">Sign up for Breaking News</legend>
<div class="indicate-required" style="text-align: right;font-style: italic;overflow: hidden;color: #333333;margin: 0 9% 0 0;">* indicates required</div>
<div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;">
<label for="mce-EMAIL" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">Email Address <strong class="note-required">*</strong></label>
<input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL" style="margin-right: 1.5em;padding: .2em .3em;width: 95%;float: left;z-index: 999;" />
</div>
<div id="mce-responses" style="float: left;top: -1.4em;padding: 0em .5em 0em .5em;overflow: hidden;width: 90%;margin: 0 5%;clear: both;">
<div class="response" id="mce-error-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;background: #FFEEEE;color: #FF0000;"> </div>
<div class="response" id="mce-success-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;background: #;color: #529214;"></div>
</div>
<div>
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn" style="clear: both;width: auto;display: block;margin: 1em 0 1em 5%;" />
</div>
</fieldset>
<a href="#" id="mc_embed_close" class="mc_embed_close" style="display: none;">Close</a>
</form>
<br />
</div>
<!--End mc_embed_signup-->
</div>
<br />
<br />
<br />
<div id="poll"><script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/3226677.js"></script>
<noscript>
<a href="http://polldaddy.com/poll/3226677/">Dr. Don Easterbrook, emeritus professor of geology at Western Washington University has unveiled evidence for his prediction that global cooling is coming soon.</a><span style="font-size:9px;"><a href="http://polldaddy.com/features-surveys/">online survey</a></span>
</noscript>
</div> <!--end poll-->
</div>
<!--end sidebar-->

<div id="frontpgnews">
<h3 class="h3"><a href="archives/2010/100519/frontpage.html">Front Page News</a> </h3>
<p>&nbsp;</p>
<div id="frpgnewstext">
<h4 class="h4"></h4>
<h4 class="h4">&bull;<a href="archives/2010/100519/ftpgObamaTrial.html"> <br />
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pub=sonorannews"></script>
</a> </h4>
<h4 class="h4">&bull; <a href="archives/2010/100519/ftpgIndicted.html"></a><br />
</h4>
</div>
<h4 class="style3"><br />
</h4>
</div>

<div id="editorial">
<h3 class="h3"><a href="archives/2010/100519/myview.html">Editorial</a> &amp; <a href="archives/2010/100519/letters2e.html">Opinions</a> </h3>
<p>&nbsp; </p>
<h3><br />
</h3>
<div id="editorialtext">
<h5 align="right">My View <strong><br />
</strong> </h5>
<h5 align="right">Becky Fenger </h5>
<h5 align="right"><strong>Guest Editorial </strong></h5>
<h5 align="right"><strong>Letters </strong></h5>
<h5 align="right"><strong>Your View </strong><br />
</h5>
</div>

Some of the CSS:

#feature {
float: left;
margin-top: 0px;
margin-left: 0px;
border-bottom-width: 1px;
border-left-width: 1px;
border-bottom-style: none;
border-left-style: none;
border-bottom-color: #999999;
border-left-color: #999999;
border-top-width: 1px;
border-top-style: none;
border-right-width: 1px;
border-right-style: none;
border-right-color: #999999;
padding-left: 10px;
width: 568px;
clear: both;
}

#container {
width: 850px;
margin: 0 auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.6em;
color: #000000;
background-color: #FFFFFF;

}

#container2 {
width: 900px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.8em;
color: #000000;
background-color: #FFFFFF;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
}


h1 {
font-family: Georgia;
font-weight: normal;
font-size: 20px;
color: #000000;
margin-top: 0px;
margin-bottom: 0px;
line-height: normal;
}

#community {
width: 265px;
padding-left: 6px;
float: right;
margin-top: 10px;
margin-bottom: 3px;
margin-left: 10px;
padding-right: 8px;
padding-bottom: 5px;
background-repeat: no-repeat;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #999999;
padding-top: 7px;
height: 100px;
}
#header {
width: 885px;

border: 0px

padding-bottom: 10px;
padding-top: 5px;
clear: both;
padding-left: 5px;
margin-right: auto;
margin-left: auto;
}

#header p {
margin-top: -20px;
margin-left: 30px;
color: #999999;
}

#content {
width: 550px;
clear: right;
margin-right: auto;
margin-top: 10px;
margin-left: 10px;
margin-bottom: 3px;
background-position: top;
padding-top: 7px;
padding-right: 7px;
padding-bottom: 5px;
padding-left: 7px;
float: left;
}
#contenttext {
width/**/:/**/ 540px;
width: 560px;
background-color: #f0f0f0;
padding-bottom: 0px;
padding-top: 10px;
margin-left: 10px;
float: left;
margin-top: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
border: 1px solid #CCCCCC;
height: 100%;
}
#sidebar {
width: 305px;
margin-top: 10px;
height: 1725px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #CCCCCC;
float: right;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px;
}
#editorial {
float: left;
width: 550px;
margin-right: auto;
padding-left: 5px;
background-image: url(bannerblack-sm.png);
margin-left: 10px;
padding-top: 3px;
margin-bottom: 3px;
margin-top: 2px;
padding-right: 7px;
padding-bottom: 12px;
background-repeat: repeat-x;
border: 1px solid #000000;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}

#sidebar p {
padding-bottom: 10px;
border-bottom: 1px solid #DDDDDD;
}

#sidebar a {
color: #000000;
background-color: transparent;
font-weight: normal;
outline-color: transparent;
border: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.6em;
color: #0066CC;
}
#sidebar a:link {
color: #0066CC;
font-weight: normal;
}
#sidebar a:hover {
text-decoration: underline;
font-weight: normal;
color: #0066CC;
}

#sidebar a img { border:none; }

#sidebar script {
background-color: transparent;
outline-color: transparent;
border: none;
}


#footer {
margin-top: 5px;
padding-top: 0px;
clear: both;
width: 900px;
background-color:#000000;
}

body {
margin-top: 0px;
margin-bottom: 10px;
}

#container {
width: 900px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.6em;
color: #000000;
background-color: #FFFFFF;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-left-color: #000000;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
}

#classifieds {
width: 850px;
margin: 0 auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.6em;
color: #000000;
background-color: #FFFFFF;
border-bottom: 2px solid #2763A5;

}
.photo-left {
width: 250px;
float: left;
padding-right: 10px;
}
.photo-caption {
width: 250px;
padding-top: 10px;
}
#content no line p {
padding-bottom: 20px;
}
.link_cls {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 20px;
font-weight: normal;
color: #000000;
text-decoration: none;
font-style: normal;
line-height: normal;
}
.link_cls a:hover, .link_cls a:active {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 20px;
font-weight: normal;
color: #000000;
text-decoration: underline;
line-height: normal;
background-color: #FFFFFF;
}
.link_cls a:visited {
background-color: #FFFFFF;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: normal;
}
#leaderboard {
height: 100px;
width: 900px;
margin-right: auto;
margin-left: auto;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #333333;
}
#pets {
float: left;
width: 550px;
padding-left: 6px;
margin-top: 7px;
margin-right: auto;
margin-bottom: 3px;
margin-left: 10px;
padding-top: 3px;
padding-right: 8px;
padding-bottom: 3px;
background-image: url(bannerblack-sm.png);
background-repeat: repeat-x;
border: 1px solid #000000;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}
#health {
width: 550px;
padding-left: 6px;
margin-bottom: 3px;
padding-top: 3px;
padding-right: 8px;
padding-bottom: 2px;
margin-right: 8px;
margin-left: 10px;
border: 1px solid #000000;
background-image: url(bannerblack-sm.png);
background-repeat: repeat-x;
float: left;
margin-top: 7px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}
#dining {
width: 550px;
padding-left: 5px;
padding-top: 3px;
padding-right: 8px;
padding-bottom: 11px;
margin-top: 9px;
margin-right: auto;
margin-bottom: 3px;
margin-left: 10px;
float: left;
background-image: url(bannerblack-sm.png);
background-repeat: repeat-x;
border: 1px solid #000000;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}
#featuretext {
height: 100px;
width: 440px;
float: right;
line-height: 20px;
}
#editorialtext {
float: left;
width: 110px;
background-repeat: no-repeat;
padding-left: 10px;
padding-top: 0px;
margin-top: 10px;
margin-bottom: 0px;
padding-right: 5px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #999999;
line-height: 19.5px;
}
#frontpgnews {
width: 550px;
margin-top: 5px;
padding-top: 3px;
padding-right: 7px;
padding-bottom: 5px;
padding-left: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: 10px;
background-image: url(bannerblack-sm.png);
background-repeat: repeat-x;
float: left;
top: auto;
background-position: top;
border: 1px solid #000000;
background-color: #F0f0f0;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}
#business {
width: 550px;
margin-top: 7px;
margin-right: auto;
margin-bottom: 3px;
margin-left: 10px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 5px;
float: left;
border: 1px solid #000000;
background-image: url(bannerblack-sm.png);
background-repeat: repeat-x;
padding-right: 8px;
background-position: top;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}
#sports {
float: left;
width: 550px;
margin-top: 7px;
margin-bottom: 3px;
margin-left: 10px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 6px;
background-image: url(bannerblack-sm.png);
background-repeat: repeat-x;
border: 1px solid #000000;
padding-right: 8px;
margin-right: auto;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}

#opinions {
float: left;
width: 350px;
margin-top: 10px;
margin-bottom: auto;
padding-left: 7px;
line-height: 20px;
}
#frpgnewshead {
background-image: url(redbanner.png);
height: 26px;
width: 549px;
}

#businesstext {
width: 260px;
float: left;
clear: both;
margin-top: 10px;
padding-top: 7px;
}
#arttext {
float: left;
width: 260px;
padding-top: 7px;
margin-top: 10px;
}
#mail {
width: 250px;
margin-right: auto;
margin-left: auto;
}
#poll {
width: 290px;
margin-right: auto;
margin-left: auto;
clear: both;
margin-top: 10px;
}
#diningtext {
width: 548px;
float: right;
}
#pettext {
float: right;
width: 548px;
margin-top: 0px;
}
#sportstext {
width: 548px;
float: right;
}
#healthtext {
float: right;
width: 548px;
margin-bottom: 6px;
}

#frpgnewstext {
float: left;
width: 480px;
margin-top: 7px;

}
#kickers {
width: 543px;
color: #000000;
height: 26px;
background-color: #c5253e;
padding-left: 16px;
float: right;
margin-top: 2px;
padding-top: 7px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
clear: both;
border: 1px solid #000000;
}

#featurephoto {
height: 253px;
width: 378px;
float: left;
}
#featuretext {
width: 170px;
height: 250px;
float: right;
padding-left: 5px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #999999;
}

Corrosive
05-20-2010, 07:41 AM
Any chance of seeing this online anywhere? It would make it easier to debug.

graphics@sn
05-20-2010, 02:12 PM
sonorannews.com

Corrosive
05-20-2010, 02:23 PM
OK, the best way to debug is to run your page through the validator at W3;

http://validator.w3.org/check?uri=http%3A%2F%2Fsonorannews.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

I get a fair few errors back including some closing tags with no opening. Try fixing these as FF and Chrome/Safari are a bit more forgiving of errors than IE.

graphics@sn
05-20-2010, 03:54 PM
Thank you! I think this will help me learn as well.

Corrosive
05-20-2010, 04:00 PM
You are welcome. Validation is a fantastic debugging tool and you can get add-ons for Firefox that validate your pages for you. It is a good thing to keep to hand when you are learning and you'll never make the same mistakes twice! Clean up your page and then drop us a line in this thread if it is still displaying incorrectly :)

graphics@sn
05-21-2010, 06:22 PM
I do not understand this...

Line 164, Column 49: character "&amp;" is the first character of a delimiter but occurred as data <li><a href="../../../../health.html">Health & Lifestyles</a></li>

domedia
05-21-2010, 06:42 PM
& has to be written &amp; in HTML