I am trying to create a menu bar which will consist of a series of icons and text laid out horizontally. I am using an unordered list as the container, but I am having a problem. All of the menu items which contain no text, just an empty anchor tag with a background image, display in-line just fine.
However, whenever I try to use text, instead of a background image as a menu item, the text list item is slid downward. You can see this example on JSFiddle, be sure to rollover each of the items to see how the background color indicator behaves: http://jsfiddle.net/pAfgm/6/.
Notice how each of the links with a globe icon (yes, I hot-linked from Facebook for this example) displays nice and neat. However the text and it's background indicator are way off alignment. I see this is the case for FF 3.6, Opera 11, but not IE7! For once, IE7 isn't having a problem where other browsers are.
Could someone please show me how I can correct this issue?
Thank you for your time!
You simply need to add vertical-align: top to nav.pluginBar ul.pluginBarLeft li, on which you also have display: inline-block.
See: http://jsfiddle.net/pAfgm/7/
The default vertical-align value is baseline, which is the cause of this problem.
See the difference between different vertical-align values here:
http://www.brunildo.org/test/inline-block.html
See the "baseline" section here for a graphical explanation:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
Related
Am displaying a chart using highchart and data table below it, When i hover over chart tooltip should display, If the tooltip overflow the chard continer div then the tooltip is transperent and text beside the tooltip are visible, Please check the image attached
Note: opacity is set at 1 and background white
Without seeing further code, it's just guessing the problem.
Perhaps this article will help solve this problem.
z-index article from mozilla dev
Or maybe u have some positioning errors, take a look at this:
positioning article from mozilla dev
But in the first place, for me it looks like a z-index problem.
I am trying to do something that should be simple but is apparently not so. I just want to make a simple single line navigation bar using a list tag. Thats fine, I can do it. The problem is making it wrap gracefully and still keep the same layout when it needs to appear over multiple rows due to not enough horizontal browser space.
As I say, I'm using a list tag and I have the ride side border of each LI item with a visible vertical line to make the divider appear. The final item I am not shwoing that with a last-child pseudo class. Its important that the far left and right buttons DON'T have vertical borders. This is clear in the top image.
The UL tag itself also has a top/bottom border line visible and in the first demo in the image you can see this clearly.
So now what happens when the menu bar wraps... well there there are 2 key problems...
1) The main issue is that when the menu wraps I can't think of a way to make the new MIDDLE horizontal line appear [shown in red in the 2nd image]
2) Multiple list items now don't need a right side border value. In the example 2 list items don't need a right side border. This could grow to 3 though for some screen displays.
Does anyone have any ideas for resolving this?
Note that I am trying to make the menu wrap naturally, not at fixed pixel break points as its so unreliable for something like this with different pixel density screens and font zooms in certain browsers.
We have a tooltip which appears when you mouse over a small (?) image. However, in Chrome, when you un-hover (mouse out), a part of the image on our tooltip somehow still displays, like a ghost image of some sort.
This is the jsFiddle Test Case:
http://jsfiddle.net/UYxBt/
Dont use inline element '.tooltip span'. Use 'div' or add 'display:block' to this span on your css file.
http://jsfiddle.net/fliptheweb/UYxBt/1/
I have a dynamic sub-menu that gets programmatically constructed in the code behind. Whenever a large amount of items are added, the scroll arrow appears to allow scrolling of the sub-menu, but when it does appear, it also seems to truncate the menu text because the sub-menu width is not correctly sized to accommodate the text.
The problem is not the scrolling itself; that is working the way I want it to. The problem is that the menu width is shortened and this is truncating the menu text when the scrolling arrows are presented for large menus.
This problem seems to be in IE7, because it is working fine in IE6, the width of the menu is of the appropriate size to fit the text. Has anyone experienced this before and how did you fixed it?
you can wrap the menu in a div and set overflow:scroll on that, but that applies to the entire menu, not the drop-down part. You can't change the drop down part on the standard menu, but it you use the CSS Adapters (http://www.asp.net/cssadapters/) you can change the size and scroll capabilities of the drop-down parts. However, this gives the standard scrolling - you see a scroll bar around the section and you have to scroll manually, it's really not a very nice experience. What you probably want is something that gives an arrow at the top/bottom to allow scrolling as you hover over it, to bring the items into view; this cannot be done without rewriting the menu control. If you need this functionality you might be best to look at a third party menu control, or even one of the ajax frameworks which might have something. jQuery...
my theme (www.wortwaerts.net) works fine in IE8: If I change the window size by squeezing or stretching it, all elements (especially the search and category dropdown in the header) keep their position - and a horizontal scroll bar will appear if the screen gets to small.
My problem: In other browsers, e.g. Mozilla, squeezing the window makes the search shift upwards and the category dropdown downwards – also, the text content is cut off and no horizontal scroll bar appears that enables the user to read the cut-off content.
Does anybody know why only in IE8 all elements keep the position? And how to fix the elements and make a horizontal scroll bar appear in other browsers as well (how to change which theme files)...? Putting #screen { width: 58.875em; } into style.css doesn't work...
I'm really a starter and would be happy about any hint :o) Thanks, Felix
just add "min-width: 58.875em" to your code it shoud work but i'm not sure...