max-width and excess padding in ie

[Historical Forums User]

Hey guys,

With the help of Chris’ tutorials I’ve created a website for my local jiu-jitsu club running on WordPress:

http://tinyurl.com/cnqjhc

I’ve got 2 issues at the moment that I’m having some trouble solving.

1. If you scroll to the bottom of the page you can see I have a selection of widgets. If the title of any of those posts goes over a certain character length whatever widget is at the end will get pushed out of the flow. The longer the title the more damage it inflicts to the design.

Initially I tried max-width but this fails in to work in IE 6(if you check, you can see what I mean). Can anyone recommend a hack to get this to work? I did attempt using a PHP function to trim the title length down and add a hellip but I cannot get this function to work. I think I would need to alter the core of WordPress to get this to work which I’m not comfortable attempting as my PHP knowledge isn’t great. Plus it’s not very flexible if they decide to change the theme.

2. Why is IE adding a horizontal scroll bar? For some reason there is additional padding on the right. I don’t know what’s causing that.

3. Images on the right, because of the round design of the images they’ve got a white background. Ideally I would like them to have a transparent background but maintain the quality. What’s best to use so that it’ll work across all browsers? Initially I threw them on as jpgs just to get the site up and running. Now I’ve come back to tweak it and finish it off.

Any additional tips / advice would be appreciated.

[TheDoc]

1. I can’t get the problem showing in FF3. Made the title a paragraph long and everything held properly together. What browser are you experiencing this with? Wraps perfectly for me!

2. I see no h-scroll bar in ie6 or ie8. Can you only see it in ie7?

3. If you want a transparent background, the best you can use right now is a png-8. Allows for full transparency and works in all browsers. Here’s a screencast to get you started: http://www.brenelz.com/blog/2009/01/27/ … creencast/ (Note: Requires Adobe Fireworks)

[Historical Forums User]

Sorry, I missed that.

1. IE 6 only.

2. IE 7 only.

3. Thanks for the link, I’m checking it out now.

For the first problem I did find this which does fix the issue but I would have to settle for really narrow columns.

Code:

I’ve taken it off for now so others can see the issue with ie 6.

** I found another issue as well. In Opera the footer doesn’t stick to the bottom. Darn it :lol:

Lots of things to iron out.

[Historical Forums User]

I fixed the horizontal scrollbar issue in ie 7.

Here’s the fix if your interested:
http://www.brunildo.org/test/ie7_ithscroll.html

I learnt a few things from that PNG tutorial. The first being that there is a huge difference between save as and export in Fireworks when saving files :lol:. And Fireworks kicks Photoshop’s ass for saving PNG files in general. It’s a shame IE 6 renders PNG 8 differently to all the other browsers. The image I tested it on looks great in all browsers except IE 6 which serves the image with a noticeable fuzzy edge. Such a shame.

[Author]

Posts