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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Location
    Kingdom of Sweden
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with validating Html/Css page?

    Hi, Guys!

    Me and some guys are doing a small projekt and desided we want a homepage for it. The problem is... non of us are that great with writing totally correct code.

    I would really appreciate some help with making our page looking correct in Firefox 3 and Firefox 2 as well as in Internet Explorer. In its current state it should look correct in Firefox 3.0.6 but the menu and logo will probably be move around in IE or in FF 2.x.x.

    Here's the page: Fluxibility

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Welcome to CF!

    Your page is a good start. Kudos for using a DOCTYPE; but with your page layout there's really no reason not to go to XHTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>Page Title Goes Here</title>
    
    ...
    Try that for a header. XHTML requires closing tags, all lowercase (<a> and not <A>) tags and some other constraints that will help your code be better formed and more cross-browser friendly.

    Some other things on your page to watch out for are block-level elements incorrectly inside inline elements (<div> inside <a> is a no-no):

    Code:
    <A HREF="screenshot.html" STYLE="text-decoration: none">
    	<DIV ID="menubuttonlast"><FONT ID="menufont"><CENTER>SCREENSHOT</CENTER></FONT></DIV>
    </A>
    along with use of deprecated elements like <font> and <center> (CSS styles control these effects now).

    One more thing: You have a profusion of divs on your page. I would read about divitis and semantic code.
    matt | design | blog

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Warpscum,
    You also need to clear your floats. Try this:
    Code:
    #content {
    	margin-top: 1.5%;
    	margin-right: auto;
    	margin-left: auto;
    	text-align: left;
    	border: 0px; 
    	width: 770px;
    background: #fff;
    overflow: auto;
    }
    Just add that background color for testing. Try adding and removing the overflow:auto; to see what it does.
    Read about clearing floats here.


    ...

    Have a look at a couple ideas for your horizontal nav -
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New to the CF scene
    Join Date
    Feb 2009
    Location
    Kingdom of Sweden
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, I have tried to fix most things you guys mentioned, not sure I succeeded on all points, but any ways, here's the new version: Fluxibility

    (And yes, only the "home" page exists so far)


  •  

    Posting Permissions

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