www.webdeveloper.com
Results 1 to 11 of 11

Thread: First line of code

  1. #1
    Join Date
    Mar 2013
    Posts
    23

    First line of code

    Hi

    I'm rather new to this and wonder how I should write the first line of code, something like <!DOCTYPE html> maybe not enough for all browsers from what I have read. I certainly get different result to at least one of my pages depending on what browser I see them in. Good in Firefox, with slight problems in IE9, and absolutely all over the place in Google Chrome.


    I expect that when you write code in a html code generator or editor you get the version from the editor. However I don't have one and have been writing and editing directly in the script at the host. As I have been validating the code with W3C should I use that?. The next question is exactly what should I put in the first line to go with <!DOCTYPE html> ?

    Thank you

  2. #2
    Join Date
    Mar 2011
    Posts
    1,156
    The HTML 5 <!DOCTYPE html> is compatible with browsers going back to IE6. It will set the browser to Standards Compliance Mode so that they render pages according to the W3C Standards. It's just that older browsers will not recognize HTML5-specific mark-up like the <section> tag and will have some other limitations due to their age. If using this <!DOCTYPE> significantly changes the cross-browser behavior of your pages, be sure to validate both your HTML with the validator at http://validator.w3.org and your CSS at http://jigsaw.w3.org/css-validator/. You may need to add some vendor-specific prefixes to some CSS Level 3 properties, but you should be seeing very similar layouts. Post a link to your code so we can see what the problem is.

  3. #3
    Join Date
    Mar 2013
    Posts
    23
    Hi

    Thanks for the reply.

    I've beed testing one page with the W3C validator. When I leave the first line at <!DOCTYPE html> I get no errors. If I try changing it to <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> or even 3.2 I get more than 30 errors, mostly to do with <br/>. Wy do I not get errors at the moment and what are the implications across different browsers?

    Here is the problem code that gives serious problems on a small screen with Google Chrome

    <!doctype html>

    <html>
    <head>
    <meta charset="utf-8">
    <title>FORM</title>


    <link rel="stylesheet" href="register.css">



    </head>
    <body>



    <div class="page">
    <div class="header">
    <img title="Lisboa" alt="Lisboa" src="images/Lisboa.jpg"/>
    <h1>Registration Page</h1>
    </div>
    <div class="sidebar">

    <a href="/index.html"><img src="images/logocream.png" title="Home" alt="Home button" width="190"/></a>
    <br/><br/><br/><br/><br/><br/><br/>

    <a href="http://tc.tradetracker.net/?c=10500&amp;m=383088&amp;a=143420&amp;r=&amp;u=" target="_blank"><img src="http://ti.tradetracker.net/?c=10500&amp;m=383088&amp;a=143420&amp;r=&amp;t=html" width="120" height="240" border="0" alt="Gresham Hotels" /></a>


    <!--end .sidebar--></div>

    <div class="sidebar2">
    <br/><br/><br/>
    <a href="http://tc.tradetracker.net/?c=5693&amp;m=350073&amp;a=143420&amp;r=&amp;u=" target="_blank"><img src="http://ti.tradetracker.net/?c=5693&amp;m=350073&amp;a=143420&amp;r=&amp;t=html" width="160" height="600" border="0" alt="Confortel Hotels" /></a>
    <!--end .sidebar2--></div>


    <div class="maincontent">
    <form method="post" action="./database.php">
    <div class="holdBlock">
    <div class="fieldBlock">
    <label for='username'>Username:</label>
    <input type='text' name='username' id="username">
    </div>
    <div class="fieldBlock">
    <label for='repeat-username'>Repeat username:</label>
    <input type='text' name='repeat-username' id="repeat-username">
    </div>
    </div><br><br><br><br>
    <div class="holdBlock">
    <div class="fieldBlock">
    <label for='password'>Password:</label><br>
    <input type='text' name='password' id="password">
    </div>
    <div class="fieldBlock">
    <label for='repeat-password'>Repeat password:</label><br>
    <input type='text' name='repeat-password' id="repeat-password">
    </div>
    </div>
    <br/><br/><br/>



    <div class="headies">
    <h2>Agency details</h2>
    </div>

    <div class="holdBlock">
    <div class="fieldBlock">
    <label for='agency-name'>Agency name:</label><br/>
    <input type='text' name='agency-name' id="agency-name">
    </div>
    <div class="fieldBlock">
    <label for='iata-number'>IATA number:</label><br/>
    <input type='number' name='iata-number' id="iata-number">
    </div>
    </div>

    <div class="holdBlock">
    <div class="fieldBlock">
    <label for='city'>City:</label><br/>
    <input type='text' name='city' id="city">
    </div>
    <div class="fieldBlock" >

    <label for='Country'>Country</label><br>
    <select name='country' id="Country">
    <option value="">Please, choose...</option>
    <option value="Afganistan">Afghanistan</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
    <option value="American Samoa">American Samoa</option>
    <option value="Andorra">Andorra</option>
    <option value="Angola">Angola</option>
    <option value="Anguilla">Anguilla</option>
    <option value="Antigua &amp; Barbuda">Antigua &amp; Barbuda</option>
    <option value="Argentina">Argentina</option>
    <option value="Armenia">Armenia</option>
    <option value="Aruba">Aruba</option>
    <option value="Australia">Australia</option>
    <option value="Austria">Austria</option>
    <option value="Azerbaijan">Azerbaijan</option>
    <option value="Bahamas">Bahamas</option>
    <option value="Bahrain">Bahrain</option>
    <option value="Bangladesh">Bangladesh</option>
    <option value="Barbados">Barbados</option>
    <option value="Belarus">Belarus</option>
    <option value="Belgium">Belgium</option>
    <option value="Belize">Belize</option>
    <option value="Benin">Benin</option>
    <option value="Bermuda">Bermuda</option>
    <option value="Bhutan">Bhutan</option>
    <option value="Bolivia">Bolivia</option>
    <option value="Bonaire">Bonaire</option>
    <option value="Bosnia &amp; Herzegovina">Bosnia &amp; Herzegovina</option>
    <option value="Botswana">Botswana</option>
    <option value="Brazil">Brazil</option>
    <option value="British Indian Ocean Ter">Brit.Indian Ocean Ter</option>
    <option value="Brunei">Brunei</option>
    <option value="Bulgaria">Bulgaria</option>
    <option value="Burkina Faso">Burkina Faso</option>
    <option value="Burundi">Burundi</option>
    <option value="Cambodia">Cambodia</option>
    <option value="Cameroon">Cameroon</option>
    <option value="Canada">Canada</option>
    <option value="Canary Islands">Canary Islands</option>

    <option value="Yemen">Yemen</option>
    <option value="Zaire">Zaire</option>
    <option value="Zambia">Zambia</option>
    <option value="Zimbabwe">Zimbabwe</option>


    </select>
    </div>
    </div>

    <div style="padding-left:205px;padding-top:130px;" >
    <label>Website:</label><br>
    <input type='text' name='website' id="website"/>
    </div>

    <div class="holdBlock">
    <div class="fieldBlock">
    <label for='email'>Email:</label><br/>
    <input type='text' name='email' id="email"/>
    </div>
    <div class="fieldBlock">
    <label for='repeat-email'>Repeat email:</label><br/>
    <input type='text' name='repeat-email' id="repeat-email"/>
    </div>
    </div>
    <br/><br/><br/>
    <div class="headies">
    <h2>Contact details</h2>
    </div>
    <div class="holdBlock">
    <div class="fieldBlock">
    <label for='person-responsible'>Person responsible:</label><br/>
    <input type='text' name='person-responsible' id="person-responsible"/>
    </div>
    <div class="fieldBlock">
    <label for='position-in-agency'>Position in agency:</label><br/>
    <input type='text' name='position-in-agency' id="position-in-agency"/>
    </div>
    </div>

    <div class="holdBlock">
    <div class="fieldBlock">
    <label for='telephone'>Telephone:</label><br/>
    <input type='number' name='telephone' id="telephone"/>
    </div>
    <div class="fieldBlock">
    <label for='fax'>Fax:</label><br/>
    <input type='number' name='fax' id="fax"/>
    </div>
    </div>


    <br/><br/><br/><br/><br/><br/><br/>
    <div class="headies">
    <input type="submit" value="Submit" name="submit"><input type="reset" value="Reset">
    </div>
    <br>
    </form>
    </div>


    <footer>
    <ul>
    </ul>
    </footer>
    </div>

    </body>
    </html>

  4. #4
    Join Date
    Mar 2013
    Posts
    23
    This is the css

    http://pastebin.com/0LsJ84zb

    Thanks for your help. Much appreciated.

    qim

  5. #5
    Join Date
    Mar 2011
    Posts
    1,156
    You're just running into different default margin settings across browsers. Just adding:
    Code:
    label, input { margin:0; }
    to the start of your stylesheet resolves almost all of the differences. You might check out Eric Myer's CSS Reset at http://meyerweb.com/eric/tools/css/reset/

    Another good way to resolve this kind of thing is to use the Web Developer Extension for Firefox and Chrome and the F12 Developer Tools in Internet Explorer that let you visually see the bounding boxes of the elements in your pages. Good luck!

  6. #6
    Join Date
    Mar 2013
    Posts
    23
    Thanks. I have to go out now.Will change it later and let you know if it solved problem But why did you say there was a problem with mergins?

    qim

  7. #7
    Join Date
    Mar 2013
    Posts
    23
    Great! It worked. Not 100% but passable (I'm talking of the samll screen in Coogle Chrome. Before it was unacceptably wrong. Now I need to understand what I wad oing wrong and how I can get it even better.

    By the eay, I put the code in the seccond line below <!doctype html>. That's right, yes?
    thank you very much.

  8. #8
    Join Date
    Mar 2013
    Posts
    23
    Sorry rtrethewey . Don't pay attention. The brain is getting slower all the time. Of course, I placed that line in the css, but placed it in the second line below bosy{background-color:grey;}. Don't ask mw why. I guess I had the html script in mind.

    qim

  9. #9
    Join Date
    Mar 2013
    Posts
    23
    Hi, rtrethewey

    If you're still around...

    Your fix solved my immediate problem but now that I decided to investigate I found some rather surprising things: Firefox is the one that renders the page best, but both Firefox and Google lose the styling if you zoom in past 75%. IE9 keeps the format. Why should this be and how can one get round it?

    I'm attaching screen shots. (Well, apparently there is no way of attaching in this firum)
    Thanks

  10. #10
    Join Date
    Mar 2011
    Posts
    1,156
    I don't work much with zooming, but there does seem to be some odd behavior (in Firefox at least) when you zoom out (Ctrl -). When I try zooming back in, some CSS settings don't seem to re-adjust automatically as I would expect.

    My advice would be to search on "responsive design tutorial". They'll mainly be dealing with screen resolution instead of zooming, but the principles are the same. The idea is to code in terms of em's and percentages rather than hard pixel and point settings. Good luck!

  11. #11
    Join Date
    Mar 2013
    Posts
    23
    Thanks

    Do you mean that, for instance, in that page that's giving me trouble, I might do better in changing ALL the px into em?

    I will read as you suggested.

    qim

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles