April 14, 2004

Mac User Help?

There's been a small amount of back-and-forth at my site about how my blog's CSS renders on Internet Explorer for the Mac. I use IE6 on a Windows box, but try to preview any style changes in both Opera and Firefox, too. A day or two ago, Little Miss Attila noted: "Thought you'd want to know that the boxes on your sidebar are migrating a little to the left on my display (Mac/IE) and are obscuring some of the text in your entries."

After I changed the CSS to use floating divs with set margins, Madfish Willie suggested that I use aboslutely-positioned divs.

Hmm. Strange, because that's exactly how I laid out the blog in the first place (to avoid compatibility issues like this!) Here's the original code:


#content{
position: absolute;
top: 105px;
left: 5px;
background:#FFF;
border:2px solid #000;
width:70%;
}
#links{
position: absolute;
top:105px;
right:5px;
background-color#b0c4de;
padding:15px;
width:25%;
}

As you can see, except for the variable width (for which I left a 5% margin of error), I nailed down all of the other margins.

I hope Attila Girl (or another Mac IE user) can let me know whether my new code works. And if there are any CSS users, I would welcome input on what was wrong with the original code. Thanks!

Posted by JohnL at April 14, 2004 03:47 AM
Comments
#1

As of now (12:30 a.m. Wed., Pacific time, USA) the news is not good.

Measured in terms of how many characters in your text are obscured by the boxes shifting left, you're losing 1-2 characters on some lines. Measured by how out-of-alignment the boxes appear, I'd say you're off by a half inch or better.

Sorry!

Posted by Little Miss Attila at April 14, 2004 08:35 AM
#2

I'm running Safari on a MAC in OSX 10.3.3 and I have not had this problem. I held my nose lone enough to check it out in IE 5.2 and it looked fine.

This probably only helps to confuse matters for you though!!

Miss Atilla,

If you haven't tried it yet - try reducing the font size in your browser window (command -) if that doesn't help try changing the resolution of you monitor to a higher setting. If I'm suggesting things you already know - just tell me to go away!! ;)

Posted by Stephen Macklin at April 14, 2004 11:23 AM
#3

Stephen,

Thanks for the feedback!

One of the promises of properly-formed CSS is to have a "liquid" site design that scales to the resolution and font size. Having the percentage widths should have compensated for a much lower screen resolution. I hate to impose on users just so they can read my site. I'll try again tonight with a 600 by 800 resolution and larger font size to troubleshoot.

Thanks again!

Posted by John Lanius at April 14, 2004 02:12 PM
#4

Mr John:

It seems that you are having problems with one particular browser. May I ask if their browser can be updated? I've recently started using Mozilla 1.6 (after much maligning of the Mozilla Monsters) and it is the greatest thing since peanut butter and banana sandwich on toasted bread.

Perhaps a solution to your problem can be found at CSS Box Modle Hack. It has several possible solutions for you to experiment with, although it looks like A Modified SBMH (Tan hack) or Alternate Box Model Hack - Technique 3 look like the easiest to implement. Let us know how you work this out.

Posted by Madfish Willie at April 14, 2004 05:08 PM
#5

One of the promises of properly-formed CSS is to have a "liquid" site design that scales to the resolution and font size.

Bwahahahahahahaha! Ow, stop it, you're killing me! :D

Posted by Pixy Misa at April 14, 2004 06:05 PM
#6

Madfish, Thanks for the suggestion on the box model hacks; I saw some of those when I first looked into this problem. Call me a masochist, but I've been trying to avoid using "hacks," hoping I could fix this by playing by the rules (don't laugh too hard, Pixy) even though browser programmers may ignore those rules.

After reading Stephen's note, I experimented with lower resolutions and higher font sizes and was able to "break" my design in all three browsers I have to test with, so I went ahead and restored my original CSS. (At the 640 x 480 setting with large text, most everyone's sites look broken, including several Munuvians').

I'll do some more tweaking and update to let y'all know how it turns out.

Posted by John Lanius at April 14, 2004 11:19 PM
Live Comment Preview
Post a comment









Remember personal info?