Firefox Widths? Or My Css?

**Jamie2993** · 12-21-2008, 11:40 AM

Hi,

I'm Currently Redesigning my site Here And it all looks perfect in IE but when i go onto FireFox it looks mostly the same.
Just One Problem The Menu At The Top, The Widths And There Is Gaps. Ive Been Working Hard And Cant Seem To Find The Problem.

Heres The CSS for the whole menu:

Code:

.navigation {
margin : 0 auto;
padding : 0;
font-family : franklin gothic book;
background-color : silver;
width : 59em;
min-height : 1em;
min-width : 59em;
text-align : center;
margin-top : 5px;
}
.navigation li.t {
min-width : 1em;
width : 1em;
min-height : 1em;
float : left;
background : silver url(img/tl.gif) no-repeat top left;
}
.navigation li.b {
min-width : 1em;
width : 1em;
min-height : 1em;
float : right;
background : url(img/tr.gif) no-repeat top right;
}
.navigation li.tls {
min-width : 1em;
width : 1em;
background : silver url(img/tls.gif) no-repeat top left;
}
.navigation li.trs {
min-width : 1em;
width : 1em;
background : url(img/trs.gif) no-repeat right top;
margin : 0;
padding : 0;
}
.navigation ul {
color : white;
list-style : none;
min-width : 59em;
display : inline;
width : 59em;
margin : 0;
padding : 0;
}
.navigation li {
min-width : 15em;
max-width : 15em;
width : 10em;
height : 1em;
display : inline;
}
.navigation li a {
height : 1em;
min-width : 11em;
max-width : 11em;
width : 10em;
color : black;
text-decoration : none;
background : white;
}
.navigation li.tl {
min-width : 1em;
max-width : 2em;
width : 1em;
background : white url(img/tls.gif) no-repeat top left;
}
.navigation li.tr {
min-width : 1em;
max-width : 2em;
width : 1em;
background : white url(img/trs.gif) no-repeat right top;
}
.navigation li a.mi {
margin : 0 auto;
padding : 0;
min-width : 11em;
max-width : 12em;
margin-top : 5px;
width : 11em;
color : black;
text-decoration : none;
background : white;
}
.navigation a:hover {
text-decoration : underline;
}

I Just Cant Seem To Find Out What To Do,

Please Could SomeOne Help,

Thanks In Advance,

Jamie.

**Snookerman** · 12-21-2008, 11:48 AM

Try validating your page, it might get rid of your problem.

**Jamie2993** · 12-21-2008, 11:48 AM

well i have tried that, but then it just messes up my whole site

**Jamie2993** · 12-21-2008, 12:08 PM

Please SomeOne Help!

**Jamie2993** · 12-21-2008, 02:28 PM

Please SomeOne HELP!

**Snookerman** · 12-21-2008, 03:14 PM

Originally Posted by Jamie2993

well i have tried that, but then it just messes up my whole site

Validating your code should not mess up your site but rather make it available to more users with different ways of viewing your pages. If it does get messed up, then you should probably rewrite it a bit. It doesn't seem to be a very complex site so it shouldn't be to hard to rewrite it with valid code and we will be happy to help you out.

Even if you don't wish to go that way, you should still look at the errors detected by the validation, you have for example some close tags without open tags, I doubt that is necessary for your design.

**bluewalrus** · 12-21-2008, 04:55 PM

I changed your p class w to a div. p is for paragraphs of text since you have unordered lists and headings you don't need a p there because it is not a paragraph. So in your css be sure to change all the p.w to .w. I also took out the language JavaScript because you already said it was java script with the type. I put your email address in a meta tag because the link tag is for linking files used in the page. I did not however load it but think it should work with these changes... also be sure to change the > back to the entity

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head>
<title>Home ~ Game-Dragon</title>
<meta name="Author" content="mailto:contact@gamedragon.com" /> 
<meta name="keywords" content="game, dragon, the, online, gaming, community, games, fun, arcade, music, action, strategy" /> 
<meta name="description" content="The Online Gaming Community" /> 
<meta name="ROBOTS" content="ALL" />
<link rel="stylesheet" href="css/style.css"></link>
<script type="text/javascript">
function change(ID){ 
     ID = document.getElementById(1); 
     
     if(ID.style.display == "") 
          ID.style.display = "none";
     else 
          ID.style.display = "";
      }
</script>
</head>
<body>
<div id="outter">
<div class="header"><img src="images/logo2.bmp" alt="Image Description" /></div>
<div class="navigation">

<ul>
	<li class="t">&nbsp;</li>
	<li class="b">&nbsp;</li>
	<li class="tl">&nbsp;</li>
	<li><a href="http://game-dragon.com">Home</a></li>
	<li><a href="javascript:change(1)" class="mi">► Games ◄</a></li>
	<li><a href="http://music.game-dragon.com">Music</a></li>

	<li class="tr">&nbsp;</li>
</ul>
<br />
<ul style="display:none;" id="one">
	<li class="tls">&nbsp;</li>
	<li><a href="http://games.game-dragon.com/gnews.html">» Game News «</a></li>
	<li><a href="http://games.game-dragon.com/arcade.html">» Arcade «</a></li>
    	<li><a href="http://games.game-dragon.com/action.html">» Action «</a></li>

    	<li><a href="http://games.game-dragon.com/strategy.html">» Strategy «</a></li>
	<li class="trs">&nbsp;</li>
</ul>
	</div>
<div class="content2g">
<p class="w">Welcome To Game-Dragon.com,<br />
If you Like to Contact Me About My Site Or Would Like Something On My Website,<br />
Please Use The Contact Form Link In The Footer.</p>


<div class="w">
<h4> Updates: (15/11/08)</h4>
<ul>
	<li>There Is Now A Music Section, But Only For Display No Actual Pages Work.</li>
</ul>
<h4>Currently Working On (09/11/08) (Marked * = Completed)</h4>
<ul>
	<li> FireFox Friendly Site (Menu Bit Needs Fixing)*</li>

	<li> Just General Fixes</li>
</ul>
</div>
</div>
</div>
<div class="footer"><p><a href="http://game-dragon.com">Home</a> - <a href="http://contact.game-dragon.com">Contact/Request</a></p></div>
</body>
</html>

**Jamie2993** · 12-22-2008, 09:54 AM

Hi,

I Have Now Validated My HTML and CSS but i still get this problem...

Please Could SomeOne Help

Thanks In Advance,

Jamie.

**bluewalrus** · 12-23-2008, 04:40 AM

I don't see any gaps in my firefox (2.00017 i think...2 something) nor in flock. The menu also looks different then the last time I looked at it; but didn't see any gaps then in flock either (didn't load it in firefox before was just validating it). Did it get fixed by changing it or am I mistaken and you didn't change it or is it still gapping on you?

**Jamie2993** · 12-23-2008, 05:04 AM

Originally Posted by bluewalrus

I don't see any gaps in my firefox (2.00017 i think...2 something) nor in flock. The menu also looks different then the last time I looked at it; but didn't see any gaps then in flock either (didn't load it in firefox before was just validating it). Did it get fixed by changing it or am I mistaken and you didn't change it or is it still gapping on you?

Yes I Know, I put it back to it's old style, seems i couldnt get it to look the same in other browsers the other style.

Thanks For Help,

Jamie.