See here: codepen.io/arnaudfabs/pen/waXWJLenter code here
I am using Zurb Foundation 5 to build a mega menu. I need the item name and its price on the same line for each product.
I added a span float right for the price and it shows well on Chrome and IE.
In Firefox, the price is going out of the li tag and is not even clickable.
See pictures:
Good:
Bad:
Any thoughts on what to do?? Thanks!
Removing the style white-space: nowrap; on .top-bar-section .dropdown li a seems to fix your problem in FireFox.
or just override it like this:
.top-bar-section .dropdown li a{
white-space: normal;
}
Related
My product names are very long and they need to stay long.
When the breadcrumb shows the product page, if the screen is small (for example mobile view) the breadcrumb overflows the layout and it causes the browser not to show the page correctly.
I tried to add <p class="overflow-ellipsis"> and also <p class="overflow-visible">to the DIV of the product page which did not work, I tried to add text-overflow: ellipsis; and also text-overflow: visible; to the css in breadcrumb section, which also did not work, I also changed the white-space: nowrap; in breadcrumb css to white-space: normal; and it still did not fix the issue.
Here is a link to one of my pages for example, please make the screen small or see in mobile to replicate the issue.
http://www.nativeamericanwholesale.com/$80-tag-authentic-made-by-charlene-little-navajo-kingman-turquoise-wrap-bracelet
I will need the product name to stay in layout (frame) and preferably goes to second line instead of overflowing the page.
Please note that I do not want to use hidden visibility or anything to cut it out due to SEO issues.
Set white-space for your breadcrumbs:
.breadcrumb > li {
white-space: normal!important;
}
I used !important to override any other code for .breadcrumb > li, but you should know this is not a good practice.
I confirm white-space: normal (and white-space: break-all) isn't enough for OpenCart's breadcrumb issue.
.breadcrumb>li:after{top:50%;transform:translateY(-50%) rotate( -45deg );}
.breadcrumb>li{white-space:normal;display:table-cell;vertical-align:middle;}
.breadcrumb>li:last-child::after{display:none;}
This will fix your issue.
Add this thing to your class.
.breadcrumb li > a {
white-space: normal;
}
Here you need to use .breadcrumb li > a because product name inside a tag in future if will add any other tag inside then li then it will affect to everywhere so better is to used .breadcrumb li > a.
I just discovered that the CSS dropdown menus on this site do not work in Internet Explorer. Not at all, absolutely nothing shows.
The menus work just fine in Firefox, and in Android
Here is the site: http://anlea.org
I've tried a number of fixes, but nothing makes the dropdown menus show up.
Any (simple!) solutions would be greatly appreciated
IE doesn't always play nice with li:hover which is what your CSS menu appears to be relying on. The accepted answer to this question may be of help: IE8 does not hover when using an li with position:absolute
You are not displaying the nested ul on hover, just the li's inside the nested ul. Try adding this:
.main_menu > ul > li:hover > ul {
display: block;
}
also i would advise you to work with child selectors so something like this:
.main_menu ul li /* this would also apply to the submenu's, you overwrite them later in your code */
would become
.main_menu > ul > li /* this will only apply to the top level menu */
for nested menu's. This should not brake the code, but will keep you much more in control and avoid unexpected results.
if you want all li to have the same background for example, both top level and nested, you could still use
.main_menu li
I'm using IE9 to view the site and the menu works fine, only after I switch back to IE9 Standard Mode.
Your site defaults to the Quirks Mode in IE9.
You can refer to here: http://blog.timolthof.com/disable-quirks-mode/ to try to disable Quirks Mode.
height and width of the drop down should be given in px not in % some versions IE does not support width and height in %
On a clients website (HolidayHomes.ca) the dropdown menu doesn't appear to be working in Internet Explorer, not really sure how to go about fixing this..
It appears to have something to do with text-indent on the ul li.inner class. It was grabbing text-indent: -2000px; from #nav li, all of my submenu li's have the class .inner
I've tried adding text-indent: 0px !important; to ul li.inner, but it doesn't seem to be working? However I've noticed if I remove the text-indent from #nav li completely, it works fine?
Help is appreciated! I'm pulling a LOT of hair out over this.. and I'd rather fix it then have to install a new dropdown menu script completely... ugh.
Which flavor of IE is having a problem. In IE 8 and up you can turn on the developer toolbar and walk through the code (similar to firebug in firefox)
just pulled up the site in IE 8 and it appears to be working ok. What is the problem you're having?
After a few more hours of troubleshooting, I was able to fix this error by removing display: inline; from my #nav li ul element. :)
here is the page : http://pfibco.ca/01-accueil-fra.php
I try to block hover highlight the menu... work almost fine
just the selected class dont apply... why ?
#menu ul li a .selected{
and the worst... the menu is completely destroy in ie6, why ?
i used the block propriety.. no choice for the hover...
display: block;
how to fix that ?
Try this for the selected problem:
#menu ul li.selected a {
The HTML has the selected class on the <li> so the CSS should match that.
I can't help you with IE6 though, it destroys a lot of things and my nerves are one of those things.
Answer for your IE 6 issues:
Each menu li tag seems having a style rule for line-height : 15.76pt, which is not found in other browsers. I guess IE6 incorrectly inherit the style from ancestor tag, maybe you can check you CSS file.
The border doesn't seem to work in each link, you can try to apply the border to its parent li tag instead of the anchor itself.
If you got hurry, you can use a litle hack for IE6 ( I'm got red now =X ).
/* hack for IE6 */
* html #menu ul li {
border: 1px solid #BFAF98;
border-top: none;
}
I think it's works fine.
My custom drop down menu has a really large change in top and bottom padding.
UPDATE Javascript, CSS & HTML included in fiddle [PHP removed]
First off, I didn't realise I could share a fiddle ^^
Pretty epic site.
I'ma keep debugging, but thought I'd post it here to see if anyone can spot where the problem is :)
In your fieldset css you are changing the line-height, which is also applied to the dropdown.
You have to set the line-height in the css for the dropdown:
.dropdown,
.dropdown li /* or whatever other selector is also needed */
{
line-height: 1em;
}
EDIT:
That seems to fit quite good:
.dropdown,
.dropdown li,
.dropdown span,
.dropdown a {
padding: 0;
line-height: 3em;
}