Page 1 of 2 12 LastLast
Results 1 to 15 of 23
  1. #1
    Star Lounger
    Join Date
    Feb 2001
    Location
    Melbourne, Victoria, Australia
    Posts
    86
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Debugging CSS IE and FireFox

    I wrote a couple of very, very simple web pages. I started with the css tutorial at www.how-to-build-websites.com, and then found w3schools. My pages work perfectly in IE (coz that's what I tested on, I spose). But in Firefox, only the first two links (out of about five) in the navigation bar are functional. They highlight properly when you hover, go when you click, all that good stuff. The others act like plain old text, although they look like the links that do work (until you hover over them).

    When I plug the css into w3schools' css validation page, I get 0 errors, 0 warnings.

    Any suggestions how I can start to fault find this error?

    tia,
    Marty

  2. #2
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Debugging CSS IE and FireFox

    Hi Marty

    Any chance I can have a look? You can attach css files to posts now otherwise in a text file.

    The normal problem people have with links in CSS is that they have them in the wrong order within the pseudo class remember to use LoVeHAte or

    Link
    o
    Visited
    e
    Hover
    Active
    t
    e


    Any how , still send it through and I will do what i can to assist you
    Jerry

  3. #3
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Debugging CSS IE and FireFox

    Try validating the HTML as well as the CSS. Sometimes it's only a tiny mistake... IE is more forgiving than Fx in this regard.

  4. #4
    Star Lounger
    Join Date
    Feb 2001
    Location
    Melbourne, Victoria, Australia
    Posts
    86
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Debugging CSS IE and FireFox

    Replying to myself rather than to Jezza and Jeff.

    I validated the html. It's 4.01 transitional. Validates as strict too, if you change the doctype.
    The css seems to conform to LoVeHAte.

    Attached index.html and myCSS.css for brighter eyes than mine.
    Also to be seen at http://www.greatcircle.net.au; viewing pleasure currently depends on browser.

    thanks for your thoughts so far
    Attached Files Attached Files

  5. #5
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Debugging CSS IE and FireFox

    Hi Marty

    It is because you had #CenterDoc has position: absolute;

    Get rid of this line and replace with what I have below
    <pre>#centerDoc {
    z-index: 15;
    padding: 0 0 20px 235px; /*top right bottom left*/
    margin-top: 50px;
    }
    </pre>


    The absolute position actually created alayer which masked the menu hence why it would not change. The giveawau was the third option FAQ flickered slightly and then reverted to normal text. It should work now....but I am in between things at the moment so have not fully tested
    Jerry

  6. #6
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Debugging CSS IE and FireFox

    Hi Marty

    Just had a play, I have played around with your code and adjusted the box model. As you were using a 2 column box I thought it easier to just nest centerdoc and navigation and just create a margin on the centerdoc text, It gets rid of floats and absolute positioning making the box more flexible.

    Using the nesting method then allowed me to create a header div which is independent of the other divs but just sits at the top of the page and again losing the requirement for over burdensome position issues and possible problems with IE

    I have made it XHTML 1.0 validand this checks out at W3C and the CSS is fine too but it grumbled about the header colour being the same as your links but you can change that <img src=/S/grin.gif border=0 alt=grin width=15 height=15>

    Hope you don't mind me deconstructing you code but I was just making it cleaner and less potentially buggy.
    Jerry

  7. #7
    Star Lounger
    Join Date
    Feb 2001
    Location
    Melbourne, Victoria, Australia
    Posts
    86
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Debugging CSS IE and FireFox

    Thanks.
    It'll take me a little while to digest all of what you've done, but I like the sounds of it - and have a fixed page! I didn't even know about xhtml, but will convert the rest of the site (won't be too hard).
    Seeing how someone does code is a great way to learn, so, no, very happy you were prepared to do that.

    Thanks again,
    Marty

  8. #8
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Debugging CSS IE and FireFox

    Hi Marty

    I just do it in XHTML because of my background, I am not sure what you are going to do with your pages but if it is just static content I would just stick with HTML 4.01. XHTML is a bit quirky and is very strict in the use of tags, how the tags are created etc.

    I always develop in XHTML now so I don't have to worry too much about yet another mark up language, there are different views about this in the Lounge (as expected) but Browser are becoming more CSS savvy although IE 7 has not addressed quite a few of the requirements yet. Another reason I use CSS more now is that a lot of the original mark up is now deprecated along with some of the attributes they contain...as I say, the choice is yours <img src=/S/grin.gif border=0 alt=grin width=15 height=15>
    Jerry

  9. #9
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Debugging CSS IE and FireFox

    One caveat to using XHMTL: you may see examples with an XML declaration on the first line, before the DOCTYPE declaration:

    <code><font color=red><?xml version="1.0" encoding="UTF-8"?></font color=red>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></code>

    Although technically correct, you should not use the XML declaration unless you absolutely must. Many people still use IE6, and the XML declaration causes IE6 to ignore your DOCTYPE. IE then renders your page in IE6's historical "quirks" mode, defeating your efforts at cross-browser consistency.

  10. #10
    Star Lounger
    Join Date
    Feb 2001
    Location
    Melbourne, Victoria, Australia
    Posts
    86
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Debugging CSS IE and FireFox

    Thanks for your time guys. I spent some effort over the weekend rejigging the site. Now it's css & xhtml, and took a bit of time sorting out the javascript (didn't realise I'd have a problem there, I presume it's xhtml being more strict than html). Anyhow, all is well (er, except I haven't had a chance to test the result with IE - there's a dangerous assumption!!).

  11. #11
    Super Moderator
    Join Date
    Jun 2002
    Location
    Mt Macedon, Victoria, Australia
    Posts
    3,993
    Thanks
    1
    Thanked 45 Times in 44 Posts

    Re: Debugging CSS IE and FireFox

    I just had a look at your page in IE 7 and this is what I see. The same problem applies to all the other pages.
    Attached Images Attached Images
    Regards
    John



  12. #12
    Super Moderator
    Join Date
    Jun 2002
    Location
    Mt Macedon, Victoria, Australia
    Posts
    3,993
    Thanks
    1
    Thanked 45 Times in 44 Posts

    Re: Debugging CSS IE and FireFox

    Further to the previous post (so it is obvious to others what the problem is) here is what I see in Firefox.
    Attached Images Attached Images
    Regards
    John



  13. #13
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Debugging CSS IE and FireFox

    John

    Is that using the original link in <post:=635,017>post 635,017</post:> ?

    I have viewed it in FF and IE6 and it looks OK as Marty has nested the divs
    Jerry

  14. #14
    Super Moderator
    Join Date
    Jun 2002
    Location
    Mt Macedon, Victoria, Australia
    Posts
    3,993
    Thanks
    1
    Thanked 45 Times in 44 Posts

    Re: Debugging CSS IE and FireFox

    Yes I just clicked the link in that post, which took me to http://www.greatcircle.net.au/
    Regards
    John



  15. #15
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Debugging CSS IE and FireFox

    Thanks
    I'll find a coleague with IE7, it will be interesting t see it live as I cannot work out why it should do that.
    Jerry

Page 1 of 2 12 LastLast

Posting Permissions

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