Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Why is IE eating my <br/>'s and my footer?

    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:
    Code:
    <!--[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:
    Code:
    /* 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;
    	}
    Last edited by wrambo; 01-22-2008 at 10:04 PM. Reason: forgot code block

  • #2
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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

  • #3
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    why do use this?

    Code:
    <!--[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

  • #4
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    oops. sorry, i'm new to this

  • #5
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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.
    Code:
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">

  • #6
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by wrambo View Post
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •