Assistance with browser compatibility

  • Thread starter Thread starter AmiNeo
  • Start date Start date
  • Replies Replies 27
  • Views Views 4692
AmiNeo

AmiNeo

CodeMonkey
AmiBayer
Joined
Jul 28, 2010
Posts
7,452
Country
UK
Region
Kendal, Cumbria
Hey guys, could someone with web knowledge have a look at the page in development at www.bitzone.co.uk/cma.html and view it in internet explorer as well as another alternative which will show how it is supposed to look.

I need advice on how to fix it for internet explorer if possible. So far as I can tell all versions of IE are screwing up in exactly the same way.


Appreciated as always!

:thumbsup:
 
Hi Amineo,

I had a look at the page in IE and Opera. I'm not sure if it's the cause but I noticed that you have some classes defined in your web page for menu1, menu2 etc, but these don't appear to be configured in your css file?
 
Ed.D said:
Hi Amineo,

I had a look at the page in IE and Opera. I'm not sure if it's the cause but I noticed that you have some classes defined in your web page for menu1, menu2 etc, but these don't appear to be configured in your css file?
Click to expand...

They are configured in the CSS :) Check around line 246 :thumbsup:

There are global parameters set for ul and list items and separate ones for the menus which override some inherited values.

---------- Post added at 09:37 ---------- Previous post was at 09:19 ----------

Just found that the page works as it should in IE10 and all other browsers but just not previous versions of IE.

Not certain exactly what is causing the issue or how to fix it though! :unsure:
 
Took a quick look:

1. Rounded css borders aren't available in earlier IEs, which is why they're square. You'd see the same in earlier FF's and Chromes. Fix it by making an image with the border.

2. The colour is wrong because you've used the abbreviated colour codes - #F10 instead of #FF1100 (startColorstr='#f10' should be startColorstr='#ff1100'). The abbreviations work in CSS, but not in the IE specific filter commands.

IE has always been way behind in CSS features :thumbsdown:

Hope it helps :)
 
slk486 said:
Took a quick look:

1. Rounded borders (via css) aren't available in earlier IEs, which is why they're square. You'd see the same in earlier FF's and Chromes. Fix it by making an image with the border.

2. The colour is wrong because you've used the abbreviated colour codes - F10 instead of FF1100. The abbreviations work in CSS, but not in the IE specific filter's.
Click to expand...

Thanks, I'll revise the color codes.

Any ideas why the hidden menu doesn't work? I'd have thought it would have been fine in IE9 at least.
 
Try putting visibility:auto in the :hover section?
 
slk486 said:
Try putting visibility:auto in the :hover section?
Click to expand...

Didn't work :(

---------- Post added at 10:06 ---------- Previous post was at 10:03 ----------

Update: Colours fixed, thanks! Though I had to tell IE9 to unblock scripts before they would show. :picard WTF Microsoft!

---------- Post added at 10:20 ---------- Previous post was at 10:06 ----------

Just updated the CSS file so latest version is now at the given address... Colours fixed as you will see but other issues remaining:

  • anchor position not changing on hover
  • drop down menu not appearing on hover of menu headers


Rounded links I can live without for now, functionality is primary focus.


Thanks so far, this really helps.
 
Looks like menu1 inherits from the "generic" ul on hover, so try inserting this:

[more specific and thus 'weighs' more]
#navmenu ul li:hover .menu1 {
visibility: visible;
}

or adding !important after 'visible'

#navmenu ul li:hover ul {
visibility: visible!important;
}

or simply moving the 'visible' section below the 'hidden' section - if it isn't already :)

IE manages CSS flow differently than the other browsers.
 
Nothing :huh: :Doh:

---------- Post added at 10:52 ---------- Previous post was at 10:45 ----------

It's almost as though IE doesn't like hover at all, but the button in the title banner displaces on hover just fine... :unsure:
 
Oh only just noticed it's because there's no document standard defined in the header, so IE goes in quirks mode. Set it for IE9 or IE8 (or 7 :)) and go from there.

BTW IE 9 does support rounded borders - IE 8 and below doesn't - my bad ;)
 
I have XP running on a virtual machine :D Should be able to test most versions with that.

Damn, still need to brush up on which declarations are necessary and which aren't. :picard

Will look into that now, thanks!
 
It's easy to check the different IE engines with the developer tool (F12)
 
YUS! Thats fixed it for IE9, with the exception of a curious error that causes the menu on the middle 2 items to disappear before you get to the last link...
Also the background colours appear to be spilling beyond the anchor borders...


I also still need a solution for previous versions of IE viewing the page... Whats the workaround? :unsure:

---------- Post added at 11:56 ---------- Previous post was at 11:55 ----------
slk486 said:
It's easy to check the different IE engines with the developer tool (F12)
Click to expand...

Ah thanks! Shows how often I use IE, huh? :lol:

---------- Post added at 11:59 ---------- Previous post was at 11:56 ----------

Latest version now on server for checking :)

---------- Post added at 12:23 ---------- Previous post was at 11:59 ----------

IE8 likes it now too without the rounded edges ofcourse...

How far back are we required to go these days?


Is there anything I can put in the page to make an alternative css file for other versions?


Thanks so much for helping! I've been developing this from scratch for a few days now and been looking at it for close to 7 hours today, lol. :thumbsup:
 
I've developed separate style sheets for earlier IE compatibility sake...

Any reason this won't work for referencing a CSS file for each browser type?

<!--[if !IE]>
<link rel="stylesheet" type="text/css" href="cmacss/css1.css">
<![endif]-->

<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="cmacss/css2.css">
<![endif]-->

<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" href="cmacss/css1.css">
<![endif]-->

I can't get non IE browsers to recognise the CSS file this way. If I take it out of the comments, the CSS becomes default for all browser types. :picard

What am I missing anyone? Gonna have to have a break for now but if you know where I'm going wrong I'd appreciate the further assistance :thumbsup:
 
Thanks for the assistance yesterday, SLK you really helped!


Still haven't worked this out though. Anyone used multiple style sheets before?
 
No problem :)

The conditional CSS isn't working for other browsers because it needs to be:

<!--[if !IE]>--><link rel="stylesheet" type="text/css" href="cmacss/css1.css"><!--<![endif]-->

with closed comments on that particular conditional statement. IE knows what to do and the other browsers will just ignore the [if/endif]
 
slk486 said:
No problem :)

The conditional CSS isn't working for other browsers because it needs to be:

<!--[if !IE]>--><link rel="stylesheet" type="text/css" href="cmacss/css1.css"><!--<![endif]-->

with closed comments on that particular conditional statement. IE knows what to do and the other browsers will just ignore the [if/endif]
Click to expand...


Sorry but I'm sure you're wrong there. Either way, that doesn't work either and the declaration is outside of the comments so wouldn't that make the second style sheet back in the document as a regular declaration? ;)

From what I've read online, you're supposed to have a regular one and hide the others in the comments with the IF conditions. I must be doing something wrong though because its just not working for me :(

and other browsers ignore the [!IE] (not IE) altogether, so appear to need one stated normally.

If I still had some hair I could grab I'd be tearing it out right about now...

---------- Post added at 13:37 ---------- Previous post was at 13:09 ----------

If I use the css file normally, my links show up fine. If I declare it with the conditional, it just uses the one outside the conditional statement instead.

If I put them both in conditional statements, no browsers can find a CSS file.
Which says to me the conditional statements are invalid... But the one you showed me doesn't work either :picard

Sorry if I came across as arrogant in my last post but this is doing my nut in :roll:

---------- Post added at 13:44 ---------- Previous post was at 13:37 ----------

My bad I put it in the wrong place -.- Sorry!


Only issue now is that they're conflicting for some reason. on browsers that aren't IE, the links are screwed up. They work fine without the other CSS file included. :dry:


I'll keep at it :lol:

Sorry again, and thanks.

---------- Post added at 13:54 ---------- Previous post was at 13:44 ----------

I did have to fix it a little however afterall,

<!--[if !IE]>--><link rel="stylesheet" type="text/css" href="cmacss/css1.css"><!--<![endif]-->

Should be


<!--[if !IE]><link rel="stylesheet" type="text/css" href="cmacss/css1.css"><!--<![endif]-->


the line is now in comments and it works

:thumbsup:


Just need to figure out why the menus are screwey now and I'm golden, :lol:

Thanks again :thumbsup:

---------- Post added at 14:02 ---------- Previous post was at 13:54 ----------

AHH YOU SOB!


ROFL!!!


okay so theres different ways depending on whether its not IE or IE you're doing it for!

<!--[if !IE]>--><link rel="stylesheet" type="text/css" href="cmacss/css1.css"><!--<![endif]-->

IS correct! But its...


<!--[if IE]><link rel="stylesheet" type="text/css" href="cmacss/css1.css"><!--<![endif]-->

...with the arrow shape after the IE declaration removed when you're catering for IE. Thats so wierd and unintuitive. :double


So why does NOT IE need the extra --> ?
 
Last edited:
It ought to be

<!--[if !IE]> -->
<!-- <![endif]-->

because to all browsers except IE those would be enclosed comments and so the css link tag would be valid code, but IE would know to do differently.

If it doesn't work, can you leave the test up to view?
 
No, its working, I just wanted to make sense of it.

So for non-IE browsers, it needs to be between those tags but not a comment for the non-IE browsers to read it and IE to skip over it...

...and for IE browsers it needs to be inside comments to stop other browsers reading it?

That's how I now understand it. :thumbsup:
 
Okay everything is fine and dandy right now :D Site is over at http://www.bitzone.co.uk/cma.html

All links just link back to the same page right now so if anyone notices they're not working that's why.

What I'd like to do next is get the drop menus animated a little more smoothly. I've looked around at CSS3 transitions and given the menu is created using CSS3, I'd like to use transitions to slow the movement down.

My current CSS to make the menu visible is simply...


#navmenu ul li:hover ul{
visibility:visible; /* sets child ul menu visible on parent ul hover */
}

How would I add a transition to that to slow its appearance down? :unsure:
 
You must log in or register to reply here.
Back
Top Bottom