SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict lundberg's Avatar
    Join Date
    Mar 2003
    Location
    Sweden
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mozilla Firebird adds 0 and IE 20 when i write 10 =/

    Hello,

    I have these 2 cols, and im working with the left one now, I want the text that I add in it like this:

    <h2><a href="">A text</a></h2>
    <h3>Today at 04:43 by User</h3>
    <h3>More longer text</h3>

    to be 10px in from the top and the left. I then did padding: 10px;
    but then mozilla doesn't add a padding and ie seams to add 20px =) maybe...

    Page: http://www.shell.linux.se/lundberg/ssa/index.php
    CSS: http://www.shell.linux.se/lundberg/ssa/css/eskiimo.css

    Whats wrong?



    Thanks in advance!

    Martin Lundberg
    Sweden

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

    I think the problem lies somewhere else.

    I don't think mozilla is clearing the floats above. Try adding this to your html then the problem may disappear or be easier to even out.

    Code:
    </div>
    <div style="clear:both"></div>
    <div id="contentRight"> 
    <p>Right Content</p>
    I think that will straighten it out, and if theres any discrepancies you should be able to work it out. (Note that occasionally mozilla will inherit the margin of its first child element so you have to watch out for that.)

    Hope that helps.

    Paul

  3. #3
    SitePoint Addict lundberg's Avatar
    Join Date
    Mar 2003
    Location
    Sweden
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey! you were right again! =) Thanks! Another weird things happends now. If i add 1px top padding to the content layer, then the first text jumps like 6px down or something. It's the same with the BIG gap between

    Nya mindre billgiare IPOD!

    and

    Idag kl. 16:23 av Lundberg

    I want "Idag kl. 16:23 av Lundberg" to be just under the other text. If i add display: inline; to the #contentLayer h2 and the #contentLayer h3, it goes correctly 10px from the top, but then the text in the <h3> jumps up just after the <h2> text. I shouldn't have to use <br>'s do I? =)

    Martin Lundberg
    Sweden

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

    If i understand you correctly just take out the dispolay :inline from the h3 styles and replace it with margin:0px;
    Code:
    #contentLayer h2 {
     font: bold 14px Tahoma, Helvetica, Verdana, sans-serif;
     margin:0;
    }
    #contentLayer h3 {
     font: 12px Tahoma, Helvetica, Verdana, sans-serif;
     margin:0;
    }
    You have specified 10px top padding in your content layer so I'm not sure what you meant about adding 1px to it. Reducing that top padding to 1px will reduce correctly as expected. (unless I've misunderstood you )

    Remember all elements have their margins and default margins that need to be accounted for if you are positioning precisely. To position one element you often have to make sure that the element above and below has margins that complement what you are trying to achieve.

    Paul

  5. #5
    SitePoint Addict lundberg's Avatar
    Join Date
    Mar 2003
    Location
    Sweden
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It worked! I feel pretty stupid, I thought I tried that, but guess not =P

    You've been fantasticly helpful and nice =)

    Thanks!

    Martin Lundberg
    Sweden


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
  •