• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 323
  • Last Modified:

can't center item in FireFox

On my page my item "countdowntimer" refuses to center in FireFox.

It looks fine in IE:  http://www.glowfishtw.com/play3on3/admin_counter_edit.aspx

Any ideas what's going on here?

     <div class="clear">&nbsp;</div>
            <div class="countdown_center">
          <div class="countdown_bg_edit">      <<<<<<<<<<<<<<<<<<< trying to center this
            <span id="countdown1">
            <asp:Literal ID="Counter" runat="server"></asp:Literal>      
            </span>
          </div>
            </div>

.countdown_bg_edit {
      height: 80px;
      width: 192px;
      background-image: url(../images/countdown_bg.png);
      background-repeat: no-repeat;
      margin-top: 5px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 22px;
      font-weight: bold;
      color: #000;
      padding-top: 54px;
      padding-left: 0px;
}
}
.countdown_center {
      text-align: center;
      width: 100%;
      margin-right: auto;
      margin-left: auto;
      background-color: #60C;
}
Entire CSS:

html, body {
margin: 0;
padding: 0;
height:100%;
}

body {
	background-image: url(../images/wood_bg.jpg);
	background-repeat: repeat;
} 
.main_center_edit {
	float: left;
	width: 980px;
}
.main_content_top {
	background-image: url(../images/main_bg_top.png);
	height: 14px;
	width: 580px;
}
.main_content_bottom {
	background-image: url(../images/main_bg_bottom.png);
	height: 17px;
	width: 580px;
}
.main_content_middle {
	background-image: url(../images/main_bg_middle.png);
	background-repeat: repeat-y;
	width: 540px;
	padding-top: 5px;
	padding-right: 15px;
	padding-bottom: 5px;
	padding-left: 25px;
	float: none;
}

.admin_content_top {
	background-image: url(../images/admin_bg_top.png);
	height: 14px;
	width: 960px;
}
.admin_content_bottom {
	background-image: url(../images/admin_bg_bottom.png);
	height: 17px;
	width: 960px;
}
.admin_content_middle {
	background-image: url(../images/admin_bg_middle.png);
	background-repeat: repeat-y;
	width: 910px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #333;
	padding-left: 35px;
}
.edit_padding {
	padding-left: 150px;
}

.admin_page_title {
	font-weight: bold;
	color: #0CF;
}


.video_center {
	width: 580px;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 0px;
	background-image: url(../images/video_bg.png);
	height: 425px;
	background-repeat: no-repeat;
	text-align: center;
}
.news_holder {
	width: 180px;
	background-image: url(../images/news_bg.gif);
	background-repeat: repeat-y;
	color: #FFF;
	text-align: left;
}
.news_text {
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 20px;
	margin-left: 15px;
	overflow: hidden;
	width: 155px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
}


.slide_show_holder {
	background-image: url(../images/slide_show_bg.png);
	background-repeat: no-repeat;
	height: 470px;
	width: 580px;
}
.center_bar {
	height: 144px;
	width: 580px;
	padding-bottom: 8px;
}
.register_holder {
	height: 210px;
	width: 180px;
	margin-top: 16px;
	margin-bottom: 15px;
}
.mailing_list_holder {
	height: 178px;
	width: 180px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.main_center {
	float: left;
	width: 580px;
}


.main_left_edit {
	float: left;
	width: 20px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.main_right_edit {
	width: 20px;
	float: left;
	text-align: left;
	padding: 0px;
	height: 13px;
}

.main_left {
	float: left;
	width: 180px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.main_right {
	width: 220px;
	float: left;
	text-align: left;
	padding: 0px;
	height: 100%;
}
.main_right_top {
	background-image: url(../images/right_panel_top_bg.png);
	margin: 0px;
	padding: 0px;
	height: 12px;
	width: 220px;
}
.main_right_middle {
	background-image: url(../images/right_panel_middle_bg.png);
	background-repeat: repeat-y;
	margin: 0px;
	padding: 0px;
	width: 220px;
}
.main_right_bottom {
	background-image: url(../images/right_panel_bottom_bg.png);
	background-repeat: no-repeat;
	height: 14px;
	width: 220px;
}

.main_content {
	width: 980px;
	margin-right: auto;
	margin-left: auto;
}


#content {
	width: 900px;
	height: 80px;
	text-align: left;
	overflow:auto;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	background-image: url(../images/header.png);
	padding-top: 150px;
	padding-left: 80px;
} 

#content_edit {
	width: 900px;
	height: 80px;
	text-align: left;
	overflow:auto;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	background-image: url(../images/header_edit.png);
	padding-top: 150px;
	padding-left: 80px;
} 

.column { 
width: 50%; 
position: absolute; 
top: 0; 
} 

.left {left: 0;}         
.right {right: 0;} 

#leftcol {
	margin-right: 486px;
	height: 230px;
	background-image: url(../images/top_bg_stripe_long.png);
} 

#rightcol {
	margin-left: 480px;
	height: 230px;
	background-image: url(../images/top_bg_stripe_long.png);
} 

/*
	Featured Content Slider
	by: Chris Coyier
*/
*											{
    margin: 0 50 0 0;
    padding: 0;
}
body 										{ font-family: Arial, Helvetica, sans-serif; font-size: 10px; }

					  				  
/*
	UTILITY STYLES
*/				  				  
					  				  
.floatLeft 									{ float: left; margin-right: 10px;}
.floatRight									{ float: right; }
.clear 										{ clear: both; }
a											{ outline: none; }


/*
	PAGE STRUCTURE
*/
#page-wrap 									{
	width: 570px;
	position: relative;
	min-height: 450px;
	background-position: center top;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}


/*
	TYPOGRAPHY
*/
ul											{ list-style: square inside; }
a, a:visited								{ color: #729dff; text-decoration: none; }
a:hover, a:active							{ color: white; }
blockquote									{ padding: 0 20px; margin-left: 20px; border-left: 20px solid #ccc; font-size: 14px; 
									  		  font-family: Georgia, serif; font-style: italic; margin-top: 10px;}

/*
	SLIDER
*/
.slider-wrap								{
	width: 530px;
	position: absolute;
	top: 20px;
	left: 20px;
}			
.stripViewer .panelContainer 
.panel ul									{ text-align: left; margin: 0 15px 0 30px; }
.stripViewer								{
	position: relative;
	overflow: hidden;
	width: 532px;
	height: 360px;
	margin-bottom: 16px;
}
.stripViewer .panelContainer				{
	position: relative;
	left: 0;
	top: 0;
}
.stripViewer .panelContainer .panel			{
	float: left;
	height: 100%;
	position: relative;
	width: 530px;
}
.wrapper {
	border: 2px solid #000;
}
.wrapper2 {
	border: 2px solid #000;
	width: 528px;
}



.stripNavL, .stripNavR, .stripNav			{ display: none; }
.nav-thumb 									{
	border: 1px solid black;
	margin-right: 5px;
}
#movers-row									{ margin: -43px 0 0 62px; }
#movers-row div								{
	width: 90px;
	float: left;
}
#movers-row div a.cross-link 				{
	float: right;
}
.photo-meta-data {
	background: url(../main_slides/transpBlack.png);
	padding: 10px 10px 15px 10px;
	position: absolute;
	bottom:0px;
	width:510px;
	z-index: 9999;
	color: white;
	text-align: center;
}
.footer_bg {
	height: 230px;
	width: 100%;
	background-image: url(../images/footer_bg.png);
	background-repeat: repeat-x;
}
.footer_center {
	background-image: url(../images/footer_center.png);
	background-repeat: no-repeat;
	height: 230px;
	width: 980px;
	margin-right: auto;
	margin-left: auto;
}

.photo-meta-data span 						{ font-size: 13px; }
.cross-link									{
	display: block;
	width: 62px;
	margin-top: -18px;
	position: relative;
	padding-top: 10px;
	z-index: 9999;
	left: 75;
}
.active-thumb 								{
	background-color: transparent;
	background-image: url(../main_slides/icon-uparrowsmallwhite.png);
	background-repeat: no-repeat;
	background-position: 32px top;
}

#slider {
	width: 200px; /* important to be same as image width */
	height: 280px; /* important to be same as image height */
	position: relative; /* important */
	overflow: hidden; /* important */
	padding-top: 0px;
	padding-left: 18px;
	margin-top: 0px;
	margin-bottom: 5px;
}
#sliderContent {
	width: 180px; /* important to be same as image width or wider */
	position: absolute;
	top: 0;
	margin-left: 0;
	border: 3px double #333;
	height: 260px;
}
.sliderImage {
    float: left;
    position: relative;
	display: none;
}
.sliderImage span {
	position: absolute;
	font: 10px/15px Arial, Helvetica, sans-serif;
	padding: 0px;
	width: 180px;
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	-khtml-opacity: 0.7;
	opacity: 0.7;
	color: #fff;
	display: none;
}
.countdown_bg {
	height: 80px;
	width: 192px;
	background-image: url(../images/countdown_bg.png);
	background-repeat: no-repeat;
	margin-top: 5px;
	margin-left: 18px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-weight: bold;
	color: #000;
	padding-top: 54px;
	padding-left: 12px;
}
.photo_bg {
	height: 242px;
	width: 191px;
	margin-top: 20px;
	margin-left: 18px;
}
.store_bg {
	height: 153px;
	width: 191px;
	margin-top: 20px;
	margin-left: 18px;
}
.rule_bg {
	height: 167px;
	width: 191px;
	margin-top: 20px;
	margin-left: 18px;
}

.clear {
	clear: both;
}
.sliderImage span strong {
    font-size: 14px;
}
.top {
	top: 0;
	left: 0;
}
.bottom {
	bottom: 0;
    left: 0;
}
ul { list-style-type: none;}

#content_footer {
	width: 900px;
	height: 80px;
	text-align: left;
	overflow:auto;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	background-image: url(../images/header.png);
	padding-top: 150px;
	padding-left: 80px;
} 

.column_footer { 
width: 50%; 
position: absolute; 
top: 0; 
} 

.left_footer {left: 0;}         
.right_footer {right: 0;} 

#leftcol_footer {
	margin-right: 486px;
	height: 230px;
	background-image: url(../images/top_bg_stripe_long.png);
} 

#rightcol_footer {
	margin-left: 480px;
	height: 230px;
	background-image: url(../images/top_bg_stripe_long.png);
} 

.widelabel {
display:-moz-inline-block;
display:inline-block;
width: 100px;
}

.editor_center {
	margin-left: 150px;
	margin-right: 150px;
}
.csw {
}
.border_0
{
    border-width: 0px;
}
.tile_text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #06F;
	text-align: center;
}
.select_table_padding {
	padding-left: 0px;
}
.error_text {
	font-size: 14px;
	color: #F00;
}
.counter_text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333;
	text-align: center;
}
.countdown_bg_edit {
	height: 80px;
	width: 192px;
	background-image: url(../images/countdown_bg.png);
	background-repeat: no-repeat;
	margin-top: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-weight: bold;
	color: #000;
	padding-top: 54px;
	padding-left: 0px;
}
}
.countdown_center {
	text-align: center;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	background-color: #60C;
}

Open in new window

0
elliottbenzle
Asked:
elliottbenzle
  • 2
1 Solution
 
Jason C. LevineNo oneCommented:
Just add margin-left: auto and margin-right: auto to the class countdown_bg_edit to center the div.
0
 
elliottbenzleAuthor Commented:
Thanks Jason.
0
 
Jason C. LevineNo oneCommented:
You're welcome :)
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now