Hey guys so I am working on a site http://www.prodjsoundlighting.com/ and dev in Chrome. Now when you go to look in it in firefox and explorer it looks bad, more specific the side nav that drops down when you hover over it. If you look on the firefox or ex you will see that there are squares next to the list which has been taken care of in the style sheet, the ul li ul should be display none because that is what it is set at in the style sheet. There is a black background also in the top and that should not be there. It also should be position fixed because that is what I defined it as.
If you could give me a hand I appreciate it!
It looks fine to me. I'm using Firefox and I can't see any list bullets in the sidebar. Did I not understand your question correctly?
Related
The page in question is here: http://dev.psdrotoworx.com/
When viewed in Edge, the menu buttons are rendering wider than they should. This causes the buttons to wrap into a new row, which is undesired behaviour. Like so:
This issue is only appearing on the Edge browser, all other modern browsers are rendering as expected, which is like so:
Is anyone able to see where I am going wrong?
Can anyone explain why IE & Edge handles this differently?
I did not get deep into your code but I think adding this:
width: 100px;
To your .main-navigation .primary-menu > li class in the style.css file might do the trick (somewhere around line 2975).
Having fixed size here is not a big issue as I guess the menu do not have to respond to browser size changes.
I have a basic css only dropdown menu that works great in Chrome and Firefox but not so well in IE9. The issue is that the design I am implementing has a slight gap between the horizontal row of parent items and their respective child lists of sub navigation items.
I'm displaying the sub-menus on hover of the parent li. The sub-menus appear fine in all browsers.
The problem occurs when I attempt to move the cursor across the small (about 10px) gap between the parent li and the submenu unordered list. The cursor does not actually leave the parent li as the gap is made by applying a larger height to the li (and a smaller height to its child anchor element) so I do not understand why IE is acting like li:hover is no longer happening once my cursor is no longer on the child link.
If I move the cursor really fast across the gap I can actually make it to the sub menu and use it fine but this is no good for usability reasons.
I'm definitely missing something really obvious here!!
To view the problem please visit http://beta.pancreaticcanceraction.org/
Add 'preview2012' to the end of that URL to access the site (I didn't want to put the whole link down in case it gets crawled).
Thanks in advance for any help!
If you set the background of your LI (LI.parent) to be red, you will see that in IE, it doesn't matter how much extra height you give it, it's only as high as the containing NAV element.
I've been mucking around with the IE9 dev tool, to try and get it to sit on top and "outside" the NAV container, but no luck yet. I thought I would post to help get you on the right direction.
EDIT:
if you put a "position: relative" on your UL.menu element, it fixes the issue.
Hope that helps!
Here is the accordion i edited from other website, and now i trying hard to make it move from right to left, i mean the grey box but i failed to do so, i did tried to change the margin-right of .accordion > ul > li to margin-left but this will make the box missing. any help please. Thank you
transition from right to left solved and wondering why it's lag, also the menu is not working proper in IE
http://jsfiddle.net/MxExX/4/
see, if THIS fiddle works for you. Might need additional adjusting in IE (/Opera), i tested it in Chrome and FF.
I am struggling with the header of a website template displaying in Internet Explorer.
http://www.furnituremind.co.uk
The search field and button are not in the same place on IE8+ but are in every other browser. I have tried everything and researched issues with IE float CSS property but can not make any progress.
Do I need to specify a completely different CSS sheet for IE8 just to get it positioned properly?
My suggestion is, instead of floating the nav right, position the nav absolute. Set top and right properties to adjust where you want it to line up.
see jsfiddle
http://jsfiddle.net/kuT9K/1/
I've been searching about this issue for a couple of days. But as the problems are spesific, so the solutions usually are. My problem is kinda common but the solutions I found so far didn't work for me.
I use a #header div which is around 30 px height. Under that div, I have 3 divs like left, center and right. I have an accordion menu with js in the left div, content place in center, and last tweets script in the right div. Since I added box-shadow to #header div, other div's under it are placed after where shadow ends. I used z-index to make header div's shadow place on other div's, and it works perfectly in Firefox, Safari, Chrome, even IE9! But when I try in older versions of IE, it just happens the way I tell. Here is a screenshot: http://www.twitpic.com/4kh9w3
Like I just said, I have "last 2 tweets" script in the right div. It fills < ul> < li> items with tweets and shows them. So that I can design this list in my css file. And same, it only doesn't work for IE7&8. I don't even mention 6, it's not so important. The problem is that IE automatically scrolls list items to left. So half of them disappear! Here is the screenshot: http://www.twitpic.com/4khajz
So, what can I do to save my view in Firefox, Chrome etc. and also can fix it in Internet Explorer 7&8?
I'm not sure if i understand your problem... but if you cant get shadows to work try looking here http://css3please.com