right widgets cut off in IE, Firefox-right sidebar text smaller than on left sidebar

From the author of Atahualpa, the #1 mostdownloaded (700,000+) theme @ wordpress.org

#1

Feb 21, 2009, 05:39 AM

daisy24

40 posts · Feb 2009

Hi Flynn,

I had been working in Firefox and can't get the text on the left and right sidebar to match. I like the way it is on the left side.

I just looked at the blog in IE, and the sidebar text looks the way I was trying to get it on both left and right sidebar. But I see several widgets are cut off. If I make the sidebars wider, then the left sidebar is a lot further from the center white area than the right sidebar. I wanted to keep the white center portion the same size it is now.
Is there a way to fix these?

There's an unclosed <small> tag in the right sidebar right after the "Mohair Divas" badge, which is causing all the following text to be set to "small" in Firefox, while IE ignores it.
There's also an unclosed <a> tag. Both are at the bottom of the text widget with the "Mohair Divas" badge

As for widgets getting cut off in IE. That's because a few of your images are too wide for the given sidebar width. In FF they are overflowing (which is desirable in your current situation but often is not desirable) whereas in IE they are not overflowing. I understand what you problem is and suggest this

2.a)

Horizontal scollbar at the bottom of the browser viewport at 1024px screen size if you don't sacrifice 30px of the middle column.

Increase the right sidebar width from 150 to 240px;
Increase the left sidebar width from 150 to 240px;
Increase the layout width from 850 to 1030px;

Add via HTML/CSS Insert -> CSS Insert

HTML Code:

td#left {
padding-left: 100px;
}

- Alternativly sacrifice 30px of the middle column and make layout 1000px for no horiz. scrollbars for visitors with up to 1024 screen size

2.b)
Alternatively allow layout to be 30px too far on the left and not exactly centered.

Increase the left sidebar width from 150 to 210px instead of 240;
Increase the layout width from 850 to 1000px;

Add via HTML/CSS Insert -> CSS Insert

HTML Code:

td#left {
padding-left: 70px;
}

3.
For the Ellifolks.com image to be left aligned in IE
Add via HTML/CSS Insert -> CSS Insert

HTML Code:

div#text-360224761 {
text-align: left; /* Ellifolks image */
}

The number of the text widget might change if you remove and add it again. Alternatively edit the text widget and add <img style="float:left" src=... to the image (only the bold part)

Quote:

Originally Posted by daisy24

(donation made today :-) )

Thank you, Ellen

Quote:

Originally Posted by daisy24

Hi Flynn,

I had been working in Firefox and can't get the text on the left and right sidebar to match. I like the way it is on the left side.

I just looked at the blog in IE, and the sidebar text looks the way I was trying to get it on both left and right sidebar. But I see several widgets are cut off. If I make the sidebars wider, then the left sidebar is a lot further from the center white area than the right sidebar. I wanted to keep the white center portion the same size it is now.
Is there a way to fix these?

Hi Flynn, I was able to fix the text on the right sidebar. Thank you!! For the sidebars, I have 850px layout and 150px sidebars on both sides. I wanted the center part to stay centered. I was able to change two of the widgets so they fit.