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.
Related
I am designing a website which has css menus.
Some of the menus have submenus. Any menu item with a submenu shows a simple image of ">", to indicate that there are submenus.
Here is a JFiddle. (Please excuse the 60 lines of CSS. I am working from generated code and I stripped out as much extraneous code as I could.)
This is not working in IE8 and I have no idea why. In IE8, the > image simply doesn't appear.
Can anyone help me make it so this code will work in IE8?
Using a background image isn't an ideal solution, because the page is already using a background image for another purpose.
Thank you!
.has_children:after
{
content:url('http://s21.postimg.org/banv5jdib/submenu_arrow.png');
position: absolute;
right: 5px;
top: 2px;
}
In order to make :before, :after and content work in IE8 you need to have <!DOCTYPE html> on the top of the page.
If still it fails, than you will have to use CSS3 pie with Selectivizr
For Support Details Or Here
And as you told that you cannot use background-image than using img tag seems fair and only way to achieve this.
First of all, I've been searching for an answer in Google and forums, but didn't find, sorry if it has been asked before and if you can link me to an answer it would be great.
Here's my problem: I have a web calculator made of a table with buttons inside. Here's a link. If you open it with IE it will be all messed up, so don't. I'll work on it later. On FF the rowspaned buttons do not stretch up and down to cover the hole cell, on Chrome it looks as intended. How do I make it look good on FF too? thx in advance to responders.
Using a <table> for layout is a bad idea for numerous reasons that don't need to be re-hashed here. What matters for you is that FireFox displays tables differently than other browsers and you are going to have a hard time laying out your buttons as you want them with that approach.
Instead, just ditch the table and absolutely position the buttons, or float them.
Edit: A floated layout works nicely:
http://jsfiddle.net/gilly3/7rL97/5/
JSFiddle's frame messes up the display if you view it in chrome, but if you view it in chrome outside of the frame, you can see it works fine in chrome as well: http://fiddle.jshell.net/gilly3/7rL97/5/show/
#yekhezkel gilly3 is probably right. but i found solution to your problem. It works in firefox and chrome. I have not tested in IE.
step1: add a class of fix to all the td's containing rowspan=2. It should look something like this.
<td rowspan="2" class="fix">
<button onclick="modifyInout('+')">+</button>
</td>
Step2: add the following css for fix class
.fix {
height: 70px; /* double the value of td height you specified earlier */
}
Let me know if it helps.
Here is the jsFiddle: (open in firefox or other browser to test it.)
Regards :)
Read this and try to add padding
padding: 18px 6px;
Padding will stretch your button
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;
I'm trying to get the Thesis theme working in Wordpress, and it's almost perfect. For the navigation menu I want to use images instead of text. My solution to this was to set a background image via css:
ul.menu .tab-2 a {background:url(images/myimage.jpg) no-repeat;background-color:transparent;width:81px;height:60px;margin:0px;padding:6px;border-style:none;}
This works fine everywhere but IE. You only see the image and not the text that Thesis is writing out for that nav item:
<li class="tab tab-2">About Us<!--[if gte IE 7]><!--><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
In IE, however, the href text does show up over the background image. I suppose this is what I expected to happen, so I was pleasantly surprised to see it not working like that in every other browser.
What I'm trying to figure out is if there is a way to get the background image to show up on top of the href text, effectively blotting it out. I have tried hacking Thesis to suppress writing out the text, which works in all the menu items except one, and that is because I am writing out categories, not pages.
I really want to use Thesis' nav menu and not roll my own because I'm sure then I would have more troubles getting the drop downs to look nice in all browsers, and my css is just not that advanced. And I don't think there is a way to tell Thesis to use an image instead of text for the nav menu item.
I have been staring at this for hours and clearly am not thinking clearly about it anymore.
Try adding:
display:block;
text-indent:-5000em;
overflow:hidden;
... to your current rules.
Some folk prefer other ways to do image replacement, but this is the most common way IMO.
I've been trying to figure this out all morning and I just can't get anywhere with it.
I'm working on this website for a client and the dropdown menu just will not position properly in IE7. I have it working in everything else (even IE6!) but IE7 just will not play ball.
If there is anyone that could help that would be awesome!
The page(s) are at http://adriantrimble.com/mbf
Correct http://adriantrimble.com/correct.jpg
IE7 http://adriantrimble.com/ie7.jpg
Any help would be greatly appreciated!
Thanks,
Adrian
Maybe you could try changing the subnav class so that the 'top' declaration has an actual number value instead of just 'auto'
So maybe something like this...
.subnav { left:auto; top:59px; }