Wordpress floatbox issue IE

Question

I got this site here http://inauguralseason.com/ and if you click on contact us in IE 8 the page opens up on in floatbox, the problem is that the floatbox takes up the whole screen and the contact form should be centered... any one got any ideas why its doing that?

score 1 · Accepted Answer · edited May 23 '17 at 10:32

I suppose that your question is "why the contact form is not centered", and not "why the floatbox is taking up the whole screen".
Your floatbox content is an iframe whose source is http://inauguralseason.com/?page_id=12
The form is contained in a div with class contactBackground; this class is defined in the style.css file and has a margin: auto property which should make it centered.
Unfortunately, as you can read here, this method does'nt work in IE8 quirks mode; this mode is not supported by floatbox, as stated on the instructions.
The solution is simply adding a DOCTYPE declaration at the beginning of the page.
Looking at the source code of the floatbox iframe, I've also noticed that the <html> and <body> tags are missing, so you should also add those tags.
The resulting HTML code should be the like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <style>
    body{
        background-image: url('http://inauguralseason.com/wp-content/themes/twentyeleven/images/repeating_bq_pink.gif') !important;
    }
    </style>
    <link rel="stylesheet" type="text/css" media="all" href="http://inauguralseason.com/wp-content/themes/twentyeleven/style.css" />
</head> 
<body>  
    <div id="main" style="padding-top:11px;">
        <article id="post-12" style="padding:0!mportant; margin:0!important; width:595px; height:600px;" class="post-12 page type-page status-publish hentry">
            <header class="entry-header">
                <!--<h1 class="entry-title"></h1>-->
            </header><!-- .entry-header -->
            <div class="contactBackground">
                <div class="wpcf7" id="wpcf7-f17-p12-o1">
                    <form action="/?page_id=12#wpcf7-f17-p12-o1" method="post" class="wpcf7-form">
                        <div style="display: none;">
                            <input type="hidden" name="_wpcf7" value="17" />
                            <input type="hidden" name="_wpcf7_version" value="3.2.1" />
                            <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f17-p12-o1" />
                            <input type="hidden" name="_wpnonce" value="1050e77acd" />
                        </div>
                        <p>
                            Your Name (required)<br />
                            <span class="wpcf7-form-control-wrap your-name">
                                <input type="text" name="your-name" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" />
                            </span>
                        </p>
                        <p>
                            Your Email (required)<br />
                            <span class="wpcf7-form-control-wrap your-email">
                                <input type="text" name="your-email" value="" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" size="40" />
                            </span> 
                        </p>
                        <p>
                            Subject<br />
                            <span class="wpcf7-form-control-wrap your-subject">
                                <input type="text" name="your-subject" value="" class="wpcf7-form-control wpcf7-text" size="40" />
                            </span> 
                        </p>
                        <p>
                            Your Message<br />
                            <span class="wpcf7-form-control-wrap your-message">
                                <textarea name="your-message" class="wpcf7-form-control  wpcf7-textarea" cols="40" rows="10"></textarea>
                            </span> 
                        </p>
                        <p>
                            Please Enter The Text Below<br />
                            <span class="wpcf7-form-control-wrap captcha-715">
                                <input type="text" name="captcha-715" value="" class="wpcf7-form-control  wpcf7-captchar" size="40" />
                            </span>
                        </p>
                        <p>
                            <input type="hidden" name="_wpcf7_captcha_challenge_captcha-715" value="1614713562" /><img alt="captcha" src="http://inauguralseason.com/wp-content/uploads/wpcf7_captcha/1614713562.png" class="wpcf7-form-control  wpcf7-captchac wpcf7-captcha-captcha-715" width="84" height="28" />
                        </p>
                        <p>
                            <input type="submit" value="Send" class="wpcf7-form-control  wpcf7-submit" />
                        </p>
                        <div class="wpcf7-response-output wpcf7-display-none"></div>
                    </form>
                </div>
            </div>
            <footer class="entry-meta"></footer><!-- .entry-meta -->
        </article><!-- #post-12 -->
    </div>
</body>
</html>

UPDATE:

The floatbox width problem depends by the iframe style, defined at line 1535 in your "style.css" file:

/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
    max-width: 100%;
}

it got it centered, but not for the width – user1269625 Nov 06 '12 at 05:57 — user1269625, Nov 06 '12 at 05:57
its still taking up the whole screen – user1269625 Nov 06 '12 at 05:59 — user1269625, Nov 06 '12 at 05:59

score 0 · Answer 2 · answered Oct 29 '12 at 13:54

0

I haven't really used floatbox before but I would assume that it would have extra options such as setting the height and/or width of the modal that the contact form appears in.

http://floatboxjs.com/options

answered Oct 29 '12 at 13:54

Adam C

3,881
2
21
19

score 0 · Answer 3 · answered Oct 31 '12 at 18:02

The page source has multiple HTML elements :S The float-box itself is actually the body of one of these instances. Well, there's your problem. I'm going to hazard a guess that you're using a plugin of some kind that's supposed to just pull the float box container, but instead is grabbing the whole document.

Not really much you can do (or would want to do) before you fix your HTML tag problem. After that, it should be pretty straight-forward to target the container and adjust the size/spacing: #container { width: Xpx; height: Ypx; padding: Zpx; (etc, etc} which you can do in WordPress through the user styles override, assuming you know the dimensions you need.

Hope this helps.

Wordpress floatbox issue IE

3 Answers3