Menu icon Foundation
Inline padding applied to Sections

Hi,

Foundation 4.3.2

Having to make Foundation 4 look decent enough in IE8 (yes, I know...please come back!) and I have noticed that when using Sections (tabs), the page loads fine at first but when you click on a tab it generates a gap of around 50px between the tabs and the content <div>. The gap increases/decreases depending on which tab you click on.

I have been looking at the code in Firebug and you can see that there is padding applied inline on the active <section> - but in proper browsers, this is overlapping the tabs rather than being applied on the content container underneath them.

I have been digging around trying to find the source of this inline styling so that I can see how I can manipulate it, but I am having no luck at all.

Any help would be appreciated. "Don't use IE" comments will not be ;-)

Thanks in advance

ie8tabsFoundation 4padding

Hi,

Foundation 4.3.2

Having to make Foundation 4 look decent enough in IE8 (yes, I know...please come back!) and I have noticed that when using Sections (tabs), the page loads fine at first but when you click on a tab it generates a gap of around 50px between the tabs and the content <div>. The gap increases/decreases depending on which tab you click on.

I have been looking at the code in Firebug and you can see that there is padding applied inline on the active <section> - but in proper browsers, this is overlapping the tabs rather than being applied on the content container underneath them.

I have been digging around trying to find the source of this inline styling so that I can see how I can manipulate it, but I am having no luck at all.

Any help would be appreciated. "Don't use IE" comments will not be ;-)

Thanks in advance

Jackson Mandela 8 months ago

Thank you. It solves the problem.

WinXP

Theo Nicolaou over 5 years ago

Thanks, that helped steer me in the right direction!

Steve Trask over 5 years ago

Hey,

Okay IE8 - I have fixed for a few foundation projects now but the time is coming (April - No more Microsoft Security support for XP http://www.informationweek.com/security/vulnerabilities-and-threats/windows-xp-security-apocalypse-prepare-to-be-pwned/d/d-id/1112186?) when it will die! :)

I used somethig that might be what your looking for, we had to use a slightly different version of code for IE8 notice the data section is set this made a fix similar to what you are seeing and obviously only changed in IE8.

If this is not the fix maybe something similar could be applied in a conditional statement with !important on to make it fix until April!

<!--[if IE 8]><!-->
  <div id="resort-tabs" class="section-container tabs" data-section="tabs">
<!--[endif]-->
<!--[if gt IE 8]><!-->
  <div id="resort-tabs" class="section-container auto" data-section>
<!--[endif]-->   

Rest of the code in here

<!--[if gt IE 8]><!-->
  </div>
<!--![endif]-->
<!--[if IE 8]><!-->
  </div>
<!--[endif]-->

Hope this helps