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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help needit with html +css an ie9

    while guys, i got a few questions. ik always makes websites this way

    beta.css

    Code:
    body /* Internet Explorer */
    {
    text-align: center;
    }
    
    body /* Mozilla Firefox alignment */
    {
    text-align: -moz-center;
    }
    
    body {background-image:url('../images/bg.png');} 
    
    /*--------------------- */
    /* wrapper 				*/
    /*--------------------- */
    #wrapper{
    text-align: left;
    width: 1045;
    height: auto;
    margin: 50px auto 0;
    }
    
    
    /*--------------------- */
    /* header 				*/
    /*--------------------- */
    #header{
    float: left;
    text-align: left;
    margin: 0 5;
    width: 812;
    height: 270;
    
    }
    
    
    /*--------------------- */
    /* headerleft 			*/
    /*--------------------- */
    #headerleft{
    float: left;
    text-align: left;
    margin: 0 0;
    width: 621;
    height: 270;
    background-color:#FFFFFF;
    background-color:#FFFFFF;
    }
    
    /*--------------------- */
    /* headerright 			*/
    /*--------------------- */
    #headerright{
    float: left;
    text-align: left;
    margin: 0 0;
    width: 191;
    height: 270;
    background-color:#FFFFFF;
    background-color:#FFFFFF;
    }
    
    /*--------------------- */
    /* guestbook			*/
    /*--------------------- */
    #guestbook{
    float: left;
    text-align: left;
    margin: 0 5;
    width: 210;
    height: 210;
    background-color:#FFFFFF;
    -moz-border-radius-topright: 50px;
    border-top-right-radius: 50px;
    -moz-border-radius-topleft: 25px;
    border-top-left-radius: 25px;
    -moz-border-radius-topright: 25px;
    border-bottom-right-radius: 25px;
    -moz-border-radius-bottomleft: 25px;
    border-bottom-left-radius: 25px;
    }
    
    /*--------------------- */
    /* menu 				*/
    /*--------------------- */
    #menu{
    clear: left;
    text-align: left;
    margin: 0 5;
    width: 812;
    height: 29;
    background-color:#FFFFFF;
    }
    
    /*--------------------- */
    /* content 				*/
    /*--------------------- */
    #content{
    float: left;
    text-align: left;
    margin: 0 5;
    width: 812;
    height: 650;
    background-color:#FFFFFF;
    }
    
    /*--------------------- */
    /* contact				*/
    /*--------------------- */
    #contact{
    float: left;
    text-align: left;
    margin: -27 5;
    width: 210;
    height: 580;
    background-color:#FFFFFF;
    -moz-border-radius-topright: 50px;
    border-top-right-radius: 50px;
    -moz-border-radius-topleft: 25px;
    border-top-left-radius: 25px;
    -moz-border-radius-topright: 25px;
    border-bottom-right-radius: 25px;
    -moz-border-radius-bottomleft: 25px;
    border-bottom-left-radius: 25px;
    }
    
    /*--------------------- */
    /* footer 				*/
    /*--------------------- */
    #footer{
    clear: left;
    text-align: left;
    margin: 0 5;
    width: 812;
    height: 25;
    background-color:#845E91;
    border-top-left-radius: 25px;
    -moz-border-radius-topright: 25px;
    border-bottom-right-radius: 25px;
    -moz-border-radius-bottomleft: 25px;
    border-bottom-left-radius: 25px;
    }

    html.css
    Code:
    <!-- BEGIN HEAD-->
    <head>
    
    <!-- METATAGS -->
    <meta name="description" content="Patisserie Linda´s Design, omdat genieten mag.">
    <meta name="keywords" content="patisserie, taarten, cupcakes, chocolade, koekjes, taarten, kunsternares, Genieten, gebak, lekkers, snoepen, feesten, bruiloften">
    <meta name="author" content="Thomas van Dalen, WebDesigner">
    <meta name="robots" content="index, follow">
    <meta name="revisit-after" content="14 days">
    <title>Patisserie Linda's Design</title>
    
    <!-- FAVICON-->
    <link rel="shortcut icon" href="../design/images/favicon.ico" type="image/x-icon">
    
    <!-- CSS SCRIPTS  -->
    <link rel="stylesheet" type="text/css" href="../design/stylesheet/BETA.css">
    <link rel="stylesheet" href="../design/stylesheet/lightbox.css" type="text/css" media="screen" />
    
    <!-- LIGHTBOX-->
    <script src="../design/lightbox/js/jquery-1.7.2.min.js"></script>
    <script src="../design/lightbox/js/lightbox.js"></script>
    
    <!-- POPUP SCRIPT-->
    <SCRIPT TYPE="text/javascript">
    <!--
    function popup(mylink, windowname)
    {
    if (! window.focus)return true;
    var href;
    if (typeof(mylink) == 'string')
       href=mylink;
    else
       href=mylink.href;
    window.open(href, windowname, 'width=950,height=600,scrollbars=yes');
    return false;
    }
    //-->
    </SCRIPT>
    
    <!-- GOOGLE ANALYSTICS-->
    <script type="text/javascript">
    	  var _gaq = _gaq || [];
    	  _gaq.push(['_setAccount', 'UA-35364520-1']);
    	  _gaq.push(['_trackPageview']);
    	
    	  (function() {
    	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    	  })();
    	
    	</script>
    	
    	<script language="JavaScript" fptype="dynamicanimation">
    	<!--
    	function dynAnimation() {}
    	function clickSwapImg() {}
    	//-->
    	</script>
    	<script language="JavaScript1.2" fptype="dynamicanimation" src="../animate.js">
    	</script>
    </head>
    
    
    <!-- BEGIN BODY  -->
    <body onload="dynAnimation()" language="Javascript1.2" bgcolor="#BA468F">
    
    <!-- DIV, WRAPPER  -->
    <div id= "wrapper">
    
    <!-- DIV, HEADER  -->
    <div id= "HEADER">
    
    <!-- DIV, HEADERLFET  -->
    <div id= "headerleft">
    	<br>
    	<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="600" height="245">
    	<param name="movie" value="../design/flash/header.swf">
    	<param name="quality" value="High">
    	<embed src="../design/flash/header.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="600" height="245" quality="High"></object>
    </div>
    
    <!-- DIV, HEADERRIGHT  -->
    <div id= "headerright">
    	<p style="text-align: center">
    	<i><font color="#993333" style="font-size: 20pt"><br>
    	Welkom</font></i>
    </div>
    </div>
    
    <!-- DIV, GUESTBOOK  -->
    <div id= "guestbook">
    	<p style="text-align: center"><br>
    	<a onClick="return popup(this, 'notes')" href="http://pld.mygb.nl/"><img border="0" src="../design/images/gastenboekboek.png" width="164" height="120"></a><br>
    	<br>
    	&nbsp;Klik 
    	<a onClick="return popup(this, 'notes')" href="http://pld.mygb.nl/">hier</a> 
    	voor ons gastenboek
    </div>
    
    <!-- DIV, MENU  -->
    <div id= "menu">
    	<a href="../index.htm" onmouseover="var img=document['fpAnimswapImgFP25'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP25'].src=document['fpAnimswapImgFP25'].imgRolln">
    	<img border="0" src="../design/menu_buttons/welkoml.png" width="87" height="29" id="fpAnimswapImgFP25" name="fpAnimswapImgFP25" dynamicanimation="fpAnimswapImgFP25" lowsrc="../design/menu_buttons/welkoml.png"></a><a href="taarten.htm" onmouseover="var img=document['fpAnimswapImgFP26'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP26'].src=document['fpAnimswapImgFP26'].imgRolln"><img border="0" src="../design/menu_buttons/taarten.png" width="84" height="29" id="fpAnimswapImgFP26" name="fpAnimswapImgFP26" dynamicanimation="fpAnimswapImgFP26" lowsrc="../design/menu_buttons/taartenl.png"></a><a href="cupcakes.htm" onmouseover="var img=document['fpAnimswapImgFP13'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP13'].src=document['fpAnimswapImgFP13'].imgRolln"><img border="0" src="../design/menu_buttons/cupcakes.png" width="105" height="29" id="fpAnimswapImgFP13" name="fpAnimswapImgFP13" dynamicanimation="fpAnimswapImgFP13" lowsrc="../design/menu_buttons/cupcakesl.png"></a><a href="cakepops.htm" onmouseover="var img=document['fpAnimswapImgFP14'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP14'].src=document['fpAnimswapImgFP14'].imgRolln"><img border="0" src="../design/menu_buttons/cakepops.png" width="107" height="30" id="fpAnimswapImgFP14" name="fpAnimswapImgFP14" dynamicanimation="fpAnimswapImgFP14" lowsrc="../design/menu_buttons/cakepopsl.png"></a><a href="gebakjes.htm" onmouseover="var img=document['fpAnimswapImgFP15'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP15'].src=document['fpAnimswapImgFP15'].imgRolln"><img border="0" src="../design/menu_buttons/gebakjes.png" width="101" height="30" id="fpAnimswapImgFP15" name="fpAnimswapImgFP15" dynamicanimation="fpAnimswapImgFP15" lowsrc="../design/menu_buttons/gebakjesl.png"></a><a href="chocolade.htm" onmouseover="var img=document['fpAnimswapImgFP16'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP16'].src=document['fpAnimswapImgFP16'].imgRolln"><img border="0" src="../design/menu_buttons/chocolade.png" width="115" height="29" id="fpAnimswapImgFP16" name="fpAnimswapImgFP16" dynamicanimation="fpAnimswapImgFP16" lowsrc="../design/menu_buttons/chocoladel.png"></a><a onmouseover="var img=document['fpAnimswapImgFP27'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP27'].src=document['fpAnimswapImgFP27'].imgRolln" href="javascript:void(0)"><img border="0" src="../design/menu_buttons/luxekoekjes.png" width="134" height="29" id="fpAnimswapImgFP27" name="fpAnimswapImgFP27" dynamicanimation="fpAnimswapImgFP27" lowsrc="../design/menu_buttons/luxekoekjesl.png"></a><a href="fotos.htm" onmouseover="var img=document['fpAnimswapImgFP18'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP18'].src=document['fpAnimswapImgFP18'].imgRolln"><img border="0" src="../design/menu_buttons/fotos.png" width="79" height="29" id="fpAnimswapImgFP18" name="fpAnimswapImgFP18" dynamicanimation="fpAnimswapImgFP18" lowsrc="../design/menu_buttons/fotosl.png"></a>
    </div>
    
    <!-- DIV, CONTENT  -->
    <div id= "content">
    	&nbsp;<p style="text-align: center">
    	<font size="4">Welkom bij parisserie Linda's Design</font></p>
    	<p style="text-align: center">Heeft u een bruiloft, een verjaardag, een 
    	geboorte of zomaar een feestje?</p>
    	<p style="text-align: center">&nbsp;</p>
    	<p style="text-align: center">Patisserie Linda´s Design</p>
    	<p style="text-align: center">patisserie, taarten, cupcakes, chocolade, 
    	koekjes</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;</p>
    	<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Voorbeeld fotoweergave</p>
    	&nbsp;&nbsp;&nbsp;
    	<a rel="lightbox[roadtrip]" href="../design/fotos/22.jpg" title="Voorbeeld 1">
    	<img border="0" src="../design/fotos/22.jpg" width="71" height="100"></a>
    	<a rel="lightbox[roadtrip]" href="../design/fotos/ofietsanders.jpg" title="logo pld">
    	<img border="0" src="../design/fotos/ofietsanders.jpg" width="162" height="100"></a>
    </div>
    
    <!-- DIV, CONTACT  -->
    <div id="contact">
    	<p style="text-align: center"><i><b><font size="5">Contact:</font></b></i></p>
    	<p><font size="2">
    	<img border="0" src="../design/images/bird.jpg" width="76" height="92" align="left" style="padding-left: 2px">Patisserie Linda's Design<br>
    	Larixstraat 15<br>
    	2421VL Nieuwkoop<br>
    	Tel: (0172) 53 76 46<br>
    	Mob: (0770) 00 00 00</font></p>
    	<form method="POST" action="../phpmailer/contact.php">
    
    	<p style="text-align: center"><span style="font-size: 11pt">Naam:&nbsp;&nbsp;
    	<br>
    	<input name="Naam" size="19" style="clear:left">
    	<br>
    	Telefoon:<br>
    	<input name="Telefoon" size="19" style="clear:left">
    	<br>
    	Email:<br>
    	<input name="Email" size="19" style="clear:left">
    	<br>
    	Onderwerp:<br>
    	<select size="1" name="Onderwerp" style="clear:left">
    	<option>Bestelling</option>
    	<option>Nabestelling</option>
    	<option>Klacht</option>
    	<option>Opmerking</option>
    	</select><br>
    	<br>
    	Bericht:
    	<textarea name="Bericht" rows="9" cols="22"></textarea>
    	<p style="text-align: center"><input type="submit" name="submit" value="Verstuur">
    	</form>
    	<p>
    </div>
    
    <!-- DIV, FOOTER  -->
    <div id= "footer">
    	<p style="text-align: center"><i><font size="2">© Thomas van Dalen, Design
    	</font></i>
    </div>
    
    </div>
    </body>
    </html>

    while everything works great on firefox, now also in ie9 cause i removed the doctype, but if i place the doctype back everything is messed up in ie9.
    Is this the correct way to write a hrml 5 +css code? and what should i do to change this to html5? thanks alot!

  • #2
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    <!doctype html>

    HTML5 docType and structure
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    </head>
    
    <body>
    </body>
    </html>

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,092
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Time to upgrade your coding. You are using attributes that have be discontinued and or move to css. Unknown attributes and tags are font, border, align, and name. These are done in css.

    Javascript tags have been <script type="text/javascript" src="../animate.js"></script> for a long time, but in html5 type is not needed.


  •  

    Posting Permissions

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