Log in

View Full Version : Firefox Widths? Or My Css?


Jamie2993
12-21-2008, 11:40 AM
Hi,

I'm Currently Redesigning my site Here (http://game-dragon.com) 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:


.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 (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fgame-dragon.com%2F), 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
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

<!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
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.
BLiZZaRD
12-23-2008, 03:32 PM
CSS code:



*{
margin:0;
padding:0;
}



IE, FF, Safari, Konq, etc. all use different default margins and padding. Using the star element and setting default for ALL to 0 will (9 out of 10) usually fix sparse spacing errors you encounter between browsers.

Just remember a Cascading Style Sheet is just that... Cascading. Top to bottom, what ever is at the bottom will overwrite what is above it. Make sure your star element is at the top, even before the body { section.