Recent Topics

1 Apr 16, 2005 06:59    

Hi all,

I have just completed work on my new skin which validates in all the right places (xhtml, css, rss and atom). I plan to release this skin for use by all of the b2 community. [url=http://www.whittlingwood.com/index.php?blog=3]This is what it looks like[/url].

One little bug that I would like to clear up if possible. The calendar is supposed to have an identical height to the header div in which it sits. This works perfectly in Firefox. But in IE, you get a gap between the bottom of the calendar and the bottom of the header div. Are there any gurus out there who can pounce on this and make the skin render nicely in IE too?

A skin pack for the current iteration of the skin can be downloaded [url=http://www.whittlingwood.com/blue.zip]from here[/url] (to make it easier for you).

Thanks

2 Apr 16, 2005 10:31

Mmmm.... You are up against IE's poor capabilities in handling floats

Your header div is floated left as is the calendar within it...

Search IE Float errors in Google as there is a mountain of information on this IE bug

3 Apr 16, 2005 19:04

Nice skin, by the way!

4 Apr 17, 2005 05:39

Thanks John. I have now had a look and can't find anything specific to this particular float issue. I have decided not to worry about it and take the view that IE users will have to put up with the less-than-perfect css rendering. Another little driver for them to migrate onto Firefox. It looks OK anyway, just not as good as it could.

Urban Sha(wo)man, thanks for the positive feedback. Very glad you like the skin.

6 Apr 17, 2005 06:22

I intended to be a little more verbose there than "wow, dude," but when the cat starts making barfy noises, I hit the post button and run :lol:

This seems like a non-issue to a lot of people, but your skin caught my attention for a particular reason: It's kind to people with bad vision. I have keratoconus, which means that small print can be really rough on me, especially when unusual font colors meet unusual backgounds. Yours is very easy on my eyes - always appreciated!

7 Apr 18, 2005 04:55

Whittler,

This is an intriguing problem. I can offer no immediate "this is the problem" kind-of comment, but I notice several things ... all of which makes me wish that I had the files to try some things.

1) You must be doing a javaScript text replacement (?) to get the black "blog b title" rendered in that special font? (I see no font or background images in the "header" div). Tricky. ;)

2) The calendar height isn't defined, either in the "cal" div or in the <table> construct in the HTML, yet is is "elastic", meaning that a font-size selection in IE expands or contracts the table. (Nice base font definition, btw ... smallest is still readable and the largest isn't explosively large ... see you used 84%).

Things I might try:

(a) Put the "header" div BEFORE the "cal" div in the HTML (might need to pad your "header" div in em's to allow for the elastic calendar width).

(b) Put the "cal" div inside the "header" div and float it left.

(c) One sure-fire way of fixing the problem would be to have all three divs the same height. Using PX's would be too constraining, ems maybe? I know that IE likes "height=100%", so I might just try that to see if it had an effect.

(d) Does changing the header margin 50px to 0px change anything in IE? (Trying to figure out why IE is causing the bottom of thd div to expand.)
If it helps, maybe you could position the header using position:relative; top:50px instead.

Dunno. :-/

That's the trouble with the CSS stuff, it's mostly empirical. I liken it to pushing on a water balloon. A "push" here, to fix the problem, yields a "pop" there, where a NEW problem is seen.

Because it's a liquid design, you're gonna have to expect the "header" div to flow around the "cal" div at narrow widths, but I can see where you'd want to come out of the gate with IE and Ffox looking the same.

Don't know that I've helped, but it might give you an idea or two to play with.

-Scott

8 Apr 18, 2005 05:40

I am pleased to report that I have fixed this bug. Quite by accident too. IE just did not like me using a <h1> tag in the header div. So I created a new div called title and it is all sweet now.

Urban Sha(wo)man - glad to hear is is easy on your eyes.

stk - thanks for all the suggestions anyway. The tricky font thing was borrowed from Graham's London skin. It uses a technique set out in [url=http://www.alistapart.com/articles/dynatext/]this tutorial[/url].

Will submit the new skin for addition as soon as I get a chance.

Thanks all.

Whittler

9 Apr 18, 2005 06:39

Whittler,

Thanks for the replacement text dealie. I'll have to have a peek at that.

BTW, I noticed a replacement-screen.css file that handled an <h1> tag with "visibility:hidden". Was this what you were using for the title div?

That might have been the problem. "Visibility:hidden" actually keeps the space of the element, as if the element were still there (and H1 is a hog, both text-size and margin/padding).

In contrast, "display:none" will collapse the element, as if it were not even there.

Just a thought. :)

Cheers,

stk

10 Apr 18, 2005 08:20

That could very well have been the problem. I also meant to change that so that it handles the new tag div.title. This is to prevent any text from being displayed until the dynamic image replacement kicks in.

Thanks for the reminder. All done now.


Form is loading...