Topic: Extraneous space within blocks in IE6

[Atticus]

SMF Version: 1.1.11
SimplePortal Version: 2.3.1
Theme: SMF Default (with fixed width)

The SimplePortal implementation on the site I help administer is coming along fine (http://dmbo.us/smf). In Internet Explorer 7, Safari 4, Firefox 3, and, as reported by one user, Chrome, as well, the layout appears just fine.

However, when the portal is viewed in Internet Explorer 6, at the bottom of each block there is extraneous space within the borders of the block. I have attached a screenshot (cropped and resized) called sp-ie6-example.jpg so readers can see what I am describing.

I know this seems to only impact the site in Internet Explorer 6, but I would like to resolve it if at all possible since people still do use this older version, in particular, in work places that upgrade much less frequently. And just knowing it is a problem will bug the heck out of me.

Does anyone know what is causing this extraneous space in Internet Explorer 6 and how it can be corrected?

[[SiNaN]]

It looks same to me, however try this:

./Themes/default/Portal.template.php

Code: (Find) [Select]

</div>
<br />';

Code: (Replace) [Select]

</div>
<br style="line-height: 10px;" />';
If that doesn't help, try removing the <br /> all together and add a padding-bottom to block container <div>.

[Atticus]

Apologies for taking so long to respond SiNaN. I have been in and out of town for work. I will try your suggestions as soon as I can and then post here to let you know if they work or not.

[[SiNaN]]

No problems. Let us know how it goes.

[earthview.nl]

It looks same to me, however try this:

./Themes/default/Portal.template.php

Code: (Find) [Select]

</div>
<br />';

Code: (Replace) [Select]

</div>
<br style="line-height: 10px;" />';
If that doesn't help, try removing the <br /> all together and add a padding-bottom to block container <div>.

Hi, i have a same problem, and try this above without results, have someone an another sugestion.

Many Thanks,
Maik

[[SiNaN]]

Themes/default/portal.css

Code: (Find) [Select]

div.sp_block
{
overflow: auto;
}

Code: (Replace) [Select]

div.sp_block
{
}

[Atticus]

Many apologies SiNaN. It took me ages and ages to finally have an opportunity to take a look at this problem. Then I decided to upgrade to SimplePortal 2.3.2 before attempting the suggested fixes, but ran into problems with the upgrade (which are now resolved).

In any event, I tried the following:

1) Only Themes/default/portal.css fix most recently suggested
2) Combination of Themes/default/portal.css fix and Themes/default/Portal.template.php fix
3) Only Themes/default/Portal.template.php fix originally suggested

None of the three options, either separately or in combination, corrects the extra space issue in the SimplePortal display within IE6.

I think there comes a point where IE6 simply cannot be supported any longer. However, it would be great if the source of the extraneous space within blocks in IE6 could be identified. The small site I help administer cannot be the only one were some number of users are impacted. What seems to be the case when I have queried people (and is the case for me, as well) is that corporations tend to have large numbers of users still on IE6 simply because a number of legacy systems still require it. So, when viewing a SimplePortal-based site at work it ends up having the unsightly extraneous space.

[AngelinaBelle]

I am able to see the extra space IE8 in Quirks mode.
I see this at http://DMBO.us and at http://www.earthview.nl/
 
Using IE8's developers tools, I can see that the white space comes after the <table class="sp_block"> is closed, but within the "<div class="sp_block_container tborder">" that encloses it. So that seems to rule out the <br />, which is clearly outside the div's border, anyway.
 
So the only culprits left are the padding-bottom of the table and the margin-bottom of the div.
I began modifying style attributes within IE8 developer tools (still in quirks mode)
No amount of fooling with the table's padding-bottom made any difference at all.
But reducing the div's margin-bottom to 0px in inline style made the whitespace disappear.
Not so when I added it to the CSS for div.sp_block_container, though.
Some quirk of the browser, or of the developers' tools, I guess.
 
So you might try playing with
1) Adding "margin-bottom: 0px" to div.sp_block_container in portal.css
2) If that doesn't work, modifying portal.template.php to add the inline style="margin-bottom: 0px" wherever <div class="sp_block_container"> is echoed.
 
Please report back on how this works out.
 
IE8 in Quirks mode does other unpleasant things, too -- it totally breaks CURVE's buttony menu.
Though the Mehmene "strip" menu seems unaffected.
I hope IE6 is not this bad.

[Atticus]

Thanks for the additional suggestion AngelinaBelle.

I will give it a shot later in the week and report back here.

[AngelinaBelle]

Looking forward to it.