asked on

Browser hack IE6 Wordpress

My initial question was answered quickly and well however someone pointed out I neglected to address one thing.

I have a Wordpress site that is rendering well except IE 6 causes some problems. A screen shot is attached as is the stylesheet for IE6

The URL is www.outforreel.org

The widgets on the right side contain images and one is a Constant Contact Widget. The elements are not centered inside the widget boxes, or blocks.
My client is a perfectionist and I would love to know how to avoid this going forward.

.I was hoping someone has experience with these issues.
OFR-IE6-fix.jpg
IE6-stylessheet.txt

David S.

Try removing the left margin from ".BlockContent-body" in style.css

greenglow

ASKER

Hi Kravamir,

Actually I ended up increasing the margin from 5 to 12 px and it looks better overall. Thanks you for telling me where to look! Removing it pushed everthing to the right in FF and IE7. Thanks to you pointing this out it looks much better now.
The email sign up form is still off enter a bit but I didn't want to compound problems. Any ideas on that?
There are two entries for Blockcontent-body,

One deals with text-
This is the one I just changed-below it is the other
.BlockContent-body
{
position: relative;
z-index: 0;
margin: 12px;
}

This is the other-
.BlockContent-body
{
color:#FFFFFF;
font-family: Tahoma, Arial, Helvetica, Sans-Serif;
font-size: 14px;
letter-spacing: 0px;
text-align: center;
margin-left: 12px;
}

David S.

I suggest you remove the left and right margins and let the text-align property do its job. To do that remove the margin-left declaration and change "margin: 12px;" to "margin: 12px 0;".

greenglow

ASKER

I'm sorry to be so dense. I changed that and there was a problem in Safari 3.2.1. @ questions
SInce there are two sets of blockcontent-body classes, which do I change?
When I changed one to o the top margin of the email form is flush against the top-the top margin seemed to disappear on that one box.

greenglow

ASKER

Here is the CSS as it is now for both sets of block body content. It looks pretty good in all but Safari 3.1 the email form is flush left-no space. So now the problem is Safari.

See attached

.BlockContent-body
{
position: relative;
z-index: 0;
margin: 12px;
}

.BlockContent-body
{
color:#FFFFFF;
font-family: Tahoma, Arial, Helvetica, Sans-Serif;
font-size: 14px;
letter-spacing: 0px;
text-align: center;
margin-left: 9px;
}

OFR-Safari-problem.jpg

David S.

It's because the text box is wider in Safari and that class still has a left margin.

You can use an attribute selector to set the width to be the same in different browsers. (IE6 doesn't support attribute selectors though.)

> SInce there are two sets of blockcontent-body classes, which do I change?

Both.

.BlockContent-body input[type=text] {
  width: 144px;
}

Open in new window

greenglow

ASKER

I will try this later and report back. Since IE 6 does not' support attribute selectors would it make sense to include the previous block content-body classes in the IE6 CSS, since I have a separate sheet for IE6?

David S.

No. The new rule is for <input type="text"> elements that are descendants of elements that belong to the "BlockContent-body" class. There is no need for IE6 to see that rule since it's already using a small enough width for the text box.

ASKER CERTIFIED SOLUTION

greenglow

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

greenglow

ASKER

Fixed-this was somewhat helpful