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.
Related
Normally, when I create an unordered list in HTML, it will align the bullet point to the top of the text. If I put an input element inside the li element, then it will align in the middle. This is all fine, except that when I add a text area element it aligns towards the bottom of it. Here's an example:
<ul>
<li>Bullet is at <br/>the top</li>
<li><input type="text" value="Bullet is centered" /></li>
<li><textarea placeholder="Bullet is too low" ></textarea></li>
</ul>
The above code looks like this in Firefox v60.0:
Image Display in Firefox
I'm creating a WYSIWYG editor for a specific application. It is mostly finished and the last thing I need to do is get the bullet point behind the textarea to go to the top rather then the bottom.
So far I've tried changing vertical-align to center, baseline, and top to the li element in the unordered list with no success. I have also changed the list-style-position to inside and outside. My searches for anyone else who encountered this problem haven't turned anything either. The only thing I can think might work, would be positioning the li elements relatively and then adding an absolutely positioned bullet point image, but I'd prefer that to be a last resort.
Does anyone have any ideas? I need a solution that only uses HTML, CSS, and not sure why you'd need it, but Javascript is okay (not JQuery). It only needs to work in later Firefox versions. Cross-browser compatibility is not needed at all.
Try setting your textarea to display: block
textarea {
display: block;
}
<ul>
<li>Bullet is at <br/>the top</li>
<li><input type="text" value="Bullet is centered" /></li>
<li><textarea placeholder="Bullet is too low" ></textarea></li>
</ul>
I've prepared this demo:
https://dl.dropbox.com/u/7224702/lists-bug.html
It works fine in Firefox, Chrome and IE8 but is broken in Opera and IE9.
Oh and I don't want to use list-style-position: inside; because if some <li> is longer then one line the second line is not correctly indented.
This is a problem with lists that isn't really specified by CSS. It just says that the marker is outside the box but doesn't precisely specify where.
You could perhaps solve it with text-indent to move the first line back again.
That's the question that's been bothering me for some time as well.
First of all if we look at the spec describing the list-style-position: outside property we will see that
"CSS 2.1 does not specify the precise location of the marker box or
its position in the painting order".
This actually makes this situation not a bug, merely different implementations.
IMO Opera and IE9 make it closer to the spec - which is to put the marker... well... outside the box. In case of floats the box made by the li element is still full-width, only content is shifted inside of it.
I tried to think of alternative solutions but they still turn out to be inappropriate and cause more problems than they solve. An example of using css3 counter increment can be seen here: http://jsfiddle.net/s3sZS/3/, but visually it looks like list-style-position: inside (your indentation problems remain) and the increment itself is selectable and copyable (at least in Opera).
Actually list-style-position: inside looks like the only appropriate solution to this imo.
If you are interested in future implementations of lists - you may read the CSS Lists and Counters Module Level 3 (currently Editor's Draft).
Little later then planned but here is my final solution.
Use list-style-position: inside;.
To repair the indenting of second and folowing lines, use negative text-indent (thanks Joey!)
It is not easy to determine the right value for the negative text indent as every browser does things little differently. Knowing that we will need to use something where we can set the width of the marker manually. And that something is pseudo-element :before. (thanks skip405!)
With the :before pseudo-element and right value of the content property we can now use list-style-type: none;
Delete the list-style-position from 1. as it's useless now.
You can see working demo here:
https://dl.dropbox.com/u/7224702/lists-counters.html
The only drawback is with content: counter(list, disc); in Opera 12. The disc/circle/square values are not working as they sould, values like decimal are alright. I've already reported it as a bug so hopefully it'll be fixed in next version.
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;}
In this fiddle, you can see that the horizontal rule does not go all the way across (under the number). I want it to. I have tried using list-style-position:inside;, however this means that I cannot force the number to appear in the correct position (because of the floated left image). Is there an elegant way to do this using CSS, or do I have to resort to generating the numbering myself and then styling appropriately?
You seem to be well aware of the list-style-position property, so you should know why the horizontal rule will not span all the way under the bullet/number. The list has a padding on the left, pushing the list elements to the right. Their contents won't go out of their space :).
Here's how I got over the issue: http://jsfiddle.net/J4b6Y/14/
[EDIT]
Fix for webkit browsers: http://jsfiddle.net/J4b6Y/16/
[EDIT2]
Works in all browsers AND has valid HTML o_O http://jsfiddle.net/J4b6Y/37/
[EDIT3]
OK, here's another one... http://jsfiddle.net/J4b6Y/39/
UPDATE 4
Seems like Update 3 worked well on webkit but not FF... so it's time to use real CSS power.
http://jsfiddle.net/J4b6Y/122/
UPDATE 3
Now what about this
http://jsfiddle.net/J4b6Y/105/
UPDATE 2
http://jsfiddle.net/J4b6Y/48/
UPDATE
Try this if it works for you
http://jsfiddle.net/J4b6Y/33/
I would suggest that you remove the hr tag and the floating image properties.
If you cannot set the image with css background, you can do the following:
HTML
<li>
<img src="" alt="test"/>
<p>Test</p>
</li>
CSS
li{
border-bottom:1px solid black;
list-style-position:inside;
}
li p{
display:inline-block;
}
Also, if you can remove the p tag, you will save few bites.
From the other answers to the question, it would seem that whilst there are ways of accomplishing this with CSS, there isn't an elegant way. As such, my prefered solution is to generate the numbering in the HTML and style appropriately. This can be trivial to do if the page is generated as a result of server side scripting.
I shall keep an eye out for more elegant ways of solving this with CSS and update this question if I find any.
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