Hi Please have a look here.

I'm playing around with a css menu and have noticed that in all browsers (except IE7) the menu bar dosn't line up with the background image.

Would it be better to resize the image for the other browsers and then use a conditional comment for IE7?

I'm not sure how to go about doing this in the style sheet though?

Cheers,

This goes against the philosophy of a lot of the people here, but you can send a message to IE7 inside of a stylesheet by prefacing a statement with a star(*), like this:

height: 100px; /*a normal statement that affects all browsers*/
*height: 110px; /*a statement that overrides, for IE7 and below*/

This is considered a hack, because it takes advantage of a bug in IE7 that allows the *statement to be parsed, even though it begins with a strange character, which, if IE7 correctly identified this, would cause it to be ignored.

IE8 will likely correct this bug, since it is extremely famous, and even being used by Yahoo to target IE7 and below.

Abel you realize we now have to throw you out of the club. I think using the hack invalidates your membership card. I'll have to check the documentation.

Darren I'd do it exactly how you suggested. I find conditional comments to be the best solution to IEs quirks. I've seen some think conditional comments are really just another hack, but to me they're the best solution until I see something better.

The way I usually set up conditional comments is:

<!--[if IE]>
<link rel="stylesheet" href="ie-style.css" type="text/css" />
<![endif]-->

and then place any IE specific styles in the ie-styles.css (or whatever you want to name it). You want to place the conditional comment after the code that links to your general styles or IE will end up using the general styles.

You can also target specific versions of IE if you want too.

<!--[if IE 6]>
<!--[if lte IE 7]> lte is less than or equal

Originally Posted by vangogh

Abel you realize we now have to throw you out of the club. I think using the hack invalidates your membership card. I'll have to check the documentation.

Should I just go ahead and change my user title from '$frontend->developer' to 'banned' now?

LOL
The trouble with using a hack is that it's likely to break when the next version of IE comes along - as this one most likely will with IE8. Conditional comments aren't a hack since you are deliberately targeting ONLY the browser that needs the bug fixes. I see it this way - a hack is like a sledgehammer whereas using conditional comments are an exacto knife

I doubt this one will break with IE8, to be honest. It is an extremely well known bug. This depends on your definition of "break", however. I am assuming that most of the rules we are sending to IE7 won't need to be sent to IE8, so when Microsoft fixes the bug, the pages I create will correctly not send the rule to IE8.

If that sounds too risky, keep in mind the _underscore hack. This was a popular and well known bug that people used to target IE6 and below. When IE7 came about, Microsoft fixed the bug and IE7 simply ignored statements beginning with an underscore, as it should. Now, IE6 can be safely targeted this way, as we are totally sure that this bug will not reoccur in the future. I predict that the same thing will happen with the *bug.

Hopefully, IE8 will be so good, that we won't ever need to send special rules to it. I'm hopeful they can do it.

They say IE8 will be standards compliant - and it HAS passed the Acid2 test, so that should help us all a great deal. Unfortunately, until earlier versions die completely, we're still going to have to deal with them.

Hi Rolda,

I'm rather ambivalent about this one, but here is my two cents:

I think your main problem is that you are rather working against youself between your CSS and your markup. That is, you seem to have a decent handle on CSS, but then you are using all kinds of tables to lay out your stuff vis markup instead of CSS. You should really back up your CSS prowess with learning the XMTL that goes with it, kill your tables, and start using div's & CSS to get things where you want them.

While I can't seem to pin point what is throwing things off here, I can tell you that this could be handled much better with divs than with tables.

I would also caution you to at least design for FF, Google Chrome, Saffari, etc. first and then look at IE 7 & 6. Generally, if you get your design dialed in well for FF, etc, it will hold on IE7 too and you may only have a hair-puller on IE 6.

With all of that said, here is an example of your page with a conditional comment used for IE 6 & 7. I generally avoid this sort of thing at all costs m'self, but as I don't expect you're going to work your way out of tables soon, have a look here: http://www.wmsmerchantservices.com/t...p/roofrack.htm

Essentially, I added this:

<style type="text/css">
.fix-header {
 margin-top:7px
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.fix-header {
 margin-top:0
}
</style>
<![endif]-->

Hi Sean,

I agree with you totally about using the tables as well as the CSS -

The problem I have is the client (my boss...) will be updating the pages and absolutely refuses to have a css layout because he has been tinkering with sites for years using tables....

I've convinced him that a CSS menu is better so unfortunately, I have to use the tables below that for his updates - crazy I know but I cant do anything about it...

Originally Posted by rolda hayes

Hi Sean,

I agree with you totally about using the tables as well as the CSS -

The problem I have is the client (my boss...) will be updating the pages and absolutely refuses to have a css layout because he has been tinkering with sites for years using tables....

I've convinced him that a CSS menu is better so unfortunately, I have to use the tables below that for his updates - crazy I know but I cant do anything about it...

Ah yes. The old "make me do something against what I'd advise just because you're the hand that feeds me." What can one do?

Anyways, I hope the workaround I posted works for you.