div spacing issue

Discussion in 'HTML & Website Design' started by TheGrecianHero, Apr 28, 2011.

0
  1. #1
    Hey everyone.

    I'm trying to create a few divs on top of one another for a bio page. The issue that I'm having is that Firefox seems to put in a bit of space between the top and bottom borders of the div, and IE does not. This throws off all of the spacing that I'm doing, which is important as I'm lining these up with another div segment on the left (It's basically a bio page with image on left and text on the right)

    Here is a picture of what is happening, firefox on left and IE on right.

    [​IMG]

    Can someone help me figure out why this is happening? Or if there's a more elegant way of doing this, I'm open to suggestion. :p

    Thank you!
     
    TheGrecianHero, Apr 28, 2011 IP
  2. Podnimator

    Podnimator Peon

    Messages:
    29
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    This is margins. Try to search DIV MARGIN in CSS Book
     
    Podnimator, Apr 28, 2011 IP
  3. TheGrecianHero

    TheGrecianHero Well-Known Member

    Messages:
    622
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    110
    #3
    I tried setting that margins to 0 in each div, but it didn't do anything.
     
    TheGrecianHero, Apr 28, 2011 IP
  4. Podnimator

    Podnimator Peon

    Messages:
    29
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    May i look your code and css?
     
    Podnimator, Apr 28, 2011 IP
  5. Podnimator

    Podnimator Peon

    Messages:
    29
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    May be padding, try a
        padding: 1px; 
    margin: 1px;
    Code (markup):
     
    Podnimator, Apr 28, 2011 IP
    TheGrecianHero likes this.
  6. TheGrecianHero

    TheGrecianHero Well-Known Member

    Messages:
    622
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    110
    #6
    Thank you for taking a look.

    Here's the CSS I'm using.

    div.right {padding: 1px; 
    margin: 1px;}
    Code (markup):
    and the HTML

    
<div id="right" style="width:35em;height=1em;right:0;top:0;border:1px solid blue;">
<h4>
content
</h4>
</div>        
	  
<div id="right" style="width:35em;height=1em;right:0;top:7.5em;border:1px solid blue;">
<h4>
content
</h4>
</div>
    Code (markup):
    HA! This helped me figure it out! Something to do with the h4 tag, I'm going to check now but I imagine there's a margin thing in there. Just in case someone else has a similar problem and is stumped.

    Looks perfect now, thank you so much Pod!
     
    TheGrecianHero, Apr 28, 2011 IP
  7. Podnimator

    Podnimator Peon

    Messages:
    29
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Not at all, in future - post the code startly :)
    Another method is absolute positioning...
     
    Podnimator, Apr 28, 2011 IP
  8. TheGrecianHero

    TheGrecianHero Well-Known Member

    Messages:
    622
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    110
    #8
    Yeah, I will.

    Actually was using absolute positioning, but was trying to simplify things to figure out why the margin was odd. Going to go back to it now though.
     
    TheGrecianHero, Apr 28, 2011 IP
  9. BennyTran

    BennyTran Peon

    Messages:
    24
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    you try insert this code ,i think it help me resolved your problem .
    have fun !
     
    BennyTran, Apr 28, 2011 IP