This is a partial duplicate of #361349: White lines to left of primary menu and in left sidebar block - only IE7, which was closed without resolution. I wasn't sure if it was better to reopen that or start a new issue, but I have gone with the new issue. Apologies if that's not the way to go.
The issue is when using a table inside a left or right content block, a horizontal white line appears near the bottom of the block. See attached image. Issue seems to be restricted to using a table, and viewing with IE6 or IE7. FF3, Opera 9 are both fine. Also appears to be a problem with IE8 (tested using an external site renderer)
Using Drupal 6.13 and relatively clean install. Sample site available at http://test.ufnsw.com.au
Tom
| Comment | File | Size | Author |
|---|---|---|---|
| #4 | Screen Shot of Problem.jpg | 126.42 KB | harkinj |
| white_lines.png | 53.86 KB | tom_brennan |
Comments
Comment #1
tom_brennan commentedIgnore the IE8 comment. It seems to be OK in IE8. I made an error with the renderer.
Comment #2
tom_brennan commentedCause of the bug is due to another hasLayout issue with IE
See http://www.brunildo.org/test/IEMargCollLay.html
This exact case is in the second table, column 4 (N/Y), row 5 (bottom padding (< margin)). Make sure you view the site with IE6/7, otherwise it will look ok!
Default table in Pixture Reloaded has 10px bottom margin while the blocks have 5px bottom padding, so the margin in IE (incorrectly) sticks out of the block, causing the white line.
There don't appear to be any fixes, only workarounds. Possible workarounds:
- change margin-bottom to 0px for tables (may have undesirable effects elsewhere). Could target this specifically to IE
- put an empty element before the closing of the block div in block.tpl.php (eg <p></p>). Not ideal as this causes warnings in the HTML validator
Comment #3
Jeff Burnz commentedLets go for an IE specific fix in a conditional stylesheet, can you supply a patch by any chance, I'm so busy, I might even have to put this theme up for adoption.
Comment #4
harkinj commentedHi Jeff,
Your Theme is awesome. Appreciate all your hard work.
Has anyone come up with a fix for this issue yet? I'm almost ready to go live with my site but need to find a solid fix for this white line issue in IE7 & 6.
Comment #5
harkinj commentedHello Everyone,
For those of you looking for a fix for this. I think I've found a good answer. The problem I've found lies in a notoriously broken IE6 & 7 engine. It is amazing that Microsoft, instead of fixing it's older browser engines just make a new version and drops support on the older browsers. Here is a fix that worked for my situation.
The bug is called: The Guillotine Bug in IE 6 & 7 ; Ultimate IE6 Cheetsheet
Here is the code I added to the left and right containers of the style.css file:
#sidebar-left .block-content-inner {
PADDING-BOTTOM: 5px;
MARGIN: 0px;
PADDING-LEFT: 15px;
PADDING-RIGHT: 15px;
BACKGROUND: url(block-tile.png);
HEIGHT: 1%;
CLEAR: both;
PADDING-TOP: 10px
}
#sidebar-right .block-content-inner {
background: url(block-tile.png) repeat;
margin: 0;
padding: 10px 15px 5px 15px;
HEIGHT: 1%;
CLEAR: both;
}
Added attributes are in bold.
You must remember to change the main theme style.css file as well as the style.css file located in the color folder. Also if this works for you please let me know or if you have a different solution I am interested.
My Project: www.idahofly.com
-John
Comment #6
Jeff Burnz commentedPretty sure this got fixed at some stage.