SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2008
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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:

    Code:
    .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:

    Code:
    .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.

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2008
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    seems to have got the nav icons back thanks.

  4. #4
    SitePoint Zealot
    Join Date
    Nov 2008
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

    Quote Originally Posted by Paul O'B View Post
    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:

    Code:
    .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:

    Code:
    .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.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    Code:
    <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).

    Code:
    <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>

  6. #6
    SitePoint Zealot
    Join Date
    Nov 2008
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    will look into that, thanks once again!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •