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

Where is this formatting coming from?

Head out to http://countryshowdown.com/app/songwriting_contestant_list.php

I want to move that red box with the countdown to the center of the page. I've tried things like <div align="center"> all to no avail.

I determined that if I could find where the formatting for that red box was originating, perhaps it would be there that I could better manipulate where it was positioned on the page, but I can't find anything.

Hence, my reaching out to the ninjas. Can you see where this red box is coming from? The Javascript itself is just the computations for the date, there's no visual formatting happening.

What do you think?
  • 2
  • 2
1 Solution
brucegustPHP DeveloperAuthor Commented:
And in case you're wanting to see the style sheet, you can find that at http://www.countryshowdown.com/app/css/style.css
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Remove float:right and add text-align center
#cd {
text-align: center;
padding: 5px 10px;
margin: 14px;
background: #ac0101;
background: -moz-linear-gradient(top, #c51a1a 0%, #ac0101 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c51a1a), color-stop(100%, #ac0101));
background: -webkit-linear-gradient(top, #c51a1a 0%, #ac0101 100%);
background: -o-linear-gradient(top, #c51a1a 0%, #ac0101 100%);
background: -ms-linear-gradient(top, #c51a1a 0%, #ac0101 100%);
background: linear-gradient(top, #c51a1a 0%, #ac0101 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c51a1a', endColorstr='#ac0101', GradientType=0 );
font-size: 12px;
/*   float: right;   get rid of float:right*/
box-shadow: none!important;
border: none;
color: #ffffff;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;

Open in new window

brucegustPHP DeveloperAuthor Commented:
That did it!

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Your welcome.  This is very easy to find if you use chrome console or firefox firebug.  You can right click on any element and it shows you exactly what css elements are manipulating the html elements.  

Check out https://developers.google.com/chrome-developer-tools/ or https://getfirebug.com/wiki/index.php/CSS_Panel
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

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