Weird CSS - I must be missing something

Hi Guys,

Working on a WordPress Blog and I’ve tweaked a lot, but have a couple of weird issues I can’t figure out. On the home page some text is bold and italic that’s not supposed to be and wasn’t, but something changed and I can’t find it. Then in FF, I have bullets and in IE I don’t.

The site is at http://sandyschussel.com

The bullets in the right column newsletter area go away in IE7. That area and the Twitter area get bold and italic on the home page in all browsers and they shouldn’t, and I can’t get the line of text below the e-mail sign up box to stay in the same place browser to browser.

The CSS is at: http://sandyschussel.com/wp-content/themes/wisebusiness/style.css

I’ve been using Firebug but can’t find the issues, so any help is appreciated.

Thanks guys!

Hi Ken,
The first thing to do with that page is to clean up all the html errors.
There are too many elements that are not closed properly.

Install html validator for FF (see my signature) and it will show you where they are.

The main cause of your problem will more than likely be the WP editor injecting all the <strong>,<em>,<b> & <i> tags.
You can’t see them by viewing the page source but I see them with Firebug.

Hi,
The inputs are floated in that #searchform (by the way you have used that ID twice). The #searchform is not containing the floats and the #never <p> margin is sliding up under the floats.

You could set clear:both on the #never div but it would be best to contain the floats in the #searchform. Then you would not need to use clear.

#searchform  {
overflow:hidden;/*contain floated inputs*/
}

Wen you do that you will see the 10px top padding PLUS the 1em top margin on the <p>

Floats! Floats! Floats! :slight_smile:

And then remove the 250px height from #colRight .boxRightemail

One more weird thing I can’t get straight:

In the same box under the “JOIN” button is a text sentence about "never… ". I can’t get consistent spacing between the JOIN button and the top of the text in IE7 and the other browsers. I have the class:

#never {
    padding-top:10px;
    text-align:center;
}

Any ideas on this one?

Thanks guys!

Floats! Floats! Floats! yeah… they’re gonna get you!!!

(paraphrased from the 80’s song: Lies Lies Lies)

Floats and clears - my path to the rubber room.

Thanks Ray. I think that does it for Lady WordPress and her horrible code issues.

BTW - had to use the ID twice - both are pre-named from separate 3rd parties and not worth the struggle to change one or the other. The validator will have to live w/it.

You da man Ray - stop denying it! :teach:

Yup that fixed that issue. Thanks!

Never heard of the white-space selector before… I really do learn things at sitepoint.

Making progress w/the validator, but the WP editor is truly horrible. I think I have the home page cleaned up yet the right side bullets go away in IE. Any ideas on that one?

I have the validator and hadn’t looked at the page since I added some code. All those extra <p> tags are that stupid &%@# stuff is from the wordpress editor. I have it in HTML mode and it’s still injecting junk that I don’t have in the stuff I coded. Apparently that’s a nightmare.

All those extra <p> tags are that stupid &%@# stuff is from the wordpress editor.

Yes, I knew that it was WP and not you. That is why I very rarely debug WP themes, they are a mess.

You should be able to adjust your settings in the WP editor, you may need to go to their forum to find out how.

yet the right side bullets go away in IE. Any ideas on that one?

You need to remove the 255px width from email and let it naturally fill the available space.

Then set up a selector to target the <li> and give it white-space:nowrap if you don’t want that long string of text to wrap.

#email li {
white-space:nowrap;
}