IE is killing me

As always, look s great in Firefox but IE7, IE8 there is an image that has disappeared. If you look at this site in firefox by following this link and then look at it in IE you will see that the bottom right image is gone. This is a Joomla site with a Virtuemart template. Can not figure it out for the life of me. I tried changing the div’s overflow:hidden to visible but that didnt work either. I just wanted to see what IE was doing with that image. Is is completely gone.

I hoping that when I fix this it will also fix the problem of the products showing up in a single column in IE when it should be two columns.

Many thanks,

You have several syntax errors on line 185, including a missing “>” on the anchor tag. Any of these could cause catastrophic anthropogenic rendering disruption in IE. IOW, IE is more sensitive to errors, big and small, than other browsers. This is a Good Thing in my opinion, but is frustrating if you’re not careful.




As Gary said fixing that closing bracket and adding the closing anchor will fix the first page.

                    <div class="bannergroup"> </div>
                                <img src="" alt="Custom jewelry" style="float:left;"/><img src="" alt="" /><a rel="rokbox[600 400]" title="Stones Demo" href="[B]=1">[/B]<img src="" alt="custom jewelry gemstone video" style="margin-bottom:10px;"  /[B]></a>[/B]
                                <div class="module-featured">

The problem with the 2 columns on the other page is the fact that you divided an odd pixel container pixel width by 2 lots of 50% which IE rounds up and therefore can no longer fit. If you have a fixed pixel width then you are better of using pixels again and not dividing with percent unless you are changing the parents size in other places. If you must use percent then leave a little leeway for error and reduce the percentage widths slightly so that rounding errors aren’t an issue when totalled up.

You can probably fix it in your page by using a negative margin like so.


anthropogenic rendering disruption


IOW “human error”. I like Gary’s term though, awesome.

Thank you guys for all your help. I have used “!important” in the css to over ride the inline style and have reduced the 50% width to 49% and IE likes it now. Also, thanks for pointing out the missing “>”. Little embarrassed about that one.

You guys are great. Love the Site Point forums. Lots of great help here.

what does !important mean?

not important? thats what ! usually means in programming.

I’ve seen in some CSS that I have edited and always anted to know…

!important means most important.

That means that they over-ride all rules before it.

If previous rules also have !important added then they are treated in the usual way with the one that has most weight winning out. There are other rules and user stylesheet using !important will outweight an author stylesheet.

The reference above explains the finer details.

Suffice to say that !important should be used with care but is useful for over-riding inline styles that a system may be outputting automatically.

Once you start adding !important to everything then there is no benefit and you could have just used longer pathnames to create the extra weight.

Thank you Paul, that helped :slight_smile:

not important? thats what ! usually means in programming.

Because ! traditionally means “not”, this was one of the most retarded names CSS could have ever used.

I remember there being about 2 places to use !important… I only remember one of them (FF making an input field yellow if the user has AutoComplete google toolbar whatsit installed… when that colour inhibits usability/accessibility), while the other was something to do with IE6. Beyond that, it is in the specs as being for users and user stylesheets, NOT us authors.

[QUOTE=Stomme poes;4769437]Because ! traditionally means “not”, this was one of the most retarded names CSS could have ever used.

I completely agree, it is or the name at least is quite counter-intuitive