Joomla template not showing properly on IE8 - css

I have installed Black&White free template from http://templatesforjoomla.eu/free-joomla-1.5-templates/blackandwhite-free-joomla-1.5-template.html
I really like this template and want to use it but I found a problem. It is not properly displayed on IE8 (it is said to work on IE7+). These are my problems that you also can see on the demo site
The slider works ok on everything except IE - only the picture is displayed without the text next to it
When the submenus on the top reach the picture in the slider - they hide behind it
I have some experience with joomla but IE has always be my nightmare. Thanks in advance for your help!

You can try to set up conditional css just for IE8, that way you could fix all css issues .. note that IE8 still holds some restrictions like not rendering CSS3 or media queries ..
you can read more about IE conditional comments here http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer

Related

CSS hover suddenly works on mobile browsers?

This is really odd. I'm not complaining that something works, but it is very surprising ..
On my website I had the usual css :hover for the navigation to reveal sublinks. But on the mobile browsers this needed some js help to make it work (as you can see from those many posts about "css hover not working on mobile browsers")
I made a simple script to fix the hover problem. But today as I was rewriting the code, since I noticed that it was not fully working as intended, I removed the entire mobileDetect.js which was handling the mobile hover. And now it works, without any additional scripts.
I tested it with chrome and safari on my ipad and iphone. It works as intended... did I misse out a big mobile browser update or something?
I use Jquery from google, no framework and standard HTML5.
Here is the site : (easy-sailing.ch) "EVENTS" and "AUSBILDUNG" are the mentioned navigations with sublinks.
I am just wondering if this is some odd anomaly and therefor should put my script back in or just enjoy the good news? :S
as far as i remember it has always been working...
...it is just not needed because there's no cursor and hover happens usually when you click (touch in this case) and you'll leave the page before noticing hover.
on android i can observe it when i touch+slide up or down.
I have fixed this for me by removing :hover selectors/rules at runtime https://github.com/kof/remove-hover

Why are image borders and extra padding showing up in IE9?

I built and tested my site in Firefox but now when wanting to launch I realized that there is extra padding showing up between the menu and posts as well as borders on some of the images when viewed in IE9.
I have looked through all of the CSS and can't figure out what might be causing either of these problems. Any ideas would be great.
Here is the site: http://beautyintheweeds.com
Thanks!
Every browser has different default css rules. Use a css reset to bring everything to the same defaults.

Tumblr site divs not looking right in ie8 or 9 but right in ie7. Fix?

Here is the site I am referring to (the css is built in)
freebirdbooks.com/tagged/about
I am having a problem getting my site to preview correctly in ie8 and ie9 only. It looks fine in any other browser. I should mention I am coding the HTML and CSS myself, but using Tumblr as the content management system for a client. (This is until I can learn how to code my own back end for clients which I know is ideal.)
This site looks fine in most browsers. But in ie8 and ie9 only, my container and sidebar divs "underlap." I uploaded some preview images to my hosting site for you because since I am a new user they won't let me.
Is there any way to fix this? This site has been very helpful in the past, and I thank anyone who can help in advance.
http://images.freebirdbooks.com/rightway.jpg
http://images.freebirdbooks.com/uglyway.jpg
Leah
That works for me on IE8 (I don't have IE 9):
Add
#sidebar{clear:both;}
and remove
#wrapper #sidebar{min-height:1100px}
Make sure to close all of your anchor tags inside the headerimage div.

main page boxes not aligned right in Internet Explorer

I am building a photo portfolio website using wordpress and editing an existing theme. I worked on it in firefox and checked a few times throughout at the styling in IE and it was always fine. But having basically finished I looked at it today and it in IE and it is totally messed up. None of the boxes on the main page are lined up right.
I tried using the code in the header to have IE render it as IE7 and that generally worked but it made some other little problems. I am not sure if the problem is my doctype. I don't really know what it should be, or if I changed something along the way that messed it up.
The site works perfectly in all other browsers that I have tried
Here is the site. http://theshalomimaginative.com/blog/
Thanks.
Youre <h3> tags aren't closed. One of the few instances where IE is actually rendering things correctly ;) Other browsers will allow us to make mistakes like this, but IE is more strict.
Never forget the value of validating your code!

safari 5.1.1 margin different than everything else i have tested

i am working a a WP page and having some difficulties with what appears to be the margin on the HTML element.
it displays as expected in IE8, FF, Chrome, Mobile Safari and Opera.
this is the page in question:
http://www.mmmf.net/2012/
i am using basically the same CSS as a site also done with WP which is:
http://www.mmmf.net/2011/
the only difference is a newer version of WP.
i placed a purple border on HTML for reference. i believe it's a 28px difference.
any suggestions on this would be appreciated.
thanks.
I always add a yui css reset to avoid x-browser spacing issues. Do some research on it, spend the time to re-do your css with the css reset in place (place it above all other css).
http://developer.yahoo.com/yui/reset/

Resources