In FF and IE8 things look pretty good. I have a mock up of the drop down that I'm trying to create with rounded corners at bottom here: www.geowinedb.org/drop-down-test/test.html. In IE6 the mega div is extending to the far left edge of the window. What do I need to change/add (e.g. underscore hacks) to get the drop-down to shrink-wrap its contents (the ul).
p.s. I'll be back to ask about the z-index problem that blocks the drop-down (IE6 again), but if anyone want to answer that as well it will be much appreciated.
EDIT 20091107: More specifics on the requirements: It must work in IE6+ and the drop down menus cannot be fixed width. The client wants to be able to change menu item text at will and have the drop-downs size automatically.
EDIT 20091111: I never did find a great solution. The menu along with some other requirements for hover changes, meant that JavaScript was necessary. So, I found that I could position each main menu item absolute, then position each sub-menu div absolute (this solved the z-index problem), and lastly I computed the width from the underlying ul and set the outer div width. Then the rounded corners positioned themselves correctly on all the browsers that I needed.
Does it bother to use fixed width for your UL (and maybe UL.mega-b too) ? because this way you will definitely avoid this problem.
display:block in your UL can also be the cause of this.
Related
I've got this weird problem which it seems that i simply can't solve (so far). The weird thing is that I've done almost exactly the same layout before for a navigation-bar, which was succesful.
In my navigation bar i have a button (not an actual <button> but a <div> which acts like one through jquery) to the farthest right of it, which has a background color and expands on click. The problem is that in IE and some resolutions of Chrome as well, there's a little white stripe shown beneath this div. Further this makes the child div that expands beneath it have a little gap between the button in the navigation bar and it self. This might not matter to some people (or most), but it's driving me mad - especially considering that i've done it before and used almost the very same css.
The <div> (to be more precise, it's the "quick-download" div) is set to a height of 70px and line-height of 70px, and the same goes for its siblings (and some of them less). However, the parent div shows up as 70.4px in height, which is bugging me out. I've tried numerous "trial-and-error" solutions/attempts, but with no success at all.
EDIT:
An image of the problem can be seen here (i changed background to red to make it more apparent): http://imgur.com/fya0duQ
EDIT 2:
The white space beneath the quick-download div appears only to be showing in IE and Safari on my compute right now.
EDIT 3:
Link to website is removed as the problem is corrected and therefore no longer is useful.
Assuming you mean the "Quick Download" button...
The height of the navigation bar is 75px and the height of the button is 70px, creating a 5px-tall gap.
The reason your navigation bar is 75px is because your image on the left is 60px tall with margin-top: 15px;. If you want the button to be flush with the bottom of the navigation bar, you can either increase the height of the button, reduce the margin-top of the <img id="aktie-skat-logo" ...>, or reduce the image's height.
The CSS in question:
#aktie-skat-logo {
margin-top: 15px;
display: block;
}
I've actually tracked the problem down my self - however, only after checking the problem across different browsers, after posting in here. The hint came in my old version of safari and IE, and didn't show in Chrome - which is consistent with "EDIT 2" in the original post. I found that some links we're 0.4px higher than others, but only 2/5 links.
The problem apparently stems from inserting a FontAwesome icon using the css ::after selector to links that has "children" (subpages). After removing this or making these icons position:absolute the problem is solved.
As to why insering these using ::after I have no idea. The ::after element had display:inline so shouldn't have broken too much in my opinion.
I'm sorry that I might have wasted your time checking my problem and answering, but even though I found the solution my self, it was a help posting in here (wouldn't have found it otherwise). I hope this might help some other people at some point.
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.
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!
When you hover over the top nav links (contact/donate/media) in IE7, the footer div comes up to the level of the sidebar.
I've tried:
- Disabling all scripts
- Putting clear divs in footer
- Setting height/min-height for the sidebar.
- Removing the twitter/facebook widgets
- Removing all the CSS stylings for the top navigation bar
Same problem. Any ideas?
I have had a problem similar to this a few years ago. What caused it for me:
hovering over a link in a menu
menu item changes size ever-so-slightly by adding a 1px border, creating an underline, becoming italicized, etc..
new size of item caused the outside container to become a few pixels wider than the declared width
footer/other content floats up because there are a few extra pixels OR
something on the same height of the menu is kicked down a below the container-object and throws a wrench in the rest of the flow
Hope my experience helps!
edit
Yes, I did fix it.. It was a mess, but basically involved going through each :hover selector and making sure that absolutely nothing changed -- except the colors involved. I also remember that I needed to re-declare and width: nnpx; height: nnpx; in the :hover selector.
Man! Love programming for old browsers!
Solution was to move the "navigation" div inside the "header" div.
Don't know why, just kept taking out divs by process of elimination.
I have an extremely strange problem in IE that I can't seem to track down. I have two boxes, both floated left, with a margin-left on the right box to give some spacing between the two. In Firefox (of course), it all displays correctly, but in IE when the page is first loaded, the boxes have no separation (no margin).
Here's the crazy part. If ANY CSS changes on the page at all, the box magically jumps to the correct position. And when I say any, I mean any. I modified the final font name of 3 in the font-family list of the body tag, and the box shifted to the correct position (this wasn't a change that would even modify the look of anything on the page).
I could post my HTML and CSS on the page, but it's fairly routine. I just wondered if anyone had come across or heard of this problem in the past? Incidentally, IE8 seems to render it fine.
Thanks.
Follow-Up:
So I was able to at least patch the problem by floating the box on the right to the right, and removing its margin-left property. Because my container div is just wide enough to accommodate the two boxes, this works for my situation, but it wouldn't be nearly as nice if the two boxes weren't contained so tightly in their container div.
Older versions of IE can be pretty buggy about how they handle floats. Try defining a width on your floated elements. This will help make the layout more explicit (so harder for IE to misunderstand) and trigger hasLayout if you haven't already (a weird internal IE property that causes a lot of layout bugs).