I am attempting a simple vertical navigation using the following HTML markup:
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
Despite having display: block; on both the <li> and <a> elements, IE7 does not appear to respect the full width of the containing div. Any ideas on this one?
http://jsfiddle.net/6eKGL/
UPDATE
I now believe the issue is related to the position property of the container div and the fact that its width is to be determined by the content inside of the <a> elements.
Here is the updated fiddle with IE-7 issue solved. http://jsfiddle.net/6eKGL/35/
Demo: http://jsfiddle.net/6eKGL/35/embedded/result
CSS:
#ajax-search ul li a {
display: block;
/*min-width: 150px;*/ // Remove this rule and the IE-7 will start respecting the display block
padding: 9px 18px;
}
See below screenshot of IE-7
Setting overflow: hidden on the <li> element do the trick for me !
try adding a doctype to your html, preferrably html5 or xhtml 1.0 strict. that way, IE7 renders in standards mode and not use it's own box model.
also, use a css reset. google for "eric meyer reset".
references:
http://www.quirksmode.org/css/quirksmode.html
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
http://en.wikipedia.org/wiki/Quirks_mode
UPDATE:
see this fiddle: http://jsfiddle.net/6eKGL/23/
Set overflow:hidden for ul and some wide width for a
http://jsfiddle.net/sergeir82/N2thx/
Try after removing "min-width" from "#ajax-search ul li a { display: block; padding: 9px 18px; min-width: 150px; }"
Related
I have a problem with very simple HTML markup, which is rendered different in Chrome and Firefox. I'm wondering whether it is a bug in one of them.
The code is as simple as:
<ul>
<li>
<img />
</li>
</ul>
The problem is that in Chrome the <li /> element has some padding at the top, but only if its content is an image. There is no problem with e.g. text.
Example fiddle: https://jsfiddle.net/8c4rujvu/1/
img {
display: block;
width: 500px;
}
li {
border: 1px solid #f00;
}
<ul>
<li>
<img src="http://www.w3schools.com/css/trolltunga.jpg">
</li>
<li>
<img src="http://www.w3schools.com/css/trolltunga.jpg">
</li>
<li>Some text</li>
</ul>
This is how it displays in Firefox (50.0.2):
And in Chrome (55.0.2883.75 m):
What seems to be a problem here?
This is due the default browser / user agent styling difference for display: list-item.
As a fix, you can use inline-block and vertical-align:top (or even just vertical-align: top) for the img to get common behaviour - see demo below:
img {
display: inline-block;
vertical-align: top;
width: 500px;
}
li {
border: 1px solid #f00;
}
<ul>
<li>
<img src="http://www.w3schools.com/css/trolltunga.jpg">
</li>
<li>
<img src="http://www.w3schools.com/css/trolltunga.jpg">
</li>
<li>
Some text
</li>
</ul>
A related question you may want to look at: Why alignment mark list is different on WebKit when using :before height?
Why this happens?
Given that other browsers do not agree with chrome on this, this clearly looks like a bug and it is. See this open bug documented in Chromium Bug Tracker:
Table inside list item rendered at wrong position(Example URL: http://jsfiddle.net/P8Ua7/)
See excerpts from one of the comments in the bug:
Not limited to tables. Putting a flexbox inside a list-item gives the
same result. It also happens if you have replaced content displayed as
block.
The OP has an image (which is an inline replaced element) displayed as block!
Here is another bug you may want to check out.
This issue can simply fix float:left property too , check this fiddle
https://jsfiddle.net/9wp619xz/
check with the bug details Fixing Google Chrome compatibility bugs in websites - FAQ
https://www.chromium.org/Home/chromecompatfaq
img {
float:left;
width: 500px;
}
li {
border: 1px solid #f00;
float:left;
width:100%;
}
<ul>
<li>
<img src="http://www.w3schools.com/css/trolltunga.jpg">
</li>
<li>
<img src="http://www.w3schools.com/css/trolltunga.jpg">
</li>
<li>Some text</li>
</ul>
It is usually due to browsers default styling. In order to fix this issue, i recommend using a normalize css stylesheet or by adding your own css for the element.
The solution is two-fold.
Setting the image to display: inline solves the empty line above the image. This empty line is a nasty bug in Chrome. This bug makes it effectively impossible to use/start with a non-inline element in a default list item. A very big deal if you ask me.
Adding vertical-align: top places the list marker on the top (which is where you probably want it to go). This also removes the unwanted space below the inline image. The list marker placement and the white space below the inline element are not bugs. This is expected behaviour.
This would result into the following (simple) work-around for the OP:
img {
width: 500px;
vertical-align: top;
/* display: inline; *//* This is default, thus can be omitted */
}
li {
border: 1px solid #f00;
}
https://jsfiddle.net/8c4rujvu/3/
This is caused by the two different approaches these two browsers take while rendering a UL / LI element. I think that is clear from the start :)
The issue here is not how inline elements behave!
The issue here is how list-style properties behave in these two browsers!
If you notice that, the size of gap is 18px, which is default line height in chrome! If you increase the font-size for the li then size of dot marker will also increase so as the distance of image from top edge of div.
If Firefox, that dot marker, or list-style-type component act as the absolute positioned element, thus any element after simply begin from the li top-left edge as expected.
But in Chrome, that dot marker, or list-style-type component act as the inline element, and like any other inline element will allow an inline/floating element to get in same line as itself. Thus text which is inline by nature began next to the dot! This applies also for image, button, link, span or any such elements!
Now what you feel as an issue is perfectly normal behaviour for those elements. Even If two elements are floating or inline, if they can not get in horizontal width of parent, the latter element fall down to next line! Similar is the case with display:block elements as they by default start on a new line!
In your example images have display:block, thus they will always begin on new line! But even if you remove that property, still image are quite big to fit in parent, thus it'll fall down & show a gap. (This is for smaller screens only, on larger screen this won't be an issue for inline-block image)
Again, weird part is that, div acts a inline element in this case, even if you give the width above 100%! From this I concluded that, if wrapping of content is possible then that element begin on new line but if content can not wrapped then it starts on a new line!
Note:
This is based on my observations & past experience! If anybody have links to official documentation for this case please paste if here. Also any suggestion to improve this answer are welcome.
I've updated your JSFiddle with more examples: https://jsfiddle.net/8c4rujvu/5/
Try this code for you HTML
ul li {
display:block;
}
img {
display: block;
width: 500px;
}
li {
border: 1px solid #f00;
display:block;
}
<ul>
<li><img src="http://www.w3schools.com/css/trolltunga.jpg"></li>
<li>
<img src="http://www.w3schools.com/css/trolltunga.jpg">
</li>
<li>
Some text
</li>
</ul>
This question already has answers here:
List with nested `overflow-x: hidden` hides list counter/point - why/is this a bug?
(2 answers)
Closed 6 years ago.
I'm inclined to think this is a bug in Chrome (why would a style on a child element affect the parent?), but there might be something else going on that I'm not understanding.
The ordered list below has 1 item, which in Firefox and IE10 is numbered (although in IE, it's positioned wrong). In Chrome though, the number is hidden entirely.
ol {
list-style-position: outside;
}
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 150px;
}
<ol>
<li>
<div>Some text that trails off</div>
</li>
</ol>
What's going on/is this a bug/can this be worked around?
Well, this is a kind of a hack, but it works. Adding a pseudo :before-element brings back the list style, as the li will have some content now. Bring back the div to the top and it looks like nothing has changed.
CSS
ol > li:before {
content: '';
display: block;
height: 1px;
}
div {
margin-top: -1px;
}
Demo
Try before buy
This isn't a bug so to speak, more of a difference in how different browser engines render the CSS. (Blink vs Trident vs Gecko vs WebKit etc)
Technically speaking, the Chrome display is correct due to hiding everything outside of the div as specified with overflow: hidden;.
If you use the Chrome Inspector, you can see where the edges of the elements are and the number is outside of that area.
Your best work-around would be to set an additional piece of CSS to override the main div element.
ol {
list-style-position: outside;
}
div {
overflow: hidden;
}
ol div {
overflow: visible;
}
<!doctype html>
<html>
<body>
<ol>
<li>
<div>Some text</div>
</li>
</ol>
</body>
</html>
If you need to use the div inside li, display the div as inline, otherwise list-style: inside will work.
ol {
list-style-position: outside;
}
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 150px; display: inline;
}
<ol>
<li><div>Some text</div></li>
</ol>
Define selectors for these elements.
Your going to began to run into problems if your just using global tags: <li> <div> especially since your nesting here.
eg:<li class="dothis"> <div class="thisdivdoes"> ...
After you do this it would be easier to differentiate overflow:hidden; where and not where.
Since your tag is within your <li> define what you want them to do individually since that's what you want to do, or else you may see them inherit each other as your experiencing.
Also, check your doctype in HTML5 I think it's not valid while in strict it may be.
I have a html code like this
<ul>
<li>Text</li><br>
<li>Text</li><br>
</ul>
What I want,a line break after each li element, can be accomplished using this code. But the problem is when I go to W3C for html5 validation, it shows the error Element br not allowed as child of element ul in this context.
So I understand that br cannot be used as child element of ul. What I want to know that is there any other way to get the same result as above? If it can be done in css, I am ok with it.
Thanks in advance.
By default, <li> elements are display: list-item which will cause them to generate a block box, so you will get a break after them. Set the display property back to list-item to restore them.
If actually mean that you want a margin, rather than a simple line break, then use the CSS margin property to set one.
You can use the margin-botton in css
ul li {
margin-bottom: 20px; // As per your requirement
}
HTML
<ul>
<li class="one">Text</li>
<li class="one">Text</li>
</ul>
CSS
<style>
.one
{
line-height: 40px;
}
</style>
I am having an issue with a particular aspect of a web dev that I am doing at the moment with regards the css styling.
What I have is the following HTML:
<div id = "spaninsidea">
<ul id="spantest">
<li><a id="nav-button-one" href="javascript:return false;"><span>Link 1</span></a></li>
<li><a id="nav-button-two" href="javascript:return false;"><span>Link 2</span></a></li>
</div>
Styled with the following CSS:
#spaninsidea { background: #494949; padding: 5px 5px 5px 37px; overflow: hidden; margin: 0 0 10px 0; }
#spaninsidea li { display: inline;}
#spaninsidea li a { text-transform:uppercase; text-align:center; border-radius:5px;
display: block; margin-right:50px; width: 100px; height: 100px; background-color: green;
float: left; }
#spaninsidea li a span {background-color:orange; margin-top:50px}
What I am trying to get is the spaned text inside the link to sit in the middle of the a tag. When I try to apply the margin setting on the span it simply sits still, however if I change the font color etc it plays cricket. I cant figure why it styles but wont budge.
I will confess the front end stuff is new to me so if there are any glaring issues that you can see in general please do point them out.
Cheers
Usually you shouldn't have a span within an a. That would be the first part... I would suggest try to apply a text-align:center; to the span as well.
Update: See a working version here: http://jsfiddle.net/2eLer/ You just have to set the line-height of the span equal to or greater than the height of the a.
It's important to remember that spans are inline elements not block elements and as such, do not respond to margin and padding like you would think they do.
There is a css display property called "inline-block" that allows elements to float like spans and other inline elements do, but also makes them behave like divs with regards to margin and padding.
You shouldn't use <span> at all, but change the padding property of the link itself.
I have an html file with an unordered list. I want to show the list items horizontally but still keep the bullets. No matter what I try, whenever I set the style to inline to meet the horizontal requirement I can't get the bullets to display.
The best option I saw in other answers was to use float:left;. Unfortunately, it doesn't work in IE7 which is a requirement here* — you still lose the bullet. I'm not really keen on using a background image either.
What I'm gonna do instead (that no one else suggested, hence the self-answer) is go with manually adding • to the my html, rather than styling this. It's less than ideal, but it's the most compatible option I found.
edit: *Current readers take note of the original post date. IE7 is unlikely to be a concern anymore.
I had the same problem, but only in Internet Explorer (I tested version 7) - not in Firefox 3 or Safari 3. Using the :before selector works for me:
ul.tabs li {
list-style: none;
float: left;
}
ul.tabs li:before {
content: '\ffed';
margin-right: 0.5em;
}
I'm using a square bullet here, but a normal bullet \2022 would work the same.
You could also use a background image on the <li> elements, with a padding to keep the text from overlapping it.
li {
background-image: url(i/bullet.gif) no-repeat center left;
padding-left: 20px;
display: inline;
}
The browser displays the bullets because the style property "display" is initially set to "list-item". Changing the display property to "inline" cancels all the special styles that list items get. You should be able to simulate it with the :before selector and the content property, but IE (at least through version 7) doesn't support them. Simulating it with a background image is probably the best cross-browser way to do it.
Keep them display blocked, give them a width and float left.
That will make them sit by side, which is like inline, and should maintain the list style.
It's actually a very simple fix. Add the following to the ul:
display:list-item;
Adding this CSS line will add the bullet points.
I was just messing around and I ran into the same issue with the same browser constraints; when I searched for an answer your post came up without the answer. This is probably too late to help you, but I thought for posterity's sake I should post it.
All I did to solve my problem was to embed another list with one item within each list item of the first list; like so...
HTML:
<div class="block-list">
<ul>
<li><ul><li>a</li></ul></li>
<li><ul><li>b</li></ul></li>
<li><ul><li>c</li></ul></li>
</ul>
</div>
CSS:
.block-list > ul > li { display: inline; float: left; }
IE7 Page:
o a o b o c
...it is a dumb solution, but it seems to work.
Did you try float: left on your <li/>? Something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
ul li {
float: left;
margin-left: 2em;
}
</style>
</head>
<body>
<ul>
<li>test</li>
<li>test2</li>
</ul>
</body>
</html>
I only tested Firefox 3.0.1, works there. The margin is set because else your bullet overlaps the previous item.
addition:
Be wary that when you float the items you remove them from the normal flow, which in turn causes the <ul/> to have no height. If you want to add a border or something, you'll get weird results.
One way to fix that is to add the following to your styles:
ul {
overflow: auto;
background: #f0f;
}
You may set <ul> as a CSS grid and <li> as cells to get similar layout to inline <li> and keep bullets easily:
ul {
display: grid;
grid-template-columns: 100px 100px 100px; /* or a smarter width setting */
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
You could use Character entities, see reference : http://dev.w3.org/html5/html-author/charref
<ul class="inline-list>
<li> • Your list item </li>
</ul>
In HTML, I added a break after each li like this:
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
And CSS:
li { float:left; }
Using float: left didn't work very well for me because it made the content box of the ul element 0 pixels high. Flexboxes worked better:
ul {
display: flex;
flex-wrap: wrap;
}
li {
margin-right: 24px;
}
You can use following code
li {
background-image: url(img.gif) no-repeat center left;
padding-left: 20px;
display: inline;
}