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

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
0
greenglow
Asked:
greenglow
  • 6
  • 4
1 Solution
 
David S.Commented:
Try removing the left margin from ".BlockContent-body" in style.css
0
 
greenglowAuthor Commented:
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;
}
0
 
David S.Commented:
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;".
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
greenglowAuthor Commented:
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.
0
 
greenglowAuthor Commented:
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
0
 
David S.Commented:
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

0
 
greenglowAuthor Commented:
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?
0
 
David S.Commented:
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.
0
 
greenglowAuthor Commented:
Kravimir:

I tried this at least to the best of my ability.  it did indeed correct the horizontal spacing.  However it stretched and moved over the block headers enough that light border around the inner darker area with the header text  had an uneven border and caused the block height to change, affecting the balance..

 So I used a combination,of margins as below and overall it seems to render well in all.  The block height was still changed for some reason so I just added more top space above the left hand content so things lined up on the bottom horizontally.

.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;
}

I will show your solutions to a colleague who has much better understanding of these issues-perhaps I didn't implement them correctly-very likely.  
0
 
greenglowAuthor Commented:
Fixed-this was somewhat helpful
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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