hello,

IE7 has been giving me hell.

1) While the search box will display correctly as a single horizontal line in Firefox 3.5 and Opera, IE7 seems to have broken it.

I have attached a screen capture

2) the second issue is that in IE7 a block of text that I placed into Header region has its top and bottom truncated. I have tried adding large value for padding-top and bottom and also margin top-bottom to no avail.

this problem is also not exhibited in FF and Opera.

Note that while this text block that I place under the logo may look like a slogan... I am NOT using drupal slogan or sitename ( which is disabled).

I am at wits end...will really appreciate if someone can help

Thanks

CommentFileSizeAuthor
IE7-searchbox-bug.png71.4 KBFrancis Yip

Comments

delty’s picture

delty commented

There are several CSS styles that govern the appearance of the search block, but to make it look right in IE6-8 you just need to make one simple change. Copy this CSS style to your "local.css" in the theme CSS directory. If you don't have that file, just rename the existing "local-sample.css" to "local.css" and edit that.

#search-box #edit-search-theme-form-header {
  background: #F6F9FB url(../images/form-bg.png) left top;
  border: 1px solid #9BABB0;
  color: #666;
  padding: 2px;
  width: 150px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

The default text entry box size is 170px, and with the way IE renders it, it's too wide and causes the search button to wrap. Change the width to 150px and that should do it.

As for the text being chopped of, you just need to figure out which CSS that text is using (if it's not the site name or slogan, what is it?) by checking out the CSS in Firefox with Firebug. Copy the CSS from the theme's CSS (you'll have to search for it in "fusion-acquia-marina-style.css") into your "local.css" file and then adjust the height and margins as needed.

Take care,

-=Delty

Francis Yip’s picture

Francis Yip commented

Hi Delty,

Thanks alot for helping out.

1) I managed to fix problem 1 , search box wrapping by making some changes to IE7-fixes.css changing the width from 262px to 263px

#search-box-inner {
float: left;
width: 263px;

So perhaps the people creating Acquia Marina should amend this in the IE7-fixes.css so that others will not have to spend time trying to figure out why it break in IE.

2) As for the 2nd problem of text being chopped off... it could be related to IE7 ignoring padding-top and bottom.
This is because similar text chop off was initially present when viewed in FF or Opera. But was rectified when I added padding top and bottom. However IE7 ignored these , which is why it is still chopped off under IE7.

Francis Yip’s picture

Francis Yip commented

I have solved problem 2.

IE 7 will ignore paddings. To solve this I added : line-height: 2

Thanks anyway.

delty’s picture

delty commented

Glad to see you got it worked out! The only issue with changing the IE7-fixes.css file is that you have to go back and update it every time the theme is updated, which can be a pain. Also, you've only fixed it in IE7, but the problem still appears in IE6 and IE8 if running in compatibility mode, so you might want to add your changes to the local.css so that it gets applied to every browser.

I've been using IETester to check my site against all the versions of IE - great tool and it really simplifies the process of testing with all the flavors of IE and the idiosyncrasies they each possess.

Cheers!

-=Delty

Francis Yip’s picture

Francis Yip commented

Delty;
Thanks for yoru tips..appreciate that very much

Francis Yip’s picture

Francis Yip commented
Status: Active » Closed (fixed)