IE7 html 5 browser issue

Hi,

Please view this page in IE 7 and firefox.

http://www.southlanarkshire.gov.uk/scottishscrutiny/

It works fine in Firefox, but i need it working fine in IE7.

Cheers
spiderdexterAsked:
Who is Participating?
 
AmickCommented:
spiderdexter,

This code
 
<style type="text/css">

.styled_select{width: 100%; margin-left:0px; margin-top:-1px; }

    nav {
     	right:86px;
     	}

	nav ul li.home {
		top:-2px;
		zoom:1;
		background-position-x:center;
		}

	nav ul li.home a {
		zoom:1;
		}

</style>

<![endif]-->

Open in new window


yields this result in IE7:
 IE7 styled Scottish Scrutiny Page
BUT a concern I have is that <nav> is not being processed as if it belongs in the container and thus the amount of "right" that you have to give is strongly affected by the size of the page.

Clearly,  the nav-bg-li.png appears where it is supposed to which you've defined as "the actual issue". There is still  work to do with styles to make it resize properly and that is probably the rightful province of a separate question.
0
 
jonahzonaCommented:
If you are working with HTML5, it will not work with IE7. IE7 is no longer supported and will NOT support HTML 5.

Ever.

 Sorry.
0
 
spiderdexterAuthor Commented:
Hope you are unaware of HTML5 enabling script for IE. There are many sites out there in HTML 5 rendering fine in IE 7
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
jonahzonaCommented:
Wow. I guess I am.

If this is true, I gladly stand corrected!
0
 
jonahzonaCommented:
Didn't even realize they figured out how to get HTML5 working in the older browsers.

Thanks for the heads up.

Could you post a pic of what it is supposed to look like? I have firefox 4, but I am not sure if is rendering correctly or not.
0
 
AmickCommented:
Yes, the solution is to write "shiv scripts" that either recognize html5 selectors or provide the effects you are missing in the browser or use an adaptive tool such as Google ChromeFrame to add HTML5 rendering abilities to your browser.
0
 
spiderdexterAuthor Commented:
hi all,
please note this is not an issue with html5 elements, just basic css, note that i have already added html 5 enabling script, all elements are fine, it is only top nav(navigation bar) that i am talking about,,,
0
 
jonahzonaCommented:
I would look into the display: inline property on your li that is holding the link.

Doesn't seem to affect IE9 or FF, but it makes the link disappear in IE7. Once it is removed the link is there, though not positioned correctly.
0
 
spiderdexterAuthor Commented:
Yes that is the issue, do you have a solution for that ?

Thanks
0
 
AmickCommented:
Changing the block at line 99 to this:
<!--[if IE 7]>

<style type="text/css">

.styled_select{width: 100%; margin-left:0px; margin-top:-1px; }
    nav {
     	right:77px;
     	}

	nav ul {
		display:inline;
		}
	nav ul li.home a{
		zoom:1;
		z-index:1;
		}
</style>

<![endif]-->

Open in new window

almost works.  For some reason only half of the background image nav-bg-li.png shows on my IE7 emulator.  It may show up correctly on IE7.
0
 
spiderdexterAuthor Commented:
Hi,

Sorry for re-iterating.. The background image appearing half is the actual issue,
The styles you have given doesnt seem to fix the issue.

Thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.