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.
Related
On my website I use pure.css and the navbar consists of more elements than a small screen can display without scrolling. Therefore a scrollbar appears in that case, which I don't want.
I would like the navbar to stay at the top so that the navbar and the content scrolls simultaneously. When I use position:absolute; everything looks even worse. Also the mobile version of that navbar should still work (on mobile screens scrolling though the navbar should still be possible).
I also tried to deactivate overflow-y, but then, obviously, not every element on the navbar is clickable.
If you want that navbar and content scroll simultaneously, you shouldn't use position:fixed.
Remove position:fixed
Add float:left to menu div
Add float:right to content div
If I misunderstood what you want, the comment made by Marco Valente should be nice.
Okay so while testing a site in various browsers everything worked flawlessly except for internet explorer 7. My problem is pretty weird one: my menu elements won't stand still. What I mean by that is that when I scroll the screen down my menu elements travel with me but only the link parts of them (all background stuff remains at the top) and when I scroll back up the menu elements are nowhere to be seen. Is this a known bug in IE7?
I have some suspicions that the problem might lie in position attribute in css as I use position:relative and left/right:50% to center my menu elements.
Found an answer myself. Here it is for those who someday struggle with the same thing.
The culprit was as suspected position. For some reason the relative positioned elements were treated as fixed or somehow seperated from the page layout so it "hovered" over everything while scrolling. To remedy this is one should set the position of the container/wrapper of the page to relative. So here it is in code:
#container{position: relative}
Huge thanks for all comments for prodding me in the right direction.
The website url is: http://www.haorenao.cn.
You can see the navigation bar with green works well in Chrome, but in IE it is wrapped by the browser.
Can anyone help me take a look? It really confuses me for a while, thanks.
apply clear:both; style for the navigation bar with green div as inline style. Otherwise make overflow:hidden; for the div #topContentWrapper
The picture shows the problem area I have with my website. That little black line protrudes out from behind my dropdown menu and in Firefox the word resources will appear underneath home, but it IE and Chrome the menu looks as it should, except for that little black line that sticks out. The template I'm using is a modified Dreamweaver template. It didn't used to do this, but I breaked it :/
edit: all fixed.
You need to clear your floats.
If you add overflow: hidden to your top menu UL and the sidebar div, you will notice the HR moves down.
Edit
Just an FYI, there is probably a better way to clear your floats then just adding overflow: hidden everywhere like I showed in this answer. It really depends on how you are laying out the page, and I don't know what your plans are. Therefore, here are some links below that explain what floats are, how they work, and how to clear them, which should give you a better understanding.
http://www.quirksmode.org/css/clearing.html
http://css-tricks.com/all-about-floats/
I am having a problem with IE. The url to my site is www.trecall.com. I want to put a margin on the left side of the animated menu, to make the menu centered on the page. This works fine in FF, but in IE, the margin does not show up.
Any idea why?
THANK YOU!!
You can try wrapping it in another div and using padding on that. IE is not very good with margins.
Playing with left margin is not the correct way to do horizontal centering, it'll only work on your own display resolution..
see this for horizontal centering in css (old but still correct)