Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts

    ff not working on my page?

    For some reason my page is acting strange in FF. I have a div with a class inside of it. It is labeled as navigation. For some reason i can get it to look like i want it to in IE. here is my code along with some screen shots

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {
    margin:0px;
    padding:0px;
    }
    
    body {
    background-color:#7F7F60;
    background-image:url(gfx/bg_image_main.gif);
    background-position:top left;
    background-repeat:repeat-x;
    }
    
    #topHeader {
    background-image:url(gfx/top_border.gif);
    width:832px;
    height:218px;
    margin:0 auto;
    }
    #mainContainer {
    width:832px;
    height:800px;
    background-image:url(gfx/content_border.gif);
    background-repeat:repeat-y;
    margin:0 auto;
    }
    
    #bottomContainer {
    width:832px;
    background-image:url(gfx/bottom_section_container.gif);
    background-repeat:no-repeat;
    height:12px;
    margin:0 auto;
    }
    
    /*------------------------------------------------------NAVIGATION---------------------------------*/
    
    .navigation {
    margin:168px auto;
    height:38px;
    /*background-color:#00CC00;*/
    width:830px;
    text-align:center;
    
    }
    
    .navigation ul {
    margin:0 auto;
    padding:10px;
    }
    
    .navigation li {
    display:inline;
    padding-left:20px;
    
    }
    
    .navigation a {
    font-family:"Myriad Pro";
    color:#000;
    font-size:15px;
    list-style-type:none;
    text-decoration:none;
    }
    
    .navigation a:hover {
    color:#FFFFFF;
    }
    </style>
    </head>
    
    <body>
    <div id="topHeader">
    	<div class="navigation">
        <ul>
        	<li><a href="#">Home</a></li>
            
        
        	<li><a href="#">Sign In</a></li>
            
       
        	<li><a href="#">Products</a></li>
            
            <li><a href="#">My Information</a></li>
            <li><a href="#">Help</a></li>
            </ul>
        
        
        </div>
    
    
    </div>
    	<div id="mainContainer"></div>
    		<div id="bottomContainer"></div>
    
    
    
    </body>
    </html>
    im not sure whats going on, whether i need to change some positioning or what. Thanks for any help guys!!

    the first shot is FireFox the second is Internet explorer
    Attached Thumbnails Attached Thumbnails ff not working on my page?-ffshot.jpg   ff not working on my page?-ieshot.jpg  

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Since you are using images screenshots and code are useless without having access to the images. Post a link to your site.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    i would love to, but its published on a private Intranet,i understand if its difficult without a link. I would always rather have a link. So if its a nusance dont worry about it, i just wanted to know if anyone saw one little problem i was missing.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I think Firefox is right in this instance. You have this
    Code:
    .navigation {
    margin:168px auto;
    height:38px;
    /*background-color:#00CC00;*/
    width:830px;
    text-align:center;
    
    }
    That means you are giving the navigation a top and bottom margin of 168px. It looks like in your screenshots the navigation is 168px from the top but they are collapsing. This might explain it better. http://www.researchkitchen.de/blog/a...collapsing.php
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    jcdevelopment (02-19-2008)

  • #5
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    thanks, that fixed it, thanks for the link also i will put it in my many links!


  •  

    Posting Permissions

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