Hit a brick wall with Opera

Hi all,

I need the below conditional statement to make IE7 align some images in the center of an outher div instead of forcing them to one side. If it wasn’t for IE7 then this statement wouldn’t even be necessary, works fine in IE8, FireFox, Opera, Safari, Chrome and Flock without it.

The problem is IE7 needs it and when it’s in place Opera does what IE7 does without it. Confusing hey? Basically if I add the statement IE7 works fine but Opera does what IE7 does if I don’t include it.

Why is Opera skipping the below statement? It should execute condition 2 just like all the other browsers.

<!–[if lte IE 7]>
<div id=‘other_merchant_dock’ style=“margin-left: 0px;”>
<![if !IE | gte IE 8]>
<div id=‘other_merchant_dock’>

Thanks in advance,

Thanks both.

I’ll look into it. I believe I tried what you suggest felgall but it didn’t help for some reason, rather made it not work at all. I think I remember changing them from the correct way to the way they are now so non-IE browsers work but at the time forgot to test Opera.

I’ll try and if I can’t fix it I’ll post the CSS.

Seconding what Rayzur said, and expanding upon it since if you are having to send a different margin just because of certain versions of the browsers then you’ve likely got layout issues that run a HELL of a lot deeper than that margin – your entire methodology for building the page in fact would come into question.

But then I consider it a total /FAIL/ at web design to be resorting to conditional comments for CSS, as I’ve never once had to for any layout. It’s what I’ve come to call “asshattery that has no **** business bloating out the markup in the first place”. :smiley:

You never did give us a test case of the code that was causing problems in IE6/7. As I mentioned in my first post we probably could have found what was choking those browsers.

As far as giving IE6/7 their own stylesheet just to say margin-left:0; on one div, I would never do that.
Instead I would target them in your main stylesheet with the star html hacks. They are valid and dependable hacks.

That will also eliminate the need for an IE C.C. on all pages that require that style since your workaround is in the main CSS.
(less mess in the html)

#other_merchant_dock {margin-left:20px;} /*or whatever it is for good browsers*/

* html #other_merchant_dock {margin-left:0;} /* IE6*/

* + html #other_merchant_dock {margin-left:0;} /* IE7*/

Assuming that the content of the <div> is the same in both cases and the only difference is the margin, how about having an additional stylesheet for IE<=7?

After your main CSS declaration, you need
<!–[if lte IE 7]><link rel=“stylesheet” href=“crappy-old-ie.css” type=“text/css”><![endif]–>
then in “crappy-old-ie.css”, you just need
#other_merchant_dock {margin-left:0;}
and any other lines specific to old versions of IE.

Why is Opera skipping the below statement? It should execute condition 2 just like all the other browsers.
Opera or any other browser does not read IE Conditional Comments. IE is the only browser that reads them and all other browsers ignore them completely.

The second CC you posted does not seem to even be needed. It is saying “If Not IE / Or / Greater Than or Equal to IE8 do this”. It is a bit contradicting.

If you needed to target IE8+ you would just say <!–[if gte IE 8]>, no need to say “Not IE” along with it.

I think you need to give us a test case of the code that is giving you problems in IE7, there is probably a better way to handle it.

Well without showing us the page in question, we’re all wildly guessing… but if you are resorting to it just because of image alignments it could be as simple as needing a haslayout trigger somewhere.

Twelve to one it’s also broken a lot more places than you realize… Of course that kind-of goes without saying since it’s broken in Opera due to your IE fix – which means without the IE fix it only works in Gecko. How does webkit handle it? What does large fonts/120 dpi mess with it?

Though with the fat bloated jquery bull likely ruining a perfectly good page…

If having to use IE conditional statements every now and then to fix up some errors popping up in IE6 and IE7 (since IE8 actually behaves itself, which is a relief) is a no-no and means an entire website layout is an epic fail, then why were they introduced?

Just curious, surely there must have been a reason?

Anyway. Giving you guys the CSS won’t reveal much more since the DIV causing the problems was this:

#more_voucher_codes_dock {
margin: -30px 0px 0px 49px;

Of course there are other DIV’s around that DIV in the code but never have they caused problems in IE6/7.

The whole problem only occurs when the above DIV gets used by the jqdock plugin as it’s dock container, which unless it gets fed a “margin-left:0;” in IE6 and IE7 causes the images within that dock to load on the right, instead of in the middle (it’s a vertical dock).

It’s a CSS meets JQuery type conflict, i.e. not pure CSS.

As far as I could deduct, it’s a bug in jqdock but only when setup as a vertical dock, horizontal docks work supa dupa. Anyway, I see version 1.5 is out now so perhaps this bug is fixed (all my testing was with version 1.4).

Perhaps the site layout is an epic fail, but then errors would show big time in most if not all browsers (new or old).

You can’t place IE conditional comments into HTML without making them comments if you expect them to not break the HTML.

<![if !IE | gte IE 8]>

needs to be coded as

<!–[if gte IE 8]><!–>

if you want it to work in browsers other than IE.

Tried what you suggested and it’s spot on, works a treat and also means less lines of code, which is a nice bonus.


Thanks for adding this extra info.

I didn’t provide the CSS since I figured it out via adding an additional stylesheet. I just didn’t see the need to tax you guys more with lines and lines of CSS unless I had no option.

I did hear/know about the star html stacks but never used them myself, which is probably why I forgot about them too.

Your not inflicting any burden on us, debugging code is what we do around here. :slight_smile:

The whole point I have been trying to make all along is that we might be able to show you how to make your problem code (whatever it is) work x-browser WITHOUT any hacks at all.

When I say “Give us a Test Case” what I mean is set up an example of the problem (CSS & HTML). Or give us a link to the page and point out the problem.

We will never know what the problem was until we have something more than margin-left:0; to look at. :wink: