Solved

Correcting button placement display differences between browsers (IE7, FF3, etc)

Posted on 2008-06-21
17
762 Views
Last Modified: 2013-11-19
Greetings Experts,

I've created a customer survey with what I believe to be a simple intro page.  The intro page finishes with a button that says "Enter Survey".

On my develpment PC (using IE7) everything looks just right but when I view the same page using FF3, the button shifts dramtically to the left.  I've even noticed slight placement variations when viewing the page with different versions of IE ( I believe IE6 mostly).

Question: how do I get the page placement of the "Enter Survey" button to display consistency across different browsers and even within different instances of IE?

Here are my styles being applied to the div containing the enter button:

#submit {
      margin-bottom: 500px;
      margin-left: 425px;      
}

In the code snippet window is my page code



<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Residential Survey</title>

<link type="text/css" rel="stylesheet" href="llvsstyle2.css" media="screen" />

</head>
 

<body>
 

<form action="enter.asp" method="post">

  <p id="opening">&nbsp;</p>

 

 <div id="submit"><input type="submit" value="Enter Survey" /></div>
 

 </form>

</body>

</html>

Open in new window

0
Comment
Question by:max7
  • 7
  • 6
  • 3
  • +1
17 Comments
 
LVL 14

Expert Comment

by:agriesser
ID: 21838681
Well, where _SHOULD_ it be displayed? Does it need to be aligned to something else on this website?
Is it possible to describe the Y coordinate in pixels where the button will start?

Using margin-bottom will create a gap of 500px to the bottom of the page, is that desired?
Browsers behave very differently in interpreting this, e.g. Firefox and Safari show vertical scrollbars (which is absolutely correct) whereas IE7 doesn't do this.

I attached a screenshot where you can see the scrollbars and the alignment of the Submit buttons (Firefox and Safari show the same distance, IE7 is a bit off the line).
scrshots1.png
0
 
LVL 1

Author Comment

by:max7
ID: 21839352
>>>Does it need to be aligned to something else on this website?

Yes it does; sorry I left that out.  I have two background images which are basically centered on the page and I want the enter button to be centered along with them.  Think of an upside-down pyramid shape if that helps.  I'm not sure of what the y-coordinate would be; sorry I'm still new at this.

>>>Using margin-bottom will create a gap of 500px to the bottom of the page, is that desired?

Yes, this was intentional.

Again, I'm still learning a lot at this point so if you need more information let me know what it is in perhaps a bit more detail and I'll try to get it for you.
0
 
LVL 14

Expert Comment

by:agriesser
ID: 21839893
It would help me a lot if you could show me a screenshot of this site or if I could access it online to get the big picture.
0
 
LVL 1

Author Comment

by:max7
ID: 21839932
I've attached a screenshot as requested; the top bar will eventually have text to it but the alignment of everything is ultimately how I would like it.  Let me know if this helps.
Enter-Page.GIF
0
 
LVL 14

Accepted Solution

by:
agriesser earned 500 total points
ID: 21840178
Would it be OK if the "Enter survey" button would be centered horizontally?

If so, the following style should work:
#submit {

      margin-bottom: 500px;

      text-align: center;

      width: 100%;

}

Open in new window

0
 
LVL 1

Author Comment

by:max7
ID: 21841293
>>>If so, the following style should work:

Not only should it work but it DID work!  Thank you so much!

But now I have to ask: WHY did it work?  I want to understand the principle behind your decision to use this code so I can recitfy these types of problems in the future.

One aspect I'm particularly curious about is using the width property; I'm not so familiar with it's use normally.

0
 
LVL 4

Expert Comment

by:sajay_j
ID: 21843335
#submit {
      margin-bottom: 500px;                    - set the bottom of div 500 pix spacing
      text-align: center;                            - aligned every object of that div to center
      width: 100%;                                  - DIV is resized to fit that page horizontally.
}
0
 
LVL 1

Author Comment

by:max7
ID: 21848145
>>>width: 100% - DIV is resized to fit that page horizontally.

I understand the words but don't understand what it means.  I did a test to see what would happen if removed the width property and the button stayed aligned center.  Is it really necessary?
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 14

Expert Comment

by:agriesser
ID: 21848217
Sorry for the late reply. The problem is, that a div usually is only as big as the content it contains.
Your div does only contain the form with the input button and therefore it's only about 50px in width.

There are multiple ways of centering this div now. The first thing is to use the good old <center> tags which aren't supported anymore in the latest XHTML standards, so you shouldn't use them.
The next method would be to use "margin: auto" in CSS which would center the element automatically, but I found out that this doesn't get rendered correctly by some browsers (sometimes).

So, the solution that always works for me (always remember that browsers are stupid) is to blow the div up to the maximum available width (thus the width has been set to 100%) and center the text/content in it (text-align: center).

Not very pretty, but portable and works at a rate of 100%.
0
 
LVL 42

Expert Comment

by:David S.
ID: 21850378
@agriesser

> a div usually is only as big as the content it contains.

That's only if a <div> is floated or absolutely positioned without having a width specified or given display:inline. By default it has display:block which, among other things, means that it will occupy the full width of its parent.

> The next method would be to use "margin: auto" in CSS which would
> center the element automatically, but I found out that this doesn't
> get rendered correctly by some browsers (sometimes).

Do you have an example of that? I don't recall encountering problems with that before.
0
 
LVL 14

Expert Comment

by:agriesser
ID: 21850447
Of course.

http://tuxx-home.at/temp/margin-auto.html

Works with FF and Safari, IE does not center the div.
0
 
LVL 42

Expert Comment

by:David S.
ID: 21850531
@agriesser

That's because IE is in quirks mode (aka backwards compatible mode) because there is no doctype to put it into "Standards compliance" mode. I thought you meant a bug, but that's really just an incorrect implementation of IE5/Win that is fixed in IE6+ in "Standards compliance" mode.
0
 
LVL 14

Expert Comment

by:agriesser
ID: 21850596
Erm, you're right. That's odd because I know that this did also happen when having the DocType specified correctly.
I just did write the necessary tags to the example above to show what I meant, but usually I work on validated websites where I encountered this issue.

Maybe it was in another context, so thanks for clearing things up!
0
 
LVL 1

Author Comment

by:max7
ID: 21851730
Wow, we are certainly going where I never thought this would go but it's all great learning for me.

Speaking quirksmode, I recall seeing that referrenced when I displayed this page in FF3 before the fix.  Am I reading correctly that a browser goes into quirksmode when their is a problem with the doctype?  Can anyone expand on that briefly?

Also, I would still like to know if the width property is really necessary here or of the text-align: center would do the trick.
0
 
LVL 42

Expert Comment

by:David S.
ID: 21852673
Brief discussions of doctypes can be misleading. Here's an attempt on keeping it brief while mentioning the major points: HTML 4.x and XHTML 1.0 doctypes that include the URL to the DTD will trigger standards mode in browsers (assuming that nothing is before the doctype in the [X]HTML document), except that the Transitional variants will trigger "almost standards mode" in the browsers that have such a mode.

More information: http://www.dynamicsitesolutions.com/html/document-types/

In this case the width property is not necessary. (I'm assuming that #submit is not floated nor absolutely positioned.)

P.S. Don't feel obligated to give me any points. agriesser answered your original question.
0
 
LVL 14

Expert Comment

by:agriesser
ID: 21852894
As Kravimir already said, the width option is not necessary.
I copied parts of your code in a text file and browsed to it (without having a proper doctype line in place), so I felt it was necessary to add the width: 100% option.

0
 
LVL 1

Author Closing Comment

by:max7
ID: 31469429
This has been one of the better questions answered on EE  for me personally; thanks very much for a great job!
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to dynamically set the form action using jQuery.

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now