Modified Lotus Theme bug in IE8, IE9 WordPress
- SOLVED
I had a developer modify a theme and now I'm seeing extra padding in the header in IE8 and 9. Problem is only on the home page at [[LINK href="http://www.surya.org"]]www.surya.org[[/LINK]]. Looks fine in Firefox, Chrome, IE7.
Here is a page with screenshots: [[LINK href="http://www.surya.org/browser-screenshots/"]]http://www.surya.org/browser-screenshots/[[/LINK]]
Need to get rid of the extra lines in the header area in IE 8/9.
Help!
Thanks
Answers (2)
Hai Bui answers:
I can help fix it if you PM me the WP admin info. Or would you like instructions to fix it?
Hai Bui comments:
It's hard to give instructions because I don't know the theme plus it is modified.
Find and delete this line in header.php:
<div id="header_pattern" style="margin-top:-250px;"></div>
and change css for #slider_wrapper :
Change this:
#slider_wrapper {
height: 440px;
margin: -470px auto auto;
overflow: hidden;
padding-top: 150px;
width: 100%;
}
to
#slider_wrapper {
height: 440px;
margin: 0;
overflow: hidden;
width: 100%;
}
Rita Ryan comments:
The code changes you made to<em> wp-content/themes/Lotus/style.css and wp-content/themes/Lotus/index.php</em> worked, I checked in all browsers and the problem seems to be fixed. Thank you for making comments in code. And thank you for your speedy answer.
Rita Ryan comments:
Maybe I spoke too soon, while the header area is fixed, there is a new issue. In IE9 only (not in IE8), the right side widgets are no longer lining up properly.
I cannot confirm that this was not the case before the fix since my screenshots did not scroll down the whole page, but my client noticed this morning that the right column has whitespace in IE9 only.
Please see the screenshots of IE8 and IE9 here: http://www.surya.org/browser-screenshots/
I will add more $$ to this question (when I find out how to do that).
Thank you for your help.
Manoj Raj answers:
add Reset default browser CSS
or simply
* {
margin: 0;
outline: 0 none;
padding: 0;
border: none;
}
body, html { margin: 0, padding: 0 }
on the top of the stylesheet
Its one of the most frequent causes for the unwanted padding in browsers..
If you have already added and thats not working, let me look at your website once..
Edit :Sorry... Sorry.. I got confused with the screenshots.. I saw the first two and came to a conclusion that something is wrong with padding on top of the body. I think Hai Bui is in right direction helping you..
Rita Ryan comments:
Thank you Manoj for taking the time to offer assistance. Hai Bui was able to fix the problem for me. :-)