PDA

View Full Version : IE Whitespace Issue not in FF/Chrome/Safari



srg2k5
11-03-2011, 07:53 PM
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:


<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:


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.

teedoff
11-03-2011, 07:59 PM
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.

srg2k5
11-03-2011, 08:02 PM
I did post it. I'll post again however. http://www.bubbug.com

teedoff
11-03-2011, 08:12 PM
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

srg2k5
11-03-2011, 08:21 PM
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.

srg2k5
11-03-2011, 11:02 PM
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.