mirai Posted February 23, 2010 Share Posted February 23, 2010 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> Link to comment Share on other sites More sharing options...
thescientist Posted February 23, 2010 Share Posted February 23, 2010 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 More sharing options...
tanusree_10 Posted February 24, 2010 Share Posted February 24, 2010 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 More sharing options...
thescientist Posted February 24, 2010 Share Posted February 24, 2010 whats wrong with using margins? Link to comment Share on other sites More sharing options...
Ingolme Posted February 24, 2010 Share Posted February 24, 2010 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 More sharing options...
ShadowMage Posted February 24, 2010 Share Posted February 24, 2010 I never recommend a <br> element for anything...In fact I find that roughly 8/10 times they botch everything, making it a challenge to get things to sit the way you want them to.display:block;clear: {left}{right}{both};These two work very well. Link to comment Share on other sites More sharing options...
mirai Posted February 27, 2010 Author Share Posted February 27, 2010 thank you guys for replying, i managed to fix the problem! ^^so this topic can be closed/deleted. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.