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.
Related
I'm looking for any working solution in IE8 for this little issue I'm having. For some reason css pie isn't working great on this server we are working on so we are having to use images for IE8 specific stylesheets to sort some quirks out.
On the right hand side there is a facebook panel that needs rounded corners, so far I have an image on the top of the panel to give it a rounded corner, but ideally we want rounded ones on the bottom too, but I just can't figure out how. Could anyone shed some light? Quick dirty fixes are welcome!
Image attached - see how it is in webkit compared to IE8:
http://i.imgur.com/0A9Ns2v.jpg
Thanks guys!
Edit: My solution was to add an extra div inside the parent. Thanks #Pete.
if you add an extra div inside your #block-facebook-pull-facebook-pull-default and then flip your /images/fb_top.jpg to create a bottom image, you can add the following style to the new div:
#block-facebook-pull-facebook-pull-default > div
{
background:url(../images/fb_bottom.jpg) left bottom no-repeat;
}
you then want to take all the padding off the parent div and put it onto the new div
I am sorry for all of the confusion and wrong post type. I will keep playing with it or try to get all the css in order so I can paste it correctly on here.
Thanks for the info and help that you were able to give.
Grady
I am not sure if anyone can help me but for some reason I can not figure out why my nav bar has a 'shadow' without any shadow tag. It is very annoying and I can not figure it out. I am able to change the entire navbar to the same color as the background but then it does not stand out. If you can offer me any advice or things to try that would be great!
Here is a picture of the nav during regular view and then I zoomed in and took another shot.
https://dl.dropboxusercontent.com/u/11217802/nav%20bar%20issue.png
I have tried border: none and box-shadow: none but nothing seems to remove that little overflow.
UPDATE:
I should have posted this to start with. I do not have the complete html/css as I'm using wordpress so the code is not exactly mine to share. You are welcome to view our site here, http://jrummy16.com/test/
I have just been using the console in Chrome or Firebug in Firefox to style it to that point.
Thanks in advance
Grady
This has nothing to do with overflow or box-shadow. What you are seeing at the edge is just the continuation of the background of the parent element.
You can fix this by correcting the positioning of your blue support nav so that it properly aligns to the far edge and doesn't leave the small section showing at the end.
EDIT:
Looking at the actual code, there are two "rogue" pixels that account for your excess right spacing. The first pixel is from the border from css line 394:
#mainmenu.scaled li.menu-item a {
border: 1px solid #E2E2E2;
}
You can either leave this here so the 1px border around elements stays constant, or you can remove it from your last nav using the :last-child pseudo-selector to set border-right:none;
So second rogue pixel comes from a clearing div that you have in the navigation. Deleting this div and applying a CSS clearing fix seems like the best solution. A basic clearing would be setting overflow:hidden; on the container element, but there are more robust css clearing you can use if your situation calls for it.
My guess is it's your padding on your grey box. Set padding:0px; on that get box element and see if that does it.
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?
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!
http://www.Kbay.in ...its wat im workin on. The blue colored nav strip appears on behind the nav panel whereas i want it to be below the nav as if the nav buttons are sittin on it. I gave it:
margin-top:30px;
That works fine but only in Firefox, other browsers still show the strip behind the nav,
until i give:
margin-top:50px;
then firefox gets screwed up and shows it way below the nav. Anyone know how to fix this?
Actually the error is with IE wich is messing with margin-fusions.
CSS Margins Overlap Problem
i recommand the use of this to help you deal with this issue if it's your first time
it wil reset your margins and padding to 0 and then you can rebuild them 1 at the time while testing if it's working.
*{margin:0;padding:0;}