www.webdeveloper.com
Results 1 to 5 of 5

Thread: Firefox woes

Hybrid View

  1. #1
    Join Date
    Apr 2007
    Location
    Lynchburg, VA
    Posts
    4

    Firefox woes

    It is a rare moment when I develop something and have it work beautifully in IE7 and then be shock to find that Firefox is having problems with my CSS. Typically it is the other way around. The code in action is http://www.amherst.k12.va.us/index6.php and http://www.amherst.k12.va.us/web/css/style6.css

    I'm sure it is a minor positioning problem with my ID of "header", but I haven't found anything that really moves it in Firefox without sending the header way to the right in IE. Thanks for any input. Inspiration for this theme came from Quatuor's website [WorkSafe].

    Thanks in advance.
    Ben

  2. #2
    Join Date
    Apr 2007
    Location
    Lynchburg, VA
    Posts
    4

    Update to my own post

    Well I decided to make a slight sacrifice to fix my problem. I had to create another container box for and stuck everything in the header to align it up with the main content. Sounds confusing but it works

    #top {
    /* border: 1px solid #ff0000; */
    width: 900px;
    margin: 0 auto;
    text-align: center;
    }


    Added that and then changed my page to put that ID around my other div's.

    Also fixed the height of the main container by added
    "display: table;" to my container div. (Thanks Google)

    You can see my updated progress at http://www.amherst.k12.va.us/index3.php.

  3. #3
    Join Date
    May 2005
    Posts
    2,040
    It is a rare moment when I develop something and have it work beautifully in IE7 and then be shock to find that Firefox is having problems with my CSS.
    And therein lies your problem. You should be checking in a modern, standards compliant browser like Firefox and not old, buggy non-compliant IE.

    You aren't properly linking your stylesheet.

    Also, validate your html and css for your list of errors. Get it working in Firefox first. Then we can adjust for IEs quirks and bugs.
    Last edited by drhowarddrfine; 04-13-2007 at 04:42 PM.

  4. #4
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    See if this helps (too tired to explain what I changed, -sorry)
    Looks about the same for IE6 as Fx 2.0.0.3

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test Page</title>
    <link rel="stylesheet" href=
    "http://www.amherst.k12.va.us/web/css/style6.css" type="text/css">
    </head>
    <body>
    <div id="headerlogo"><img src=
    "http://www.amherst.k12.va.us/images/logo2.gif" alt=
    "XXXXXXXX"></div>
    <div id="Container" style="height:100%;">
    <div id="header" style="width:650px;">
    <ul id="primary">
    <li><span>Home</span></li>
    <li style="list-style: none">
    <ul id="secondary">

    <li><a href="#">Calendar</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">News</a></li>
    <li><a href="pages/home/superintendent.php">Superintendent</a></li>
    </ul>
    </li>
    <li><a href="#">School Board</a></li>
    <li><a href="#">Administration</a></li>
    <li><a href="#">Instruction</a></li>
    <li><a href="#">Schools</a></li>

    <li><a href="#">Parents/Students</a></li>
    <li><a href="#">Find It Quickly</a></li>
    </ul>
    </div>
    <div id="Content" style="height:30px;"></div>
    <div id="left">
    <ul id="sideNav">
    <li><a href="#" id="homeLink" name="homeLink">Home</a></li>
    <li><a href="#" id="featureLink" name=
    "featureLink">Features</a></li>
    <li><a href="#" id="expertLink" name="expertLink">Experts</a></li>
    <li><a href="#" id="quizLink" name="quizLink">Quiz</a></li>

    <li><a href="#" id="projectLink" name=
    "projectLink">Projects</a></li>
    <li><a href="#" id="horoscopeLink" name=
    "horoscopeLink">Horoscopes</a></li>
    </ul>
    </div>
    <div id="right" style="float:left; width:650px;">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Quisque est. In risus velit, nonummy a, rhoncus et, aliquam quis,
    nibh. Suspendisse nonummy dui id metus. Sed lacus urna,
    sollicitudin eget, blandit in, molestie quis, turpis. In ut risus.
    Pellentesque sodales magna at nunc. Nam dapibus magna quis augue.
    Integer in tellus vitae risus egestas porttitor. Vestibulum ante
    ipsum primis in faucibus orci luctus et ultrices posuere cubilia
    Curae; Class aptent taciti sociosqu ad litora torquent per conubia
    nostra, per inceptos hymenaeos.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Quisque est. In risus velit, nonummy a, rhoncus et, aliquam quis,
    nibh. Suspendisse nonummy dui id metus. Sed lacus urna,
    sollicitudin eget, blandit in, molestie quis, turpis. In ut risus.
    Pellentesque sodales magna at nunc. Nam dapibus magna quis augue.
    Integer in tellus vitae risus egestas porttitor. Vestibulum ante
    ipsum primis in faucibus orci luctus et ultrices posuere cubilia
    Curae; Class aptent taciti sociosqu ad litora torquent per conubia
    nostra, per inceptos hymenaeos.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Quisque est. In risus velit, nonummy a, rhoncus et, aliquam quis,
    nibh. Suspendisse nonummy dui id metus. Sed lacus urna,
    sollicitudin eget, blandit in, molestie quis, turpis. In ut risus.
    Pellentesque sodales magna at nunc. Nam dapibus magna quis augue.
    Integer in tellus vitae risus egestas porttitor. Vestibulum ante
    ipsum primis in faucibus orci luctus et ultrices posuere cubilia
    Curae; Class aptent taciti sociosqu ad litora torquent per conubia
    nostra, per inceptos hymenaeos.</p>
    </div>
    </div>
    </body>
    </html>
    (p.s., -thanks for making your URLs be 'absolute-path' for post, -so much easier for editing on-desktop if links/images/styles are abs-path & working).
    I build for: Firefox and tweak for IE

  5. #5
    Join Date
    Apr 2007
    Location
    Lynchburg, VA
    Posts
    4
    Quote Originally Posted by drhowarddrfine
    And therein lies your problem. You should be checking in a modern, standards compliant browser like Firefox and not old, buggy non-compliant IE.

    You aren't properly linking your stylesheet.

    Also, validate your html and css for your list of errors. Get it working in Firefox first. Then we can adjust for IEs quirks and bugs.
    First off, Firefox is my main browser. I hit CTRL+SHIFT+R more than you know.
    Now there are some cases [read "very few"] that Firefox's interpretation of CSS is more forgiving than IE7 reading. So to say that Firefox is always perfect and IE7 is completely wrong is a bad assumption. But I'm sure you know that.

    Secondly, I don't fully understand your statement about me not linking my stylesheet properly.
    <link rel="stylesheet" ref="http://www.amherst.k12.va.us/web/css/style6.css" /> the only thing I left out is type="text/css" part.

    The example I have in front of me is
    <link rel="stylesheet" href="/pathname/stylesheet.css" type="text/css" />
    taken from page 280 in O'Reilly's Web Design in a Nutshell (3rd Edition)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles