Forum Moderators: open
Default styles are here:
Page specific styles are here:
<Sorry, no personal URLs. See TOS [webmasterworld.com]>
Everything is validated.
Rendering is as one would expect (scripting on/off) in Op7.23, NS7.1 & FF0.8 (Win XP & 98SE), but to no surprise, IE Win XP & 98 (5.01/5.5/6.0 SP1) is breaking at both 800X600 and 1024X768 resolutions.
It is most evident when the page is re-sized or scrolled. A giant gap is appearing through which can be seen the background pattern of the wrapper.
It helps to make it even more evident when all font colors, styles and sizes are ignored (internet tools->accessibility).
The <.h2> element is being forced below the line of the last button on the nav menu (in line with it). To witness this effect further, (in ignore mode) hover on the menu item "Character Education." The added left-margin (used for effect) causes to the text to overflow its container and wrap to the next line. This in turn pushes downward everything on the right, below and including the <.h2>.
That's with scripting turned on. Now when one turns scripting off, the entire contact information box drops below the nav line at certain widths, and returns to its correct postion at others. Rather disconcerting, to be sure.
I've tried clearing the float on the nav, to no avail. There are a couple of <.br class="clear /> (in default.css) in the content area, as well. The one immediately preceeding the <.h2> element is effective in eliminating the "venetian blind effect" that was occuring when the page is scrolled up and down. (The <.h2> and its borders will come and go while scrolling).
To further complicate this problem, the <.h1> element pops in and out without apparent reason when the page is refreshed at certain widths.
I can live with the gap below the contact information box, but the disappearing act above and below it is rather unnerving.
The problem showed up only after adding the <.noscript> code, which is why I suspect it has something to do with it, but I could be wrong.
The cure is right under my nose, but it's just not readily apparent through the fog of my own frustration.
Thank you in advance,
McT
[edited by: tedster at 1:41 am (utc) on June 12, 2004]
Also, because you have problems even with scripting turned on, it doesn't really sound like just a <noscript> problem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Have tried the Holly Hack on the #main div (container of offending sections) and while it works, it also throws my left margin out the window with it.
My page is basically a two column layout, with the nav floated to the left of the outer wrapper, and the content in the main div at right.
<div id="wrap"><div id="navbar"><!-- floated element -->
<div id="nav">
.
</div><!-- //nav -->
<div class="clear"><br /></div>
</div><!-- //navbar -->
<div id="main" title="Contact Information" class="content">
<div id="topmast">
<h1>Contact Information</h1>
</div>
<div id="contact">
<h2>...</h2>
<h3>...</h3>
<div id="email">E-mail:
<script type="text/javascript" src="js/wdfcs.js"></script>
<noscript><p>This web page utilizes Javascript to display e-mail addresses. Either scripting is turned off, or your browser does not support it. Please contact our office for assistance, or write to the webmaster at this domain.</p></noscript>
<br class="clear" />
</div>
</div>
I should add that is a rather complicated page. The rest of the site is very straight forward.
I should add that is a rather complicated page.
You're very right that in the middle of complexity it can be maddening to find the one critical element that's setting up a tripwire. I think the approach that will help you debug this is to start simplifying -- removing first one factor and then another, until you find something that makes a significant change.
In other words, try to reduce the problem down to the absolute bare minimum mark-up needed to make it happen. Sooner or later in that process, something will jump out at you.
Previous to this, I just had a disclaimer message, which worked fine, and there were no problems with the page. Seems I couldn't find a way to get my <noscript> element to validate. A little research and some helpful tips from a WSG list member got me through that process. That's when the problems began.
Will pick away at it and hope for a quick solution. Still quite in the dark when it comes to pure CSS, though it does start to make sense if one works at it.
Thanks.
My #main div did not specify a width, and my <noscript><p> was in italics. Nothing like compounding a problem, eh?
Paul O'B, over at SitePoint was very instrumental in pointing out these two IE deficiencies. Once corrected, the problem just 'slipped away.'
Thanks, Tedster, for recommending that I keep a cool head, and take the problem apart, piece by piece. What would I ever do without such sagely advice?
Gratefully,
McT
quoting positioniseverything:IE and italics problemThe effect of the problem is always that a block element (the innermost container of the italics) is wider than it should be. It is not necessary for the element to have an assigned width, also elements with "auto" width are affected. Depending on the page this effect may either be unnoticeable or totally break a layout.
The problem affects any IE5+/Win. The exact conditions that trigger it are not known, so the problem seems rather random.
Since I was using italics in my noscript caption, it may have been causing the container to overflow its width, and therefore fall below. I cannot be sure that it was indeed the italics that caused the shift, but once they were removed, the behavior could not be reproduced.
It's easy now to see why professional developers get the big bucks: Who can keep track of all this stuff? It really does take a collective mind to hold everything in check. One old fart sitting at a computer in a stupor and state of perpetual confusion can barely hope to gather all these fragments into one cohesive picture.
I, for one, doubtless among many, am ever so grateful for groups such as WebmasterWorld. When I can get over my own stubbornness and reach out to ask for help, the act in itself is often enough to renew my inspiration. It's often when we surrender ourselves, even just a smidgen, that new light and hope are able to penetrate the thick skin of our exasperation.
MrsMcTerse if often heard saying, "You'll find a solution--you always do." So the moral of this story is quite simply, never be afraid to ask. The answer is in there, somewhere, and will be easier to see when once we lift our eyes outward, and escape our own pride.
