MediaGrace
12-18-2007, 10:24 PM
This is my first post, so please bare with me. With my current site, my floats all appear correctly in FF, however my very first float doesn't work properly in IE. I have looked all over the internet, and have seen many places where they list IE CSS errors, sadly I am not familiar enough with the CSS language to understand. This is my first CSS tableless site (I am an old school table user... sorry). Please help! www.WichitaDisciples.com/test.html (http://www.wichitadisciples.com/test.html)
<b>Here is my CSS</b>
/* CSS Document */
body{margin:auto; padding:0; background:url(/images/mainbg.gif) 0 0 repeat-x #fff; font:14px/18px Arial, sans-serif; color:#666;}
ul{list-style-type:none;}
A:link {text-decoration: none; color: #ff7022;}
A:visited {text-decoration: none; color: #ff7022;}
A:active {text-decoration: none; color: #ff7022;}
A:hover {text-decoration: underline; color: #ff7022;}
a img{border: 0}
p {font-family:Arial, Helvetica, sans-serif}
p {font-size: 1em;}
h1 {font-size: 1.8em; color:#9c9a9a;}
h2 {font-size: 1em; color:#ff7022; font-weight:bold;}
h3 {font-size: 1em; color:#719b12; font-weight:bold;}
/*--Center Page--*/
#centered{width:800px; margin-top: 0; margin-left:auto; margin-right:auto; padding: 0; text-align:center}
/*--Center Page--*/
/*--Content--*/
#content{width:800px;}
/*--Content--*/
/*--Logo Panel--*/
#logo{width: 324px; padding:0;}
#logo{float: left;}
/*--Logo Panel--*/
/*--/Nav Panel--*/
#nav-menu{width:800px;}
#nav-menu ul{list-style: none; padding: 0; margin: 0;}
#nav-menu li{float: left; margin: 0 0;}
/*--/Nav Panel--*/
/*--Upper Nav Links--*/
#upper-nav{height:80px; width:800px; background-image:url(/images/nav/nav-top.jpg); background-position:324px 0; font:Verdana, Arial, Helvetica, sans-serif;}
/*--Upper Nav Links--*/
/*--Left Content--*/
#left-content{width:300px;text-align:left; padding-right:200px}
#left-content{float:left;}
/*--Left Content--*/
/*--Right Content--*/
#right-content{width:300px; text-align:left}
#right-content{float:left;}
/*--Right Content--*/
Here is my HTML
<!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=iso-8859-1" />
<title>Wichita Disciples | Catholic Diocese of Wichita, KS Youth & Young Adult Ministries</title>
<link href="/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#FFFFFF" topmargin="0">
<div id="centered">
<div id="content">
<!-- LOGO -->
<div id="logo">
<img src=/images/logo.jpg /><br />
<img src=/images/logo-ref.jpg />
</div>
<!-- END LOGO -->
<!-- NAV PANEL -->
<div id=upper-nav align="right">
<a href="#"><font color="#ff7022">Home</font></a> |
<a href="#"><font color="#c6ea6c">Site Map</font></a> |
<a href="#"><font color="#c6ea6c">Contact Us</font></a>
</div>
<div id="nav-menu">
<ul>
<li><a href="#"><img src=/images/nav/youth.jpg /></a></li>
<li><a href="#"><img src=/images/nav/ministers.jpg /></a></li>
<li><a href="#"><img src=/images/nav/adults.jpg /></a></li>
<li><a href="#"><img src=/images/nav/events.jpg /></a></li>
<li><a href="#"><img src=/images/nav/resources.jpg /></a></li>
</ul>
</div>
<div style="clear:both;"></div>
<!-- END NAV PANEL -->
<div id=left-content>
<h1>Upcoming Events:</h1>
<img src="/images/ico-cal.jpg" align="left"/>
<font color="#ff7022">
Jan. 1 - Event 1 - 7pm<br />
Jan. 1 - Event 2 - 7pm<br />
Jan. 1 - Event 3 - 7pm<br />
Jan. 1 - Event 4 - 7pm<br />
</font>
<br />
<p>A Full Calendar can be found on the <a href="#">Events</a> page.</p>
</div>
<div id=right-content>
<h1>Latest Article:</h1>
<img src="/images/ico-txt.jpg" align="left"/>
<font color="#719b12">
Ask Father<br />
by Fr. Joe Smith<br />
</font>
<br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque nisi massa, consequat sed, tristique vel, nonummy sed, lacus. Nunc eu ipsum quis erat iaculis congue. <a href="#">Read More</a></p>
</div>
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>
Any thanks is appreciated!
<b>Here is my CSS</b>
/* CSS Document */
body{margin:auto; padding:0; background:url(/images/mainbg.gif) 0 0 repeat-x #fff; font:14px/18px Arial, sans-serif; color:#666;}
ul{list-style-type:none;}
A:link {text-decoration: none; color: #ff7022;}
A:visited {text-decoration: none; color: #ff7022;}
A:active {text-decoration: none; color: #ff7022;}
A:hover {text-decoration: underline; color: #ff7022;}
a img{border: 0}
p {font-family:Arial, Helvetica, sans-serif}
p {font-size: 1em;}
h1 {font-size: 1.8em; color:#9c9a9a;}
h2 {font-size: 1em; color:#ff7022; font-weight:bold;}
h3 {font-size: 1em; color:#719b12; font-weight:bold;}
/*--Center Page--*/
#centered{width:800px; margin-top: 0; margin-left:auto; margin-right:auto; padding: 0; text-align:center}
/*--Center Page--*/
/*--Content--*/
#content{width:800px;}
/*--Content--*/
/*--Logo Panel--*/
#logo{width: 324px; padding:0;}
#logo{float: left;}
/*--Logo Panel--*/
/*--/Nav Panel--*/
#nav-menu{width:800px;}
#nav-menu ul{list-style: none; padding: 0; margin: 0;}
#nav-menu li{float: left; margin: 0 0;}
/*--/Nav Panel--*/
/*--Upper Nav Links--*/
#upper-nav{height:80px; width:800px; background-image:url(/images/nav/nav-top.jpg); background-position:324px 0; font:Verdana, Arial, Helvetica, sans-serif;}
/*--Upper Nav Links--*/
/*--Left Content--*/
#left-content{width:300px;text-align:left; padding-right:200px}
#left-content{float:left;}
/*--Left Content--*/
/*--Right Content--*/
#right-content{width:300px; text-align:left}
#right-content{float:left;}
/*--Right Content--*/
Here is my HTML
<!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=iso-8859-1" />
<title>Wichita Disciples | Catholic Diocese of Wichita, KS Youth & Young Adult Ministries</title>
<link href="/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#FFFFFF" topmargin="0">
<div id="centered">
<div id="content">
<!-- LOGO -->
<div id="logo">
<img src=/images/logo.jpg /><br />
<img src=/images/logo-ref.jpg />
</div>
<!-- END LOGO -->
<!-- NAV PANEL -->
<div id=upper-nav align="right">
<a href="#"><font color="#ff7022">Home</font></a> |
<a href="#"><font color="#c6ea6c">Site Map</font></a> |
<a href="#"><font color="#c6ea6c">Contact Us</font></a>
</div>
<div id="nav-menu">
<ul>
<li><a href="#"><img src=/images/nav/youth.jpg /></a></li>
<li><a href="#"><img src=/images/nav/ministers.jpg /></a></li>
<li><a href="#"><img src=/images/nav/adults.jpg /></a></li>
<li><a href="#"><img src=/images/nav/events.jpg /></a></li>
<li><a href="#"><img src=/images/nav/resources.jpg /></a></li>
</ul>
</div>
<div style="clear:both;"></div>
<!-- END NAV PANEL -->
<div id=left-content>
<h1>Upcoming Events:</h1>
<img src="/images/ico-cal.jpg" align="left"/>
<font color="#ff7022">
Jan. 1 - Event 1 - 7pm<br />
Jan. 1 - Event 2 - 7pm<br />
Jan. 1 - Event 3 - 7pm<br />
Jan. 1 - Event 4 - 7pm<br />
</font>
<br />
<p>A Full Calendar can be found on the <a href="#">Events</a> page.</p>
</div>
<div id=right-content>
<h1>Latest Article:</h1>
<img src="/images/ico-txt.jpg" align="left"/>
<font color="#719b12">
Ask Father<br />
by Fr. Joe Smith<br />
</font>
<br />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque nisi massa, consequat sed, tristique vel, nonummy sed, lacus. Nunc eu ipsum quis erat iaculis congue. <a href="#">Read More</a></p>
</div>
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>
Any thanks is appreciated!