Widget CSS

sleenie · #1 Apr 19, 2011, 07:48 PM

Ok...before I mess things up even further I really need some help. I needed to put in some widgets to be able to do what a client wished. Or at least I thought that was the easiest way. But I have several problems.

Up at the top I have 3 widgets. one with a logo inside of it, one with phone numbers and a Skype widget, and the 3rd with a search bar. Thought I had it working right but it seems on larger monitor the search bar just keeps getting longer which looks bad. I've tried a variety of things but it doesn't seem to get better, in fact worse.

%bar1 %pages %bar1 <?php bfa_widget_area('name=Logo widget&cells=3&align=1&width_1=400&width_2=350&wid th _3=100&width_4=100&align_2=1before_widget=<div id="%1$s" class="header-widget %2$s">&after_widget=</div>');
?>

I keep staring at the above and I just can't tell if it is correct. I'm using this in CSS inserts for the middle widget but I'm so unsure at this point.

Code:

div#text-19.widget  {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 0px solid #F88C2C;
    text-align: left;
    font-size: 1.10em;
    font-weight:normal;     
    display: block;
    margin:5px 5px 2px 45px; 
    padding: 2px 5px 2px 25px;
    width: auto;

Then we have another widget just below that that has a series of images. I thought I had that looking right but it doesn't seem to center on lager resolutions. I'm sure it is just a CSS setting, but I can't figure out which one. I've spent hours looking through W3 Schools. Here's the code I have for that:

Code:

div#text-18.widget  {
    background: none repeat scroll 0 0 #FFFFFF;
    display: inline;
    margin: 2px 15p 2px 5px
    padding: 2px 5px 2px 35px;
    width: auto;

I might add here that I have also add some CSS before the images to try and move them over to the right and although it worked to a degree it still doesn't on larger resolutions which means I'm doing it wrong.

Last but not least, I have 4 widgets in the footer. I actually thought that I had everything there correct but for some reason in IE the content seems to flow outside of the widget.

Here's the code for those:

Code:

div#text-2, div#text-22, div#text-23, div#text-24  {    
   background: #ffffff;
-moz-box-shadow: 6px 6px 1px #cfcdce; /* Firefox 3.6 and earlier */
-webkit-box-shadow: 6px 6px 1px #cfcdce; /* Safari */
box-shadow: 6px 6px 1px #cfcdce;
   border: solid 2px #cfcdce;
   height:270px;
   text-align: left;
   font-size: .90em;
   font-weight: normal;
   margin: 15px;
   padding: 5px 10px 2px 5px;

As you can tell, somehow I made a mess. Client keeps making changes and I'm ready to call it quits. If you need in the backend or want me to attach my settings i will be happy to do so. I'm taking it out of maintenance mode for the time being.

Sure hope you can help.
Guess it would help if I listed the site.