CSS hacks are evil.  They are worse than the C++ preprocessor because they are undocumented.

In fact, they are bugs that should and most often are fixed in later versions.  For example, IE7 fixes many CSS bugs resulting in many of these sorts of hacks no longer working.

Please do not use CSS hacks.

-[Unknown]


> In article <e5vgbg$2efc$1@digitaldaemon.com>, Walter Bright says...
>> I took out the:
>>
>> 	height=0;
>>
>> lines in www.digitalmars.com/d/style.css, so it works in mozilla, but now it doesn't look right in Explorer (excessive vertical spacing).
>> Also, the tabs on the upper right are one pixel too low in mozilla.
>>
>> Anyone know how to write a style sheet that will work in both?
> 
> Rather convinently, IE will still process any rule that begins with '//'.  As
> all browsers will follow the last declared instance of a rule, you can exploit
> both behaviors like so:
> 
> foobar{
> height: 1px;
> //height: 0px;
> }
> 
> .. where Mozilla will obey the comment and use 1px, and IE will follow both and
> use 0px due to the ordering.
> 
> While I don't advocate using stylesheet hacks like that, sometimes, its the
> fastest workaround available.
> 
> - EricAnderton at yahoo

Walter Bright wrote:
> But in Mozilla, there is still excessive spacing above the "Community" and "Archives" thing, that isn't in Explorer.

to .navblock h2, add:

margin-top: 0px;

My suggestions:

This won't affect anything, but you are using HTML 4, but your head element's children are all closed in the XHTML manner.  Just search and replace " />" with ">".

I've made a diff with suggested changes.  These make it look better, in my opinion, on Internet Explorer and Firefox.  I will check it on Safari shortly, and possibly offer additional suggestions.

Most important is setting the default margin back to 0 for the form tag, fixing your immediate concern, and placing padding and such styles in the right place for ditsy IE.

Hope that helps,
-[Unknown]


> I took out the:
> 
>     height=0;
> 
> lines in www.digitalmars.com/d/style.css, so it works in mozilla, but now it doesn't look right in Explorer (excessive vertical spacing). Also, the tabs on the upper right are one pixel too low in mozilla.
> 
> Anyone know how to write a style sheet that will work in both?

In article <e5vkpt$2kf2$1@digitaldaemon.com>, Unknown W. Brackets says...
>
>CSS hacks are evil.  They are worse than the C++ preprocessor because they are undocumented.

The problem you cite is due to the *exact* same phenomenon that web developers have to cope with.  The more compilers/browsers you support, the more you have to dance around all the quirks and deviations from the specification. Unfortunately, the code that adheres to the strictest interpretation of any such supported standard will have the hardest time as they will have to bend over backwards avoiding all of these compatibility problems.  Its possible, but not always practical.

I agree that CSS hacks are a technique that should be avoided if possible.  But a smart coder can always stack the rules such that they degrade *twoards* compliance.  The hack I outlines does just this: if IE were patched to do the right thing, the page would still render correctly. :)

- EricAnderton at yahoo

Eric,

My day job is web development.  I write HTML/CSS, and I do dynamic pages as well in various languages (primarily Flash or JavaScript client side, or PHP server side.)  I'm not strong in Flash, but I'm pretty strong in HTML, CSS, JavaScript, and PHP.

I work with this every day, and I never use CSS hacks.  I'm consistently able to write CSS and HTML that works in Mozilla 1.0, Internet Explorer 5.0, and Safari 1.3 (and usually Opera, but we don't officially support that one.)  It isn't hard, people just jump to wanting to use hacks too quickly.

In fact, I used to support Opera and Internet Explorer 4.0 officially when I worked freelance.

Anyway, as far as I remember, the CSS spec does not include // as a comment, only /* */ multiline comments.  If I am correct, this means that Mozilla is doing the wrong thing here.

Please see for reference:
http://www.w3.org/TR/REC-CSS2/syndata.html#comments

Thus, if Mozilla were correctly patched to better follow the spec in this case, it would break again.  Better to fix it the right way.

Please do not take what I've said as condescending or snooty; I'll admit it flares me up a tiny bit when people start using CSS hacks since it's so easy not to, but understand that I wouldn't bother to say this if I thought it was falling on deaf ears or if I had no respect for your opinion.

-[Unknown]


> In article <e5vkpt$2kf2$1@digitaldaemon.com>, Unknown W. Brackets says...
>> CSS hacks are evil.  They are worse than the C++ preprocessor because they are undocumented.
> 
> The problem you cite is due to the *exact* same phenomenon that web developers
> have to cope with.  The more compilers/browsers you support, the more you have
> to dance around all the quirks and deviations from the specification.
> Unfortunately, the code that adheres to the strictest interpretation of any such
> supported standard will have the hardest time as they will have to bend over
> backwards avoiding all of these compatibility problems.  Its possible, but not
> always practical.
> 
> I agree that CSS hacks are a technique that should be avoided if possible.  But
> a smart coder can always stack the rules such that they degrade *twoards*
> compliance.  The hack I outlines does just this: if IE were patched to do the
> right thing, the page would still render correctly. :)
> 
> - EricAnderton at yahoo

Just to note, it looks fine in Safari with these changes; and thus looks the same in all those (most popular) browsers.

Unfortunately, it doesn't look exactly the same in Opera 7 and above, but the difference is extremely minor.  The black line at the top and the buttons above it have no padding between them.

An additional change I suggest is the following:

 .navblock h2
 {
 	font-size: 120%;
 	padding-top: 0px;
+	margin-top: 0;
 	margin-bottom: 0px;
 }

But this is a cosmetic change to all browsers that is based solely on my personal preference.

I should also note that the comments on the front page overflow the 600px containing box with my fonts.  You can solve this either by adding a scrollbar or by extending the size of the box in this case (which is a pain in IE, but possible.)  Or you can hide the overflow (not my favorite) or leave it hanging out there.

-[Unknown]


> My suggestions:
> 
> This won't affect anything, but you are using HTML 4, but your head element's children are all closed in the XHTML manner.  Just search and replace " />" with ">".
> 
> I've made a diff with suggested changes.  These make it look better, in my opinion, on Internet Explorer and Firefox.  I will check it on Safari shortly, and possibly offer additional suggestions.
> 
> Most important is setting the default margin back to 0 for the form tag, fixing your immediate concern, and placing padding and such styles in the right place for ditsy IE.
> 
> Hope that helps,
> -[Unknown]

Walter Bright escribió:
> I took out the:
> 
>     height=0;
> 
> lines in www.digitalmars.com/d/style.css, so it works in mozilla, but now it doesn't look right in Explorer (excessive vertical spacing).
> Also, the tabs on the upper right are one pixel too low in mozilla.
> 
> Anyone know how to write a style sheet that will work in both?

Not good with Camino. Ok with Safari, although the buttons look a bit weird.

-- 
Carlos Santander Bernal

Thanks, I've folded in your suggestions.

Make sure to clear your cache.  When I first looked at it, it looked horrible in Firefox.  I had to press Ctrl-F5 (probably different in Camino; possibly Apple-R.)

I may check it at some point with Camino.  In my experience, it's rare to have problems with that browser because it's basically just Gecko.

-[Unknown]


> Walter Bright escribió:
>> I took out the:
>>
>>     height=0;
>>
>> lines in www.digitalmars.com/d/style.css, so it works in mozilla, but now it doesn't look right in Explorer (excessive vertical spacing).
>> Also, the tabs on the upper right are one pixel too low in mozilla.
>>
>> Anyone know how to write a style sheet that will work in both?
> 
> Not good with Camino. Ok with Safari, although the buttons look a bit weird.
> 

Unknown W. Brackets escribió:
> Make sure to clear your cache.  When I first looked at it, it looked horrible in Firefox.  I had to press Ctrl-F5 (probably different in Camino; possibly Apple-R.)
> 
> I may check it at some point with Camino.  In my experience, it's rare to have problems with that browser because it's basically just Gecko.
> 
> -[Unknown]
> 
> 
>> Walter Bright escribió:
>>> I took out the:
>>>
>>>     height=0;
>>>
>>> lines in www.digitalmars.com/d/style.css, so it works in mozilla, but now it doesn't look right in Explorer (excessive vertical spacing).
>>> Also, the tabs on the upper right are one pixel too low in mozilla.
>>>
>>> Anyone know how to write a style sheet that will work in both?
>>
>> Not good with Camino. Ok with Safari, although the buttons look a bit weird.
>>

Wow, magic... lol... That did it. Thanks!

-- 
Carlos Santander Bernal