Solved

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

Posted on 2012-03-22
6
332 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
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 

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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

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.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
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 …

785 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