Jump to content

Near finished website, struggling with the last few remaining IE issues.


bluebomber
 Share

Recommended Posts

Hello guys, I am about 95% finished with a new portfolio website I've been building but there are 3 outstanding issues (which I think are CSS related) when viewing it with internet explorer 7, 8 and 9 which I can not solve with my relative lack of ie experience and I was hoping someone here could possibly shed some light on the issues,The test version of the site is currently at http://www.alkchan.com/r6/index.phpThe 3 issues are:1. The click-able links in the 3 large DIV panels on the home page are "a" block elements with 100% width and height of their container (making them about the same size as the whole panel), while these are fine in chrome, firefox and safari - when you view the site in internet explorer, you cannot simply click anywhere on the panel - the link appears only in a small hidden area in the upper left area of the panel. 2. All of the main menu list items at the top of the page (except Home and Blog) contain a nested image (a small grey arrow) which is absolutely positioned and told to display 38% across from the left of their containers (this gives the impression the arrow is position below and pointing to the center of each menu item) - these arrows are hidden by default but are individually displayed via CSS once the relevant page is being viewed - they work in all of the other browsers but appear completely broken in all version of ie.3. All of the website fonts appear bold \ blurred when viewed in ie9, the end result is that some parts of the site are illegible.If anyone can help with any of these issues it would be immensely appreciated!

Link to comment
Share on other sites

I've managed to fix issue 2 - so that leaves just 1 and 3. The first issue is the most problematic, but it's still baffling me - on closer inspection internet explorer is correctly displaying the block a element but somehow the user is prevented from clicking on it by an (unrelated) IMG that's sitting inside the same DIV container.

Link to comment
Share on other sites

I've created a smaller and much easier to digest example of the problem I'm facinghttp://www.alkchan.com/r6/help/ieproblem.htm The large grey square is a DIV container, inside the container is an empty display:block link set to fill to 100% height and width.The red square is an image also sitting inside the container.When viewed in internet explorer - the cursor will not activate the link while it's over the red square, this occurs even if the z-index of the link is increased, none of the other browsers do this.I've noticed this issue doesn't occur in internet explorer if the empty link actually contains something that covers the whole of its block space, so I've temporarily "fixed" the issue on my site by putting a 100% scaled transparent gif inside the link - feels like a dirty solution though.

Link to comment
Share on other sites

I've had this STUPID IE idiotic problem before, give the anchor element a repeating 10px x 10px transparent background image, OR a background-color: #fff; and then make it transparent, filter: alpha(opacity=0); Edit: background image which I now see you have already done, well we have no option but to use dirty solutions to fix a useless bug riddled browser.

Edited by dsonesuk
Link to comment
Share on other sites

in fact i love that website's shape alk, and by the way i would really love to learn the way you created its shape.I've been trying to learn that way so far but I haven't gotten the edge yet.. although I understand codes on a very good scale

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...