SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    I design websites. Dimboy's Avatar
    Join Date
    Jan 2004
    Location
    England
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Location
    Amsterdam, NL, and France
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

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

    Mike
    * * * * My site * * * *
    * * * * My paintings * * * *

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    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.

    Code:
    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.
    Happy ADD/ADHD with Asperger's

  4. #4
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 position:relative (don't use for layout), learn 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.

    Code HTML4Strict:
    <!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%;
    	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 cyclings 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 clinics  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 © 2009 Fast Track Coaching / <a href="#">Site by Fusion Media </a>
    </div>
    </body></html>
    Happy ADD/ADHD with Asperger's


Bookmarks

Posting Permissions

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