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 07:55 PM. Reason: added code tags

  2. #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    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. #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. #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    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. #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. #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
  •