SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    works in IE but not in FF. advice??

    my site looks fine in Internet Explorer but when i view it in firefox, there is extra padding at the top of the page inside the container div. can someone take a look and let me know how i could fix this?

    the site is http://beta.asset-guardians.com/

  2. #2
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not on my dev computer but I'd bet IE is mishandling the <ul>.
    Add margin:0 to your navigation <ul> and see if it goes away. In any case, the problem, as always, is going to be IE, not Firefox.

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that was it - thank you!

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok - one more problem with my layout:
    take a look at http://beta.asset-guardians.com

    look at the bottom, between the body and the footer. in IE it looks fine, but in FF, there is a white paddign between the body and the footer, and the links are too high.

    any suggestions how to fix this? i have a feeling it is somethgin similar to the first problem but i have been fiddling with it and havent had much luck.

  5. #5
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Again you catch me without my dev computer. Are you using FF to test your markup first? You need to do that and your question should always be how to fix IE not FF. FF will almost always display what you write while you never know what IE is going to do.

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Again, this is the default margins applied to the <ul> - the normal margin collapse behaviour is pulling the top of the footer down. Setting margin: 0 on the footer <ul> fixes that.

    To avoid the numereous variations on default margins or padding on various elements that different browsers apply by default, I usually start my css with
    Code:
    * {
      margin: 0;
      paddng: 0;
    }
    which zeros everything cross-browser, and I can then apply the margins and padding that I want, without worrying about what the browser thinks should be there.

  7. #7
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    Again, this is the default margins applied to the <ul> - the normal margin collapse behaviour is pulling the top of the footer down. Setting margin: 0 on the footer <ul> fixes that.

    To avoid the numereous variations on default margins or padding on various elements that different browsers apply by default, I usually start my css with
    Code:
    * {
      margin: 0;
      paddng: 0;
    }
    which zeros everything cross-browser, and I can then apply the margins and padding that I want, without worrying about what the browser thinks should be there.

    thats a good idea - i swore I already tried that and it didn't work but i guess i was wrong because i just did it and now it looks good.

    thanks for your help!

  8. #8
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok a couple more questions:

    1) take a look at beta.asset-guardians.com. at the bottom of the page i have two columns. one is floated left and the other is floated right. the problem is that if you look at my code you will also see that i have like 10 br tags below the divs. without those br tags, the floated columns end up floatign out of the bottom of the containign div. any way to fix this via css instead of adding a bunch of br tags?

    2) have a look at http://beta.asset-guardians.com/portfolio.html. there i am using a jquery plugin that outputs a ul containing images from a picasa web gallery. works pretty well. only problem is that some of the images are portrait instead of landscape and as you can see ti throws the alignment of the pics off. is there any way to change the css so that all the li's are a uniform width?

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

    Re number 1 you need to clear your floats so that the parents background will extend around the floats because floats are removed from the flow. Read he faq on floats for a full understanding of this subject as it is an important issue.

    You can place a clearing div beyond the floats but inside the maincontent div like so.

    Code:
                </ul>
            </div>
            <div style="clear:both;height:1px;overflow:hidden"></div>
            <!-- end #mainContent -->
        </div>
    You can make that a class instead of inline styles of course.


    Alternatively you can use a css only method such as this:

    Code:
    #mainContent{overflow:auto;}
    * html #mainContent{overflow:visible;height:1&#37;}
    Overflow may not be a viable solution in some cases so read the FAQ on floats for other methods that don't include non-semantic mark up.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Re number 2 the simplest solution would be to float the lists left instead of the display:inline but then you would need to make each list item the same height and width otherwise they will snag when they wrap.

    Assuming you only have the 2 different image sizes then this shouldn't be much of a problem.

    I have some advanced methods documented here but I would advise against using them unless you really know what you are doing.

  11. #11
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    perfect! thank you!


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
  •