PDA

View Full Version : Targeting CSS code to IE7


johnnyb
03-25-2006, 01:25 AM
Hello all,

With the release of IE 7 the other day and it's more or less final rendering engine I have started testing my sites with it.

And, as the star hack, (* html), has been removed but not all CSS has been properly implimented I now need a way to target CSS statements at IE 7. Also, I used to be able to use the > to target stuff at other browsers but not IE, however IE7 understands this. Any ideas on how to target IE7 specifically? I would prefer to not use conditional comment tags.

The problem I am having currently is with my suckerfish (http://www.htmldog.com/articles/suckerfish/dropdowns/) dropdown menu at http://www.johnbeales.com. It aligns the dropdown menu with the right side of the parent, as opposed to the left like it should, (and like everything else does).

Hopefully we can come up with something.

John

mark87
03-25-2006, 01:31 AM
The only (I think) and best (recommended) method is to use conditional comments.

drhowarddrfine
03-25-2006, 01:43 AM
IE7 was NOT released the other day and it is still in preview beta 2 mode.

What is interesting is if the problems you are having are related to IE7s (finally) fixing of some of the IE bugs and your having trouble writing standard code :)

johnnyb
03-25-2006, 01:50 AM
Holy C***! Have a little finesse and check out the code before insulting someone will you?

Sorry, I meant to say the version released the other day of IE7.

The problems I am having are not related to me having trouble writing standard code, as everything works fine in every other browser which I am capable of testing in, (ie, everything on a Windows platform).

Again, watch your mouth.

orcrist
03-25-2006, 10:16 AM
trouble writing standard code
is meant to say that regular way to adress specific browser is conditional comment, not hack, be it holly or not.

drhowarddrfine
03-25-2006, 12:04 PM
Gee johnnyb, are you that sensitive? I even put a little smiley face there. I said I was wondering if IE7 is screwing you up not that you are screwed up.

orcrist
03-25-2006, 12:46 PM
you didnt gave it a cup of cocoa


ah, those ballet divas :p

oldcrazylegs
03-25-2006, 03:58 PM
conditional comments
http://www.javascriptkit.com/howto/cc2.shtml

jkd
03-25-2006, 05:16 PM
http://www.brothercake.com/site/resources/reference/xxx/

johnnyb
03-25-2006, 05:26 PM
Ok, sorry about that drhoward - you caught me on a day whan I was tired AND sick AND already grumpy ;)

I just really don't like conditional comments because a) they're SO proprietary, and b) I have to break my CSS into two different parts.

That link from jkd has exactly what I am looking for. While not as elegant as * html it appears to work. Thanks!

John

VIPStephan
03-25-2006, 05:36 PM
[...] While not as elegant as * html it appears to work.
I find conditional comments much more elegant than this hack because it keeps your CSS file clean of "grubby" code.

Bill Posters
03-25-2006, 07:02 PM
Indeed. I second the view that CCs are a better, cleaner, clearer and more maintainable option than BC's 'Triple-X' hack.

Brothercake knows his stuff and he surely deserves respect, but I'm not convinced of the wisdom of using so many rules to address so few browsers. It simply seems too contrived and, imho, smacks a little of wanting to be the first to publish a working IE7-specific hack, no matter how (im)practical.
It may be a good find, but it's not one I'll be using or recommending, at least, not when CCs are an option.
However, as BC has previously pointed out elsewhere, it's sometimes necessary to implement fixes without having access to the markup docs. So, for this reason, I have it noted for possible use in those rare occasions.

Skyzyx
03-25-2006, 08:03 PM
It should be worth noting that the March 20th build of IE7 Beta 2 is "layout complete" meaning that this build will render pages the same as the final will.

Secondly, you can find info in IE7's CSS Compatibility at MSDN (http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/cols/dnexpie/ie7_css_compat.asp) (hasn't yet been updated for the latest build, but most likely will be soon).

Third, if you want to run IE7 in standalone mode, check out the IE7 Launch Script (http://weblogs.asp.net/jgalloway/archive/2005/12/28/434132.aspx) (since the .local trick alone doesn't work for this build).

kewlceo
03-25-2006, 08:55 PM
It should be worth noting that the March 20th build of IE7 Beta 2 is "layout complete" meaning that this build will render pages the same as the final will.

Interesting. I wonder if the latest build is compatible with WinXP 64bit yet? Anyone know?

johnnyb
03-25-2006, 09:12 PM
The fact that the latest build is 'layout complete' is why I actually downloaded IE7, (which I run using the launch script), and upon discovering some problems started this thread.

For kewlceo, it doesn't look like it's out for XP 64-bit yet. Refer to this webpage (http://www.microsoft.com/windows/ie/ie7/ie7betaredirect.mspx), and the small text at the bottom.

Skyzyx
03-25-2006, 10:38 PM
If you prefer a hack, then the triple-x hack is probably the way to go. However, my experience has taught me that conditional comments are a much more maintainable method over the long term.

kewlceo
03-25-2006, 11:36 PM
For kewlceo, it doesn't look like it's out for XP 64-bit yet. Refer to this webpage (http://www.microsoft.com/windows/ie/ie7/ie7betaredirect.mspx), and the small text at the bottom.
Thank you! :thumbsup:

brothercake
03-25-2006, 11:53 PM
It simply seems too contrived and, imho, smacks a little of wanting to be the first to publish a working IE7-specific hack, no matter how (im)practical.
There was an element of that, yes :D

But still, it was important to me to find the smallest and cleanest hack that I could, and that's it. Ultimately I wrote it because I needed it to patch UDM4 for IE7 - because IE7 does still have some of the same bugs as IE6, and a couple of new ones, but most of the old IE6-specific fixes don't work anymore, as we know.

In that situation, the output environment is beyond my control - I can't employ HTML hacks or anything else external to the stylesheet, it has to work as a single, inline hack within the context of a single stylesheet having rules for all browsers.

And under exceptional circumstances - clients demand pixel-perfection across browsers because the menu has to be able to slot-in to an existing design without forcing it to change. But most of the time we have more leeway than that, and can allow for a degree of presentational drift.

So I would say for the most part, don't use it. When I write production CSS for a regular site or application, I try very hard not to use hacks at all, and when I do, I keep them to the broadest and simplest ones I can. If I find myself with so many variations for IE that I need another stylesheet just to keep it manageable, then I start to wonder whether the core CSS needs re-doing.

felgall
03-26-2006, 09:09 PM
Pixel perfection across all browsers is impossible to achieve. You would probably need 100Tb of hacks just to come close as there are thousands of different browsers out there. Many mobile phones and web readers wont even be capable of displaying the layout the way you want and unless the page uses a fixed 544 pixel width for the layout web TV will certainly screw up too.