Forum Moderators: not2easy
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; }
* {
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.
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
i'm unfamiliar with the ways of your forums, should i send the link to you or can i post it?
hmm the plot thickens ...
position:relative;
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]
