Pesky Mac IE browsers...

[EdwardMartinIII]

I have a page at

http://www.petting-zoo.org/index.html

and its CSS is

http://www.petting-zoo.org/Style2003.css

It seems to appear just dandy form any machine i can get my hands on, but I've recently heard from a couple o Mac/IE users that the body forms a narrow column of text along the left.

[ol][li]Is this so? Do you Mac users see this?[/li]
[li]If so, does this do the same thing under other Mac browsers?[/li]
[li]Is there something obvious I've done wrong in the CSS to make this happen?[/li]
[li]What can I do to eliminate that "column" effect?[/li][/ol]

Thanks in advance!

Cheers,


Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

 

[Vragabond]

ICapture showed me this picture (warning, it will expire in 24h) which means it shows the same result as PC. I guess your problem is outdated IE for Mac and his notorious CSS support.

 

[BillyRayPreachersSon]

Which version of IE for the Mac were you seeing the problem on? Just like Windows, there are many versions, and some of the really old ones are buggy. But the newer ones seem to work just fine if you can code good CSS and HTML.

Dan

 

[BabyJeffy]

The problem is resolved with the following changes to your style sheet:

div.MenuItems
{
	float:right;
	clear:both;
}

ul.MenuList
{
	color: #000000;
	background-color: #99cc99;
	border-width: 1px 3px 3px 1px;
	border-style: solid;
	border-color: #000000;
	list-style-type: none;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 40px;
	width:100px;
	margin-left:10px;
}

Basically move the float:right from the menulist style to the parent container. The width needed to be set on the menulist style as well... otherwise it defaults to the width of the page (100%). I set this to 100px and it works very well at all screen resolutions on IE 5.2.3 (MacOSX). Adding a margin-left also assists visually in handling the body text that wraps about it.

It doesn't look identical to your original (because of the width addition)... but under Safari, FireFox and IE for MacOSX, and (IE, Opera, Mozilla for Windows) it looks fine (now).

Jeff

 

[EdwardMartinIII]

Just in case y'all were wondering...

My Mac tester said there was still a problem, but he hasn't ponied up a screenshot yet. When he does, I'll get back into this problem.

Thanks!


Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door