Marc,

The attached screenshot shows what your page looks like now at a viewport width of about 700px. In other words, this is what anyone using an iPad would see...

The overlap of the form with the menu at the right will be avoided if you let go of the static table and let the form 'shrink to fit' in a flexible div...

If anything seems unclear in what I posted earlier, please let me know and I'll try to clarify!

Okay, I'm back to the html version. The form is responsive now that I ditched the table (which was a desperate attempt to center it). But it's still not centered.

http://marcsusan.com/login.html

As soon as I add <div class="form-pos"> there is a conflict with <div class="content-wrapper">

Excuses, but I'm afraid more handholding is required

Regards,

Marc

I don't quite understand what kind of "conflict" you are seeing. Could you elaborate?

Could you show us how and where you included <div class="form-pos"> and how you defined the class 'form-pos' in the stylesheet?

I'm looking at your HTML code for the form area right now and the classes you have for it are not what you are stating here. Here's what I see for the classes and there are 2 of them, one of them being content that's why you're getting conflicts.

<div class="content p7ehc-1">
<script type="text/javascript">document.write(unescape("%3Ciframe id=\"fb_iframe\" src=\"memberlogin2HTML.php" + window.location.search + "\" width=\"100%\" height=\"507\"allowtransparency=\"true\" scrolling=\"no\" frameborder=\"0\"%3E&lt;a href=\"memberlogin2HTML.php\" title=\"memberlogin2HTML\"&gt;Check out my CoffeeCup Form&lt;/a&gt;%3C/iframe%3E"));</script>
<noscript>
<iframe width="100%" height="507" style="border:none; background:transparent; overflow:hidden;"
id="fb_iframe" src="memberlogin2HTML/memberlogin2HTML.html">
&lt;a href="memberlogin2HTML.php" title="memberlogin2HTML"&gt;Check out
my CoffeeCup Form&lt;/a&gt;
</iframe>
</noscript>
</div>

Marc,

I am belatedly realizing that the theme from 'Project 7', that your page is based on, uses various javascripts to modify and add divs and css classes. These modifications and additions appear after execution of the scripts and are invisible in the 'original' HTML markup that we are looking at. This complicates matters, to put it mildly!

This is the current code surrounding your form (line numbers in the left margin):

103 <div class="main-content">
104 <div class="content p7ehc-1">
105 <script type="text/javascript">...[Coffeecup form]..
....
112 ..</noscript>
113 </div>
114 </div>

The second line (Line 104) is one that complicates matters for you by 'invisibly' adding a div and making the centering so unpredictable. So, I suggest you try the following:

Replace Line 104 with:
<div style="padding-top: 30px; padding-bottom: 0px; height: 559px; width: 99%; margin: 0px -13% 0px auto;">

Then the above code portion would look like this:

103 <div class="main-content">
104 <div style="padding-top: 30px; padding-bottom: 0px; height: 559px; width: 99%; margin: 0px -13% 0px auto;">
105 <script type="text/javascript">...[Coffeecup form]..
....
112 ..</noscript>
113 </div>
114 </div>

Just one line of markup replaced, without any other changes to css or elsewhere. It centers the form nicely for me when I edit directly in the Chrome browser, but I'd like to see if that is still the case when you edit and upload the original html.

If this still doesn't work, I think you have to follow the advice given by paintbrush in the very first reply in this thread, namely to contact Project7 directly or go to their forums.

Okay, I did my homework, but maybe that's already old hat.

Compare http://marcsusan/login.html with http://marcsusan/loginTEST.html

Regards,

Marc

I've fixed your links for you so they are full paths. When you create a link on the forums, be sure to include the http:// in front of it or it won't go to the right location.

As for your page, what is your CSS page that is your actual CSS and not for some script or another. You have a handful of CSS pages and most with strange names, no way to know what goes with what so spell that out please so we don't have to go through each of them trying to figure out which one has your hand made code and which one goes to scripts. I'm guessing it's still the div you put the form div inside of that is causing the issues, but I don't know which CSS file that div CSS is in.

Yes, I think we've moved on
BTW, I managed to open your links after adding the missing '.com' after 'marcsusan'...

Just to be clear, your centering issue is not an issue with the form; - it's an issue with the theme you are using. The form, when wrapped in a div, will behave and display like any other block element in terms of centering, padding, margins, etc.. (see e.g.: http://www.w3schools.com/css/css_boxmodel.asp)

IMHO, the theme, with its multitude of code-altering javascripts, is way more complicated than it would need to be. I think the simple layout of the page (a header, a footer, a sidebar and a main content area) could have been accomplished in a much simpler, cleaner manner with more of straight HTML/CSS and less javascripting.

In the line "<div class="content p7ehc-1">", the second 'class' (p7ehc-1) is not a css class, but a reference to a javascript that turns that single div into the following two divs:

<div class="content p7ehc-1" style="padding-top: 0px; padding-bottom: 0px; height: 501px;">
<div id="p7EHCd_2" style="padding-top: 20px; padding-bottom: 20px;">

You can see the two 'new' divs high-lighted in the attached screenshot from Chrome's Firebug.
The modified/added divs still include the javascript reference, leading to further modifications as the viewport width is changed. For all I know the id="p7EHCd_2" may also be a reference to a javascript...

This is why, in my prior post, I preferred to bypass all that and suggested that you simply replace this line:

<div class="content p7ehc-1">

with this one:

<div style="padding-top: 30px; padding-bottom: 0px; height: 559px; width: 99%; margin: 0px -13% 0px auto;">

This seems to work and the form looks nicely centered at all viewport widths.

You can play around with the parameters and alter the numerical values to your liking - if you so wish. The height in the original is continuously modified by the javascript, as the viewport is resized. I think you could remove the height declaration entirely, since the size of the form will determine the height of the div anyway.

The four margins are in the order: top right bottom left, separated by a space. The negative right margin moves the form over to the right by 13 % of the available width in the div. The 'auto' left margin ensures that the form is continuously centered at all viewport widths.

As I mentioned before, if this still does not work out for you, you will need to contact 'Project7' for instructions on how to add content in their complicated theme!

Best of luck and keep us posted on how it all works out!

Thanks for all your efforts to enlighten me. If Coffeecup was a religion I would join it in a jiffy

Greetings from Holland, and I will try your latest suggestion as soon as I have imbibed enough coffee to wrap my head around it.

Cheers,

Marc

I think it IS a religion!