Jump to content

Ie7 And Ie6 Not Displaying My Website Correctly :(


mirai
 Share

Recommended Posts

hi guys!i finally finished developing my first css website, i crossbrowser tested while developing on chrome,firefox and IE8, i didn't think that the older versions of IE could be a problem, i was wrong...my website shows correctly on all browers i mentioned before, except on IE7 en IE6, my css knowledge is basic, i tried to solve the problem, googled a lot, but wasnt able to find a solution, i really need help bigtime.i will show you only 1 page of my website, if you guys can help me with just that 1 i could do the rest myself, just need to understand the cause.the code may look chaotic to you guys, as i said before this is my first css website, so if you have any other tips pls free to tell me.css code

@charset "utf-8";/* CSS Document */*{	padding: 0;	margin: 0;}body{	background-image: url(images/bg.jpg);	background-repeat: repeat-x;	padding: 0;	margin:0;}#container {	width: 663px;	padding:0;	margin:auto;}/* HEADER BACKGROUND IMAGE */#header{	background-image:url(images/banner.gif);	background-repeat:no-repeat;	height:193px;	width:663px;	float:left;	margin: 31px auto;	}/* HEADER BACKGROUND IMAGE END*//* NAVIGATION TOP*/#nav{	width: 278px;	padding-top: 0px;	float:right;	height:31px;	margin-right:180px;	margin-top: -31px;}.menu ul{	padding:0;	margin: 0;	list-style-type:none;	list-style:none;	display:inline;}.menu li{	padding-right:10px;	margin: 0 -10px 0 0;	height: 31px;	list-style-type:none;	display:inline;	float:left;}span{	display:none;}#home a{	background:url(images/home.gif);	width:63px;	height:31px;	display:block;}	#werkwijze a{	background:url(images/werkwijze.gif);	width:80px;	height:31px;	display:block;}#offerte a{	background:url(images/offerte.gif);	width:65px;	height:31px;	display:block;}#contact a{	background:url(images/contact.gif);	width:70px;	height:31px;	display:block;}/* NAVIGATION TOP END*/#content {	width:672px;	padding-top:10px;	margin:auto;}.footer{	background: url(images/footer.jpg);	background-repeat:no-repeat;	width: 691px;	height: 106px;		}/* NAVIGATION BOTTOM */#navb{	width: 250px;	padding-top: 0px;	float:right;	height:14px;	margin-right:230px;	margin-top: 20px;}.menub ul{	padding:0;	margin: 0;	list-style-type:none;	list-style:none;	display:inline;}.menub li{	padding-right:10px;	margin: 0 -10px 0 0;	height: 31px;	list-style-type:none;	display:inline;	float:left;}span{	display:none;}#homeb a{	background:url(images/home_bottom.jpg);	width:51px;	height:14px;	display:block;}	#werkwijzeb a{	background:url(images/ww_bottom.jpg);	width:71px;	height:14px;	display:block;}#offerteb a{	background:url(images/off_bottom.jpg);	width:58px;	height:14px;	display:block;}#contactb a{	background:url(images/co_bottom.jpg);	width:63px;	height:14px;	display:block;}/* NAVIGATION BOTTOM END*/.content_box2 {	width:691px;	float: left;	margin: auto;}.content_topww{	background:url(images/ww_content.jpg);	background-repeat:no-repeat;	width: 437px;	height: 740px;	padding: 0px;	margin-top: 170px;}/* CONTACT SIDEBAR */.content_topco{	background:url(images/co_form.jpg);	background-repeat:no-repeat;	width: 237px;	margin: 438px;	height: 740px;	margin-top: 170px;	margin-bottom:auto;}.submit{	padding-left: 5px;	padding-right: 5px;	border-color:04c612;	margin-top: 5px;	margin-left: 35px;	}.form-mail{	margin-top: 35px;	margin-left: 34px;	background-color: #01990D;	border: 1px solid #04c612;	color: #FFF;}.form-naam{	margin-top: 257px;	margin-left: 34px;	background-color: #01990D;	border: 1px solid #04c612;	color: #FFF;}.form-tel{	margin-top: 32px;	margin-left: 34px;	background-color: #01990D;	border: 1px solid #04c612;	color: #FFF;}.form-bedrijf{	margin-top: 34px;	margin-left: 34px;	background-color: #01990D;	border-color:#04C612;	color: #FFF;	border: 1px solid #04c612;	}.form-vraag{	margin-top: 35px;	margin-left: 34px;	background-color: #01990D;	border: 1px solid #04c612;	color: #FFF;	height:100px;	width:160px;		}/* CONTACT SIDEBAR END */

HTML CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Mirai designs</title><link href="styleww.css" rel="stylesheet" type="text/css" /><meta name="google-site-verification" content="MLI8qpPAYp4cr7gotodeOZkL9U-J_24Q8FmJZjmmVW0" /><meta name="description" content="professioneel maar ook voordelig een website laten bouwen dat kan bij mirai designs."/><meta name="keywords" content="webdesign,website,website webdesign,templates webdesign,webdesigner,webdesign cms,internet webdesign,websites webdesign,webdesign Nederland,simpel webdesign, goedkoop webdesign, voordelig webdesign, dutch webdesign,webdesign pagina,website bouwen"/></head><body><div id="container"><div id="header"><!--MENU BAR TOP--><div id="nav"><ul class="menu"><li id="home"><a href="index.html"><span>#</span></a></li><li id="werkwijze"><a href="werkwijze.html"><span>#</span></a></li><li id="offerte"><a href="offerte.html"><span>#</span></a></li><li id="contact"><a href="werkwijze.html"><span>#</span></a></li></ul></div><!--MENU BAR TOP END--><!--CONTACT FORM--><div id="content"><div class="content_box2"><div class="content_topww"><div class="content_topco"><form method="post" action="contactengine.php"><label for="Naam"></label><input type="text" name="Naam" size="21" class="form-naam" id="Naam"/><label for="Email"></label><input type="text" name="Email" size="21" class="form-mail" id="Email"/><label for="Telefoon"></label><input type="text" name="Telefoon" size="21" class="form-tel" id="Telefoon"/><label for="Bedrijf"></label><input type="text" name="Bedrijf" size="21" class="form-bedrijf" id="Bedrijf"/><label for="Uwvraag"></label><textarea name="Uwvraag"  class="form-vraag" rows="0" cols="0" id="Uwvraag"></textarea><input type="submit" value="Verzenden" class="submit"/></form></div></div><!--CONTACT FORM--><!--MENU BAR BOTTOM END--><div class="footer"><div id="navb"><ul class="menub"><li id="homeb"><a href="index.html"><span>#</span></a></li><li id="werkwijzeb"><a href="werkwijze.html"><span>#</span></a></li><li id="offerteb"><a href="offerte.html"><span>#</span></a></li><li id="contactb"><a href="werkwijze.html"><span>#</span></a></li></ul></div></div><!--MENU BAR BOTTOM END--></div></div></div></div></body></html>

Edited by mirai
Link to comment
Share on other sites

with a Mac I don't have access to IE w/out firing up my virtual machine, but the first step towards developing any website is to use a strict DTD and validate the code. Helps give everyone a good starting point to work from when looking for fixes.

Link to comment
Share on other sites

Hello,Try to avoid margin-left, right etc and also use <br class="clear"> in the html for using DIV..Here the html code:--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Mirai designs</title><link href="styleww.css" rel="stylesheet" type="text/css" /><meta name="google-site-verification" content="MLI8qpPAYp4cr7gotodeOZkL9U-J_24Q8FmJZjmmVW0" /><meta name="description" content="professioneel maar ook voordelig een website laten bouwen dat kan bij mirai designs."/><meta name="keywords" content="webdesign,website,website webdesign,templates webdesign,webdesigner,webdesign cms,internet webdesign,websites webdesign,webdesign Nederland,simpel webdesign, goedkoop webdesign, voordelig webdesign, dutch webdesign,webdesign pagina,website bouwen"/></head><body><div id="container"><div id="header"><!--MENU BAR TOP--><div id="nav"><ul class="menu"><li id="home"><a href="index.html"></a></li><li id="werkwijze"><a href="werkwijze.html"></a></li><li id="offerte"><a href="offerte.html"></a></li><li id="contact"><a href="werkwijze.html"></a></li></ul> </div> <br class="clear" /></div><!--MENU BAR TOP END--><!--CONTACT FORM--><div id="content"><div class="content_topww"></div><div class="content_topco"><form method="post" action="contactengine.php"><label for="Naam"></label><input type="text" name="Naam" size="21" class="form-naam" id="Naam"/><label for="Email"></label><input type="text" name="Email" size="21" class="form-mail" id="Email"/><label for="Telefoon"></label><input type="text" name="Telefoon" size="21" class="form-tel" id="Telefoon"/><label for="Bedrijf"></label><input type="text" name="Bedrijf" size="21" class="form-bedrijf" id="Bedrijf"/><label for="Uwvraag"></label><textarea name="Uwvraag" class="form-vraag" rows="0" cols="0" id="Uwvraag"></textarea><input type="submit" value="Verzenden" class="submit"/></form></div><br class="clear" /></div><!--CONTACT FORM--><!--MENU BAR BOTTOM END--><div id="footer"><div id="navb"><ul class="menub"><li id="homeb"><a href="index.html"><span>#</span></a></li><li id="werkwijzeb"><a href="werkwijze.html"><span>#</span></a></li><li id="offerteb"><a href="offerte.html"><span>#</span></a></li><li id="contactb"><a href="werkwijze.html"><span>#</span></a></li></ul></div></div><!--MENU BAR BOTTOM END--></div></div></body></html>and the css :-/* CSS Document */@charset "utf-8";/* CSS Document */*{ padding: 0; margin: 0;}body{ background-image: url(images/bg.jpg); background-repeat: repeat-x; padding: 0; margin:0;}#container { width: 691px; padding:0; margin:0 auto;}/* HEADER BACKGROUND IMAGE */#header{ background-image:url(images/banner.gif); background-repeat:no-repeat; background-position:0 31px; width:691px; height:194px; float:left; margin:0; padding:0; }/* HEADER BACKGROUND IMAGE END*//* NAVIGATION TOP*/#nav{ width:278px; padding:0 180px 0 0; float:right; height:31px;}.menu ul{ padding:0; margin: 0; list-style-type:none; list-style:none; display:inline;}.menu li{ padding-right:10px; margin: 0 -10px 0 0; height: 31px; list-style-type:none; display:inline; float:left;}span{ display:none;}#home a{ background:url(images/home.gif); width:63px; height:31px; display:block;} #werkwijze a{ background:url(images/werkwijze.gif); width:80px; height:31px; display:block;}#offerte a{ background:url(images/offerte.gif); width:65px; height:31px; display:block;}#contact a{ background:url(images/contact.gif); width:70px; height:31px; display:block;}/* NAVIGATION TOP END*/#content { width:691px; padding-top:10px; margin:0;}#footer{ background: url(images/footer.jpg); background-repeat:no-repeat; width: 691px; height: 106px; padding:0; margin:0;}/* NAVIGATION BOTTOM */#navb{ width: 250px; float:right; height:14px; padding-right:230px; padding-top: 20px;}.menub ul{ padding:0; margin: 0; list-style-type:none; list-style:none; display:inline;}.menub li{ padding-right:10px; margin: 0 -10px 0 0; height: 31px; list-style-type:none; display:inline; float:left;}span{ display:none;}#homeb a{ background:url(images/home_bottom.jpg); width:51px; height:14px; display:block;} #werkwijzeb a{ background:url(images/ww_bottom.jpg); width:71px; height:14px; display:block;}#offerteb a{ background:url(images/off_bottom.jpg); width:58px; height:14px; display:block;}#contactb a{ background:url(images/co_bottom.jpg); width:63px; height:14px; display:block;}/* NAVIGATION BOTTOM END*/.content_topww{ background:url(images/ww_content.jpg); background-repeat:no-repeat; width: 437px; height: 740px; padding:0; float:left;}/* CONTACT SIDEBAR */.content_topco{ background:url(images/co_form.jpg); background-repeat:no-repeat; width: 237px; height: 740px; padding:0; margin:0; float:left;}.submit{ padding-left: 5px; padding-right: 5px; border-color:04c612; margin-top: 5px; margin-left: 35px; }.form-mail{ margin-top: 35px; margin-left: 34px; background-color: #01990D; border: 1px solid #04c612; color: #FFF;}.form-naam{ margin-top: 257px; margin-left: 34px; background-color: #01990D; border: 1px solid #04c612; color: #FFF;}.form-tel{ margin-top: 32px; margin-left: 34px; background-color: #01990D; border: 1px solid #04c612; color: #FFF;}.form-bedrijf{ margin-top: 34px; margin-left: 34px; background-color: #01990D; border-color:#04C612; color: #FFF; border: 1px solid #04c612; }.form-vraag{ margin-top: 35px; margin-left: 34px; background-color: #01990D; border: 1px solid #04c612; color: #FFF; height:100px; width:160px; }/* CONTACT SIDEBAR END *//*New class*/.clear{ clear:both;}----I hope that Ie7 And Ie6 now Displaying your Website Correctly. Thanks...

Link to comment
Share on other sites

Hello,Try to avoid margin-left, right etc and also use <br class="clear"> in the html for using DIV..
It almost sounds like you're purposely trying to promote bad practice. I never recommend a <br> element for anything, and margins and padding are the correct way to move things around the page.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...