[SOLVED] Why mozilla SUCKS

immanuelx2 · 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?

ToonMariner · 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)

immanuelx2 · 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' ?

ToonMariner · 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.

dbrimlow · 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>

immanuelx2 · June 9, 2007

thanks for the help guys..

but what exactly does 'clearing floats' do?

AndyB · June 10, 2007

but what exactly does 'clearing floats' do?

All you need to know - http://css.maxdesign.com.au/floatutorial/

dbrimlow · 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.

immanuelx2 · June 10, 2007

that site has taught me a lot... thanks for the link

Sign In

[SOLVED] Why mozilla SUCKS

Recommended Posts

immanuelx2

Link to comment

Share on other sites

ToonMariner

Link to comment

Share on other sites

immanuelx2

Link to comment

Share on other sites

ToonMariner

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

immanuelx2

Link to comment

Share on other sites

AndyB

Link to comment

Share on other sites

dbrimlow

Link to comment

Share on other sites

immanuelx2

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information