SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firefox Design Issue

    Hi. There,

    Just finished off with the design & development of one of my sites and going through a test period now.
    However, i'm having an issue in Firefox browsers which i don't see in IE and not sure how to resolve.

    If you go to the site www.taxrefundclaim.co.uk/testing using firefox you will notice below the navigational menus there seems to be a broken frame. This frame looks perfectly ok in IE but not in firefox. Anyone have any ideas why that might be and where abouts in the code to resolve this.

    THanks

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,290
    Mentioned
    198 Post(s)
    Tagged
    3 Thread(s)

    gap

    It has the "gaps" in Opera too. Between the "content_main_top" and "content_main_main" divs.

  3. #3
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi. thanks for your reply...
    would you mind telling me exactly how i can get rid of these gaps. I'm a HTML & CSS newbie so unfortunately it's not easy for me to spot it.
    thanks

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,290
    Mentioned
    198 Post(s)
    Tagged
    3 Thread(s)

    gap CSS

    If I knew, I would be more than glad to tell you. Unforunately I am far from being a CSS guru myself. I didn't look at all the CSS in the 4 external CSS files, in-head CSS style, and in-line styles, but I hoped you would be familiar with it enough to know where to look for those divs in the CSS.

    I imagine it most likely has something to do with a margin, or the use of fixed px sizes. If you can't spot it, hopefully someone better at CSS than myself will post.

  5. #5
    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,

    Its the default top margin on the p element that you haven't addressed and is collapsing onto the parent causing the gap.

    Code:
    .content_main_main p{margin:0 0 1em 0}

    You also need to change the following to use padding or you will get margin collapse again.
    Code:
    .space
    {
    padding-top:15px;
    }
    You shouldn't really add extra elements just to make space. You could use padding on existing elements to do this (or margins where margin collapse isn't an issue).

    Read about collapsing margins here:
    http://reference.sitepoint.com/css/collapsingmargins


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
  •