msie mac 5.2 width issues

[Carol Wang]

I'm having an issue with MSIE 5.2 on the Mac. The width of my text
based logo box expands to most of the page and an absolutely
positioned item is nowhere near where it should be.

http://www.daoofsilk.com/about/

I've tested the page on firefox, lynx, opera, mozilla, safari,
konqueror on linux, windows and mac in various combinations. The size
of the logo box changes and there are subtle positioning variances
here and there, but nothing unacceptable until you get to MSIE on Mac
where all hell breaks loose.

I found the MacEdition IE5 bug page, but none of the bugs listed seem
to address what I am seeing.

Has anyone had similar troubles? I'd rather remove all styling for
MSIE Mac than put this bit of chaos out there.

ps. I'm also having troubles implementing a "you are here" effect
using IDs on my global navigation and page-specific CSS in the page
header styling, but I'm also using breadcrumb navigation so if I can't
get that working it's no biggie.

Thanks for any advice and assistance.
--
Carol Wang http://www.daoofsilk.com/ The Dao of Silk
http://www.chineseknotting.org/ The Chinese Knotting Home Page
http://www.skate.org/ Information for the Figure Skating Fan

[kchayka]

Carol Wang wrote:

I'm having an issue with MSIE 5.2 on the Mac. The width of my text
based logo box expands to most of the page and an absolutely
positioned item is nowhere near where it should be.

http://www.daoofsilk.com/about/

Per your stylesheet:
div.logo {
float: left;
}

MacIE follows the CSS 2.0 spec for floats rather than CSS 2.1. This
basically means it does not shrink-wrap floated text blocks like many
other browser do, so it defaults to 100% width. Specify an explicit
width and the problem goes away. I suggest setting the width in em units
so it adjusts with the text size. This might allow getting rid of the
hard line break and those extra non-breaking spaces, too.
text-align:justify should do just what you want without all that extra
markup.

BTW, to avoid any additional rendering quirks you should validate your
code. You have several errors in your CSS, mostly non-zero length values
with no unit specified. You should also change the stylesheet extension
from .html to .css. The server currently assigns it MIME type text/html.
You're lucky (?) you're presenting in quirks mode or some browsers
wouldn't apply the stylesheet at all.

And are you aware that you haven't set any page colors? My browser
default background is not white, nor is my default text color black. The
page looks unfinished. Or was this intended?

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Carol Wang]

kchayka <us****@c-net.us> writes:

Carol Wang wrote:

I'm having an issue with MSIE 5.2 on the Mac. The width of my text
based logo box expands to most of the page and an absolutely
positioned item is nowhere near where it should be.

http://www.daoofsilk.com/about/
I suggest setting the width in em units so it adjusts with the text

Ah, I had tried setting max-width vs width and max-width made no
different whatsoever. Width does the trick though.
text-align:justify should do just what you want without all that extra
markup. I tried justify to start with, but it just wasn't doing what I
wanted. The last line of a justified paragraph is not expanded to
full line length, after all.
BTW, to avoid any additional rendering quirks you should validate your
code. You have several errors in your CSS, mostly non-zero length values
with no unit specified. Oops, the little verified indicator on the bottom of my Firefox lulled
me into thinking everything was verified when it was just the HTML.
You should also change the stylesheet extension from .html to
.css. The server currently assigns it MIME type text/html. You're I'm using .html so that server side includes will run on the file
automagically, allowing browser specific presentation when necessary,
saving me from endless box/voice/comment hacks. Is there a better
"best practice" in this regard?

Here's my role models:
http://www.zytrax.com/tech/web/ssi.htm
http://www.websiteoptimization.com/speed/tweak/xssi/

I was under the impression that the type="text/css" in the stylesheet
link took care of the MIME type of the file.
<link rel="stylesheet" href="/style.html" type="text/css">

I _could_ probably make Apache process SSI on my .css files as
well...
And are you aware that you haven't set any page colors? My browser
default background is not white, nor is my default text color
black. The page looks unfinished. Or was this intended?

I miss my grey backgrounds. Ever since an upgrade nuked my
functioning copy of Netscape 4, all my browsers default to white
backgrounds. 8P

No help for the absolutely positioned item that should be in the right
top corner though, eh?
--
Carol Wang http://www.daoofsilk.com/ The Dao of Silk
http://www.chineseknotting.org/ The Chinese Knotting Home Page
http://www.skate.org/ Information for the Figure Skating Fan

[kchayka]

Carol Wang wrote:

kchayka <us****@c-net.us> writes:

Carol Wang wrote:

http://www.daoofsilk.com/about/

You should also change the stylesheet extension from .html to
.css. The server currently assigns it MIME type text/html.
I'm using .html so that server side includes will run on the file
automagically, allowing browser specific presentation when necessary,
saving me from endless box/voice/comment hacks.

Browser sniffing, whether server-side or client-side, is inherently
unreliable. It is not a good practice. Your current layout isn't all
that complicated, you shouldn't need "endless" hacks for various browsers.
I was under the impression that the type="text/css" in the stylesheet
link took care of the MIME type of the file.
No, it does not.
And are you aware that you haven't set any page colors?

I miss my grey backgrounds. Ever since an upgrade nuked my
functioning copy of Netscape 4, all my browsers default to white
backgrounds. 8P

I'm not sure if this means you assume visitors will have a white
background or not. Don't assume anything. If you expect a white
background and black text, you need to put it in your stylesheet. Adding
background and color properties to the body element rules should cover it.
No help for the absolutely positioned item that should be in the right
top corner though, eh?

Did it occur to you that, if floats need an explicit width, absolutely
positioned elements might need one, too? ;)

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Carol Wang]

kchayka <us****@c-net.us> writes:

Browser sniffing, whether server-side or client-side, is inherently
unreliable. It is not a good practice. Your current layout isn't all
that complicated, you shouldn't need "endless" hacks for various browsers. Nope, it's not complicated now, and I hope to keep it that way. That
said, I have implemented designs for the pixel perfect types that
required multiple unfriendly concessions to MSIE that would have
either necessitated hacks or server side browser sniffing.
I'm not sure if this means you assume visitors will have a white
background or not. Don't assume anything. If you expect a white
background and black text, you need to put it in your stylesheet. Adding
background and color properties to the body element rules should cover it. Browsers, generally speaking, have a default background and text that
have readable contrast. If the user is fine with that why should it
be overridden?

My only concern is that back when I had a functioning Netscape 4.x to
test with, a color of inherit rendered as eye-bleeding green (which
had nothing to do with defaults or intended colours).
Did it occur to you that, if floats need an explicit width, absolutely
positioned elements might need one, too? ;)

Since floats needing an explicit width seemed like an illogical quirk
of MSIE, why should the same apply to absolutely positioned items? 8P

In any case, thanks for your help, it is much appreciated.
--
Carol Wang http://www.daoofsilk.com/ The Dao of Silk
http://www.chineseknotting.org/ The Chinese Knotting Home Page
http://www.skate.org/ Information for the Figure Skating Fan

[kchayka]

Carol Wang wrote:

I have implemented designs for the pixel perfect types that
required multiple unfriendly concessions to MSIE that would have
either necessitated hacks or server side browser sniffing.
I don't know what that means, but it sounds pretty nasty. :)
Browsers, generally speaking, have a default background and text that
have readable contrast. If the user is fine with that why should it
be overridden?
Letting the user's defaults kick in isn't a problem until you start
specifying overrides. In your case, you've set different colors for
header and navbar elements. I sometimes use browser defaults of dark
background and light foreground. Your navbar doesn't work so nicely then.

IOW, if you don't set both background and foreground colors, you could
end up with an unreadable combination.
kchayka <us****@c-net.us> writes:

Did it occur to you that, if floats need an explicit width, absolutely
positioned elements might need one, too? ;)

Since floats needing an explicit width seemed like an illogical quirk
of MSIE, why should the same apply to absolutely positioned items? 8P

The issue was actually one of "shrink-wrapping" an element with no
explicit width. You were expecting it, but MacIE doesn't do it.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.