I am not really good with CSS, so I am having trouble making IE show my menu bar properly. As you can see in this fiddle I have a simple bar where the user can click on his username to display some options.
This code works fine in chrome and firefox, but it does this on internet explorer:
As you can see, the menu opens inside the navbar, so you will only see the first option.
Can you open this fiddle and tell me what is wrong with my code?
Thanks in advance!!
SOLUTION:
Wow this is really weird, but it was this line on the CSS!! That is why it works in the fidle, because i put a simle background for the example. For future reference, NEVER do this if you have stacking going on:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b5b5b', endColorstr='#282828',GradientType=0 ); /* IE6-9 */
I view the fiddle in Internet Explorer 9 and turn to IE 8 in development mode and I can see all the options. Not sure how to re-produce the bug you have.
You need to add position: relative to the parent item and position: absolute to the dropdown. You'll probably also need to alter the top attribute of #user_menu so it doesn't overlap the username (about 20px or so should do).
More on the IE bug here.
Modify the CSS of #user_menu to the following:
top: 30px;
Related
I have made this question: Menu with 2 levels disapear the background and that's solved. But my menu with sub-items does not work on IE8.
And i dont know where i'm wrong with this.
Here is the updated link of my menu: Here is working example.
can Help please?
Your dropdown menu is not working because it is firing in Quirks mode. Add a proper DOCTYPE and it works fine.
<!DOCTYPE html>
Edit: here is a demo of your menu with the proper markup working just fine in IE8: http://jsfiddle.net/4ApsQ/show/
It would be great if we could see an extract of your HTML and the CSS that you're using for this task. But, in general, if I understand your problem/question correctly, these are the two things to watch out for in your styles:
z-index and position
Here's an example:
#divStayTopLeft
{
position:absolute;
z-index:1000;
}
If you make your z-index (reasonably) high enough, then your menu will remain on top of other elements.
I have one problem. I have this web:
www.keramikadomecek.cz/
And in all browser everything is ok. But in Opera the horizontal menu is shifted 20px to the right.
Do you know what's wrong?
Thank you very much and sorry for my English :-)
Use
margin-left: 0; padding-left: 0;
instead of
margin-left: -20px;
for menu in your CSS.
I'd also recommend you setting overflow: auto or overflow: hidden for menu, because your <menu> only contains floated elements and they need to be cleared.
Also consider updating jQuery to latest version (not related to this issue).
You're using HTML5, which the current HTML parser (Presto) for Opera doesn't fully understand. It's default behavior with unrecognized elements is to immediately close them, which throws your markup/styling off, as you see...
See this link: http://www.opera.com/docs/specs/presto25/html5/
EDIT: Sorry, forgot to mention that the link above is for a somewhat older version of Opera. There are links in the sidebar to updated documentation, so you'd have to find your way to the page matching the version of Opera you're targeting in your testing.
Just finishing up a site and having an issue with position: fixed on IE7. I've Googled it and tried different Doctypes but the fixed area is still moving out of position on IE7.
I've not got IE7 but a client staffer has it and I can see the issue using an online IE renderer/tester.
I've removed the .htaccess from the test site so you can see the site/code.
http://drinkzing.com/test
Any advise or help would be appreciated.
There is a <div> and an <ul> element which both have id="logo-nav". They've both set position:fixed and some other properties. I think this is the main problem. Remove the duplicate ID, set position:fixed only for the <div> element and then we can investigate the issue (or the problem should disappear at best).
If you have newer version of Internet Explorer, you may emulate IE7 by clicking the Compatibility View button or choosing IE7 document mode in Developer Tools.
edit: I noticed that you haven't set any left property for #logo-nav. I don't know why IE7 computes the default position other way than all other browsers, but simply adding #logo-nav { left: 225px } works for me.
Try this in your css:
* html idorclasshere {
position: absolute;
}
Note: replace "idorclasshere" with your, well, ID or Class of the non-responding div (don't worry, due to the asterisk, other browsers aside from IE won't see it, add it in conjunction to your "position:fixed" style).
Little background information here: I have narrowed down the problem, but can't determine what the fix is. In IE6 the input box won't allow me to use my mouse to select it.
Please go here to see the problem: http://www.malahatautoparts.com/business-application/
The problems stems from an IE6 fix for the CSS background.
#main{
background-position:-9999px -9999px;
filter: progid:dximagetransform.microsoft.alphaimageloader( src='http://www.malahatautoparts.com/wp-content/themes/malahat/images/bg-main.png', sizingmethod='crop');
}
If I remove that from my IE6 css file, input box all of a sudden works.
Any ideas on what I can use to fix this?
The conditional comment you have there for "less than IE 7" isn't even working right for the PNG transparency it's supposed to fix in IE6: I'm seeing grey background around the transparent corner areas. In IE7 the transparency works natively without loading that stylesheet.
The method you're using in the IE stylesheet relies on the alphaImageLoader filter, which I suspect is blocking over top of the HTML form controls on the page.
There's an alternate method that uses VML instead: check out DD_BelatedPNG. I'm not 100% sure if it will solve your problem, but I have a hunch it will, and it's a cleaner solution than what you're using now.
<textarea> and <input> selections: selectionStart and selectionEnd are not implemented in IE, and there's a proprietary "ranges" system in its place, see also Caret position in textarea, in characters from the start.
Also see What are the typical reasons Javascript developed on Firefox fails on IE for common reasons of failure of Javascript/CSS in IE which work in Firefox & other browsers (or vice versa).
Some excellent tips so you can get a uniform look & usage in all browsers.
use css with
#main{
background-position:-9999px -9999px;
filter: progid:dximagetransform.microsoft.alphaimageloader( src='http://www.malahatautoparts.com/wp-content/themes/malahat/images/bg-main.png', sizingmethod='crop');
position: relative;
}
For ages now my site has had a catalogue where the small image is directly within a link within a div. The link must only be around the image - but I do not want to use the + selector since this is not supported by some versions of IE (IE6 onwards I think it needs to support). The div has class "ImageHoverSpan" (it used to be a Span on an older layout, I just havent bothered renaming the class). There is another div, with class "ImageOuterPanel", on the same level as the link (i.e. a direct child of the ImageHoverSpan).
I have the following classes defined:
.ImageHoverSpan .ImageOuterPanel {
display: none; }
.customer .ImageHoverSpan:hover .ImageOuterPanel {
display: block; }
This certainly used to work fine as far as I can remember - on all browsers. I am about to launch the new version of the website into testing, but I just noticed today that, in Opera 10.60, the image panel (ImageOuterPanel) is displaying straight away on hover over the ImageHoverSpan, but it takes anything between 1 second and.. well.. never to disappear when the mouse leaves the div.
I know using :hover on anything other than links can slow performance in IE - but this is Opera. In Firefox (3.6) this works absolutely fine - it appears and disappears as it should.
Has anyone got any ideas about what could be causing this? Anyone had this problem before?
Thank you.
Regards,
Richard
Well I have found an answer. I asked the question on the Opera forums, and a user posted back that I could have an Opera stylesheet which keeps the elements visible but sets opacity to 0 or 100 instead. This works - the elements appear and disappear instantly.
Richard