Stylesheets - I know, I shouldn't pander to IE

Author

I know, I shouldn't pander to IE

hansBKK

2007-07-22, 6:15 am

But as the vast majority of our site's visitors, and all of my
management, are using IE6, I don't have much choice. I am however
designing to Firefox as my primary target, and then tweaking to match
the design in IE, so far just using an alternative stylesheet being
imported within conditional comments.

I also am aware that I should just leave font sizes at the viewer's
default, but my boss has specific design ideas that don't allow for that
- I have designed to account for the visitor increasing the font size
however.

And finally, I am aware that I shouldn't be worrying about pixel-perfect
cross-browser matching, but since I have to load an alternative
stylesheet for IE anyway I'm learning a lot by getting the renderings to
match as closely as possible.

My current prototype version is here:

http://hansbkk.googlepages.com/layout00a03.html

If you load it in Firefox, you'll see what I'm going for.

If you load it in IE6, you'll see several problems, which I have fixed
with the styles below in the IE-only stylesheet.

So now finally my specific questions:

Any suggestions for a cleaner way to get the IE rendering to match FF's?
In other words, different "master" stylings that will work better for
both FF and IE, so I can eliminate (some of) the IE-only overrides?

The biggest problem is the way IE wants to insert breaks between my
left-nav menu list items, fixed with:

#section-nav ul.menu li {
margin:-1px 0;
padding:0;
}

And another killer one is the way the h2 title of that menu is being
hidden in IE "beneath" the background of the horizontal primary nav bar
(no such problem in FF). I've tried playing with z-index, but haven't
got that to do anything at all.

My fix is to drop the whole left nav down below the primary nav,
actually giving a very different look to IE visitors, and I'd REALLY
like to avoid that:

#section-nav h2 {
height:15px;
white-space:normal;
margin:0;
padding:5px 2px 5px 4px;
}

I've also had to give the links a height for IE, which FF doesn't need,
any ideas what's up with that?

#section-nav ul.menu li a,#section-nav ul.menu li ul.menu a {
height:14px;
}

Thanks in advance. . .

Rik

2007-07-22, 6:16 pm

On Sun, 22 Jul 2007 12:10:38 +0200, hansBKK
<aww01.100.hansbkk@spamgourmet.com> wrote:
> I also am aware that I should just leave font sizes at the viewer's
> default, but my boss has specific design ideas that don't allow for that

Ain'tt that always the case :(.

> And finally, I am aware that I shouldn't be worrying about pixel-perfect
> cross-browser matching, but since I have to load an alternative
> stylesheet for IE anyway I'm learning a lot by getting the renderings to
> match as closely as possible.
>
> My current prototype version is here:
>
> http://hansbkk.googlepages.com/layout00a03.html
>
> If you load it in Firefox, you'll see what I'm going for.
>
> If you load it in IE6, you'll see several problems, which I have fixed
> with the styles below in the IE-only stylesheet.
>
> So now finally my specific questions:
>
> The biggest problem is the way IE wants to insert breaks between my
> left-nav menu list items, fixed with:
>
> #section-nav ul.menu li {
> margin:-1px 0;
> padding:0;
> }

Hmm, I don't have MSIE6 here, but I see to remember MSIE rendered
whitespace when it shouldn't. What happens if you strip whitespace between
LI tags?
(So, instead of:
<ul>
<li>item</li>
<li>item</li>
</ul>
use something like:
<ul><li>
item</li><li>
item</li></ul>

The other questions I can't currently help you with due to the lack of
MSIE6. Looks OK in MSIE7 though.
--
Rik Wasmus

Stan Brown

2007-07-22, 6:16 pm

Sun, 22 Jul 2007 17:10:38 +0700 from hansBKK
<aww01.100.hansbkk@spamgourmet.com>:
> But as the vast majority of our site's visitors, and all of my
> management, are using IE6, I don't have much choice. I am however
> designing to Firefox as my primary target,

Bzzt! Don't "design to" *any* browser.

> and then tweaking to match
> the design in IE, so far just using an alternative stylesheet being
> imported within conditional comments.
>
> I also am aware that I should just leave font sizes at the viewer's
> default, but my boss has specific design ideas that don't allow for that

Show him how to set the font size in his browser.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/20...e_wont_help_you

Wes Groleau

2007-07-22, 6:16 pm

hansBKK wrote:
> default, but my boss has specific design ideas that don't allow for that

Tell him he's an idiot and design it the Right Way.

I know that's the way to handle it--Usenet told me so.

--
Wes Groleau

I've noticed lately that the paranoid fear of computers becoming
intelligent and taking over the world has almost entirely disappeared
from the common culture. Near as I can tell, this coincides with
the release of MS-DOS.
-- Larry DeLuca

dorayme

2007-07-22, 6:16 pm

In article <op.tvu5toukqnv3q9@metallium>,
Rik <luiheidsgoeroe@hotmail.com> wrote:

> On Sun, 22 Jul 2007 12:10:38 +0200, hansBKK
> <aww01.100.hansbkk@spamgourmet.com> wrote:
>
> Ain'tt that always the case :(.
>

In addition to what Rik says, and in general, it helps to get
cross browser consistency to zero a lot of styles to begin with
(to avoid the default styles supplied by the browsers) and build
up again, an extreme form of this tactic is

* {margin: 0; padding: 0;}

As for lists, I have used

<ul>
<li>list item</li[color=darkred]
><li>list item</li
><li>list item</li>
</ul>

to fix pesky problems of whitespace.

--
dorayme

Jonathan N. Little

2007-07-22, 10:22 pm

Wes Groleau wrote:
> hansBKK wrote:
>
> Tell him he's an idiot and design it the Right Way.
>
> I know that's the way to handle it--Usenet told me so.
>

Well he is an idiot, but I would craft a more diplomatic way to put it.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Wes Groleau

2007-07-23, 3:15 am

Jonathan N. Little wrote:
> Well he is an idiot, but I would craft a more diplomatic way to put it.

Would you like to join my I-Don't-fit-in-on-Usenet club?

--
Wes Groleau
-----------
Curmudgeon's Complaints on Courtesy:
http://www.onlinenetiquette.com/courtesy1.html
(Not necessarily my opinion, but worth reading)

Jonathan N. Little

2007-07-23, 6:17 pm

Wes Groleau wrote:
> Jonathan N. Little wrote:
>
> Would you like to join my I-Don't-fit-in-on-Usenet club?
>

Do I get a gold star sticker?

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Wes Groleau

2007-07-23, 6:17 pm

Jonathan N. Little wrote:
> Wes Groleau wrote:
>
> Do I get a gold star sticker?

Sure. Send me an SASE and it will be on its way.

--
Wes Groleau

"A miracle is a violation of the laws of nature, and as a
firm and unalterable experience has established these laws,
the proof against a miracle, from the very nature of the fact,
is as entire as could possibly be imagined."
-- David Hume, age 37

"There's no such thing of that, 'cause I never heard of it."
-- Becky Groleau, age 4