For my navigation, I'm showing/hiding the sub-menus using height/width and opacity properties, rather than the display property, so that I can use CSS transitions to create a fade-in/fade-out effect for the sub-menus. This is working perfectly fine in every browser except for Safari, and I have no idea why.
The website is up at http://rtt.celero.com.au. Take a look at it in any browser other than Safari, and then compare to how it looks in Safari.
Other browsers:
Safari:
Anyone got any ideas about what's causing this bug in Safari?
EDIT: The website has been updated as per the float: none suggestion below, however now there seems to be another Safari-only issue, where the top-level navigation items are being expanded out to the width of the sub-menu. Any ideas on a fix for this?
New Safari issue:
This will fix the issue in Safari
ul.menu li ul.sub-menu li{
float:none;
}
ul.menu li ul.sub-menu{
position:absolute;
}
Related
I'm trying to edit the default menu for Wordpress TwentyTwelve theme. So far I have made the sub-menus horizontal but they don't align the same in Firefox than Chrome.
In Ff it looks as I want, but in Chrome, the sub menu align with the Menu item previously clicked, NOT to the far left of the main menu.
basically, I want a horizontal two-lines menu. I can' t get the "position:"" properly.
Here's how it looks in both browsers:
Here's how it looks in both browser:
Chrome:
http://imageshack.us/photo/my-images/248/cssmenuchrome.jpg/
I can't post more links because I need 10 reputation but the second image (menu in Firefox) in there too.
And here's a fiddle of my code so far:
http://jsfiddle.net/ZN9my/
.main-navigation li ul ul {
top: 0;
left: 100%;
}
.main-navigation .menu-item li {
display: none;
margin-right: 14px !important;
}
Your problem, as you say, is that both browsers seem to be dealing with your position:absolute; differently. position:absolute should be calculated in regards to the most recent parent element with an explicitly set position, which means that it's actually Chrome which is interpreting it right.
In this case, you've given .main-navigation li a position:relative, which means that Chrome is positioning the submenu, li.sub-menu, relative to it. If you remove position-relative from the CSS for .main-navigation li and add it to ul#menu-main, then li.sub-menu will be positioned relative to the main navigation ul, and should behave as you want it to across browsers. You'll probably want to change .main-navigation li ul's top from 100% to something like 37px so it still sits in the right place.
I've made the changes to your jsfiddle as well: http://jsfiddle.net/ZN9my/1/.
I've been searching through stack overflow to find an answer to this, but nothing has been helping me (or I've been adding it incorrectly).
I've set up a horizontal menu on a website for a client and am trying to center the menu items within the menu bar, however, the right and left padding is off by 1px between firefox and chrome, which makes the last menu item in the row butt up against the right edge only in Firefox. Dropping the left and right padding in firebug by 1px on the li tags in the menu makes it look like it does in Chrome with my original CSS.
The problem code seems to be on the li tags padding.
Here is a JSFiddle with my menu code (sans background images, but the problem is still evident) http://jsfiddle.net/FxznT/1/
and here is the original site I've been working into for reference: http://clients.taylordesign.com/LCBP/site/home.html
What am I missing? I am already using a CSS reset. Thanks.
You could try and use a CSS hack to select only Firefox:
#-moz-document url-prefix() {
.ul.topNav li {
padding: 16px 11px;
}
}
I have a working sprite menu, and want to add a vertical submenu under one of the items. I have it working perfectly in ie and firefox, however in webkit browsers (chrome and safari), the submenu renders to the left of the right margin of the containing li, making the menu unusable. I have tried every css tip I could find to make this work, including overriding the webkit -40padding, yet everything I have tried makes no difference to the alignment in those browsers.
test page
Find your #navigation > li { position:relative } and remove position:relative
I have been trying to resolve this issue on my own since Friday and I just don't seem to be having any luck. Hopefully with the following specifics, someone here can help push me in the right direction.
The site in question is http://www.jewelbyjewel.co.uk
The problem area: Top navigation menu
If you look at the menu in chrome, this is how the second menu appears:
This is how the menu SHOULD look.
In IE and FF, this is how the menu looks which is incorrect:
Now, I am aware I can fix this by explicitly specifying a width in the following stylesheet:
http://jewelbyjewel.co.uk/wp-content/plugins/ubermenu/styles/custom.css
I could change this:
#megaMenu ul li#menu-item-225 {
position:relative !important;
}
#megaMenu ul li#menu-item-225 ul.sub-menu-1 {
max-width: none !important;
}
to this:
#megaMenu ul li#menu-item-225 {
position:relative !important;
}
#megaMenu ul li#menu-item-225 ul.sub-menu-1 {
max-width: none !important;
width:400px;
width: 420px\9;
}
(width: 420px\9; is an IE9 hack).
While this does work I am wondering why I am having to specify individual widths when in Chrome this works without issues and I am not specified a maximum width anywhere in the CSS. I hate to admit it but barring using the hack as detailed above, this issue has me beat! I'm pretty certain I've either done something wrong or I'm missing something trivial. Either way, I would love to be able to get to the bottom of this and put it behind me.
Not sure if this helps, but your width behavior is affected by absolute positioning of the <ul class="sub-menu sub-menu-1">.
There is a bit more on the subject: div with unspecified width (absolute positioning), so specifying width or min-width is the way to go.
I have a webpage over at http://www.raven.dima.neoturbine.net/ that I am working on. The top navigation renders "correctly" to the right of the site logo in IE 8, Firefox 3.6 and Dolphin Browser for Android but not in Chrome 8 or Opera Mini for Android, where it is rendered ON TOP of the logo. Strangely, at least in Chrome, when you visit any link after landing on the website for the first time, the menu goes to the correct position for the duration of the visit to the website.
I am a little stumped as to what the issue is, as I was sure I wasn't using any controversial CSS selectors. Anyone want to point the bug out to me?
Edit: Fixed.
You have some extraneous styles which seem like you just placed them there for no particular reason. (maybe something to do with the mobile browsers?)
You have this exact CSS in your file twice, for some reason:
#header H1
{
padding: 10px 10px 30px;
display: inline;
float: left;
}
To make this work in Firefox and Chrome (and IE8), I removed these styles:
From #header h1:
display: inline
From #nav ul:
position: absolute
display: inline
Then, I added to #nav ul: float: left.