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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Works fine in Chrome and Safari but not in Firefox?

    Hello all,

    So I've exhausted all my resources trying to figure this out. I coded up this very simple website for my cousin as a favor and for some reason it looks perfectly fine in Safari and Chrome but when I load it up on Firefox, the navigational bar is screwed up. The dividers between the menu items look like they are pushed 160px(?) to the right in Firefox.

    I know this must be a really dumb question but I've tried searching multiple forums and Google and have not found anyone else with this problem.

    Here's the URL: www.sammykuo.org

    Please let me know if there is anything else you guys need to figure out this problem.

    Thank you in advanced for the help.

    Wes

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,739
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello slpywes,
    You margin that menu over a bit with this line highlighted in red -
    Code:
    #nav ul {
    	list-style-type:none;
    	margin-left: 34px;
    	/*margin-left:-35px;*/
    	vertical-align: middle;	
    }
    Your #nav a is set at 160px wide but the images you put in them are 180px wide.

    Maybe adding this to your CSS is a start -
    Code:
    #nav a img {width: 160px;}


    Is this divider just kind of hanging out by itself a cut/paste error?
    Code:
      <div id="content2">
        <div id="header">
          <div id="title"> <a href="index.htm"><img src="images/Home/title.png" alt="back to home" /></a> </div>
          <img src="images/Home/nav button divider red.jpg" style= "margin-left:78px;margin-top:159px;position:absolute;z-index:10;"/> <!-- InstanceBeginEditable name="nav" -->
    
            <div id="nav">
    <ul>
                            <li><a href="index.htm" class="active"><img src="images/Home/home.png" alt="home" /></a></li>
                            <li><a href="about.htm"><img src="images/Home/about.png" alt="about"/></a></li>
                            <li><a href="r
    Your box model is off everywhere you look. #title is set at 332px width and you place 960px wide title.png inside it.
    The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all could when figuring width/height.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much, I managed to resolve the issue thanks to you!


  •  

    Tags for this Thread

    Posting Permissions

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