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;}
Related
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.
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'm sure this is something simple but I am just not seeing it.
My wrapper DIV is floating left and the A tags within are displaying correctly but mousing over them you'll see that they are not the proper height/width.
I can't seem to get them in line, could someone take a quick look and tell me what I am missing?
Page is here, it's the social media icons
Any help is greatly appreciated, again I am sure it's something simple.
--Edit--
I am on a Mac, tested with firefox and safari so far, they don't hover correctly, only the very bottom portion of them actually function as a button.
In firebug, if I remove the wrappers float attribute, the links hover as they should. So I know it has something to do with the float.
On Chrome the icons are in a line but, as you said, only the bottom portion of them is active. The problem is that your #branding element extends down below the bottom of #main, partially obscuring #subWrapper, #sub, #left, and part of #right (though not enough to cause a problem there).
You could put overflow: hidden on #main, but then the graphic in #branding would get cut off at the bottom. (The graphics look very nice, BTW.) I think if you just add a positive z-index to either #sub or #subWrapper, such as z-index: 1, that should do the trick.
I have navigation bar in my website that makes the links work properly everywhere. But when on Safari, for some reason the links are not clickable unless you highlight the empty space above the option. I diagnosed it further to find that I was adding a negative margin-top for the searchbox to align it properly with the options, when I removed that margin-top, the links were clickable. Any ideas?
You could use a z-index and position:absolute to make sure your navigation Div is on top. thats more than likely what the problem is.
Try that... add
z-index:100px;
position:absolute;
to your navigation in css.
The navigation bar on my site http://hungryathome.net doesn't center properly on Firefox and IE8 Standards mode. It centers properly in IE7 Compatability mode and in Chrome.
What's odd is that setting a Margin on the div (id="navlinks") to 4px or more will make it center properly. Any less will result in it being slightly off-center. I changed the values back and forth in Firebug and it's confusing the heck out of me. Any explanation for why that's happening?
Aha, looking at Firebug using their awesome controls which put the blue color over the elements, your header image is actually hanging down about 3 or 4 pixels over your nav bar, which is causing it to move the nav over and actually make it smaller, so it is centering it "properly". Try making your header a few pixels taller until it snaps into position correctly.
example http://img809.imageshack.us/img809/9784/example.jpg
EDIT: Or apply a border: 0 style to that image so it doesn't add the border around it, might be a better solution...