I am using an unordered list where the actual list items have a rounded rectangular background image.
My problem is, there seems to be a slight gap between the list items in Firefox but in Google Chrome, there is no gap.
If I change the CSS line-height value, it corrects in Firefox but then breaks Google Chrome.
What do I need to do? I think I am doing something wrong to ensure that between each list item, there is no gap in both Firefox and Google Chrome.
I came across the problem a few minutes ago and found an easy fix that hadn't yet been posted here. I tried changing the margin and the padding and that didn't work, so I floated all the LI element's left, and it worked perfectly.
The best bet is to reset all padding/margins on your <li> and <ul> and then add padding back in as needed for the background image:
ul, li {
padding: 0;
margin: 0;
}
Different browsers apply different default paddings/margins to list, so you need to strip it off for consistency.
Have you tried a negative margin?
li { margin-bottom: -2px; }
These cross-browser pixel imperfections will always exist, this margin trick usually saves a lot of time when tweaking the layout.
A negative margin value as a safety factor will solve it for you...
ul li {
margin: -2px;
}
Related
I have an application that contains a vertical scrollbar on the page because one of my two lists on the page can be very long and I want the user to scroll up or down. What I found was that sometimes the user just hovers the mouse over other elements on the page and suddenly if the scroll bar was at the bottom, Chrome causes the scrollbar to jump to the top.
Has anyone seen this behavior in Chrome? It works fine with the other browsers. I tried changing a bottom padding on one of my header div elements:
padding: 0.75em 2em 1.75em 2em;
and it seems to have reduced the problem, but the problem still occurs occasionally. One thing I do notice is that it occurs when one of my lists are too long.
It turned out to be a CSS problem. Whenever, the element was hovered, the CSS added a box-shadow on the element using the :hover selector. This caused the border to increase and caused the list to change size. When I removed the box-shadow, the problem went away. It was not a Chrome problem.
I see you've already solved your problem but I just bumped into a very similar problem where Chrome (and only Chrome) would scroll a list to the top when the first element in the list was hovered. I had no box-shadow but instead had a list with some padding:
.list {
padding: 0 10px;
}
And when a list item was hovered, a negative margin and some padding was added (for a reason I can't really remember):
.list-item:hover {
margin: 0 -10px;
padding: 0 10px;
background-color: lightblue;
}
This didn't change the size of the list, at least not visually. But after seeing your question and answer, I changed it so that the list did not have any padding and instead all the padding and margin was on the list items. Problem solved!
Sometimes the "non-hover" CSS has incomplete information; the "hover" CSS specifies this extra information. Make sure all info (like "top:") specified in the "hover" CSS has an entry in the "non-hover" also.
I wanted to using a flexible horizontal list menu, and I found one on github that came with a collapsing menu at a certain breakpoint. I didn't need the collapsing menu so I got rid of it. I've been modifying the menu to cater to my layout. There are a couple issues that I can't seem to figure out.
There seems to be a left margin to the menu that I want to get rid of.
On the right side of the menu, while shrinking the browser, the last menu item seems to get overlapped instead of pushed in.
I would like to reduce the margins between list items
Normally this wouldn't be a problem for me, but I've not really worked much in percentages.
.flexnav {
overflow: hidden;
margin: 0 auto;
width: 100%;
max-height: 0;
}
FIDDLE
Add padding: 0; to .flexnav style definition.
To remove padding just use css:
padding:0;
You mention "unwanted", so a tip from what I usually do is, at the top of the style sheet I write this out:
*{
padding:0px;
margin:0px;
}
This will remove padding and margin from all things that have padding or margin by default, so you will no longer have "unwanted" padding or margin, instead you can separately add padding and margin to things you actually want.
I use this approach on all websites I make.
I have designed a navbar for my website; you can see it at http://jsfiddle.net/ToddStyles/D2tZH/.
What CSS I would use to change the spacing between them? I used an unordered list to make it and changed the display to inline.
When you are displaying elements inline, HTML will parse any whitespace as a spacebar character. So, you can either comment out the space between list items, i.e.:
<li>...</li><!--
--><li>...</li>
Or, display them as block level elements and float them:
ul {
overflow: hidden; /* To prevent collapse */
}
ul li {
display: block;
float: left;
}
With regards to the Fiddle you have posted, you have used the <img> tag incorrectly. It is self-closing, and it should not be used to nest anything.
p/s: And please, don't use link shortener just because SO prevents you from posting a Fiddle link due to a lack of code. The rule is there for a reason — providing us code gives your question context.
If you’re looking to increase the width, you can apply a left margin to consecutive <li>s easily:
#navbar li + li {
margin-left: 0.2em;
}
Here’s your fiddle back. I fixed it to use inline-block to make the layout break less when it inevitably wraps on a smaller screen. And do take into account that we can’t see images on your computer across the internet.
I made a css-only dropdown menu. The requirement was to have a horizontal bar of items that can each drop down a vertical menu. Furthermore, those items should not drop a tertiary menu, but instead just show bulleted lists. My html has three nested ul and the menu is working perfectly in all modern browsers. It looks like this:
However, I did not like how the darker box behind the link is starting right of the bullet and does not stretch over the whole menu width, so I played around a bit and finally came to this tweak:
#nav li ul li ul li a {
padding-left:1.8em;
margin-left:-1.8em;
}
Now the bulleted menu item looks just like I wanted:
And due to the nature of em beeing relative to the font size, it works independently of the font size, like shown with a larger font size here:
I tested this on Internet Explorer 8+9+10(developer preview), Firefox 3+7, latest Chrome, Opera and Safari and it works like a charm.
However, I just dont understand why it is exactly 1.8em that does the job. How come every browser indents the bullet items exactly this far? I searched the internet on this topic, but I did not find anything helpful. Can I be sure this works on future browsers? Are those 1.8em specified in the HTML standard?
Thanks in advance for any hint!
Edit:
To DisgruntledGoat's answer: It would not work if I used 1em/-1em or 20px/-20px. With this style:
#nav li ul li ul li a {
padding-left:20px;
margin-left:-20px;
}
I get this (obviously not scaling with the font size) result for different font sizes:
Similarly, 1em/-1em is also off and looks like on the right in the picture above but scaling with the font size. It still looks like 1.8em is the magic distance for some reason...
Given your code, you've set up your ul such that it has no margin or padding. However, you've set up your li's such that they have margin-left: 1.8em:
#nav li ul li ul li {
display: list-item;
margin-left:1.8em;
list-style:disc outside none;
}
#nav li ul li ul li {
margin-left: 1.8em;
padding-left: 0;
}
And there it is.
You should definitely do a CSS reset and then set the properties the way you need them. Never trust browsers to be consistent. It adds a bit of coding but at the same time future proofs your code.
Based on many years of inconsistent browsers - I'd say you can't trust them to ever be consistent. The best option is to forcibly control it yourself.
You can use that by simultaneously setting the padding-left and margin-left of an li. eg:
li {
margin-left: 1.8em;
padding-left: 0;
}
Apparently some (mainly older) browsers use padding and some margin - so be sure to set both.
To answer the question and your comment: your solution works because you negate the padding with the exact same size margin. But the spacing to the left of the list is larger with the larger font size. You would get the same result with 1em padding and -1em margin or 20px and -20px.
As I mentioned in the comment, the actual default padding for lists is 40px. To make things even more confusing, on checking the user agent stylesheets (in Chrome Dev Tool and Firebug for Firefox) they report unique CSS properties: -webkit-padding-start or -moz-padding-start respectively.
I assume that these special properties are used in place of regular padding due to lists being a special case in HTML - they have hanging bullets/numbers that don't count in the padding.
If I add this to my CSS...
small a:hover, a:hover {background-color: #CCC; }
This happens to all images that are also links when viewing in IE 8 (fine in firefox)...
They look right...
http://notails.com/nothover.jpg
until I hover over them...
http://notails.com/hover.jpg
If I remove the line of CSS the behaviour goes away. I've tried googling this but I just get unrelated problems.
By default, images align their bottom edges with the baseline of the text. That grey space you're seeing is the space below the baseline, used by decenders like q, p, y, etc. (The fact that you have no text is irrelevant - space for descenders is still reserved.)
You can get rid of it like this:
a img { /* You might want to make this rule more specific! */
vertical-align: bottom;
}
See That mysterious gap under images for a full discussion of this.
You might also try setting line-height on that item to 0.
try
a {
margin: 0px;
padding: 0px;
}
I think you probably need to set the border for the image to none, so border:none;