Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7

Thread: HTML5 and IE9

  1. #1
    Junior Member
    Join Date
    Oct 2011
    Posts
    3
    Member #
    29550
    Hi Everybody, it's my first post in here!
    I've been designing a page based on a mock-up someone gave me. Everything looked good (i was testing it on firefox), until I checked on Internet explorer (version 9) and...well, i wanted to kill myself lol. In Chrome it looks good (just like firefox).

    The problem doesen't end there though. I've been coding without a Doctype, when I add the doctype...everything breaks (in Mozilla, Chrome, IE it's already broken so it doesen't matter lol). I've already tried with all the doctypes, but considering that I used HTML5, that's the one which should work...

    If any of you have windows live or facebook and would like to help me ill be more than grateful!!
    send me a direct message with your adress or name in case the answer's not so simple to write in here!

    Thanks in advance!

    [Mod Edit: M3n0tu18 - Removed zip file due to possible security issues]

  2.  

  3. #2
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,473
    Member #
    28473
    Liked
    265 times
    Please could you upload the website to a free host or your own hosting session please. No one here will open a zip file from a new member. Thanks
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>

  4. #3
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    There is no DOC TYPE specifically for HTML5, but very few browsers support all of the design elements of html5.

    Either post the code here as a comment, both CSS and HTML, or find a free web host to put your files on.

  5. #4
    Junior Member
    Join Date
    Oct 2011
    Posts
    3
    Member #
    29550
    Can you recommend me a free hosting site that it's easy to use. Sorry for my ignorance, I'm very new to this.

    In the meantime, i'll post my code:

    HTML:

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="estilo_laempresa.css" />
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    </head>
    <body>
    <div id="contenedor">
    <nav>
    <ul>
    <li style="padding: 20 15; width: 98px;"><a href="#">LA EMPRESA</a></li>
    <li style="padding: 20 10; width: 158px;"><a href="#">CARTA DE COLORES</a></li>
    <li style="padding: 20 12; width: 98px;"><a href="#">PRODUCTOS</a></li>
    <li style="padding: 20 12; width: 76px;"><a href="#">CLIENTES</a></li>
    <li style="padding: 20 15; width: 92px; "><a href="#">CONTACTOS</a></li>
    </ul>
    </nav>
    <header>
    <img src="logo.png" alt="logo" style="float: left;" />
    <p>
    Tejidos de Punto <br/>
    Calle 28 (Catalina de Boyle) nš 3660/70<br/>
    San Martin - Buenos Aires<br/>
    (011) 4755-0403<br/>
    </p>
    <img src="muestras.png" alt=logo style="float: left;" />
    <div style="clear: both">
    </div>
    </header>
    <section>
    <article id="izquierda">
    </article>
    <article id="medio">
    </article>
    <article id="derecha">
    </article>
    <div style="clear: both">
    </div>
    </section>
    <footer>
    <ul>
    <li><a href="#">La Empresa |</a></li>
    <li><a href="#">Carta de Colores |</a></li>
    <li><a href="#">Productos |</a></li>
    <li><a href="#">Clientes |</a></li>
    <li><a href="#">Contactos</a></li>
    </ul>
    </footer>
    </div>
    </body>
    </html>

    CSS:
    section{
    width: 770px;
    height: 470px;
    background-color: pink;
    padding: 40 15 15 15;
    background-image: url('cuadrado_fondo.gif');
    }
    footer{
    width: 800px;
    height: 40px;
    background-color: orange;
    border-top: solid 3px black;
    margin-top: 5px;
    }
    #izquierda{
    height: 470px;
    width: 245px;
    background-color: purple;
    float: left;
    }
    #medio{
    height: 390px;
    width: 245px;
    margin: 0 17;
    background-color: purple;
    float: left;
    }
    #derecha{
    height: 310px;
    width: 245px;
    background-color: purple;
    float: left;
    }

    nav ul{
    padding: 0;
    margin: 0;
    list-style: none;
    }

    nav ul li{
    display: inline;
    float: left;
    }
    nav ul li a{
    text-decoration: none;
    color: white;
    font-size: 18px;
    }
    header p{
    float: left;
    font-size: 14px;
    margin-top: 60px;
    }
    footer ul li{
    display: inline;
    float: left;
    margin: 0 3;
    height: 12px;
    }
    footer ul li a{
    text-decoration: none;
    font-size: 12px;
    color: black;
    margin: 0;
    padding: 0;
    }

  6. #5
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Nope... I don't Use free hosting so can't recommend. If you search the forums,'you'll find some recommendations.

    As for your code, if I'm not mistaken html5 requires a strict doc type , but you are using some inline styling elements which is not supported with the strict doc type.

    Might I suggest you try putting all your CSS elements into a single CSS file, use a transitional doc type.

    Once html5 is supported by all browsers it will be much easier to design to the html5 standard.

  7. #6
    Junior Member
    Join Date
    Oct 2011
    Posts
    3
    Member #
    29550
    thanks for the reply webzarus, I could try to avoid the inline styling, but how can i manage those buttons (the unordered list on top) if i want them to have different dimensions. Should i create an id for each one?

  8. #7
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    That's the only way to do it I'd you wanna use the html5 standard. And a strict doc type


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:04 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com