#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2005
    Posts
    52
    Rep Power
    9

    Mysterious Vertical Space


    I have a region with a div, an image and another div stacked vertically. For some reason, there are a few pixels of blank space between the image and the bottom div.

    http://www.brucethorn.com/index.php/...aritime-sunday

    On another page, I have regions with a "line-height + vertical-align:middle" centering of an image that make up thumb nails. There too is a few pixels of blank space, but at the top and images, pushing them down and slightly outside of the div that contains each of them.
    http://www.brucethorn.com/index.php/paintings

    I suspect these are the same problem, but I could be wrong.
    The issue is most visable in FF, and noticable in Opera. I only see something sporadic for the second occurence in IE

    Code:
    body				{background-color:#999999; margin:0px; padding:0px; border:0px; text-align:center; font-family:"Courier New", Courier, mono;}
    h1.header			{height:16px; width:800px; _width:776px; font-size:100%; font-weight:bold; margin:0px 0px 0px 24px; text-align:left; background-color:#333333;}
    h2.header			{margin:0px; font-size:90%; font-weight:bold;}
    div					{text-align:left;}
    h2.infoleft			{text-align:left; height:16px; width:576px; font-size:90%; margin:0px 0px 0px 24px; _margin:0px 0px 0px 12px;float:left;}
    h2.inforight		{text-align:right; height:16px; width:176px; font-size:90%; margin:0px 24px 0px 0px; _margin:0px 0px 0px 0px;float:left;}
    
    div.black			{background-color:#000000; color:#999999;}
    div.block			{margin:8px 24px 8px 24px; text-align:justify; font-size:90%;}
    div.block2			{margin:8px 0px 8px 12px; _margin:0px 0px 0px 4px;}
    div.block3			{margin:8px 0px 0px 12px;}
    
    img					{border:0px; margin:0px; padding:0px;}
    img.left			{float:left;}
    img.right			{float:right;}
    
    div.bar				{height:16px; width:auto; text-align:center;}
    div.title			{height:48px; width:800px; margin:auto;}
    div.content			{height:392px; width:800px; margin:auto; text-align:center;}
    
    div.subbar			{height:16px; width:800px; background-color:#333333;}
    div.menu			{height:18px; width:480px; float:left; margin:30px 0px 0px 20px;}
    div.copyright		{height:16px; width:800px; margin:auto; text-align:right; font-weight:bold; font-size:75%;}
    div.scroll			{height:344px; width:800px; margin:8px 0px 0px 0px; overflow:auto;}
    
    div.filmunit		{height:128px; width:128px; border:4px; border-style:solid; border-color:#000000; background-color:#999999; margin:8px; padding:0px; float:left; text-align:center; line-height:128px;}
    img.filmimage		{vertical-align:middle;}
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2005
    Posts
    52
    Rep Power
    9
    It seems that my problem is related to inline space. If i throw a "display:block;" on my images, my horizontal and vertical centering goes away. Is there a fix?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2005
    Posts
    52
    Rep Power
    9
    So... I came up with a "solution", but it works! I changed the font-size to 0px for the containing div.

IMN logo majestic logo threadwatch logo seochat tools logo