Browser Alignment incompibilities

I am trying to center a form on my page using css, text-align:center. This works fine in internet explorer. In firefox, however, the form stays left.
Here are two pictures:
Internet Explorer:
Firefox:
==================================================================================
Here is my html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Cliff's Home Page</title>

<style type="text/css">

</style>

<link href="cliff.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

<style type="text/css">
.container .content div div {
text-align: center;
</style>

</head>
<body>
<div class="container">
<div class="header"><img src="Pictures/logo.gif" alt="Logo" name="Insert_logo" width="81" height="63" id="Insert_logo" style="background: #8090AB; display:block;" />
</div>
<div class="sidebar1"> <img src="Pictures/back1.jpg" width="72" height="72" />
      <p style="font-size:larger; font-family:'Comic Sans MS', cursive"> Contact me via mail, telephone, or email</p>
      <p><img src="Pictures/back1.jpg" width="72" height="72" /></p>
      <p><img src="Pictures/back1.jpg" width="72" height="72" /></p>

</div>
<div class="content">
<div > <ul id="MenuBar1" class="MenuBarHorizontal">
     <li><a href="cliffsteele.html">Home</a>      </li>
     <li><a href="#" class="MenuBarItemSubmenu">Resort</a>
       <ul>
         <li><a href="facilities.html">Our Facility</a></li>
         <li><a href="Kennel.html">Boarding & Daycare</a></li>
         <li><a href="spa.html">Grooming</a></li>
         <li><a href="#">Rates</a></li>
</ul>
     </li>
     <li><a class="MenuBarItemSubmenu" href="#">Show Handling</a>
       <ul>
         <li><a href="#">Info</a></li>
         <li><a href="#">Rates</a></li>
         <li><a href="calendar.html">Schedule</a></li>
</ul>
     </li>
     <li><a href="#">Photo Gallery</a></li>
     <li><a href="#">About Me</a></li>
     <li><a href="#">Contact Me</a></li>
   </ul></div>
<br />

<h1 style="margin: 10px; clear: both; text-align:center; font-size: xx-large; font-family: Georgia, 'Times New Roman', Times, serif; padding-top:20px;">Contact Me</h1>

<div >
<div style="text-align:center; font-size:medium; font-family:Georgia, 'Times New Roman', Times, serif; padding-bottom:20px;" >
          1395 Rt. 6<br />
          Carmel, NY 10512-1627<br />
          United States<br />
          ph:(845) 225-2463<br />
          Cell:(845) 661-0010<br />
<p style="margin-bottom:20px;"></p>
</div>
<div class="form" ">
<form name="contactform" method="post" action="send_form_email.php" >
<table width="450px">
<tr>
<td valign="top">
<label for="first_name">First Name *</label>
</td>
<td valign="top">
<input type="text" name="first_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top"">
<label for="last_name">Last Name *</label>
</td>
<td valign="top">
<input type="text" name="last_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="telephone">Telephone Number</label>
</td>
<td valign="top">
<input type="text" name="telephone" maxlength="30" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="comments">Comments *</label>
</td>
<td valign="top">
<textarea name="comments" maxlength="1000" cols="25" rows="6"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="Submit">   <a href="Email" _mce_href="http://www.freecontactform.com/email_form.php">Email">http://www.freecontactfo rm.com/email_form.php">Email Form</a>
</td>
</tr>
</table>
</form>
</div>
</div>
    </div>
<div class="footer">
      <div style="float:right">
        <p> <a href="MAILTO:[email protected]" >Site Designed by Fredric M. Zipser</a><br />
       </p>
    </div>
    <div class="clearfloatleft">
        <p>Clifford W. Steele Professional Handler <br />
          1395 Rt. 6<br />
          Carmel, NY 10512-1627<br />
          United States<br />
          ph:(845) 225-2463<br />
          Cell:(845) 661-0010<br />
        <a href="MAILTO:[email protected]" >[email protected]</a></p>
    </div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>

========================================================================
Here is my externel Css page:
@charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #4E5869;
margin: 0;
padding: 0;
color: #000;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
font-size: x-small;
color: #FFF;
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color:#414958;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
color: #4E5869;
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
color: #0033ff;
font-size: medium;
font-family: "Comic Sans MS", cursive;
/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
width: 80%;
max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 780px; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
height: 80%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: #93A5C4;
.container .footer #fMisc div p {
font-family: Verdana, Geneva, sans-serif;
font-size: x-small;
color: #FFF;
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background: #6F7D94;
/* ~~ These are the columns for the layout. ~~
1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
4) If you prefer your nav on the left instead of the right, simply float these columns the opposite direction (all left instead of all right) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
.sidebar1 {
float: right;
width: 20%;
padding-bottom: 64px;
height: 100%;
font-family: "Comic Sans MS", cursive;
font-weight: bolder;
font-size: medium;
border-top-width: 0%;
border-right-width: 0%;
border-bottom-width: 0%;
border-left-width: 0%;
background-color: #93A5C4;
background-repeat: repeat;
margin: 0px;
overflow: hidden;
.content {
width: 80%;
float: right;
background-image: url(back1.gif);
background-repeat: repeat;
background-color: #93A5C4;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 70px;
padding-left: 0px;
height: 100%;
overflow: hidden;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
.container .content #MenuBar1 {
background-image: url(back1.gif);
background-repeat: repeat;
margin-left: 6%;
/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
ul.nav {
list-style: none; /* this removes the list marker */
border-top: 1px solid #666; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
margin-bottom: 15px; /* this creates the space between the navigation on the content below */
ul.nav li {
border-bottom: 1px solid #666; /* this creates the button separation */
ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
padding: 5px 5px 5px 15px;
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
text-decoration: none;
background: #8090AB;
color: #000;
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
background: #6F7D94;
color: #FFF;
/* ~~ The footer ~~ */
.footer {
background: #6F7D94;
position: relative;/* this gives IE6 hasLayout to properly clear */
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
font-size: xx-small;
color: #000;
margin: 0px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.faclines {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: large;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
a {
color: #FFF;
.container .footer #fMisc div p a {
color: #FFF;
.container .footer div p {
font-family: Verdana, Geneva, sans-serif;
font-size: x-small;
color: #FFF;
clear: left;
.container .footer div p a {
color: #FFF;
p {
font-size: xx-large;
p {
color: #000;
font-size: x-large;
font-family: Georgia, "Times New Roman", Times, serif;
.container .footer #fMisc div {
font-size: x-small;
.container .footer #fMisc div {
color: #FFF;
.container .content h1 {
font-family: Verdana, Geneva, sans-serif;
font-size: x-large;
font-weight: bold;
color: #000;
.clearfloatleft {
clear: left;
.container .sidebar1 p a {
font-size: medium;
color: #00F;
p.heading a:hover, p.heading a:active, p.heading a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
font-size: x-large;
font-family:Verdana, Geneva, sans-serif;
color: #00F;
p.heading {
font-size: x-large;
font-family:Verdana, Geneva, sans-serif;
color: #000;
.container .content div div {
text-align: center;
.container .content div div {
text-align: center;
font-size: small;
div.form {
         text-align: center;
    font-size: small;
    border:0;
     white-space: nowrap;

Change this -
<div class="form" ">
to this -
<div class="form">
and this -
div.form {
         text-align: center;
    font-size: small;
    border:0;
     white-space: nowrap;
to this -
div.form {
    width:450px;
    margin:0 auto;
    font-size: small;
    border:0;
    white-space: nowrap;

Similar Messages

Browser Alignment Discrepancies

I've been developing websites with Dreamweaver for about 5
years now and recently purchased an Apple MAC G5 Dual 2. I have
Dreamweaver 8.0 which operates much like Dreamweaver MX on the PC
like I'm used to. I have encountered frustrating display
discrepancies between Internet Explorer on any PC and Safari on any
MAC.
If I create a web page using Dreamweaver on my MAC, it looks
the way I designed it to within Safari on a MAC but the general
alignment of the page is distorted in Internet Explorer on a PC. If
I create a web page using Dreamweaver on a PC, it looks the way I
designed it to on any browser - PC or MAC.
My initial response it to abandon the MAC and return to PC
because I can do everything I need to. Since I prefer using the MAC
in every other application, I am submitting this post on the hunch
I may be overlooking a relatively easy fix to my problem. I
encountered my first CSS related browser issue when I started
designing My Space layouts for clients. Upon some research, I
learned how to fix this problem but have been unsuccessful doing so
in Dreamweaver for MAC.
Any assistance comes greatly appreciated. Thanks!

We'd need to see such a page, and take a look at the code.
Can you post a
link?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Babtanian" <[email protected]> wrote in
message
news:fib3l3$cjb$[email protected]..
>
> I've been developing websites with Dreamweaver for about
5 years now and
> recently purchased an Apple MAC G5 Dual 2. I have
Dreamweaver 8.0 which
> operates much like Dreamweaver MX on the PC like I'm
used to. I have
> encountered frustrating display discrepancies between
Internet Explorer on
> any
> PC and Safari on any MAC.
>
> If I create a web page using Dreamweaver on my MAC, it
looks the way I
> designed it to within Safari on a MAC but the general
alignment of the
> page is
> distorted in Internet Explorer on a PC. If I create a
web page using
> Dreamweaver on a PC, it looks the way I designed it to
on any browser - PC
> or
> MAC.
>
> My initial response it to abandon the MAC and return to
PC because I can
> do
> everything I need to. Since I prefer using the MAC in
every other
> application,
> I am submitting this post on the hunch I may be
overlooking a relatively
> easy
> fix to my problem. I encountered my first CSS related
browser issue when I
> started designing My Space layouts for clients. Upon
some research, I
> learned
> how to fix this problem but have been unsuccessful doing
so in Dreamweaver
> for
> MAC.
>
> Any assistance comes greatly appreciated. Thanks!
>

Browser alignment issues

Please look at this page in IE and in FF http://www.breastcanswers.com/donate.html
I want the "donate" button to be to the right of the text like it shows in IE. FF & chrome put the button below the text.....
Thanks for your help!!

BcSurvivor08 wrote:
Please look at this page in IE and in FF http://www.breastcanswers.com/donate.html
I want the "donate" button to be to the right of the text like it shows in IE. FF & chrome put the button below the text.....
Thanks for your help!!
One way to do this is to put everything in a table like this:
<table style="border: 3px #2a022f groove;"> <tr style="height: 50px; vertical-align: middle;"> <td style="width: 180px;">Donate $100</td> <td style="width: 160px; text-align: center;"><form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="hosted_button_id" value="3826318"> <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> <img alt="" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"> </form> </td> </tr> <tr style="height: 50px; vertical-align: middle;"> <td style="width: 180px;">Donate $75</td> <td style="width: 160px; text-align: center;"><form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="hosted_button_id" value="3826318"> <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> <img alt="" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"> </form> </td> </tr> <tr style="height: 50px; vertical-align: middle;"> <td style="width: 180px;">Donate $50</td> <td style="width: 160px; text-align: center;"><form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="hosted_button_id" value="3826318"> <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> <img alt="" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"> </form> </td> </tr> <tr style="height: 50px; vertical-align: middle;"> <td style="width: 180px;">Donate $25</td> <td style="width: 160px; text-align: center;"><form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="hosted_button_id" value="3826318"> <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> <img alt="" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"> </form> </td> </tr> <tr style="height: 50px; vertical-align: middle;"> <td style="width: 180px;">Donate other amount</td> <td style="width: 160px; text-align: center;"><form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="hosted_button_id" value="3826318"> <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> <img alt="" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"> </form> </td> </tr></table>
In the above table you simply copy the TR and paste to create other options.

Any Difference between internet explorer and Mozilla browser?

Hi All,
I m using Jdeveloper 11.1.1.4.0.
To run my ADF application in internet explorer,its working fine.Suppose i to run my application in Mozilla browser alignment changed.
Why its coming in Mozilla ?What is that problem?.
Please any one guide to me...
Regards,
Rengasamy.A

Hi,
see this links
http://wiki.answers.com/Q/What_is_the_difference_between_Internet_Explorer_and_Mozilla_Firefox
http://www.geekinterview.com/talk/7898-what-difference-between-internet-explorer-mozilla.html

Problems with HTML in dynamic reports template after upgrade to 3.1

Hi, we just upgraded from APEX 2 to 3.1. W ehave an application that has a report template as follows:
<img src="&P1_LOGO." border="0" alt="Home" />
<div>
<table align="LEFT">
<tr>
<td align="LEFT" width=500><font size="-2"><P>&P1_FROM_ADDRESS.</P></td>
<td align="LEFT" width=175><font size="-2"><P>&P1_REMIT_TO.</P></td>
</tr>
</table>
<BR></BR>
#BOX_BODY#
The item P1_REMIT_TO is set to an address using a PL/SQL computation. It has HTML tags such as <B> and <BR> in it. In 2.0 this displayed fine. In 3.1 it does not interpret the HTML tags, so it sshows up with the HTML tags in the text.
Any idea what may have changed and how to fix this?

Tor,
You're in Tampa huh? Are you a member of the SOUG?
Issues like browser alignment are always easiest to figure out with an example. Post an example app on apex.oracle.com and provide some developer credentials with which we can get in "under the hood".
Regards,
Dan
http://danielmcghan.us/
http://sourceforge.net/projects/tapigen/

Image Align Not Working in Browser

Ok, so i have text and i put some images in there and i set my image align to either left or right or however i need it and it looks fine in dreamweaver, but when i preview it in a browser it isn't right. Does anyone know why this could be? I'm prolly being dumb and just have a slight minor detail wrong so......feel free to slap me if needed....

In code view, you have this at the top of your page:
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
Which should be this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
Remove the JavaScript tag.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Flash CS4: Top/left alignment is 8 px from top/left in browser??

Hi there. another newbie to Flash. My vision is to have a colored square at the top of the site Im working on which should span across the entire browser window. I have created a square 1280 x 100 pixels in size and imported it to the stage, alignment is set to x=0, y=0 ad alignment. The scene is the same size as the square I 've imported. When I view my Flash creation its displayed 8 pixels from the top left corner of the browser window. The flash file only contains the square and nothing else. Please take a look at the 3 files I've attached: issue-scrreen1-3.jpg. The first 2 screens are my Flash, properties and library screen shots. The third screen shot is my browser window.
Any help on this issue will be very much appreciated.

Thanks a lot Ned. It worked!
</script>
<link href="header.css" rel="stylesheet" type="text/css"> // I HAVE ADDED THIS LINE! TO MY FLASH GENERATED HTML
</head>
This does work until I regenerate/recompile/publish the header.html the next time.
If I put the code in a seperate CSS file, can I then link it into the flash.fla file?

How to align flash content to the middle of the screen in browser?

I am currently building a website in flash cs5.5 using AS2.0. One of the pages is 1024px wide by 1536 height. I want the screen to show only the first half of the screen and then the user has to scroll down using the browser scrollbar to see the second half of the screen.
Below is the html code. I have changed the 'overflow' from hidden to auto so that the website is scrollable. However when i preview the website in the browser, it is aligned to the left. Even though below (highlighted in red) it says 'middle'. This is not what i want, i want the website to me aligned in the middle so that there is a border on either side of the website.I have tried numerous things to fix it but all to no avail. Could someone please help. Let me know if you need anymore info.
Thanks
<!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>
<title>aboutus</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body { height:100%; background-color: #333333;}
body { margin:0; padding:0; overflow:auto; }
#flashContent { width:100%; height:100%; }
</style>
</head>
<body>
<div id="flashContent">
   <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="1024" height="1536" id="aboutus" align="middle">
    <param name="movie" value="aboutus.swf" />
    <param name="quality" value="best" />
    <param name="bgcolor" value="#333333" />
    <param name="play" value="true" />
    <param name="loop" value="true" />
    <param name="wmode" value="window" />
    <param name="scale" value="showall" />
    <param name="menu" value="true" />
    <param name="devicefont" value="false" />
    <param name="salign" value="" />
    <param name="allowScriptAccess" value="sameDomain" />
    
    <object type="application/x-shockwave-flash" data="aboutus.swf" width="1024" height="1536">
     <param name="movie" value="aboutus.swf" />
     <param name="quality" value="best" />
     <param name="bgcolor" value="#333333" />
     <param name="play" value="true" />
     <param name="loop" value="true" />
     <param name="wmode" value="window" />
     <param name="scale" value="showall" />
     <param name="menu" value="true" />
     <param name="devicefont" value="false" />
     <param name="salign" value="" />
     <param name="allowScriptAccess" value="sameDomain" />
    
     <a href="http://www.adobe.com/go/getflash">
      <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
     </a>
    
    </object>
    
   </object>
</div>
</body>
</html>

#flashContent {
width: 1024px;
margin-left: auto;
margin-right: auto;
Get rid of the 100% w/h and give flashContent a set width (1024).
Then you can give the right and left an auto margin... centering the <div id="flashContent">.
Best wishes,
Adninjastrator

Text shifting out of alignment when previewed in Muse or in web browser

Hi,
I am having issues with some title text not staying where I want it to. Here are some images: http://imgur.com/a/ZX6z9
The first image shows how I have the page set up in the planner. The text in question is the title "Art Portfolio". If you look at the other two images, the second one being Muse's preview function and the third being in Safari, you will see that the title has shifted down a little in relation to the rest of the site. It is easily noticed because it throws the title out of alignment with the menu.
Anyone have any idea how to resolve this issue? I can compensate by moving it a bit higher in the planner, but I would very much prefer that the software worked as intended rather than me having to intervene.
Thanks for any help!
Andrew Bennett

Hi Thrfoot,
I have a similar text issue with resizing occurring in preview and live mode. I believe text boxes (unlike web pages) are responsive to browser width. Just for grins, try keeping your Orbitron font and making the text box slightly wider and see if that helps. It may not, but I had to jiggle mine about quite a bit to keep it in line with everything else.
Cheers,
Kellie

Keeping things aligned / in place when stage / browser resized

Hi,
I'm trying to work out how to keep objects aligned when the user resizes the browser window.
I want the contents of the window to remain in view similar to how photoshop wourks when the window is resized. I also want any child components to remain "in place" relative to the position within the window.
do I have to listen for the stage resizing and recalculate the position of the child components?
Thanks
Tim

hi
use the layout features of flex to manage sizing/positioning of objects: http://www.adobe.com/devnet/flex/videotraining/exercises/ex1_05.html

How to Center Align SWF in Browser

I used the publish feature of flash but it does not seem to center the SWF in the browser. Why is there a centering feature on the publish settings under HTML tab if it does not center the SWF? It only works if you set Dimensions to Percent but that exposes the area beyond the stage and i don't want it to be seen. In addition that causes some movieclips to be improperly positioned. The Flash Alignment should have been disabled if the Dimensions is not set to Percent. Does anybody disagree? Can somebody help me solve this issue? Perhaps a simple script that centers my swf file in a browser... Any help highly appreciated.

Thanks a many for your help! I tried not using the swfobject.js and tried commenting out the object instantiation in the html file and it still works, why? Is it really needed? What exactly is the purpose of the swfobject.js. I remember i read something about Geoff Stearns creating that .js file to solve a particular problem but i forgot what exactly that was.

Alignment Issues between dreamweaver and browser

Hi
Hoping someone can help, i'm trying to learn how to make
better sites with advanced tools like apDIV's but seem to be
running into an alignment issue. When I make the html file in
dreamweaver I seem to have to off set the images and div tags
inorder for the site to show up aligned properly in firefox,
explorer, etc. I'm thinking there might be a problem in the actual
code causing this but am not good enough yet to find it or the
problem, any ideas or guidence would be greatly accepted. below if
the links work is the difference I see between dreamweaver and when
its launched in a browser.
DreamweaverScreen
BrowserScreen

> over a centered frame
You are not using frames - that's a table.
Yes - there's a way to do this, but it will involve your
working in code.
Make your page left aligned by removing any centering.
Then position your layer so that it is properly located over
the table.
Change this -
</head>
to this -
<style type="text/css">
#wrapper { width:760px; margin:0 auto;position:relative; }
/* 760px will display on an 800px screen maximized browser
window without */
/* horizontal scrollbars. */
</style>
</head>
(you may need to adjust this width so that it's consistent
with the width of
your centering table)
change this -
<body ...>
(the ellipsis represents any other attributes that might be
mentioned in the
body tag, and SHOULD NOT BE INCLUDED EXPLICITLY!)
to this -
<body ...>
<div id="wrapper">
and this -
</body>
to this -

</div>
</body>
and see if that helps.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Vinx21" <[email protected]> wrote in
message
news:ge9t3e$92s$[email protected]..
> thanks for the help osgood, I see now what my problem is
and am just
> wondered
> if there was a way to place the absolute layer over top,
in the right
> position,
or will have i have to remake one of the elements a
> different way???
>
> thanks again, dave
>

Hi, Over a week now, my Firefox browser has been aligning the info on the page to the right of the page. This makes it difficult to see the rest of the contents on the page. Can you help?

Question
Hi, Over a week now, my Firefox browser has been aligning the info on the page to the right of the page. This makes it difficult to see the rest of the contents on the page. Can you help?
Regards
Femworth65

my money is on a hardware issue

Faux column background not aligned in smaller browser window...

I'm working on a three-column webpage. I'm using fixed-width columns, with the left and right columns floated (started with a dreamweaver layout). I am also using a background applied to the <body> tag to apply the faux column look, so that the side column backgrounds flow all the way down the page.
My layout is a total of 780px wide, but the background image I'm using is 2000px wide. It's the same image that was used in the previous version of the website, and I can only guess that the image is that wide to "fill" the extra space around the main content when the browser window is wider than 780px. Because the image is so wide, I have it styled to center on the page. When my browser window >= 780px wide, everything looks great... the faux columns line up perfectly with the divs. However, when I make the window less than 780px, things get messy.
My layout elements stay where they are, meaning that the left edge of the container stays aligned with the left edge of the screen and a scroll bar appears at the bottom. However, since my background is set to center itself, it continues to try to center itself in the browser window. Basically, the content is not centered in the browser window, but the background is, causing the faux columns to not line up with the divs. The relevant CSS I have applied is:
body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 12px;
    color: #666666;
    background-repeat: repeat-y;
    background-position: center;
    background-image: url(../img/BG-gray.gif);
#container {
    width: 780px;
    margin: 0 auto;
    text-align: left; /* this overrides the text-align: center on the body element. */
Note: everything within the container div stays where it should relative to the container, so I didn't include the CSS for them, though I can post it up later if you really need to see it.
Is there a way to keep everything lined up in a smaller browser window? Or, would it be better to trim down the background image to the same width as the container?
Sorry for the long message, but I'm new at this. Please don't eat me.

Same problem, only worse. That causes the background to show from the very left edge of the image. All my text is in the gray area in the example below. Let me try to clarify...
The background image is something like this (colors are for clarity):
(filler)
Left faux column
Main content goes here. This is always in the center of the browser window.
Right faux column
(filler)
Where the combined width of the blue, white, and red sections is 780px. This is what I want my layout to line up with, the blue and red columns being the faux left and right columns, respectively. The gray areas are "filler" that colors the excess width in browser windows that are wider than the fixed width of the main content. With the background set to centered, the white stripe is always centered in the browser window. As long as the window is wider than my layout, the layout is centered in the browser window as well.
I'm looking for a way to either center the background relative to the layout container, not the browser window, or to keep the layout container centered in the browser window when the window is narrower than the layout.

Maintaining Alignment/Distribution of Objects During Browser Scaling

Hello All,
I have been searching the forum for about two hours trying to
find the right code.
Basically, I want to have a site where the background scales
to the browser window proportionately and the buttons re-align
themselves around the perimeter. The content will be centered in
the middle of the browser.
I found the perfect piece of code for the background scaling.
What I want to have is a minimum flash size, say 500px. If
the browser window is scaled smaller then 500px, scroll bars
appear. There will be buttons along the top, bottom, and sides of
the stage. When the browser window is enlarged, the stage expands
with the buttons staying the same size and distribution between
each button on the stage is consistent. (more space between the
buttons when stage is expanded.) Also, the buttons will stay
position to the top, bottom, and sides of the browser.
I tried mixing other code from the forum with this scale code
below with bad results.
Any help would be great.
Thanks
Jessy

this works:
you can view it here http://cybermountainwebservices.com/fullBrowser/FullBrowserAS3.html
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
var bmp:Tile = new Tile(35, 35);
var tile:BitmapData = new BitmapData(35, 35);
tile.draw(bmp);
shelter.x = stage.stageWidth /2;
shelter.y = stage.stageHeight /2;
function fillBG(evt:Event = null):void {
graphics.beginBitmapFill(tile);
graphics.moveTo(0, 0);
graphics.lineTo(stage.stageWidth, 0);
graphics.lineTo(stage.stageWidth, stage.stageHeight);
graphics.lineTo(0, stage.stageHeight);
graphics.lineTo(0, 0);
graphics.endFill();
shelter.x = stage.stageWidth /2;
shelter.y = stage.stageHeight /2;
fillBG();
stage.addEventListener(Event.RESIZE, fillBG);
in this case the fill is with a 35pxl x 35pxl gif file but you could just as easily use a color the item called shelter is the name of the jpg in the center.
when you do this be sure in your publish settings to set dimension to percent 100 x 100 if you cont want a border or scrollbars around the outside be sure to set this css rule in your html body {margin:0; padding:0; overflow:auto}

Browser Alignment incompibilities

Similar Messages

Maybe you are looking for