1 whittler Apr 16, 2005 06:59
3 urban_sha_wo_man Apr 16, 2005 19:04
Nice skin, by the way!
4 whittler 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.
5 john Apr 17, 2005 06:17
[URL=http://www.google.com/search?q=IE+Float+bug&sourceid=mozilla-search&start=0&start=0&ie=utf-8&oe=utf-8&client=firefox-a&rls=org.mozilla:en-US:official]Google IE FLOAT BUG[/URL]
You maybe surprised what you learn, especially from the the links to POSITION IS EVERYTHING
6 urban_sha_wo_man 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 stk 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 whittler 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 stk 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 whittler 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.
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