SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firefox Issue - Help from Experts Wanted AGAIN!!

    http://www.stoneycreekwebdesign.com/...ate_footer.htm

    I am a fledgling web designer who stumbles through a few projects a year to make a little extra income for a nice vacation - I enjoy it and I envy you "full timers" who earn your living doing it.

    I have recently tried to change over to CSS and am stumbling through it with terrific help from this board. I recently revised the project I am currently working on, doing away with 'absolute' references CSS (done using Dreamweavers interface) and trying to do things the right way.

    I was delighted this afternoon when I got the template page completely re-done and it looks great in IE - perfect, even validates at www.w3.org. However, when I looked at the template with Firefox my #maincontent division is thrown to the left margin and is all out of place. Try as I might, I cannot determine why this is occuring and how to fix it.

    Can I ask you kind experts once again for some guidance - your help has got me this far, including the 100% height footer placement that I am so proud of!

    Thanks agian - Dave Zemens - Rochester, Michigan USA

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try removing 'float:right' from #maincontent. You are floating it, but not specifying a width. Since the content is wider than the canvas, the 'shrink-wrapped' width probably becomes 100%, and a 100%-wide DIV cannot sit next to a 160px-wide left-floated DIV.

    If you don't want the content to wrap under the menu DIV if the content is taller, you can set a left margin equal to the width of the menu (beware of quirks in IE, though).
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, AutisticCuckoo ... you got me going down the right path. When I took out the float I seemed to have some "padding" issues with the text, so I left the float:right in place, but added width: 735px to the #maincontent and it seems to work great in both browsers. I never quite understand why things work, but am happy when they do and am learning a bit more each time.

    Thanks again ----

  4. #4
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just noticed that this modification made my <p></p> tags in the #maincontent not function in Firefox. I get one thing fixed and I mess something else up. Any suggestions, as I suspect you CSS guys don't use <p> very often!

    Thanks once more ...

    EDIT: actually, this modiifcation did not make the <p> tag nor work - it was like that before - the <p> tag causes a new line in Firefox, but causes a new line with a blank line in IE -- confused again!

  5. #5
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I *am* trying, and this is what I came up with that works? Any comments on how you do it would be appreciated.

    p {
    line-height: 1.3em;
    margin: 0;
    padding-top: 1.2em;
    }

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dwzemens
    Any suggestions, as I suspect you CSS guys don't use <p> very often!
    Of course we do: to mark up paragraphs!

    You need to remember that different browsers have different default values for margin and padding on various elements. If I recall correctly, IE defaults to
    Code:
    p {margin:0 0 1em}
    while Gecko browsers default to
    Code:
    p {margin:1em 0}
    (i.e. IE uses only a bottom margin, while Gecko uses both top and bottom margins). Since adjacent vertical margins collapse, the net effect is usually the same.

    If you want margins and padding to be the same cross-browser, you need to specify all of them explicitly.
    Birnam wood is come to Dunsinane

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I notice your whole page is dropping down in ie when the page width is reduced. This is due to the min-height hack for safari which should be hidden form ie as it doesn't need it.

    Code:
    html>body #minHeight{float:left;width:0px;height:100%;margin-bottom:-77px;} /*safari wrapper*/
    /* margin-bottom must equal #footer height */
    /* html #minHeight{margin-bottom:-75px;} not needed*/
    

  8. #8
    SitePoint Zealot spinball's Avatar
    Join Date
    Oct 2004
    Location
    Harrison Twp., MI
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You may also want to address the fact that those with 800X600 resolution will have to side scroll to see all of the content on the pages. Just my 2cents

  9. #9
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again, guys ... great help. Any idea why when I include this code:

    /* commented backslash hack \*/
    html, body{height:100%;}
    /* end hack */

    which I assume (remember, hacker here) is needed to force my page to 100% height when it does not naturally fill) causes me problems. When using IE, if I try to minimize the window screen narrower than my content it forces my content down the page by several inches...Firefox does not show the same problem. I isolated this code as the code that causes the issue, but if I do not use this code then my pages do not default to a *full* screen, which is what I desire.

    Anyone know why IE causes this glitch and what I can do to rectify it>

    Again, my thanks in advance for helping me out.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I try to minimize the window screen narrower than my content it forces my content down the page by several inches...
    I gave you the answer in my post above!

  11. #11
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul. I feel stupid not seeing your earlier response. The problem with your fix is that I end up with a page that does not fill the user screen 100% if the content of the page is brief - I was trying to find a solution that filled each page to 100% regardless of the content, and that threw the footer to the bottom of the page when the content extended past one screen. Your fix solved the problem of the page dropping down just fine, however. Thanks again - I hope I can get the page with little content to expand to 100% of the screen, however!

    Thanks again - very much!

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    was trying to find a solution that filled each page to 100% regardless of the content, and that threw the footer to the bottom of the page when the content extended past one screen
    All my layouts from the three column demo do exactly that (and your code is taken from there)

    The fix I gave you above will make no difference to the page height in IE because the outer is already set to 100%. Its only safari that needs the min-height div so hiding it from ie will make no difference.

    You must leave in this code or it won't work:

    Code:
    /* commented backslash hack \*/ 
    html, body{height:100%;}
    /* end hack */
    Then change the min-height styles as follows:
    Code:
    html>body #minHeight{float:left;width:0px;height:100%;margin-bottom:-77px;} /*safari wrapper */
    /* html #minHeight{margin-bottom:-75px;} not needed for ie*/
    I have just checked with your code in case you misplaced something but it works fine and exactly as intended. If it doesn't work for you then you are doing something wrong and I'd need to see the code you are using to determine what's wrong

  13. #13
    SitePoint Guru dwzemens's Avatar
    Join Date
    Mar 2005
    Location
    United States
    Posts
    768
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    That does it. 100% minimum height and not scrunched down when minimizing the page. Thanks very much. You are gonna get tired of me soon, and I will not blame you!

    Dave


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
  •