Each link in the menu on the left has padding-left: 15px; the reason for this is so I can add a background image (the blue arrow).
But now, when the text wraps (see "Paintings, prints, and watercolours"), it ignores the padding.
After searching around I can't find any similar cases at all, is that because I am going at this wrong?
If what I have at the moment is fine, how can I fix the wrapping issue?
Padding only applies to block-level elements. Either assign your menu's a elements a display:block; or display:inline-block; to get them to respond properly to padding.
You should place the padding on a div instead - http://jsfiddle.net/qHGrJ/1/
Paddings don't work that way for span style elements. Alternatively you could probably use display:block on the link.
Given the way you're using these anchors you can just set them to display:block.
A more ideal way to mark up this menu (especially since you're using HTML5) would be to use a menu tag containing a list of links.
<menu>
<ul>
<li>My Menu Item</li>
<li><a href="mySecondMenuItem.html>My Second Menu Item</a></li>
</ul>
</menu>
This is more semantic and also gives you the li's as hooks to add a margin to.
Add display:block to your anchors. I would suggest against using inline-block as it isn't fully supported cross-browser (i believe IE7 and below).
Add display block on line 13 of view.css like so
#auction_cat_menu p a{ padding-left:15px; white-space:pre-wrap; display: block;}
Related
Opening this simple jsfiddle in Firefox renders differently than in Chrome and other browsers.
CHROME
FIREFOX
I have actually been trying to make it look like Firefox in other browsers, i.e the bullet position follows the alignment of the text. Note that i'd also want the next list items to be centered, i.e not aligned based on the bullet position of the first one, see screenshot example. Anyone know a way?
I have seen answers using list-style-position: inside, but can't live with the side effect of the difference in the gap between the bullet and the text.
<ul>
<li style="text-align: center;">Hello I'm Centered</li>
</ul>
You could try using a pseudo element like :before instead to get the desired effect across all browsers. By setting the margin-right you can choose the spacing yourself too.
li{
text-align:center;
list-style:none;
}
li:before{
content:'•';
margin-right:7px
}
What's happening is that list-style:none hides the default bullet and by using :before you're able to add it back in as an inline pseudo element.
Traditionally browsers are rather free what exactly to do with the dot in lists. I can easily imagine situations, where Firefox’ solution results in a better rendering.
If the <li> makes trouble, move the text alignment one element farther down, i.e., add a helper element:
<ul>
<li><div style="text-align: center;">Hello I'm Centered</div></li>
</ul>
Disadvantage is, that you introduce an element solely for reasons of styling, but in my experience pragmatism beats purism in such an isolated case.
I am having an issue with line-height on a list item.
In a nutshell, we have a line-height assigned to the body, which the <li> obviously inherits.
If I put a <span> inside the list item and specify a font-size that's smaller than the standard body font, the <li> keeps the line-height for the document, not for what the span actually is using.
One thing to consider is that I'm very limited with what I can do with regards to the actual HTML, as this is HTML created by the ckeditor (wysiwyg) editor. If you open that editor, create some list items and then change the font size, this is what you get:
<ul>
<li><span style='font-size:8px'>Item 2 -- and some supporting text</span>
<li><span style='font-size:8px'>Item 2 -- and some supporting text</span>
<li><span style='font-size:8px'>Item 2 -- and some supporting text</span>
</ul>
I can't really change what it outputs, but of course we can try and use CSS rules to control it.
I put up a jsfiddle that illustrates the issue: http://jsfiddle.net/virtualpromote/pW47c/
If you know of a way to make the <li> to base its line-height on the height of the <span> within it, that would be awesome.
-- Javascipt is not an option to solve this problem. The HTML that's generated is actually passed onto an app that creates a PDF out of it on the fly, so that of course, can't parse any javascript rules that we could apply after the fact.
John,
Billy Moat has the right idea, something like this will work:
li span { line-height: 10px; display:block; }
The span tag falls inline with its container element, the li. Changing it to block forces it outside of inline elements, thus not inside the li line-height.
Cheers
Have you tried setting the line height of the list element to normal?
li {line-height: normal;}
The simplest thing is to not add a unit to your line-height. Simply using 1.3 will keep your line-height in proportion.
Do you want to reduce the line height by .3 so that the span is using a normal line height? If so you can do the following:
li {line-height: .8em;}
In a chain of list elements (<li>) with display: inline, is there a way to force a line break using a CSS property?
Using a <br> within a <li> feels dirty, and outside a <li> is probably forbidden.
to clarify:
I need them "display: inline" because I may need to center them within the UL
I need only some of the elements to have a line break.
Why do you use display:inline?
display: list-item; does exactly what you need (which is default for li)
You can have all <li> elements rendered with float:left and then set on one of them clear:left. This will cause it to "jump" to the next line.
Alternatively, float:right and clear:right will do a similar thing.
Do you want a "line break" after each <li> or just after a few certain ones?
For the former: If you set the width wide enough to fill the container, they will line wrap (actually, they only have to be wide enough to fill 51% of their container, since two could no longer fit on one line). -- but in this case, you probably don't need them to be inline at all.
For the latter: You would probably be better off using float: left with a clear: left on each one you want to start a new line with.
Try putting display:block; on the particular <li> that you want on the next line.
You could try and use the :after pseudo-element but I haven't played with it much.
li.class:after { content: "\a"; white-space: pre; }
works for me.
I have the following navigation where .topNav has position:relative and subnav has position:absolute. I cant get the sublist to appear over the main list due to z-index problems. This seems to be a known problem.
<ul>
<li class="topNav">About Us
<ul class="subNav"><li> Subsection A</li><li>Subsection B</li></ul>
</li>
</ul>
Does anyone know of a workaround?
UPDATE http://brh.numbera.com/experiments/ie7_tests/zindex.html shows exacly the problem I have. My original posting was in the context of a list but I have reduced the problem to the fact that z-index dosn't seem to work when have an element with position:absolute inside a parent element with position:relative
Here's a very good article that explains the stacking issues that machineghost mentions.
http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex
What you might want to consider (depending on why you're wanting the positioning on multiple elements) is adding a hover selector to .base (use JavaScript for IE6) that adds the class to give it relativity.
.base:hover{position:relative;}
This then means that the second .base doesn't have position: relative.
Ok, I think your problem probably stems from a lack of understanding about how z-index works. The z-index property is only relevant for elements at the same level in the DOM hierarchy. In other words, if you have:
<ul id="a">
<li id="b">b</li>
<li id="c">c</li>
</ul>
<div id="d"></div>
and "b" and "c" are styled such that they overlap, z-index will determine which one ends up on top. However, if "c" and "d" overlap, "d" will always be on top, no matter what c's z-index is, because elements that are closer to the root DOM node will always appear above elements that are nested deeper in.
So, as long as "subnNav" is a child of "topNav," I don't think there is any way to make it cover it's parent's content. In other words, as far as I know there is no workaround for this issue, except to make "subNav" not be a child of "topNav".
(NOTE: All that being said, CSS is not simple, so there may still be some way to get the effect you want that I'm not aware of. All I can say is that, based on my understanding of z-index and my pretty good general CSS knowledge, there's no way that I know of.)
adding
background: url(blank.gif);
for absolutely positioned elemnts solves the problem for me. Mybe it can helps u 2 :)
regards
I had the same issue and was able to fix it In IE6 and 7. Combining http://code.google.com/p/ie7-js/ with the following CSS the issue went away. With my issue I had some items inside a list floated left and had a tooltip that popped up whenever the user hovered over the li. To fix it, I adde this:
.ul li:hover {position:relative;z-index:4;}
.ul li:hover + li {position:relative;z-index:3;}
The way it works is whenever the user hovers over the first LI for example, it sets the second LI floated next to it to a lower z-index value. You can of course change the z-index values to fit your own needs.
This did the trick for me. ;)
http://ltslashgt.com/2007/05/16/relative-zindex-and-ie/
Stu Nicholls at CSSplay has a get CSS Based nav w/ 6 level drop down (Can be expanded to more if needed). This works in Internet Explorer IE5.5, IE6, IE7, Firefox, Opera and now Safari, Netscape 8 and Mozilla.
Solution: assign z-index in decreasing order
<div class="base" style="z-index:2">
<div class="inside">
This has some more text in it. This also has a background. This should obscure the second block of text since it has a higher z-index.
</div>
This has some text in it. This has some text in it. This has some text in it. This has some text in it. This has some text in it.
</div>
<div class="base" style="z-index:1">
This is the second div. You should not be seeing this in front of the grey box. This has some text in it. This has some text in it. This has some text in it. This has some text in it. This has some text in it. This second box should be obscured by the grey box.
</div>
Similar to answer by #Orhaan, setting a background property to the absolute element is the only solution that worked for me...
background-color: rgba(0,0,0,0);
Thanks Alex Leonoard
I've got menu items that look like this
<ul>
<li>Item1<span class="context-trigger"></span></li>
<li>Item2<span class="context-trigger"></span></li>
<li>Item3<span class="context-trigger"></span></li>
</ul>
with CSS that turns the above into a horizontal menu, and JS that turns the [spans] into buttons that bring up contextual menus. Vaguely like this:
Item1^ Item2^ Item3^
If the menu gets too wide for the browser width, it wraps, which is what I want. The problem is that sometimes it's putting in line-breaks before the [spans]. I only want it to break between [li]s. Any ideas?
try using
white-space: nowrap;
in the css definition of your context-trigger class.
Edit: I think patmortech is correct though, putting nowrap on the span does not work, because there is no "white space" content. It might also be that sticking the style on the LI element does not work either, because the browser might breakup the parts because the span is a nested element in li. You might reconsider your code, drop the SPAN element and use css on the LI elements.
You need to put the following to keep your list item from wrapping (putting it in the context-trigger class would just keep the span contents from wrapping):
li { white-space:nowrap; }
If you float the <li> elements, you should get the effect you want.