SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Wizard
    Join Date
    Oct 2004
    Location
    Newport Beach
    Posts
    1,761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help! FireFox is Butchering My Pages and CSS!

    Now that Firefox visitors represent 12% of total visitors, I need to make sure the site looks just as good for them as it does explorer visitors.

    However, it DOESNT. FireFox is butchering my site with everything.

    If you have firefox, I was wondering if you could help me out.

    Go Here: Movie Trailers

    Take a look at the home page and one article with both firefox and IE. See the differences?

    Huge. How can I get the layers back under control with firefox. Am I missing an attribute in css.

    In internet explorer the div layer sits in the page perfectly, with text and images wrapping around or nesting perfectly. With firefox, images leave div layers

    Sometimes I can fix the div layer problem, sometimes I can't

    But the worst thing is how Firefox handles my HEADER TAGS. Some of my tags require tags inside for movie titles and such....

    ex: <h1>New <em>Sin City</i> Trailer</h1>

    Any header that is like this loses all H1 attributes. Just open an article to see what I mean. The header should be green and bold, but is now gray and normal.

    Any suggestions?
    Go Here: Movie Trailers

    Thanks
    Ryan
    Upcoming Movies - Movie News. Updated Daily.
    Movie Trailers - Awesome trailer site. Nuff said.

  2. #2
    SitePoint Evangelist comfixit's Avatar
    Join Date
    Dec 2004
    Location
    Pasadena
    Posts
    537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks ok to me, maybe I am missing something when I view in Firefox. Typicaly you need to write W3C complient code to work in Firefox well as its not as forgiving as IE.

    Run your site through some validators. If everything validates it should move you forward to getting your site looking more the way you intend in Firefox.

  3. #3
    SitePoint Wizard
    Join Date
    Oct 2004
    Location
    Newport Beach
    Posts
    1,761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there a rule against using <u> inside header tags?

    Cause that is what is causing it. I looked and realized that the Italisized is fine, it is when I have the <u> tags in the header tags that the style attributes get dropped off.

    Thanks
    Ryan

    where can I find a validator?
    Upcoming Movies - Movie News. Updated Daily.
    Movie Trailers - Awesome trailer site. Nuff said.

  4. #4
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are not using a valid doc type.. you have javascript in the middle of your code (should be in the head of your documents)... and a heap of other errors on your pages . Putting one of the pages through the html validator came up with heaps of errors:

    http://tinyurl.com/5cvj8

    Fix all the errors first and then try and trouble shoot any problems you have.Nadia

  5. #5
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is W3C validation results for your page:
    http://validator.w3.org/check?uri=ht...ss=1&verbose=1

    The most common error I noticed is that you make use of ID="{value}" quite frequently and incorrectly. ID's must be unique and can be used only once per page. Instead of where you use the same ID multiple times on a page, you should be using "class" instead.

    Other common errors on you page include:
    • end tags for input tags. The input tag does not have a close tag;
    • type missing for <script> tags (e.g. <script type="text/javascript">);
    • improper use of <h1> tags
    • close tags for <td><tr> and <table> that were not opened
    • improperly closed comment tags " <!-- End of Info ---->" instead of " <!-- End of Info //-->"
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  6. #6
    SitePoint Wizard
    Join Date
    Oct 2004
    Location
    Newport Beach
    Posts
    1,761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I've noticed that too.

    I never knew ID was suppose to be unique, I was first told that it was another option over class. DAMN. You know how many pages I am going to have to go through?

    How do I do a class for some links instead of id? with the rollover and eveything?

    Also, I realized that I was not closing the font tags, and just having H1 appear inside of them. Gonna stop doing that right now.

    i looked at the comments about open <tr> and <td> and did a count of all open tables, and it adds up. I am going to have to take a closer look.

    Thanks
    Ryan
    Upcoming Movies - Movie News. Updated Daily.
    Movie Trailers - Awesome trailer site. Nuff said.

  7. #7
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The link I provided you will help you locate the extra </td></tr> and </table> tag. I might be simply an issue of improper nesting. In regards to ID vs class. Where as you use a # in CSS for IDs, you use a period for classes (e.g. .SomeClass instead of #SomeID).
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  8. #8
    SitePoint Wizard
    Join Date
    Oct 2004
    Location
    Newport Beach
    Posts
    1,761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    a#link-title:link { color:#5F8AC5; text-decoration:none; font-family: Tahoma, Arial, Verdana, sans-serif; font-variant: small-caps;}
    a#link-title:visited { color:#5F8AC5; text-decoration:none; font-family: Tahoma, Arial, Verdana, sans-serif; font-variant: small-caps;}
    a#link-title:hover { color:#5F8AC5; text-decoration:underline; font-family: Tahoma, Arial, Verdana, sans-serif; font-variant: small-caps;}
    a#link-title:active { color:#5F8AC5; text-decoration:none; font-family: Tahoma, Arial, Verdana, sans-serif; font-variant: small-caps;}


    a.link-title:link bla bla
    a.link-title:visited bla bla

    ??

    Thanks
    Ryan
    Upcoming Movies - Movie News. Updated Daily.
    Movie Trailers - Awesome trailer site. Nuff said.

  9. #9
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by casbboy

    a.link-title:link bla bla
    a.link-title:visited bla bla

    ??

    Thanks
    Ryan
    Exactly.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  10. #10
    SitePoint Wizard
    Join Date
    Oct 2004
    Location
    Newport Beach
    Posts
    1,761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Changing out the ID to CLASS right now.


    Already got the errors down from 960 to 364. Still high, but better.

    Why can't I have topmargin="0"

    What does doc type have to do with it?

    Thanks
    ryan
    Upcoming Movies - Movie News. Updated Daily.
    Movie Trailers - Awesome trailer site. Nuff said.

  11. #11
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by casbboy
    Why can't I have topmargin="0"
    It's not the way to do it - define it in your CSS

    Code:
    body {
      margin: 0px;
    }
    Quote Originally Posted by casbboy
    What does doc type have to do with it?
    It tells the browser how to render your page (like which version of (X)HTML you're using amoung other things).

  12. #12
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Already got the errors down from 960 to 364. Still high, but better.
    well done!!

    Why can't I have topmargin="0"
    No, you need to use margin-top: "0"

    What does doc type have to do with it?
    More about this here http://www.w3.org/TR/html4/struct/gl..._declaration-3
    and more here http://css-discuss.incutio.com/?page=DocType

    Nadia

  13. #13
    SitePoint Wizard
    Join Date
    Oct 2004
    Location
    Newport Beach
    Posts
    1,761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys, gonna keep working on it.

    Ryan
    Upcoming Movies - Movie News. Updated Daily.
    Movie Trailers - Awesome trailer site. Nuff said.

  14. #14
    SitePoint Wizard
    Join Date
    Oct 2004
    Location
    Newport Beach
    Posts
    1,761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, what do you put in alt="" when it is a transparent gif ?

    Thanks
    Ryaln
    Upcoming Movies - Movie News. Updated Daily.
    Movie Trailers - Awesome trailer site. Nuff said.

  15. #15
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nothing leave it empty. While you should always use alt tags, only put text in them where the image conveys information that needs to be expressed in text for users who do not see images (e.g. image didn't load).
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space


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
  •