www.webdeveloper.com
Results 1 to 10 of 10

Thread: [RESOLVED] Display problem IE7

  1. #1
    Join Date
    Mar 2011
    Posts
    4

    resolved [RESOLVED] Display problem IE7

    Hi,

    I have a position/display "?" problem in IE7. (It shows up right in FF3.6, IE8, Opera, Safari, Chrome)

    It's the list in the third container that shows the problem. The width is auto so it will stay as wide as the width of the browser. So the list items will fill up the browser.

    In IE7 the list item won't display inline.

    I hope someone can help me, because i can't find the problem .
    Easy copy/paste html file and open in IE8 to see the problem (<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> allready placed)


    Thanks,
    M

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- META TO EMULATE IE7 IN IE8-->
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <style media="all" type="text/css">
    html, body{ 
    	text-align:left;
    	margin:0px;
    	padding:0px;
    	width:auto;
    	height:100%;
    	background:#333;
    	border:0px;
    }
    
    #wrapper{
    	width:100%;
    	display:inline-block;
    	position:relative;
    	min-height: 100%;
    	height: auto !important;
    	height: 100%; /* IE6: = min-height*/
    	margin:0px 0px -50px 0px;
    }
    
    #header{
    	width:auto;
    	height:300px;
    	position:relative;
    	display:block;
    	padding:0px;
    	clear:both;
    }
    
    #col1-2holder{
    	width:640px;
    	position:relative; 
    	display:block; 
    	float:left; /* float left for ie7 */
    }
    
    #container-col1{
    	width:320px;
    	position:relative;
    	display:block;
    	height:100%;
    	overflow:hidden;
    	float:left;
    	z-index:7000;
    	background:#306;
    }
    
    #container-col2{
    	width:320px;
    	float:left;
    	position:relative;
    	display:block;
    	z-index:8000;
    	overflow:hidden;
    	background:#009;
    }
    
    #container-col3{
    	width:100%;
    	margin-left:-650px; /* depends on width + padding #col1-2holder*/
    	position:relative;
    	display:inline;
    	overflow:visible;
    	float:left;
    	clear:right;
    }
    
    #gallery{ display:inline; margin-left:640px; float:left;}
    
    /* Gallery work */
    ul.work {
    	margin:0px; padding:0px;
    }
    
    ul.work li {
    	display:inline-block;
    	height:230px;!
    	width:226px;
    }
    
    </style>
    
    </head>
    <body>
    
    <div id="wrapper">
    	<!--HEADER -->
        <div id="header" style="background-color:#FFF;">HEADER</div>
    
        
        <!-- START COL1/COL2 HOLDER -->
        <div id="col1-2holder">
        
            <div id="container-col1">
                <div id="content-col1">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
                </div>
            </div>
            <div id="container-col2">
                <div id="content-col2">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
                </div>
            </div>
            
        </div>
        
        <!-- START THIRD COL -->
        <div id="container-col3"> 
            <div id="gallery">
                <ul class="work">
                    <li style="background:#0CC; width:226px; border:1px solid #CCC;">img</li>
                    <li style="background:#0CC; width:226px; border:1px solid #CCC;">img</li>
                    <li style="background:#0CC; width:226px; border:1px solid #CCC;">img</li>
                    <li style="background:#0CC; width:226px; border:1px solid #CCC;">img</li>
                    <li style="background:#0CC; width:226px; border:1px solid #CCC;">img</li>
                    <li style="background:#0CC; width:226px; border:1px solid #CCC;">img</li>
                    <li style="background:#0CC; width:226px; border:1px solid #CCC;">img</li>
                    <li style="background:#0CC; width:226px; border:1px solid #CCC;">img</li>
                </ul>
            </div>
        </div>    
        
        <!-- clearing floats placing footer around here -->
        
    </div>
    </body>
    </html>

  2. #2
    Join Date
    Mar 2011
    Posts
    4
    *Bumb

    Willing to give a cup of coffee (via PayPal) for a solution. It's probably a easy fix but can not find it .

  3. #3
    Join Date
    Mar 2011
    Posts
    4

    Solution

    I found the solution. Display inline-block did not work. So I used float.

    HTML Code:
    ul.work li {
    	float:left;
    	height:230px;
    	width:226px;
    }
    Last edited by morphox85; 03-22-2011 at 04:31 PM. Reason: edit code

  4. #4
    Join Date
    Jan 2011
    Posts
    42

    similar problems

    I'm also having problems in this area.
    My site looks really discombobulated in IE7 and IE6. It works very well in Firefox, Safari, Chrome, as well as IE8. Does anyone know of typical reasons why this could be the case? Could it have anything to do with the doctype code? I also use clearfix quite a bit with the following code:

    .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    .clearfix {display: inline-block;}

    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */
    /* @end */

    I don't know if this could have anything to do with it or why it says "hide from IE-mac." I'm not sure where to even begin on figuring this whole issue out. I'm mostly concerned about getting it to work in IE7.

  5. #5
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by fine0023 View Post
    I'm also having problems in this area.
    My site looks really discombobulated in IE7 and IE6. It works very well in Firefox, Safari, Chrome, as well as IE8.
    Post a link to a test page. A simple class tells us nothing.

  6. #6
    Join Date
    Jan 2011
    Posts
    42

    here is the link


  7. #7
    Join Date
    Nov 2010
    Location
    Los Angeles, CA
    Posts
    234
    IE7 accepts display: inline-block only on elements that are naturally inline (<a>, <img>, <span>, etc..)

  8. #8
    Join Date
    Jan 2011
    Posts
    42

    re: {display: inline-block;}

    .clearfix {display: inline-block;}

    So should I just take this line above out of my code then? Or do I need to do something similar to what morphox85 said he did on this thread? I think this is the only place where I have {display: inline-block;}. I actually already just tried taking this out and didn't notice any differences in safari or firefox, so I'm not sure what purpose this serves anyway. I don't have a way to check IE on my mac right now, so I can't see if this solved the IE7 issues or if it did something to IE8. Also, why do would I need to keep the following code if practically nobody uses IE-mac anymore?

    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */
    /* @end */

  9. #9
    Join Date
    Jan 2011
    Posts
    42

    still looking for a solution

    IE 6 and 7 still show the navigation bar vertical instead of horizontal I changed my clearfix code so it doesn't even have display: inline-block; (or the IE-Mac stuff). I don't have display: inline-block anywhere now.

  10. #10
    Join Date
    Jan 2011
    Posts
    42

    problem solved

    Got the #nav to display horizontal in IE7 by setting a width to it

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles