...

View Full Version : Why is IE eating my <br/>'s and my footer?



wrambo
01-22-2008, 09:02 PM
I'm having issues with this site I'm making.

http://www.discovergreeneville.com

It looks fine in Firefox (without a doctype, sadly) but in IE 7 the footer doesn't stay at the bottom if there's not enough content to stretch down that far.

Also, and far more confusing, if I have two <br/>'s it only recognizes one of them. They both show up in the source, but on the actual page there's only one break, which removes all paragraphs and makes it extremely hard to read lengthy pages.

Going back to the footer issue, if I set the doctype as anything at all Firefox has the exact same problem. The problem with fixing it: I can fix the footer with min-height to always be at the bottom of the page, even short pages, but if content stretches past one screen the background colors stop at the end of the first page, leaving an ugly gray beneath the remainder of the content. I'm only using the doctype in IE until I can figure out how to fix both problems at once. Anyone got any ideas?

Html:

<!--[if IE]><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><![endif]-->
<head>
<link href="style/main.css" rel="stylesheet" type="text/css"/>
<!--[if IE]><link href="style/ie.css" rel="stylesheet" type="text/css"/><![endif]-->
<title>Andrew Johnson - Links</title>
</head>

<body>
<div id="wrapper">
<div id="notFooter">
<div id="header">
<div id="headerimg">&nbsp;</div> <ul id="menu">

<li class="cssnav but"><a href="index.php"><img src="images/main/butUp.gif" /><span>HOME</span></a></li>
<li class="cssnav but"><a href="history.php"><img src="images/main/butUp.gif" /><span>HISTORY</span></a></li>
<li class="cssnav but"><a href="media.php"><img src="images/main/butUp.gif" /><span>MULTIMEDIA</span></a></li>
<li class="cssnav but"><a href="events.php"><img src="images/main/butUp.gif" /><span>EVENTS</span></a></li>
<li class="cssnav but"><a href="links.php"><img src="images/main/butUp.gif" /><span>LINKS</span></a></li>
<li class="cssnav but"><a href="about.php"><img src="images/main/butUp.gif" /><span>SITE INFO</span></a></li>

</ul>
</div> <div id="left">
<h2>New Updates</h2>
<p>
&bull; Pictures were added to the <a href="media.php">Multimedia Page</a> on Jan. 22.
</p>

<br/>
<h2>January Schedule</h2>
<p>
<b>Jan. 24:</b> "Partisan Politics in East Tennessee on the Eve of the Civil War." Dr. Michael Toomey, Tusculum College, Niswonger Commons - Chalmers Conference Center - 423-636-7348
</p>
</div>
<div id="right">
<h1>Links</h1>

<br/><h3>Andrew Johnson</h3>
<br>
<p class="content">
<a href="http://en.wikipedia.org/wiki/Andrew_Johnson" target="_blank">Wikipedia article on Andrew Johnson</a>
</p>
<div class="break"></div>
<h3>Greeneville, TN</h3>

<br/>
<p class="content">
<a href="http://www.greenevillesun.com" target="_blank">The Greeneville Sun</a>
</p>
</div>
</div>

<div id="footer">
CELEBRATING THE 200th BIRTHDAY OF OUR NATION'S 17th PRESIDENT
<br>&copy; 2008 greenevillesun.com | All Rights Reserved
</div>


</div>

</body>
</html>

CSS:

/* General layout stuff */

html, body {
height: 100&#37;;
}

html {
font-family: tahoma, arial, sans-serif;
font-size: 11px;
letter-spacing: 2px;
line-height: 19px;
color: #3a3a3a;
}

body {
margin: 0;
background-color: #aaa;
}

#wrapper {
width: 800px;
min-height: 100%;
border-right: 1px solid #838383;
border-left: 1px solid #838383;
margin: 0 auto;
background-image: url(../images/main/bg.gif);
}

* html #wrapper { height: 100%; }

#header {
height: 240px;
padding-top: 15px;
background-color: #a75d30;
}

#headerimg {
height: 189px;
background-image: url(../images/main/header.jpg);
border-top: 5px solid #924312;
border-bottom: 7px solid #924312;
}

#left {
padding: 20px 15px 50px 15px;
text-align: center;
float: left;
width: 275px;
background-color: #ead09f;
}

#right {
float: left;
padding: 20px 15px 30px 15px;
width: 465px;
padding-bottom: 50px;
}

#notFooter {
height: 100%;
}

#footer {
position: relative;
margin-top: -50px;
clear: both;
text-align: center;
color: #fff;
width: 800px;
height: 45px;
background-color: #a75d30;
border-top: 5px solid #924312;
padding-top: 5px;
}

/* Text and other stuff */

h1 {
font-size: 16px;
text-transform: uppercase;
letter-spacing: 2px;
word-spacing: 3px;
margin: 0;
width: 455px;
line-height: 25px;
padding-left: 10px;
color: #fff;
background-color: #924312;
}

h2 {
font-size: 16px;
text-transform: uppercase;
letter-spacing: 2px;
word-spacing: 3px;
margin: 0;
width: 265px;
line-height: 25px;
padding-left: 10px;
color: #fff;
background-color: #924312;
}

h3 {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
word-spacing: 3px;
margin: 0;
}

.caption {
text-align: center;
padding: 0 0 5px 0;
margin: 0;
line-height: 12px;
font-style: italic;
font-size: 10px;
}

.insetL {
float: left;
width: 202px;
padding: 1px;
border: 1px solid #924312;
margin: 0 10px 5px 0;
}

.insetR {
float: right;
width: 202px;
padding: 1px;
border: 1px solid #924312;
margin: 0 0 5px 10px;
}

.thumbL {
float: left;
padding: 1px;
border: 1px solid #924312;
margin: 0 10px 5px 0;
}

.break {
margin: 10px auto;
clear: both;
width: 400px;
border-bottom: 1px dotted #3a3a3a;
}

.breakL {
margin: 10px auto;
clear: both;
width: 250px;
border-bottom: 1px dotted #3a3a3a;
}

ul {
margin: 0;
padding: 0 0 0 15px;
list-style-type: square;
}

/* Image galleries */
a.thumb {
border: 0px;
padding: 5px;
}

bazz
01-22-2008, 09:14 PM
Welcome to CF.

The DOCTYPE is required by all browsers because it is what they use to make sure the page displays as you have coded it to.

It really is better, to include the doctype and then after validating the code, to fix any inconsistencies.

bazz

oesxyl
01-22-2008, 09:45 PM
why do use this?



<!--[if IE]><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><![endif]-->


please, edit your post and put your code between [ code ] and [ /code] markers, without spaces inside.

best regards

wrambo
01-22-2008, 10:03 PM
oops. sorry, i'm new to this :)

Apostropartheid
01-22-2008, 10:39 PM
Wouldn't that method throw quirks anyway?

It seems dumb to me to code to a standard and then go and comment it out. That's taking the IE pillaging a bit far.

Btw, you're missing your html element.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">

oesxyl
01-22-2008, 11:20 PM
oops. sorry, i'm new to this :)

ok, thank you, :)

but, you still don't answer. :)
why do you use ie comments, with doctype, and style declaration?

best regards



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum