homepage Welcome to WebmasterWorld Guest from 54.197.147.90
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
IE7 hasLayout bug / Disappearing Content
wheels




msg:3505482
 6:41 am on Nov 15, 2007 (gmt 0)

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:


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; }

 

jetboy




msg:3505617
 12:44 pm on Nov 15, 2007 (gmt 0)

Is it a hasLayout issue? Add:

* {
zoom: 1.0;
}

to your stylesheet. If the problem goes away; it is. Yes, this may mess up other aspects of your layout. Even if it doesn't, this isn't a permanent repair. Giving every element hasLayout in a complex build *can* slow down your site rendering and *can* drive up processor usage on the client browser to silly levels.

I have little doubt that hasLayout exists for a reason, and that reason is browser performance.

If it is hasLayout, you're looking for (parent) elements that aren't dimensioned. Apply zoom to these one by one until you find the culprit.

Move your new zoom declaration from you main stylesheet to an IE conditional commented one and you're done.

IE5 doesn't support zoom, so height: 0 on the same element in an IE5 specific conditional will do the same thing.

wheels




msg:3505942
 6:13 pm on Nov 15, 2007 (gmt 0)

That didn't affect anything. I've been trying to find stuff related to the alt key causing the content to restore. Any ideas how that could be related?

wheels




msg:3508937
 4:59 pm on Nov 19, 2007 (gmt 0)

What are other ways of narrowing down whether haslayout is my issue? I added zoom but nothing changed.

SuzyUK




msg:3509326
 12:05 am on Nov 20, 2007 (gmt 0)

What are other ways of narrowing down whether haslayout is my issue? I added zoom but nothing changed.

hmm strange one, there isn't any other way if zoom didn't, at least, fix the disappearing part, then I'm inclined to think the issue is not hasLayout related, however I never presume where it is concerned ;)

there are so many permutations of it, and I have to admit to never coming across it in relation to where 'alt' was a cure so if you've got a broken sample. feel free to send a link to a test case, or post the code if it's small enough

-Suzy

wheels




msg:3509335
 12:20 am on Nov 20, 2007 (gmt 0)

adding 'position: relative;' to #wrapper stops the content from disappearing, but it still kicks over to the far left of the screen until you press 'alt'.

i'm unfamiliar with the ways of your forums, should i send the link to you or can i post it?

SuzyUK




msg:3509346
 12:54 am on Nov 20, 2007 (gmt 0)

stickymail it to me we don't allow demo links, and thanks for checking :)

hmm the plot thickens ...
position:relative; does indeed suggest the involvment of hasLayout , however it alone is not enough :o .. either as a fix or a cause.. so far anyway!

wheels




msg:3510105
 8:41 pm on Nov 20, 2007 (gmt 0)

The issue turned out to be DOM related as Suzy discovered. I can stop the 'window.onload = initialize;' snippet from being displayed when users are viewing these external websites and it fixes the issue.

SuzyUK




msg:3510204
 11:23 pm on Nov 20, 2007 (gmt 0)

glad if my thoughts helped! thanks for following up

me, I would still be interested in any more thoughts/pointers re this instance.. (you know what I'm like!)

-------

I got the link from wheels and set up the code locally also. Both are showing similarly weird issues as wheels describes, though with me it's hover that makes the content appear/disappear rather than 'alt', I can actually get it to appear OR disappear on hover but 'alt' has no effect..

Anyhow, I'm not ruling out the involvement of hasLayout, just don't know which bits of page to remove for CSS debugging ;)
but I would appreciate help as to whether it's worth it or does anyone recognise the code below as causing problems and if so is there a fix for it (apart from simply commenting out the first line)?

There are 2 pages with way too much code to post, there is lots of JS involved but there is a javascript in the head of both the pages which involves TinyMCE. I originally thought this was the cause/trigger but now don't I don't think so unless it is in conflict with the bit I'm about to post.. if the following bit is commented out of the test pages it appears to stabilise the page


<script language="javascript" type="text/javascript">
window.onload = initialize;
function initialize() {
// initialize the DHTML History
// framework
dhtmlHistory.initialize();

// subscribe to DHTML history change
// events
dhtmlHistory.addListener(historyChange);
}

// callback to receive history change events.
function historyChange(newLocation,historyData) {
new Ajax.Updater('os_content', newLocation, {asynchronous:true, evalScripts:true, onLoading:function(request){$('os_content').innerHTML = 'Loading, please wait...';}});
}
</script>

would appreciate thoughts or follow up search pointers. Why is this JS unstable in IE7? Why is its symptoms similar to hasLayout/disappearing content? Any ideas welcome

-Suzy

[edited by: SuzyUK at 11:38 pm (utc) on Nov. 20, 2007]

feodor




msg:3614946
 10:25 pm on Mar 30, 2008 (gmt 0)

2 jetboy : thank You a lot for Your advice about hasLayout correction, I tried a lot of different stuff with a bug with IE7 - conflict between CSS, form and table, and Your advice was founded completly at time )) Thanks again. Feodor, Lyon.

jetboy




msg:3615167
 9:22 am on Mar 31, 2008 (gmt 0)

No problem. Glad it helped.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved