Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE Whitespace Issue not in FF/Chrome/Safari

    I see all kinds of known whitespace issues with IE but I can't seem to pin down exactly whats going wrong with mine. On Safari/Firefox/Chrome everything looks great but on IE around some side boxes I have created I can't seem to get rid of whitespace between the images that create it. www.bubbug.com look on the left on the Categories and Featured box.
    HTML:
    Code:
    <div class="leftBoxContainer" id="categories" style="width: 200px">
    <div class="sidebox-header"><div class="sidebox-header-left"></div><div class="sidebox-header-mid"><h3 class="leftBoxHeading" id="categoriesHeading">Categories</h3></div><div class="sidebox-header-right"></div></div>
    <div id="categoriesContent" class="sideBoxContent">
    <div class="categories-top-list no-dots"><a class="category-top" href="http://bubbug.com/index.php?main_page=index&amp;cPath=1">Shirts</a></div>
    <hr id="catBoxDivider" />
    <a class="category-links" href="http://bubbug.com/index.php?main_page=specials">Specials ...</a><br />
    <a class="category-links" href="http://bubbug.com/index.php?main_page=products_new">New Products ...</a><br />
    <a class="category-links" href="http://bubbug.com/index.php?main_page=products_all">All Products ...</a>
    </div><div class="sidebox-bottom"></div>
    </div>
    <br/>
    This is the CSS that goes with it:
    Code:
    h3.leftBoxHeading, h3.rightBoxHeading {
    	font: bold 1.4em arial;
    	color: #ffffff;
    	padding: 5px 0 0 0;
    	}
    
    h3.leftBoxHeading a, h3.rightBoxHeading a {
    	font: normal 13px verdana, arial;
    	color: #ffffff;
    	text-decoration: underline;
    	}
    
    
    h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover {
    	color: #FFFF33;
    	text-decoration: none;
    	} 
    .sidebox-header {
    	display:inline-table;
    	width: 200px;
    	height: 31px;
     }
    .sidebox-header-mid {
    	background: url("../images/box_mid.png") repeat-x;
    	text-align:center;
    }
    .sidebox-header-left {
    	background: url("../images/box_left.png") no-repeat;
    	width:9px;
    }
    .sidebox-header-right { 
    	background: url("../images/box_right.png") no-repeat;
    	width:8px;
    }
    .sidebox-header-left,.sidebox-header-right {
    	padding: 0 0 0 0em;
    	font: 0;
    	display:table-cell;
    	height: 100%;
    	line-height: 0px;
    }
    .sidebox-header-mid {
    	padding: 0 0 0 0em;
    	display:table-cell;
    	height: 100%;
    	}
    .sidebox-bottom {
    	background: url("../images/box_bot.png") repeat-x;
    	padding: 0 0 0 0em;
    	display:block;
    	height:10px;
    	border-left: 1px solid #000000;
    	border-right: 1px solid #000000;
    	border-bottom: 1px solid #000000;
    }
    Any ideas? Thanks a million, this is driving me crazy.
    Last edited by srg2k5; 11-03-2011 at 06:55 PM. Reason: added code tags

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    A link to your site would be great. Or post all your code please. Hard to recreate your issues without all your html and css.
    Teed

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I did post it. I'll post again however. http://www.bubbug.com

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Well I see you have specified a margin on your heading tags. That's causing a small gap between your borders and your div sidebox-header-left.

    Otherwise IE9 and FF7 looks the same.

    No wait, removing the margin makes it look worse in IE...lol
    Teed

  • #5
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's driving me crazy, literally. it's like the left and right side of each of the three components that make up the top of the box are each adding a 1 px border. I thought it would be a line height issue or font size, but even going with 0 on those settings doesn't fix it.

  • #6
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have fixed the issue if anyone would like to see what I ended up doing. I switched to inline-block display style using a combination of spacers and vertical align to get the box to line up correctly. Not my preferred method, but now it renders in all appropriately.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •