View Poll Results: When it comes to CSS and browsers . . .

Voters
2. You may not vote on this poll
  • CSS should bow to master Microsoft!

    0 0%
  • We need CSS universal compliance!

    2 100.00%
  • I hate CSS, I use HTML 1 only!

    0 0%
  • CSS, PHP, ASP, IE, FF . . . I'm craving alphabet soup now!

    0 0%
+ Reply to Thread
Results 1 to 6 of 6

Thread: Spacing problem with margin padding make no sense

  1. #1
    Join Date
    Nov 2005
    Location
    Inverness, FL
    Posts
    2,380

    Spacing problem with margin padding make no sense

    The major problem of the drop down menu is resolved. However, there's a cosmetic problem between IE7 and FF2 (see screenshots).

    In FF, there is almost no space above the main content header. In IE there is a space of 10px. Here's the CSS that affects the containers involved (put the margin/padding for the top in bold to emphasize):

    Code:
    #content { 
        font-size:12px;
        width: 600px; 
        margin-top: 0;
        margin-bottom: 20px;
        margin-left: 0;
        margin-right: 0;
        position:relative;
        padding: 0 18px 15px 18px;
        text-align: justify;
        }
    
    #content h1 {
        color: #000099;
        font-size: 20px;
        font-family: Helvetica, Arial, Verdana, Sans-Serif;
        font-weight: normal;
        margin: 0;
        line-height: 120%;
        padding-top: 10px;
        padding-bottom: 4px;
        border-bottom: 1px dotted #455A79;
        text-align: left;
        font-weight: bold;
        }
    Notice that the margin/padding is set to 10 in only one spot: yet only IE is making it 10; FF makes it near zero. Why? I'd think it would be the opposite if anything.
    Attached Images
    God knows where you are, but Google may not. SEO is the key that unlocks search engine success (and a plugin isn't enough).

  2. #2
    Join Date
    Nov 2005
    Location
    God's Own country
    Posts
    2,612
    You want the FF display like IE right? Can you please try removing the margin:0; from the #content h1.

    just a guess, though..
    Search Engine Marketing India "With a Virtue of being Practical...!!!".
    DD:"If you can't explain it simply, you don't understand it well enough."

  3. #3
    Join Date
    Nov 2005
    Location
    Inverness, FL
    Posts
    2,380
    Kichus,

    That's a good idea, however when I tried it, no difference. I tried removing both that list the the space as zero and it made no difference. It's like FF isn't reading the 10px padding.

    John
    God knows where you are, but Google may not. SEO is the key that unlocks search engine success (and a plugin isn't enough).

  4. #4
    Join Date
    Oct 2019
    Location
    pakistan
    Posts
    241

  5. #5
    Join Date
    Apr 2019
    Location
    Bangalore
    Posts
    97
    Two similar and adjacent block elements share margins that are greater than zero, only the larger of the two margins will be applied.
    p {
    margin: 1em auto 1.5em auto;
    }

    Web Designing Company in Bangalore | Website Design Company in Bangalore | Web Design & Development Company in Bangalore

  6. #6
    Join Date
    Apr 2019
    Location
    Bangalore
    Posts
    97
    Two similar and adjacent block elements share margins that are greater than zero, only the larger of the two margins will be applied.
    p {
    margin: 1em auto 1.5em auto;
    }

    Web Designing Company in Bangalore | Website Design Company in Bangalore | Web Design & Development Company in Bangalore

+ Reply to Thread

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