Forum Moderators: not2easy
I'm having a problem with a quiz page I'm writing for my educational website. The actual quiz -- ten 'items' with a text box in each one -- is in a centered div. The submit button the user has to click in order to find out whether the questions have been answered correctly is in a separate div to the right of the one that contains the quiz items. The centered div scrolls normally; the position of the off-center div is "fixed." After the user answers the question and clicks on the submit button, the "score" appears in the off-center div beneath the submit button.
This works fine in Firefox (Mac and Windows) and in Safari. In IE7 for Windows, however, the submit button does not appear. (Nevertheless, if the the 'Enter' key is pressed after the questions have been answered, the "score" does appear properly in the off-center box.)
If the submit button is placed in the centered div along with the quiz items, it appears properly. I suspect, therefore, that there is a bug in IE7 which makes it impossible to place the submit button of a form in a separate div. I've looked for information on this but have not found any so far, so I'm making this posting in the hopes of finding out whether there *is* such a bug -- and if so what, if anything, I might do to work around it.
I've written a simplified version of the quiz page code which I'm pasting in below. In this code, the div I've referred to above as the "centered div" is called "content_box" and the div I referred to as the "off-center div" is called "button_box". (In accordance with the instructions in the "WebmasterWorld Guide to Posting" I've changed the one url in the code to "example.com/net/org")
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>
basic_centered
</title><script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">
body {
text-align:center;
}
p {
color: black;
font-size: 14px;
font-family:Arial;
}
#content_box {
position: relative;
top: 7px;
margin-left: auto;
margin-right: auto;
width: 624px;
height: 1750px;
text-align: justify;
border: 1px solid blue;
}
#button_box{
position: fixed;
margin-left:640px;
width:130px;
height:180px;
top: 250px;
text-align: left;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="content_box">
<p>Type "three," "four," or "five" in the text box.</p>
<?php
print '<form action="bare_quiz.php" method="post">';
print '<p> Two plus two equals';
print '<input type="text" name="answer" size="7" value="'.$_POST['answer'].'"/>';
print '</p>';
print '<div id="button_box">';
print '<input type="submit" name="submit" value="check answers"/>';
if ($_POST['answer']=="four") {
print '<p> Right</p>';
}else{
if (isset($_POST['answer'])){
print '<p> Wrong</p>';
}
}
print '</div>';
print '</form>';
?>
</div>
</body>
</html>
I suspect, therefore, that there is a bug in IE7 which makes it impossible to place the submit button of a form in a separate div. I've looked for information on this but have not found any so far, so I'm making this posting in the hopes of finding out whether there *is* such a bug...
Just a comment regarding your bug query... AFAIK there is no such bug. It's quite usual to have the separate parts for the form in different containers, as they need to be in some kind of container under a Strict DOCTYPE.
I'd suspect it was your CSS(?) What if you disable your styles, does the submit button show?
position:fixed;is not supported under IE6. Does IE7?
Marshall
Another question: Why is there a warning sign beside my posting? (As I mentioned yesterday, I'm new to this forum.)
margin-left:640px; Are you sure the button isn't just positioned way off to the right of the screen, unseen unless you scroll?
Also, I don't know what you mean by "disabling styles."
Disengage the style sheet from the page and see what happens. Let the page display using browser defaults.
Marshall
Mattur, no it's not the size of the margin that's causing the problem. The "button_box" is positioned so its left edge is just a few pixels to right of the right edge of the "content_box." (I did the positioning that way, incidentally, because it was the only way I could find of getting the button box to remain a constant distance from the content box as the the window is narrowed.)
Marshall, I'm not using an external style sheet. All the styles are in the code I've posted.
Have you tried viewing only the code you pasted without any other CSS etc?
margin-left:640px;
Should you not be setting 'left' as opposed to margin-left?
You could try setting
overflow:autoon your #button_box just in case the contents is spilling out (although it should still be visible?!) - you should get scrollbars on the container if this is the case.
Marshall, I'm not using an external style sheet. All the styles are in the code I've posted.
In that case temporarily remove your styles (or comment them out: /* ... */). In FF, you can select View > Page Style > No Style to disable your styles temporarily. (Although, granted it's not a FF issue.)
When I past your code as into a HTML file and view it in IE7 I see both boxes, blue and Red.
@marcel - but do you see the submit button inside the red box? (I can't test IE7 at the minute)
I will play devil's advocate and ask why you are using a XHTML doctype when your content is php generated. You might be better off using 4.01 transitional. You may want to read this thread [webmasterworld.com] about selecting the correct doctype. Remember, XHTML is not the next evolution of HTML. In essence, it is a format unto itself. You may be devoting time to something you need not being doing.
Just a suggestion.
Marshall
@marcel - but do you see the submit button inside the red box? (I can't test IE7 at the minute)
oops... I should have read the OP properly, I tried again and it seems your recomendation to change margin-left to left shows a button in the box.
The corrected code is now as follows:
print '<p>';
print '<input type="submit" name="submit" value="check answers"/>';
print '</p>';
As to the suggestion that the problem was caused by my using "margin-left" instead of "left", well I should have been aware of the fact that the button did appear in the box when it was positioned in that way but, I do have a good reason for using "margin-left": When I use "left", the button box doesn't "follow" the content box in the way I want it to when the screen is narrowed.
Also: I'm grateful to Marshall for questioning my use of an XHTML doctype. To be honest, I was using that doctype only because it was used in a book I used when I was learning php and I got into the habit. I've read the informative thread Marshall included a link to and I'm going to switch to "html 4.01 strict".
Thanks again to everyone who's contributed to this thread. It's a real relief to have this problem solved. And the help I've received today has left me with a very good impression of this forum.
...why you are using a XHTML doctype when your content is php generated.
@Marshall... fair enough to question the XHTML, as part of your anti-XHTML drive [webmasterworld.com] ;) but I fail to see the correlation in this instance of the content being PHP generated?
IE7: the button shows but it is way off to the right, and no scroll bar shows. To see it try zoom: 25%.
Blimey - good find! :)
...it seems your recomendation to change margin-left to left shows a button in the box.
Ok, good, we've got our submit button back! But with setting the 'left' property, the red box is no longer in the desired location. And nor should it... elements with
position:fixedare always positioned relative to the viewport (the browser window), not the containing block (#content_box in this case) as absolutely positioned elements are.
There's some strange things going on that I can't quite figure.
[1] What is happening to the INPUT element in IE7 when it's parent container has a fixed position and margin-left is set? It looks like a cruel twist of the double margin float bug of IE6!? The INPUT element appears to be getting a margin-left twice that of its parent! Weird! Try setting margin-left:0, then try margin-left:60px, the INPUT element starts to gallop away!
[2] How was the #button_box positioned correctly with margin-left? As mentioned above, 'fixed' elements should be positioned relative to the viewport, but with a margin-left set and no left property (default 'auto') it is in fact positioned relative to the containing block. Clearly seen with margin-left:0. All browsers appear consistent in this behaviour, so I guess it's by design?
Thing is, to make this work in IE7... to position a fixed element relative to its parent(?!) and get over the above anomaly! Well, I was about to give up and start suggesting alternative ways to position this, but then remembered that the old 'double margin float bug' did not effect every element. So, I tried wrapping the INPUT element in another DIV container - and to my surprise it WORKED! IE7 now positions everything in the correct place.
So, back with margin-left and your original CSS, simply add a DIV:
print '<div><input type="submit" name="submit" value="check answers" /></div>';
Ok, it's possibly superfluous markup for the sack of IE7, but hey. May be there's some harmless CSS you can apply to the INPUT element, but I've not found it yet.
The only other thing still niggling me is, are you sure you want to give up on IE6?! ;)
...and welcome to WebmasterWorld!
It is not an anti-XHTML drive, it I more a "do not waste your time" drive. Insofar as the correlation between using php and XHTML, there are two points: php is *not* XML which is what XHTML is intended for and, since XHTML has different standards insofar as markup, see the first sentence. It trying to meet XHTML standards when XHTML should not be used, a developer is concentrating on the wrong aspect of the page and may be overlooking a simple solution.
Marshall
It is not an anti-XHTML drive, it I more a "do not waste your time" drive.
Yeah agreed, not intending to be critical in anyway :) But it is still the PHP comment I do not understand. PHP is perfectly capable of outputting XML (or XHMTL) just in the same way it can output HTML. In fact if you want to output true XHTML then you will need to use something like PHP (or another server-side technology) in order to return the correct Content-Type headers.
But concatenating strings is a bad way of generating XML, because errors creep in so easily (cf WordPress's flawed XHTML support). When publishing proper, well-formed XML, it's pretty much essential to do it right, and that means using an XML parser or serialiser to build the tree.
Penders said:
The only other thing still niggling me is, are you sure you want to give up on IE6?
I certainly *don't* want to give up on IE6. In fact doing so is completely out of the question because around 80% of the users of my website use it. I imagine penders asked this question because he assumed that I wouldn't be using "position: fixed" unless I *was* willing to give up on IE6. The truth of the matter is, though, that it was only a week or so ago that I discovered that IE6 doesn't support "position: fixed."
At the time I made this discovery, I'd already designed a couple of new pages or "page-types" for my website *using* position-fixed. I really liked the look and feel of the fixed elements and in one case at least, this setting had a real practical importance. I had used it to position the "console" for an audio file which accompanied a reading for ESL students. It seemed like a very good idea to have the console remaining stationary while the reading was scrolled so it would always be readily available to students whatever part of the reading they were working on.
When I learned that "position: fixed" doesn't work on IE6, since I really didn't like the idea of giving up on it, I decided that I wouldn't do so until I had looked into the possibility of having two versions of this page: one for IE6 users and one for users of all other browsers. (As I understand it this can be done by using Java code to identify the browser that is being used to view the page.)
So here's my question (more a request for advice than for specific information, I suppose): for the sake of a bit of "coolness" and a bit of convenience, would it be worth setting up two versions of the page, or would it be better, since my pages have to be viewable on IE6, just to give up on "position:fixed"?
Marshall
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
* html #NAME_OF_FIXED_DIV { /*IE6 only rule, applied on top of the default above*/
position: absolute;
top: expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop-40+"px" : body.scrollTop-40+"px");
}
/*]]>*/
</style>
<![endif]-->
Marshall
