Solved

div is centered in Dreamweaver but not in browsers...??

Posted on 2012-03-22
6
334 Views
Last Modified: 2012-03-23
Hello,

I am using a method I have used before to center divs.  It shows up as centered in dreamweaver, but not in Safari or Firefox......code snippet below:

<div id="bigwrapperDiv">
<form method="get" action="" class="asholder" id="myForm" name="myForm">
<div id="headerDiv">
  <p><small style="float:left">
    <input   id="thisid"   value="0" style="font-size: 10px; width: 30px;" disabled="disabled" />
    </small><small style="float:left">
      <input type="hidden" id="isTest"   value="" style="font-size: 10px; width: 30px;" disabled="disabled" />
    </small>
    <small style="float:left">
      <input type="hidden" id="currentScore"   value="" style="font-size: 10px; width: 30px;" disabled="disabled" />
    </small><span class="contactinfo"><small style="float:left">
    <input   id="evaluatorid"   value="" style="font-size: 10px; width: 30px;" disabled="disabled" />
    <input   id="searchByWhat"   value="1" style="font-size: 10px; width: 30px;" disabled="disabled" />
    <input   id="currentSelect"   value="" style="font-size: 10px; width: 80px;" disabled="disabled" />
    </small></span><br />
  </p>
  </div>
</form>
<div id="mainContent" class="headerDiv">
  </div>
</div>

Open in new window

and CSS....
#bigwrapperDiv {width: 969px; margin:0 auto;overflow:hidden; padding-top:40px;}
#headerDiv {width:969px;border: 1px solid black;overflow:hidden;}

Open in new window


Thanks in advance for any help!

Cheers!
0
Comment
Question by:cougarsy
  • 3
  • 2
6 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 37753074
First of all, please NEVER use Dreamweaver "design" view to test any type of code. Always use the browser.  

Second: What are you trying to center? The bigwrapperDiv is centered for me.  You've given it a width as well as margin:0 auto which centers it within the browser.

Can you show a screenshot or maybe a live URL of the issue?
0
 

Author Comment

by:cougarsy
ID: 37753291
Hi and thanks for your quick reply.  Here is a link to a page that is not centering correctly:

http://www.infocuseurope.com/Dashboard/CENTERSAMPLE.ASP

The code is a bit of a mess, but it is a sample to show what I am trying to center.

Thanks!

Cheers!
0
 
LVL 30

Assisted Solution

by:LZ1
LZ1 earned 150 total points
ID: 37753306
You have a position:absolute on the body tag

Line 8 on this file: http://www.infocuseurope.com/css/autosuggest_inquisitor.css

Kill that and all will be good
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:cougarsy
ID: 37753330
Thank you so much!  I cannot make the changes now, but will do so in a couple hours and get back to you!!!

Cheers!
0
 
LVL 17

Accepted Solution

by:
nanharbison earned 350 total points
ID: 37753613
You also have several of these: float:left
0
 

Author Closing Comment

by:cougarsy
ID: 37756152
I split the points because LZ1 pointed out valid points that I felt were helpful in implementing best practices for my page.  However, the real 'fix' for me was nanharbison's solution of removing the 'float:left'.

Many thanks to you both!

Cheers!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
CSS style formatting? 2 27
displaying 3 dropdownlist  horizontally 3 31
..ignore the Question 1 21
CSS Scroll Center with Static Side. Like EE does. 2 26
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

679 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