• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 311
  • Last Modified:

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
0
spiderdexter
Asked:
spiderdexter
  • 4
  • 4
  • 3
1 Solution
 
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
 
jonahzonaCommented:
Wow. I guess I am.

If this is true, I gladly stand corrected!
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now