SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast peterkp's Avatar
    Join Date
    Mar 2009
    Location
    Auckland, NZ
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem getting started with layout

    I have a problem even getting started with a web page.

    I found a 3 column design I liked with a step by step tutorial. Step 1 is the 3 columns basic layout. I copied the code. It displays correctly as columns in IE but not Firefox. I validated my html and css before coming here.

    Details...

    HTML Code:
    <?xml version='1.0' encoding='utf-8'?>
    <!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">
    
    <head>
    	<title>
    		Peter's guitar studio - Home page
    	</title>
    	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    	<meta name="description" content="Peter Kirkpatrick is an experienced and friendly guitar teacher based in West Auckland. I teach acoustic, electric and classical guitar to students of all ages and backgrounds." />
    	<meta name="keywords" content="guitar teachers, student, guitar lessons, Auckland, Henderson" />
    
    	<link href="D:\UserFiles\Peter\My Documents\My Music\Web site\Development\Global\petersguitars2.css" rel="stylesheet" />
    </head>
    
    <body>
    <div id="col1">c1</div>
    <div id="col2">c2</div>
    <div id="col3">c3</div>
    </body> 
    </html>

    Code CSS:
    #col1
    {
    float: left;
    width: 48%;
    margin-left: 3%;
    display: inline;
    background-color:blue; /*temporary*/
    }
     
    #col2
    {
    float: left;
    width: 20%;
    margin-left: 3%;
    }
     
    #col3
    {
    float: left;
    width: 20%;
    margin-left: 3%;
    background-color:gray; /*temporary*/
    }

  2. #2
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    I'm not code warrior enough to debug your specific code, but I can make some observations.

    One, Tommy and the other guys in here have made compelling arguments for using HTML 4.01 Strict and not using XHTML, even when you use the XML pseudo-attribute as you do (and many do not).

    Two, if it works in IE but not in Firefox, that's a sure sign of problems, whether the code validates or not (it does, I checked ).

    Third, I tried it on my machine in FF3, put some "lorem ipsum" content in the columns, and it displayed fine. The columns aren't equal, but they're not going to be unless you use any of a number of methods to equalize them. Replace the c1, c2, and c3 with this and see what you think:

    Code:
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
    Edit: It looks fine in Opera and IE6, too, with the obvious default font differences. I'm not sure what you're seeing that's causing you distress...?

  3. #3
    SitePoint Enthusiast peterkp's Avatar
    Join Date
    Mar 2009
    Location
    Auckland, NZ
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wondered if xhtml versus html would be raised. If that is the problem I might just give up, because I've just finished polishing my xhtml based on my last thread on this site...

    I'm aware there's a lot of formatting to be done. But I've taken the advice of regular cross browser testing, rather than leaving it till later.

    Specifically, what I see is:

    In IE...
    c1, c2, and c3 all on the same row, with the temporary column colors showing - consistent with what I was aiming for.

    In FF3...
    c1
    c2
    c3
    in the top left corner as if they are a list without the bullets ... and no column colors showing anywhere.

    Edit: I've just added in your <p> tag and mock text, and the result is that IE shows the same columns, and FF displays as if the <p> tag is all that it's reading - text flows 100&#37; across the screen.

  4. #4
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Well currently as it stands, your website is not valid XHTML, though the correct mime-type will be interpreted by Opera and Firefox (Et al) IE will see that application/xhtml+xml and throw up on you, it will either trigger a "start download" dialog or just render as text/html and your doctype and all your code along with it will be invalidated. Essentially the only way to even use XHTML properly (with the correct mime-type) is to use serverside scripting and the HTTP accept header to determine if XHTML is supported, if so it uses XHTML, if not it triggers HTML 4.01 (with doctype).

  5. #5
    SitePoint Enthusiast peterkp's Avatar
    Join Date
    Mar 2009
    Location
    Auckland, NZ
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    Well currently as it stands, your website is not valid XHTML...
    Question 1: so why was my page validated?

    Question 2: so what specifically and step by step would I need to do to make it valid?

    Question 3: is it worth it? The reason I chose xhtml was very simple - the first book I read was "Build Your Own Web Site The Right Way Using HTML & CSS" from Sitepoint, and that used xhtml. I've since read stuff about the issues between html and xhtml, but most of it is still difficult for me as a novice to get a handle on. All I want is for a simple 4-5 page web site which I maintain to work reliably without hours of technical hassle every time I add or change content. What's the best option at that level?

  6. #6
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    your website is not valid XHTML sorry pall

  7. #7
    SitePoint Enthusiast peterkp's Avatar
    Join Date
    Mar 2009
    Location
    Auckland, NZ
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I've tried something different. I've created a new page with different content to see what happens...

    This time I tried html strict.
    This time I have made the page as simple as possible. I have set the background color to red and inserted an image.
    The page validates.
    IE has a red background and a picture.
    FF has a red background and no picture. The alt text is displayed.

    Is it possible that there are browser settings which are in play? (I know my way round IE but am new to FF)

    If I can't manage something this simple...

    Code below...

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    
    <html>
    
    <head>
    	<title>Title</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
    	<style type="text/css">
    		body {background-color:red}
    	</style>
    </head>
    
    <body>
    	<p>
    		<img src="D:/UserFiles/Peter/My Documents/My Music/Web site/Development/Global/guitar1.jpg" alt="Guitar1" >
    	</p>
    </body>
    
    </html>

  8. #8
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    The simple reason why it was not valid was that even though you served browsers that could handle XHTML the correct MIME type (application/xhtml-xml), browsers which could not understand it (such as IE) would see XHTML, see content-type and throw a hissy fit while throwing up lunch all over your living room

    Generally speaking unless you are going to be doing XML work which will interact with the website (XSLT for example), there is no genuine reason why you would need to use XHTML. People seem to think XHTML is some kind of upgrade... it isn't, its an entirely different thing to HTML and for the Sitepoint book to be mentioning it for a basic website introduction is simply wrong. My advice would be to use HTML 4.01 and leave XHTML until you find you need to use it.

    PS: As for the above code, you forgot to close the IMG tag, which is why it isn't showing properly

  9. #9
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Better to recode the site for HTML Strict now, instead of dealing with the long-term hassles down the road. Sorry, but there it is. A 4-5 page site shouldn't be too bad....

    And I apologize for not recognizing the invalidity of your site. It passed the validator check, and that was good enough for me. But that's why I'm not a SP guru!

  10. #10
    SitePoint Enthusiast peterkp's Avatar
    Join Date
    Mar 2009
    Location
    Auckland, NZ
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    ...for the Sitepoint book to be mentioning xhtml for a basic website introduction is simply wrong. My advice would be to use HTML 4.01 and leave XHTML until you find you need to use it.
    I will take the advice - thanks. I'm sure SitePoint will value the endorsement

    Quote Originally Posted by AlexDawson View Post
    PS: As for the above code, you forgot to close the IMG tag, which is why it isn't showing properly
    It's not that simple from my end. I assume you mean the IMG tag needs to finish with />. I made that change and FF still doesn't display the picture. Also when I tried to validate the file with the / inserted, I got this warning:

    "The sequence <FOO /> can be interpreted in at least two different ways, depending on the DOCTYPE of the document. For HTML 4.01 Strict, the '/' terminates the tag <FOO (with an implied '>'). However, since many browsers don't interpret it this way, even in the presence of an HTML 4.01 Strict DOCTYPE, it is best to avoid it completely in pure HTML documents and reserve its use solely for those written in XHTML."

    So I'm still not sure what to do.

    Edit: I've also in the last 15 minutes altered the test web page that started this thread to HTML 4 Strict. I validated it. Exactly the same issue with the closing tags. And exactly the same problem with IE displaying the columns and not FF.

  11. #11
    SitePoint Enthusiast peterkp's Avatar
    Join Date
    Mar 2009
    Location
    Auckland, NZ
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Black Max View Post
    I apologize for not recognizing the invalidity of your site. It passed the validator check, and that was good enough for me. But that's why I'm not a SP guru!
    No worries. I totally appreciate everyone who gives their time to help out other people. Keep up the good work.

  12. #12
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by peterkp View Post
    I will take the advice - thanks. I'm sure SitePoint will value the endorsement
    Well it is a very common mistake they say their using XHTML but 99.9% of all websites claiming XHTML either declare it wrong (through MIME and doctype making all their code invalid by default) or they don't actually make use of the functionality it offers, making the use of it pointless


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
  •