Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Firefox Widths? Or My Css?

  1. #1
    Join Date
    Oct 2007
    Location
    England,Kent
    Posts
    16
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question Firefox Widths? Or My Css?

    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.

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

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

  3. The Following User Says Thank You to Snookerman For This Useful Post:

    Jamie2993 (12-21-2008)

  4. #3
    Join Date
    Oct 2007
    Location
    England,Kent
    Posts
    16
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

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

  5. #4
    Join Date
    Oct 2007
    Location
    England,Kent
    Posts
    16
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Please SomeOne Help!

  6. #5
    Join Date
    Oct 2007
    Location
    England,Kent
    Posts
    16
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Please SomeOne HELP!

  7. #6
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Quote Originally Posted by Jamie2993 View Post
    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.

  8. The Following User Says Thank You to Snookerman For This Useful Post:

    Jamie2993 (12-22-2008)

  9. #7
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default Valid

    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>
    Last edited by bluewalrus; 12-21-2008 at 04:59 PM. Reason: realized ◄ was coding to the arrow

  10. The Following User Says Thank You to bluewalrus For This Useful Post:

    Jamie2993 (12-22-2008)

  11. #8
    Join Date
    Oct 2007
    Location
    England,Kent
    Posts
    16
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Smile Have Validated

    Hi,

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

    Please Could SomeOne Help

    Thanks In Advance,

    Jamie.

  12. #9
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    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?

  13. #10
    Join Date
    Oct 2007
    Location
    England,Kent
    Posts
    16
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by bluewalrus View Post
    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •