I have this code here. If you open it a browser other than IE, then you would be able to see that the 3rd and 5th li of the ul.submenu have also an img inside. In IE unfortunately it's not displayed on the 3rd li, and it's going underneath like in a different line as if it lacks floats. Normally, the img should just expand the li as in the rest browsers.
I have tried changing the display property of both li and img, as well as various margin and padding combinations of the img but with no luck.
Anyone knows why this happens and what should I do to reach the proper result? Any help will be very much appreciated! :)
Number 1 rule of styling lists: use display:block on the A-tag and put all styling there (other than things for positioning/hiding/showing your lists).
See my tutorail: I love lists.
Related
I am trying to use margin:auto to center a ul tag into a parent div.
I am setting both to fixed widths, and display:block for the ul, but still nothing.
Here is my code
http://jsfiddle.net/7y9qV/3/
I think I know what you mean. The problem is, <ul> elements are actually rendered with a padding (in browsers that I've seen them in), which is causing the list to be pushed to the right.
To fix this, just add to your current definition for #thelist:
#thelist{
padding:0;
}
Here's a JSFiddle that shows what this achieves. I hope this is what you were looking for! If not, let me know and I'll be happy to help further.
I have a problem of vertical alignment of inlined list items in the horizontal navigation menu of a header. I can't use floats because of the rest of the layout.
I was thinking that I could use a larger line-height for the list items, but it doesn't really help that much this time. The list items more or less just sit there, at least when I use the Google Droid font. I also tried vertical-alignment, but nothing.
The basic structure is header -> header-content ->navigation > li > a
All of the list items are set to display:inline.
There's also a list item enclosed h1 element which has an enclosed image: li > h1 >img and a submenu in there: li > ul > >li > a, of which the image complicates things as it has a fixed height of 39px.
The header div sets the height of 4 ems and also a background color. It's within these 4 ems that I need to vertically align the content of my navigation.
I need some ideas how to accomplish this kind of vertical alignment. Suggestions? :-)
You can find a full code example of the problem here: http://pastebin.com/zcLspjJz
I need to support modern browsers and IE7 and upwards. But any ideas are welcome, really.
You can try these methods and if it helps:
Use height and line-height properties and use the same value for both. (E.g. height:20px;line-heigt:20px;)
OR set the display:table-cell; vertical-align:middle;
I'm trying to style an ordered list that seemed quite simple but apparently is harder than I thought, what I need to do is to separate every item with a white border below, the problem is the the "bullet" or "list number" is not part of the li element so the border gets placed below the text only, here's an image of what I mean:
http://www.diigo.com/item/image/1j40h/5eni
I'm trying to find a way to make the bottom border span across the whole border but I haven't been able to, I though about adding a verticaly repeated background to the ol but if the text takes more than one line it won't work, my last resort was to use a ul without bullets and have the user type the number himself that what it'd be part of the li but this doesn't sound very user friendly :(
Can anyone help me? Thanks in advance!
Use list-style-position CSS property for your ol element:
ol
{
list-style-position: inside;
}
It will make your bullets part of the displayed list item content. This is all in accordance with CSS 2.1 specification ( http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position )
http://jsfiddle.net/gUckp/
In the above demo, I'd like to show an orange round image BELOW the center of menu item when it is hovered.
However I am not able to show all the image. The bottom is cut.
How can I do it with CSS?
Thanks in advance.
When using display:inline; on the li items, the height attribute you've given is ignored. Put the :hover on the li items istead of the a tags and it works. The height and line-height you've used becomes superfluous.
Updated jsfiddle
Your a tag needs a block specification.
See: http://jsfiddle.net/gUckp/16/.
Note the line display: inline-block; for the #nav a class.
The reason for the image not displaying correctly in your sample is because it was being placed outside of the a tag rendered block size.
EDIT
Firebug helps tremendously in resolving these types of issues. It allows you to inspect elements etc. I'd suggest adding it to your development toolkit.
background: #01291e url(http://demo.chevereto.com/images/hoverorang.png) no-repeat 50%;
See the updated jsfiddle.
Edit: O sorry, that's not what you asked for. Will try again... ;)
Edit 2: Hereby the correct one.
Edit 3: Or this one with a nicer focusrect size. Enjoy!
I have an issue with list-style-image property in CSS with Internet Explorer 8
If I set
li {
float:left;
list-style-image: none;
}
each menu item is above each other. If I remove list-style-image:none, they are perfectly positioned instead, but they have the dot image. (see images)
The elements of the list collapse since you set float:left to <li/> and to the inner <a/>. There is no need to; removing float:left from <a/> solves the problem.
As for the list bullets, like said before, list-style-type:none is the way to go.
Especially for IE8, I also suggest to remove the line-height:0 in #block-menu-primary-links. It may cause the collapsing behavior.
Note: I don't really understand the suggestion by #orokusaki. Tried without position:relative;, and it works perfectly well.