immanuelx2 Posted June 8, 2007 Share Posted June 8, 2007 http://www.tranceflow.com/gq can someone tell me why that does work right in mozilla, but in IE it works flawlessly? Quote Link to comment https://forums.phpfreaks.com/topic/54694-solved-why-mozilla-sucks/ Share on other sites More sharing options...
ToonMariner Posted June 8, 2007 Share Posted June 8, 2007 vey simple - you have designed for IE rather than for a standards compliant browser and not used a doc type declaration. the best way to design a site is to design to a compliant browser - than if you need any fixes for ie either use the ie html condiftional statements to link another css file or use hacks (you can design out the need for most if not all hacks by using a strict dtd and getting ie out of quirks mode) Quote Link to comment https://forums.phpfreaks.com/topic/54694-solved-why-mozilla-sucks/#findComment-270635 Share on other sites More sharing options...
immanuelx2 Posted June 8, 2007 Author Share Posted June 8, 2007 What exactly is a 'doc type declaration' and how can I fix the div layout so that it works with 'compliant browsers' ? Quote Link to comment https://forums.phpfreaks.com/topic/54694-solved-why-mozilla-sucks/#findComment-270816 Share on other sites More sharing options...
ToonMariner Posted June 8, 2007 Share Posted June 8, 2007 doc type declaration - if you look at the source ocde of many web pages the very first line will read something like <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> (that is from this page - I personally only use xhtml1.1 these days) that is you doctype. Now if you put this at the top of all your pages .. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> you will get ie in standards compliant mode - initially you may think it hsa destroyed all your hard wrok in styling but the truth is if you stick with it and get your layout right you should find far more browsers will render your site in a very similar manner. Quote Link to comment https://forums.phpfreaks.com/topic/54694-solved-why-mozilla-sucks/#findComment-270827 Share on other sites More sharing options...
dbrimlow Posted June 9, 2007 Share Posted June 9, 2007 ToonMariner is right ... there is no better thing to remember than always use a DOCTYPE. Otherwise, you will always be coding website for IE only. So, unless you just LOVE Microsoft and the wonderful things they do, always use your doctype. So, remember, Mozilla doesn't suck ... coding for IE only sucks. If you feed dog food to a cat, don't say it is bad Dog food when the cat hurls. HOWEVER! That said. That wasn't why your page was blowing up in FF anyway. Your CSS was also a little messed up, as well. You needed to clear your floats and reduce your table width slightly. Here is a revision of the page complete - it works in IE and FF and validates as HTML 4,01 loose. It works for a small thing like this, but it is very heavy and over div designed. The same thing could have been done with less css coding. ... but it works: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="description" content="--------"> <meta name="keywords" content="--------"> <title>GuildQuarters -> Home</title> <style type="text/css"> <!-- body { text-align: center; /*For IE users*/ margin: 0; } div.container { width: 800px; border-right: 1px solid #afafaf; border-left: 1px solid #afafaf; margin-left: auto; margin-right: auto; /*For mozilla users*/ text-align: left; background-color: #ffffff; } div.logo { width: 800px; height: 70px; clear:both } div.logo img { } /*=======MAIN MENU=========*/ div.menucontainer { width: 800px; height: auto; clear:left } #modernbricksmenu{ padding: 0; width: 100%; background: transparent; voice-family: "\"}\""; voice-family: inherit; clear:both } #modernbricksmenu ul{ font: 11px Georgia; margin:0; margin-left: 40px; /*margin between first menu item and left browser edge*/ padding: 0; list-style: none; } #modernbricksmenu li{ display: inline; margin: 0 2px 0 0; padding: 0; text-transform:uppercase; } #modernbricksmenu a{ float: left; display: block; color: #6a0000; margin: 0 1px 0 0; /*Margin between each menu item*/ padding: 5px 10px; text-decoration: none; letter-spacing: 1px; background-color: #eeeedd; /*Default menu color*/ border-bottom: 1px solid white; } #modernbricksmenu a:hover{ background-color: #e4e4c3; /*Menu hover bgcolor*/ } #modernbricksmenu #current a{ /*currently selected tab*/ color: #6a0000; background-color: #e4e4c3; /*Brown color theme*/ border-color: #e4e4c3; /*Brown color theme e4e4c3 -> 009cff*/ } /*=======MEMBER BAR=======*/ div.memberbarborder { width: 800px; height: auto; background: #e4e4c3; padding: 5px 0; } div.memberbar { width: 800px; height: auto; color: #000000; background-color: #eeeedd; border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; } div.memberbar p { font: 10px Verdana; margin-left: 5px; } div.memberbar a { color: #000000; text-decoration: none; } div.memberbar form { color: #000000; font: 12px "Trebuchet MS"; margin: 0 5px 0 0; } div.memberbar input { font-size: 10px; background-color: #cccccc; border: 1px solid #666666; } --> </style> </head> <body> <div class="container"> <div class="logo"></div> <div id="modernbricksmenu"> <ul> <li id="current"><a href="index.php">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> <div class="menucontainer"> <div class="memberbarborder"> <div class="memberbar"> <table style="border:0; width:98%; clear:both"> <tr> <td align="left"> <p>Welcome, Guest. Would you like to <a href="join.php">join</a> and become a free member?</p> </td> <td align="right"> <form action="login.php" method="post"> Email: <input type="text" name="email" tabindex="1" maxlength="50" size="15"> Pass: <input type="password" name="password" tabindex="2" maxlength="15" size="15"> <input type="hidden" name="redirect" value="/gq/"> <input type="submit" tabindex="3" value="JackIn"> </form> </table> </div> </div> </div>hi</div> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/54694-solved-why-mozilla-sucks/#findComment-271491 Share on other sites More sharing options...
immanuelx2 Posted June 9, 2007 Author Share Posted June 9, 2007 thanks for the help guys.. but what exactly does 'clearing floats' do? Quote Link to comment https://forums.phpfreaks.com/topic/54694-solved-why-mozilla-sucks/#findComment-271525 Share on other sites More sharing options...
AndyB Posted June 10, 2007 Share Posted June 10, 2007 but what exactly does 'clearing floats' do? All you need to know - http://css.maxdesign.com.au/floatutorial/ Quote Link to comment https://forums.phpfreaks.com/topic/54694-solved-why-mozilla-sucks/#findComment-271627 Share on other sites More sharing options...
dbrimlow Posted June 10, 2007 Share Posted June 10, 2007 While at maxdesign, read and learn the tutorials on "Selectorials" as well as the floatorial. Selectorials put it all in perspective and is what CSS is all about - simple rules that if you remember them will avoid major troubleshooting issues in the future. And the listomatics are must views, as well. Many of us here still go back to them every so often for a booster. Quote Link to comment https://forums.phpfreaks.com/topic/54694-solved-why-mozilla-sucks/#findComment-271648 Share on other sites More sharing options...
immanuelx2 Posted June 10, 2007 Author Share Posted June 10, 2007 that site has taught me a lot... thanks for the link Quote Link to comment https://forums.phpfreaks.com/topic/54694-solved-why-mozilla-sucks/#findComment-271926 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.