Helllllp! IE screws up my new template!

[judebert]

If my kids don't do it first, IE is going to drive me insane.

I've been trying to create a new template based on the Holy Grail. I've figured out how to make it adjustable two- or three-column, with the content always first in the HTML for search engine optimization. I couldn't get the "IE7" script to reliably process PNG images, so I hacked the CSS to use GIFs for the IE users. I also figured out how to keep the sidebars from expanding with the "overflow" attribute.

My new CSS trick for this template is drop shadows. All the sidebar items and entries have them. However, the newsboxes are refusing to work in IE. To show off my new Smarty-compliant newsbox plugin, I made them fieldsets (by default, they're divs). Each is set to a width of 47% and floated left. In FF, they show up side-by-side, with drop shadows, as intended.

In IE, the fieldsets take up a huge chunk of screen (although the contents only take up about 47% of their container), forcing them to sit on top of each other. And the drop-shadows are either tiny or overlapping (turning them black), and they change if you scroll up and down the screen.

The banner text is also having trouble. On my IE, it's not displayed at all until you scroll it off screen and return to it. Then it looks fine.

I'm hoping some kind soul (<whine>Carl</whine>) will have a look and tell me what I'm missing here. This is a work in progress, so don't expect to be impressed or anything. To see what I'm talking about, visit judebert.com and choose the Ladybug template.

Thanks in advance,
Judebert

[garvinhicking]

I feel your pain!

If Carl can't help you [it's certainly outside of my experience scope] you might want to try a CSS/HTML related forum for help?

The template looks quite nice - even though I personally disagree with the colorset

Best regards, and keep your hopes up,
Garvin

[carl_galloway]

Judebert,

If only we could get rid of IE, and by the way have you seen what Opera does to your theme? Completely mangled. I remember reading something a long time ago that IE doesn't play nice with fieldsets, at the time I was playing around with a quote form for my business website, and I think I had to hack my stylesheet to make it work with IE.

I would love to have a play with your theme if that's ok with you but I haven't got any suggestions right now, and my significant other half, who is the most beautiful woman in the world, is subtly hinting I need to spend less time in front of this screen.

If you aren't in too much of a hurry, would you want to send me the zipfile, including your newsbox (is it available to download). I'll install the theme on my pc, have a play around, then email any changes I make back to you. My email address is webmaster [at] carlgalloway [dot] com.

[garvinhicking]

Hi Carl!

and my significant other half, who is the most beautiful woman in the world, is subtly hinting I need to spend less time in front of this screen.

Take this hint seriously. No line of code can replace what we get by the "significant other half" of our lives.

Even if you only spent half of the time of what you're seeming to do now on the s9y-Templates, we would still all be very happy people. Thanks for the work you're doing! )

Best regards,
Garvin

[judebert]

You're the only person ever to visit my site using Opera. Not that I've got much traffic or anything.

Oh my. Well, that's not... too bad. Except for the missing pieces. Urgh. Is there an EditCSS plugin for Opera?

I'll zip it up sometime later and send it on. Thanks. (Really, I can't agree with Garvin enough; spend some time with your wife. It always pays off.) Meanwhile, I'll see what I can find about IE fieldsets.

Incidentally, someone was asking about a red theme not too long ago. I picked the colors off an online wheel. Nevertheless, my wife hates the red background. I plan on changing it to a picture. Sometime.

[judebert]

AH-HA!

Google enough and eventually you'll find the problem. While I'm not entirely certain, it looks like the "Escaping Floats" problem. In any case, the solution was to apply a default, very small height for the container. The container will expand to contain the contents.

This is more appropriate to a CSS forum, but unless Garvin shoos me away, I post in this Serendipity Themes forum for other theme-makers:

IE goes crazy in multiple, unusual situations.

If you intend to use floats in your IE-enabled theme, include a height for the float container like this:

Code: Select all

.container{
  height: 1%;
}

.. or you'll get the same headache I've had for weeks.

IE handles the <legend> tag unusually. If you intend to include <fieldset>s, be aware that your styling could be problematic.

Incidentally, Ladybug currently works in IE6, FF, and Opera. All I've got to do now is fill out the auxillary stuff (comment, trackback, archive) and fiddle with the IE box model. Woo-hoo![/code]

[carl_galloway]

What a ridiculous fix, but I'm glad its working for you. How would you know to apply this kind of workaround if you didn't have google, the people at MS should really take some responsibility for their incompetence.

By the way judebert, I did get your email, and haven't had an opportunity to look it over with the new year celebrations. My partner and I really wanted to make this one special and work our our goals for the coming year.

On the other hand, it looks like you're making significant progress...

Cheers
Carl

PS Happy New Year Everyone!