Firefox hates me pt3

Discussion in 'CSS' started by THT, Feb 23, 2006.

  1. #1
    Ok,
    another site:

    http://www.jo-burg.com/template.htm

    In IE - everything looks fine

    In FF - the right hand side menu - where the weather bit is, appaears on the left.
    This is because i added "position:absolute" to the stylesheet.
    But without the absolute position, content was being cutoff from the end of the menu div.

    Anyway, take a look and see if you can help!!

    Thanks
     
    THT, Feb 23, 2006 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Things don't look good in IE if you reduce the window size.

    Lose the {position: absolute;}, and add this;
    #wrapper {
        overflow: hidden;
        width: 780px;
        border: 1px solid black;
        margin: 0 auto;
        }
    Code (markup):
    cheers,

    gary
     
    kk5st, Feb 23, 2006 IP
  3. THT

    THT Peon

    Messages:
    686
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for your reply


    Ive removed the position absolute
    However, im not sure where to add this as i have no wrapper class??


    THanks
     
    THT, Feb 23, 2006 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    Why yes, yes you do.
    
    </head>
    <body>
    [color=red]<div id="wrapper">[/color]
    
    <div id="main" style="clear:both"><img src="/Images/main.jpg" alt="" /><br/>
    Code (markup):
    cheers,

    gary
     
    kk5st, Feb 23, 2006 IP
    THT likes this.
  5. THT

    THT Peon

    Messages:
    686
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #5
    doh!

    your right

    thanks for your help!
     
    THT, Feb 24, 2006 IP
  6. relixx

    relixx Active Member

    Messages:
    946
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    70
    #6
    apparently, putting the doctype (eg, <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ) can also help as it tells the browser exactly what to expect. It the doctype isn't there, the browser goes into a "I'll do my best" mode, and as Fx is far stricter than IE...

    However, i could be wrong, i haven't tried this out myself...
     
    relixx, Feb 24, 2006 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #7
    See this ALA article.

    Which DTD? There is no good reason to use deprecated tags or attributes, so stick with 'strict' for all new documents. If you're dealing with an old doc and don't have the resources (time?) to rid it of obsolete markup, use transitional.

    cheers,

    gary
     
    kk5st, Feb 24, 2006 IP
  8. THT

    THT Peon

    Messages:
    686
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #8
    hmm after checking... i still get the same effect i had before where the text in the main contenbt would get cut off at the bottom of the menu.

    Check www.jo-burg.com and refresh a couple of times!

    i do have a transitional doctype listed
     
    THT, Feb 28, 2006 IP
  9. THT

    THT Peon

    Messages:
    686
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #9
    you need to check this in IE to see the issue

    BUMP!
     
    THT, Mar 1, 2006 IP
  10. ray1983

    ray1983 Peon

    Messages:
    83
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Very strange, i will follow this topic and hope to learn from it.
     
    ray1983, Mar 1, 2006 IP
  11. Tam

    Tam Peon

    Messages:
    89
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #11
    You need to add clear: both; to your #smallad css (that cures the cutoff). You may also need to add a height setting for the menu div (which holds the second google ads set).

    In a nutshell, its the divs containing your google ad stuff that is the problem, try the above, I am sure it will work.

    Good luck with your site. :)
     
    Tam, Mar 1, 2006 IP
  12. THT

    THT Peon

    Messages:
    686
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #12
    clear: both in small ad, pushes right bar (2 google ads and weather) under the content....
     
    THT, Mar 5, 2006 IP
  13. THT

    THT Peon

    Messages:
    686
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #13
    ok so i fixed it - added an empty div under the adsense with a "clear: both" :)
     
    THT, Mar 5, 2006 IP