Elements disappear in IE7 and other problems

page can be viewed here: http://dev-comp.gotpantheon.com/

Works fine in every browser bar IE7.

The top right has social icons which in IE7 only, the Google +1 icon disappears while the rest remain.

Also in IE7 the Facebook social icon displays text beneath it which I cannot seem to hide.

Finally in IE7 the top navigation icons (above the navigation text) and the bottom borders disappear.

Can anyone shed light on these issues?

Hi,

There’s too many css files to get a local version working for testing so this is very awkward. You are probably over the limit of CSS files anyway as I believe IE8 and below can only handle 30 css files at one time.

The issues are likely haslayout issues in IE7 and selectors that IE7 doesn’t understand like display:inline-block on block elements. Whenever you use display:inline-block on a block element you need to add a hack for ie7 like so:


.test{
display:inline-block;
*display:inline;/* ie7/6 hack for inline block*/
*zoom:1.0;/* hack */
}

Follow that procedure above for each rule where you have used inline-block on a block element. Also look out for any parent wrappers where you are positioning or floating children and ensure that zoom:1.0 is added to trigger haslayout.

Your facebook text is showing in Firefox also so you probably need to shorten the width so there’s no room for it to show.

Try adding this:


.block-fblikebutton iframe { width:54px!important }
.region-inner { zoom:1.0 }
*+html #zone-branding ul.menu li a {
	display:inline-block;
	vertical-align:top;
	margin-top:-25px!important;
}
#sliding-popup .popup-content {
	max-width:none;
	width:60%;
}
#sliding-popup .popup-content #popup-text { width:60%; }


I can’t guarantee that will make any difference as I can’t test locally but try it and see. Add the code at the end of all the css files so you can pull it back out easily if it causes any problems.

seems to have got the nav icons back thanks.

Sorry to bother you more could you just take a look at this page please: http://dev-comp.gotpantheon.com/sim-only-plans/blah

if you look in any browser there are two tabs (right hand side content) but in IE7 one of the tabs disappears…do you have any ideas on why?

Thanks again!

Hi,

If you mean this section then it may be the missing tags :slight_smile:


<li><a onclick="window.location.hash='#HOTDeal'; showTopDealOnly(); return false;" href="#HOTDeal">Your selected deal</a></li>
																							
<a  href="/sim-cards/phone-micro-sim#Deals" class="all-deals-top-link deals">All available deals</a>

</ul>

The list tag is missing from around the anchor and I would guess that IE7 is choking on it (although I haven’t tested).


<li><a onclick="window.location.hash='#HOTDeal'; showTopDealOnly(); return false;" href="#HOTDeal">Your selected deal</a></li>
																													
<li><a href="/sim-cards/phone-micro-sim#Deals" class="all-deals-top-link deals">All available deals</a></li>
</ul>

will look into that, thanks once again!