Hack: Fixing The WordPress i3theme Sidebar Issue (Part II)
Blog | Tech Blog | Secure Coding | Twitter | RSS Feed | Get Email Updates
----
Some time back I had posted a little hack to fix an issue that users of i3theme have, i.e., their right sidebar drops to below the main content area in IE6. But it wasn’t that good as it took care of only the situation when this phenomena was caused by the tag cloud widget. So, here is a little modification I did to fix the issue more properly.
1. Go to your wp-content/themes/<i3theme> folder and open the style.css file in your favourite text editor.
2. Search for “#sidebar” (without the quotes) until you reach the following code:
-
#sidebar-right,
-
#sidebar-left {
-
width: 210px;
-
color: #666666;
-
line-height: 160%;
-
}
3. Now, modify this code to look like:
-
#sidebar-right,
-
#sidebar-left {
-
width: 210px;
-
color: #666666;
-
line-height: 160%;
-
word-wrap: break-word;
-
}
4. That’s it. Save your file and you are done.
So what does it do? Basically I just added an attribute “word-wrap: break-word” to the sidebar handling. So, if there is a word that cannot fit in the sidebar width, the word will be broken to continue in the next line and thus the sidebar alignment will remain intact. let me know if you face any issues with this.
Note that this particular word-wrap property is Internet Explorer specific. Firefox (and other browsers) will ignore it, but since the problem with sidebar alignment occurs only with IE, so it will enable IE to display your site properly.
© Shantanu Goel | Hack: Fixing The WordPress i3theme Sidebar Issue (Part II)
|
Liked this post? Get FREE Updates Subscribe to RSS feed 
|
This post has 24 comments
April 9th, 2008
I still have same problem with my blog at sefanboy.com, even after follow this instruction
can you help me?
April 9th, 2008
alex, your problem seems to be caused by some issue with the main content area and not the sidebar. Did you try adding this property to the main content area in the CSS?
April 9th, 2008
I don't really understand what do you mean. I 'm not expert in wordpress
I add the code on style.css of course. but maybe i put too large image or video?
April 9th, 2008
I add this code in style.css in my theme, not main content area.
any idea what should i do with main content area?
April 9th, 2008
alex, by main content, I meant #content in style.css. Anyways, I tried adding the property in ur style.css (saved ur page and tried there on my local machine) but it didn't work. Most probably its not text but some pic/vid etc thats causing the issue.
April 20th, 2008
I had the same problem and it's fixed. If you go to download version 1.6 of the i3Theme form mangoOrange.com, you'll see that the problem is solved for IE.
Hope this helps.
April 20th, 2008
I don't know, I have upgraded to 1.6 version, but still show error. I think i have to change with 2 column or switch to other theme
I tried to validate css of the theme, and found some errors there.
check here:
http://jigsaw.w3.org/css-validator/
May 14th, 2008
Hi Shantanu,
I used i3 theme 6, right sidebar.
I have problem for IE 6, that the midle sidebar go down and not place properly.
Could you help me to fix it?
Tnk be 4
Http://optikonline.info
May 14th, 2008
Kastam: Have you tried the fixes listed in this post and the previous one on the same issue?
May 29th, 2008
i was having the same prob with the i3 theme and the leopard theme both the trick posted on this blog didn't worked, i saw this line "margin-left: 10px;" in my css below "line-height: 160%;" and i removed this line and it fixed the error in i.e 6
I don't know what are the side effects of removing this line but i am glad that i fixed it
so can anyone tell me will removing this line affect anything?
May 29th, 2008
Saad:, basically what that line did was to create a margin of 10 pixels on the left side. Since u removed that, the margin was removed, and whatever the interfering part was got shifted to left by 10 pixels, and hence ur sidebar came up.
May 29th, 2008
oh thanks for the info mate
as you must have noticed that i don't know anything about php
June 2nd, 2008
hey what are you doing to add "If you liked this post, then you can Subscribe to my feed" in every post?
June 2nd, 2008
Saad: I had tried to reply to u when u sent in the msg thru contact form but ur mail address bounced somehow.
Anyways, I'm using my WordPress plugin "Shantz-wp-prefix-suffix", which allows you to add any text or html/css code to the top and/or bottom of your all your posts and/or pages.
You can download it from here: http://tech.shantanugoel.com/projects/wordpress/shantz-wordpress-prefix-suffix
June 3rd, 2008
strange :S it shouldn't bounce
anyways thanks for you help!!!
July 8th, 2008
You save me. thanks!
July 27th, 2008
Instructions for i3theme 1.6, 1.7 (Tested both on WP2.5 and WP2.6)
1. Go to Admin panel
2. Click on Design
3. Click on Theme Editor
4. Click on Stylesheet (style.php) on the right hand side
5. Find " /* sidebar */ " (without quotes, should be through the end
6. Remove "margin-left: 10px;" from #sidebar_right. (For techies: this code is useless because it is already floated right)
7. Go and have a cup of tea
July 27th, 2008
Made a mistake on section 4. The correct file is style.css, not style.php
July 27th, 2008
How to make i3theme WordPress 2.6 compatible (image floating, gray box)?
Add the following code at the end of style.css (directions provided above)
/* WP 2.7 */
/* Captions */
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
padding-bottom: 4px;
margin: 0 10px 0 0;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
display: none;
}
/* End captions */
August 8th, 2008
I added a text widget to the left column and it caused both the middle and right columns to drop down. I have tried removing the "margin-left: 10px;" from #sidebar_right. and sidebar_left,
I also decreased the size of the image that I was placing in the column. I''m not using IE, I'm using Firefox 3 - Please Help - I love the theme
August 21st, 2008
I have the same problem
Wordpress 2.61 with i3Theme Center edition versions 1.6 and 1.7.
SO the right sidebar drop down and now is located under at bottom of main column. I tryed everything described in comments, but no result.
PS
All plugins are deactivated.
PLEASE HELP.
August 21st, 2008
Check if there is some sort of image etc that is bigger than the width of i3theme's sidebar?
October 1st, 2008
Hi , great blog, really helpful, i'm building a few WP sites so there are always a few questions keep up the great posts. I'll be posting more articles on my Web Design Blog http://www.scottydonald.com
March 14th, 2009
thanks very much man
i really needed it
real amazing trick...