www.webdeveloper.com
Results 1 to 8 of 8

Thread: IE7 hasLayout / disappearing content

  1. #1
    Join Date
    Oct 2006
    Posts
    43

    IE7 hasLayout / disappearing content

    I think I'm having a hasLayout issue here. I have external pages being assembled and rendered by Ruby but the only browser these bugs crop up in is IE7, so it seems browser scripting (css) related.

    The page loads entirely, then all but the #menu and #logo blocks vanish, but they'll reappear if you hit the 'alt' key.

    In one of my malfunctioning pages, here is the CSS:


    HTML Code:
    body {
    text-align: center;
    min-width: 760px;
    background: #000;
    width: 100%;
    }
    
    div#wrapper {
    margin: 0 auto;
    margin-top: 100px;
    border: 1px solid #ffffff;
    width: 760px;
    background: #5c1c2d url('[[image:runner]]');
    background-position: bottom right;
    background-repeat: no-repeat;
    display: table;
    height: 100%;
    }
    
    html>body div#wrapper {
    min-height: 600px;
    height: 100%;
    width: 760px;
    }
    
    div#logo {
    float: left;
    height: 410px;
    position: relative;
    top: -10px;
    margin: -1px auto -10px auto;
    width: 150px;
    border-top: 1px solid #fff;
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    background: #6f1727 url('[[image:logo]]');
    background-position: center;
    background-repeat: no-repeat;
    }
    
    html>body div#logo {
    height: 100%;
    min-height: 394px;
    }
    
    div#footer {
    width: 760px;
    clear: both;
    margin: 0 auto;
    font-family: trebuchet ms,arial,verdana;
    font-size: 8pt;
    font-weight: normal;
    color: #ffffff;
    letter-spacing: 1.1pt;
    padding-top: 20px;
    text-align: right;
    }
    
    div#footer A {
    color: #ffffff;
    font-weight: normal;
    text-decoration: none;
    text-transform: uppercase;
    }
    
    div#footer a:hover {
    text-decoration: underline;
    }
    
    div#content {
    text-align: left;
    padding: 15px 70px 15px 0;
    float: right;
    width: 460px;
    height: 100%;
    font-family: trebuchet ms,arial,verdana;
    font-size: 9pt;
    font-weight: normal;
    color: #ffffff;
    }
    
    html>body div#content {
    min-height: 500px;
    }
    
    div#topbar {
    height: 75px;
    font-family: trebuchet ms,arial,verdana;
    font-size: 8pt;
    font-weight: normal;
    text-align: left;
    padding-left: 25px;
    padding-top: 10px;
    color: #ffffff;
    letter-spacing: 1.1pt;
    border-bottom: 1px solid #ffffff;
    clear: left;
    }
    
    div#menu {
    float: right;
    width: 760px;
    }
    
    div#menu A {
    display: block;
    width: 125px;
    position: relative;
    left:0px;
    top: -10px;
    z-index: 50;
    float: left;
    border: 1px solid #ffffff;
    border-left:0;
    height: 25px;
    background: #a0171f url('[[image:arrow]]');
    background-position: center left;
    background-repeat: no-repeat;
    font-family: trebuchet ms,arial,verdana;
    text-align: right;
    font-size: 14px;
    text-decoration: none;
    padding-right: 10px;
    padding-top: 3px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    }
    
    div#content a {
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    }
    
    div#content a:hover {
    text-decoration: underline;
    }
    
    div#menu a:hover {
    background: #5c1c2d url('[[image:arrow]]');
    background-position: center left;
    background-repeat: no-repeat;
    color: #bbc6b6;
    }
    
    h2 {
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    }
    
    b {
    color: #ffffff;
    font-weight: bold;
    }
    
    h1 {
    color: #bbc6b6;
    font-weight: bold;
    font-size: 15px;
    }
    
    div#content .pod-body a, div#content .pod-body b { color: #000; }
    Last edited by WebJoel; 11-19-2007 at 01:25 PM. Reason: I put your code in [HTML] ~ [/HTML] brackets for easier reading

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    We need to see the accompanying html or a link preferably.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Oct 2006
    Posts
    43

  4. #4
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    div#wrapper {
    margin: 0 auto;
    margin-top: 100px;
    border: 1px solid #ffffff;
    width: 760px;
    background: #5c1c2d url('[[image:runner]]');
    background-position: bottom right;
    background-repeat: no-repeat;
    display: table;
    height: 100%;
    }
    I don't understand this. -It's probably fine and does what it's suposed to. I'd like to understand what this is, -why it works.

    Also, -have you looked at your page in Firefox? I am seeing something strange happening there with the #menu (which seems to be where your complaint lies)..

    I don't have/use IE7, but trust Firefox's interpretation of this as being correct (trust it more than IE6's view)..
    Attached Images Attached Images
    I build for: Firefox and tweak for IE

  5. #5
    Join Date
    Oct 2006
    Posts
    43
    These pages are assembled and rendered by Ruby, and tags in double brackets like that are used to identify files uploaded internally by our users. Sorry for the confusion.

    The menu works fine but pull it up in IE7 if you get a chance and you can't miss the bug.

  6. #6
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    I'll check the code again.
    back:

    I don't suppose that there's any chance that this:
    div#menu A {
    display: block;
    width: 125px;
    position: relative;
    left:0px;
    top: -10px;
    z-index: 50;
    float: left;
    border: 1px solid #ffffff;
    border-left:0;
    height: 25px;
    background: #a0171f url('[[image:arrow]]');
    background-position: center left;
    background-repeat: no-repeat;
    font-family: "trebuchet ms",arial,verdana;
    text-align: right;
    font-size: 14px;
    text-decoration: none;
    padding-right: 10px;
    padding-top: 3px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    }
    has anything to di with it? This should be lowercase anyway... and " " to multi-word font-names (still checking things..)

    back:

    okay, -I just booked a 16-browser check on browsershots... should have a picture back shortly...
    Last edited by WebJoel; 11-15-2007 at 01:31 PM.
    I build for: Firefox and tweak for IE

  7. #7
    Join Date
    Oct 2006
    Posts
    43
    I need to know some techniques for troubleshooting haslayout bugs. One suggestion was to add:

    * {
    zoom: 1.0;
    }

    to the top of the stylesheet and see if the problem goes away. This didn't work but I'm still 90% sure it's a haslayout bug. I've tried adding dimensions and other properties to the div's that are disappearing but haven't had much luck.

    How else can I test this?

  8. #8
    Join Date
    Oct 2006
    Posts
    43
    adding position: relative; to #wrapper stops it from disappearing, but often the content will zip over to the left (until I press the alt key, of course).

Thread Information

Users Browsing this Thread

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

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