-
1. Re: Workaround for IE, vertical menu bar
Ben Pleysier Oct 10, 2013 5:28 PM (in response to FormUser) -
2. Re: Workaround for IE, vertical menu bar
hans-g. Oct 11, 2013 12:08 AM (in response to FormUser)Hello,
no problem in my IE10 too, it's the same appearance as Ben's.
BUT anyhow a little note from my point of view: shouldn't you better use - in this case - a menu that opens downwards and thus saves space?
Hans-Günter
-
3. Re: Workaround for IE, vertical menu bar
ajatix.com Oct 11, 2013 4:49 AM (in response to FormUser)Try replacing
<!--[if IE]>
line with
<!--[if lte IE 8]>
(that will prevent inline-block-compliant browsers from applying the workaround)Alex
-
4. Re: Workaround for IE, vertical menu bar
FormUser Oct 11, 2013 7:31 AM (in response to FormUser)Thanks, guys! This is what I got:
IE 8 on laptop: renders correctly
IE 10 on desktop and netbook: both render incorrectly with missing 1 pixel borders to the left and right of the vertical menu bar which IS the issue. Note that BELOW the vertical menu bar is a .png image that has 1 pixel borders which is NOT the issue.
It seems I need a workaround for IE 10.
(The fly-outs render correctly even in IE 10, I am too afraid to change this)
-
5. Re: Workaround for IE, vertical menu bar
ajatix.com Oct 11, 2013 7:45 AM (in response to FormUser)That is why I recommend using
<!--[if lte IE 8]>
instead of
<!--[if IE]>
'lte' means 'less than or equal'.
IE9 and IE10 do support display:inline-block, so you need to limit the workaround code to older versions of IE only.
-
6. Re: Workaround for IE, vertical menu bar
Ben Pleysier Oct 11, 2013 4:55 PM (in response to ajatix.com)Here is me thinking that our IE woes were over!
Add the highlighted line and all is well.
ul.MenuBarVertical {
border: 1px solid #CCC;
border-top: 0;
border-bottom: 0;
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
overflow: hidden;
}
-
7. Re: Workaround for IE, vertical menu bar
FormUser Oct 11, 2013 5:47 PM (in response to FormUser)Sorry guys, but here is what I found.
The modification to <!--[if lte IE 8]> still does not make IE 10 display the 1 pixel border to the left and right of the vertical menu bar. I notice now, that with or without the modification, the 1 pixel border briefly displays initially during the page loading time, then disappears again.
The addition of overflow: hidden; in the .css file of the vertical menu bar hides the fly-out to the right beyond the div container of the vertical menu bar, in IE 10. The fly-out does display in Chrome with or without the addition.
Does the above help in coming up with further suggestions that I can try out?
-
8. Re: Workaround for IE, vertical menu bar
Ben Pleysier Oct 11, 2013 6:48 PM (in response to FormUser)The only other thing I can suggest is to use the tested clearfix by adding the following to the bottom of the style sheet
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
and adding the class to the parent UL as in
<ul id="tempelVerticalMenu" class="MenuBarVertical clearfix">
This will leave a slight blank at the top of the menu bar.
If all fails, place a borderless menu bar in a wrapper that does have the required border. Bugger IE
-
9. Re: Workaround for IE, vertical menu bar
ajatix.com Oct 11, 2013 10:27 PM (in response to FormUser)In tempelVerticalMenu.css you have the following IE hack section:
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection {
ul.MenuBarVertical li.MenuBarItemIE {
display: inline;
f\loat: left;
background: #FFF;
}
}
Looks like it is no longer needed for current versions of IE.
Can you try commenting it out:
/*@media screen, projection {
ul.MenuBarVertical li.MenuBarItemIE {
display: inline;
f\loat: left;
background: #FFF;
}
}*/
When I do this the border appears fine in IE10. I have not checked it in IE8 though, as I don't have it at hand at the moment. Can check on Monday.
-
10. Re: Workaround for IE, vertical menu bar
FormUser Oct 12, 2013 7:26 AM (in response to ajatix.com)Yay, it works! The commenting out of the IE 5 hack makes IE 10 and at least my copy of IE 8 render correctly! Thanks, ajatix!
A follow up question to all: I notice that IE 10 and IE 8 now render correctly with or without the <!--[if IE]> inline code. Shall I leave the inline code as is or delete it? What are the pros and cons?





