HTML & IE line break issues

Hi there,

The border after the header image on this website http://www.fusion-media.co.uk/fasttrackcoaching/ is not working in IE, but works in Firefox. I’ve gone through the code, and can’t find anything.

I was hoping someone on here might be able to spot my mistake so I can learn from it,

Thanks in advance,

Adam

I checked in IE7 and can’t see nay proble,s.

Mike

I was hoping someone on here might be able to spot my mistake so I can learn from it,

It is a big mistake to use tables for layout. :smiley:

The image has a gap beneath because the inline image create a text-line to sit on, remove the text-line with display block.

The paragraphs has different margins by different browser defaults, set your own consistent margins.


img { 
    display: block;
}
p{
    margin-top: 1em;
    margin-bottom: 0;
}

There are many tutorials and templates around how to design tableless. Sorry that I don’t have a good link for the moment. :slight_smile:

See That Mysterious Gap under Images.

An alternative to making the image {display: block;}, is to set {vertical-align: bottom;}. Like so many things in css, there are multiple methods to do the same thing. Each will often have different side effects, so it does a body good to know them all.

cheers,

gary

Here is some resources if you not already found what you like:
Resources for tableless beginners listed
Paul O’ Briens CSS methods
SitePoint Html Css Reference
SitePoint CSS FAQ
SitePoint CSS Tips

To get you started I made your present page tableless:

Doctype; strict as it is a new page and HTML as it is only text/html (thus xhtml is not needed)
Set language as you use and charset as your editor is saving in.
The css is embedded as you build the page. When you start next page move it to the linked external css.

Html is structure; divs to divide the page main areas, list for navigation, heading for the title, paragraps only for inline elements and text, inline elements can not have block siblings, table for related data/items and list for not related, if an image is not content shift it to css background.

Css is display; restrain widths but not height for content, use margin and float to position, clear next block if it should not wrap the float and use overflow if it should keep adjacent, (learn collapsing margins, I used it on the paragraphs here), remember that next in code may cover element before in code but you can raise it with [URL=“http://reference.sitepoint.com/css/stacking”]position:relative (don’t use for layout), learn [URL=“http://reference.sitepoint.com/css/specificity”]specificity, allow the user text-resizing.

Css structure; use a consistent way of grouping the rules and list them in a logical order.
I use descending relation to other elements; display/position/margin/border/padding/width/height/background as element appearence and continue with content appearence; color/align/font/etc.
If the site is not too big I list the the generic elements first then according to the targets order in the html.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Fast Track Coaching - fasttrackcoaching.uk.net - Track cycling coaching from Dave le Grys and Lee Povey</title>

<meta name="Author" fusion="" media="" services="" ltd="">
<meta name="Description" content="The website of Fast Track Coaching - professional track cycling coaching from Dave le Grys and Lee Povey.">
<meta name="Keywords" content="fusion, media, cycling, legro, dave le grys, lee povey, newport velodrome, cycle coaching, cycling coach, newport velodrome coaching, track sessions, track coaching, bicycle speed record">

<link href="fasttrackcoaching.css" rel="stylesheet" type="text/css; charset=iso-8859-1" media="all">

<style type="text/css">/*** All embedded styles should move to the above external css before publishing ***/
body {
	background-color: #e4e4e4;
	color: #ffffff;
	font-size: 81&#37;;
	line-height: 1.3; /* times current font-size in all children */
	font-family: verdana;
}
h1 {
	margin: 15px 0; /* top-bottom, sides */
	font-weight: bold;
	font-size: 120%;
}
p {
	margin: 15px 0;
	text-align: justify;
}
a {
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
}
a:hover { /* only what changes needs setting */
	text-decoration: underline;
}
#container {
	margin: 0 auto; /* centers unfloated box with width */
	border: 6px solid white;
	width: 700px;
	background-color: #1059a6;
}
#header {
	border-bottom: 6px solid white;
	height:200px;
	background-image: url("fasttracklogo1.jpg");
}
#nav {
	float: right; /* move the list all right */
	margin: 15px 35px 0 0; /* top, right, bottom, left */
	padding: 0;
}
#nav li {
	float: left; /* sort items left-right */
	list-style: none;
}
#nav a {
	float: left;
	margin: 0 5px;
}
#nav .current a { /* selector weight=100/10/1 overrides the hover weight=1/10 */
	color: #cccccc; /* marks current page link */
	cursor: default; /* avoids click on current page */
	text-decoration: none;
}
.content {
	clear: both; /* stay clear from all floats above */
	padding: 0 35px 35px; /* top, sides, bottom */
}
#footer {
	margin: 0 auto; /* centers div */
	width: 700px;
	color: #000000;
	text-align: center;
	font-size: 75%;
}
#footer a{
}
</style></head><body>
<div id="container">
	<div id="header">
	</div>
	<ul id="nav">
		<li><a href="#">HOME</a>/</li>
		<li><a href="#">NEWS</a>/</li>
		<li class="current"><a href="#">ABOUT</a>/</li>
		<li><a href="#">DATES</a>/</li>
		<li><a href="#">CONTACT</a></li>
	</ul>
	<div class="content">
		<h1>About Fast Track Coaching</h1>
		<p>Fast track coaching is about coaching excellence, to deliver a world class level of coaching to any cyclist from novice to world champions. Now anyone can have access to this elite level of one on one coaching, video feedback and superior tactical advice.</p>
		<p>Fast track coaching is collaboration between two of track cycling&#8217;s most knowledgeable coaches, David Le Grys and Lee Povey.</p>
		<p>David and Lee have a track record of delivering high quality coaching and their athletes have had both National and International success. They are also successful competitors in the own right with a collection of titles to their credit.</p>
		<p>David and Lee will be holding a series of track clinic&#8217;s  both nationally and worldwide. These clinics will cover all aspects and disciplines of track cycling including training advice, tactical training and mental preparation.</p>
		<p>To find out more contact David and Lee today at <a href="mailto:info@#">info@mailaddressdomain.com</a> or check out the <a href="#">NEWS</a> and <a href="#">DATES</a> pages.</p>
	</div>
</div>
<div id="footer">
	Copyright &#169; 2009 Fast Track Coaching / <a href="#">Site by Fusion Media </a>
</div>
</body></html>