There will be a 4 pixel wide space between these span elements:
span {
display: inline-block;
width: 100px;
background-color: palevioletred;
}
<p>
<span> Foo </span>
<span> Bar </span>
</p>
Fiddle Demo
I understand that I could get rid of that space by removing the white-space between the span elements in the HTML:
<p>
<span> Foo </span><span> Bar </span>
</p>
I'm Looking for a CSS solution that doesn't involve:
Altering the HTML.
JavaScript.
Alternatively, you should now use flexbox to achieve many of the layouts that you may previously have used inline-block for: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Since this answer has become rather popular, I'm rewriting it significantly.
Let's not forget the actual question that was asked:
How to remove the space between inline-block elements? I was hoping
for a CSS solution that doesn't require the HTML source code to be
tampered with. Can this issue be solved with CSS alone?
It is possible to solve this problem with CSS alone, but there are no completely robust CSS fixes.
The solution I had in my initial answer was to add font-size: 0 to the parent element, and then declare a sensible font-size on the children.
http://jsfiddle.net/thirtydot/dGHFV/1361/
This works in recent versions of all modern browsers. It works in IE8. It does not work in Safari 5, but it does work in Safari 6. Safari 5 is nearly a dead browser (0.33%, August 2015).
Most of the possible issues with relative font sizes are not complicated to fix.
However, while this is a reasonable solution if you specifically need a CSS only fix, it's not what I recommend if you're free to change your HTML (as most of us are).
This is what I, as a reasonably experienced web developer, actually do to solve this problem:
<p>
<span>Foo</span><span>Bar</span>
</p>
Yes, that's right. I remove the whitespace in the HTML between the inline-block elements.
It's easy. It's simple. It works everywhere. It's the pragmatic solution.
You do sometimes have to carefully consider where whitespace will come from. Will appending another element with JavaScript add whitespace? No, not if you do it properly.
Let's go on a magical journey of different ways to remove the whitespace, with some new HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
You can do this, as I usually do:
<ul>
<li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>
http://jsfiddle.net/thirtydot/dGHFV/1362/
Or, this:
<ul>
<li>Item 1</li
><li>Item 2</li
><li>Item 3</li>
</ul>
Or, use comments:
<ul>
<li>Item 1</li><!--
--><li>Item 2</li><!--
--><li>Item 3</li>
</ul>
Or, if you are using using PHP or similar:
<ul>
<li>Item 1</li><?
?><li>Item 2</li><?
?><li>Item 3</li>
</ul>
Or, you can even skip certain closing tags entirely (all browsers are fine with this):
<ul>
<li>Item 1
<li>Item 2
<li>Item 3
</ul>
Now that I've gone and bored you to death with "one thousand different ways to remove whitespace, by thirtydot", hopefully you've forgotten all about font-size: 0.
For CSS3 conforming browsers there is white-space-collapsing:discard
see: http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing
Today, we should just use Flexbox.
OLD ANSWER:
OK, although I've upvoted both the font-size: 0; and the not implemented CSS3 feature answers,
after trying I found out that none of them is a real solution.
Actually, there is not even one workaround without strong side effects.
Then I decided to remove the spaces (this answers is about this argument) between the inline-block divs from my HTML source (JSP),
turning this:
<div class="inlineBlock">
I'm an inline-block div
</div>
<div class="inlineBlock">
I'm an inline-block div
</div>
to this
<div class="inlineBlock">
I'm an inline-block div
</div><div class="inlineBlock">
I'm an inline-block div
</div>
that is ugly, but working.
But, wait a minute... what if I'm generating my divs inside Taglibs loops (Struts2, JSTL, etc...) ?
For example:
<s:iterator begin="0" end="6" status="ctrDay">
<br/>
<s:iterator begin="0" end="23" status="ctrHour">
<s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
<div class="inlineBlock">
I'm an inline-block div in a matrix
(Do something here with the pushed object...)
</div>
</s:push>
</s:iterator>
</s:iterator>
It is absolutely not thinkable to inline all that stuff, it would mean
<s:iterator begin="0" end="6" status="ctrDay">
<br/>
<s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock">
I'm an inline-block div in a matrix
(Do something here with the pushed object...)
</div></s:push></s:iterator>
</s:iterator>
That is not readable, hard to maintain and understand, etc.
The solution I found:
use HTML comments to connect the end of one div to the begin of the next one!
<s:iterator begin="0" end="6" status="ctrDay">
<br/>
<s:iterator begin="0" end="23" status="ctrHour"><!--
--><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!--
--><div class="inlineBlock">
I'm an inline-block div in a matrix
(Do something here with the pushed object...)
</div><!--
--></s:push><!--
--></s:iterator>
</s:iterator>
This way you will have a readable and correctly indented code.
And, as a positive side effect, the HTML source, although infested by empty comments,
will result correctly indented;
let's take the first example. In my humble opinion, this:
<div class="inlineBlock">
I'm an inline-block div
</div><!--
--><div class="inlineBlock">
I'm an inline-block div
</div>
is better than this:
<div class="inlineBlock">
I'm an inline-block div
</div><div class="inlineBlock">
I'm an inline-block div
</div>
Add display: flex; to the parent element. Here is the solution with a prefix:
Simplified version 👇
p {
display: flex;
}
span {
width: 100px;
background: tomato;
font-size: 30px;
color: white;
text-align: center;
}
<p>
<span> Foo </span>
<span> Bar </span>
</p>
Fix with prefix 👇
p {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
span {
float: left;
display: inline-block;
width: 100px;
background: blue;
font-size: 30px;
color: white;
text-align: center;
}
<p>
<span> Foo </span>
<span> Bar </span>
</p>
All the space elimination techniques for display:inline-block are nasty hacks...
Use Flexbox
It's awesome, solves all this inline-block layout bs, and as of 2017 has 98% browser support (more if you don't care about old IEs).
Are We Ready to Use Flexbox?
Using CSS flexible boxes - Web developer guide | MDN
A Complete Guide to Flexbox | CSS-Tricks
Flexy Boxes — CSS flexbox playground and code generation tool
Add comments between elements to NOT have a white space. For me it is easier than resetting font size to zero and then setting it back.
<div>
Element 1
</div><!--
--><div>
Element 2
</div>
This is the same answer I gave over on the related: Display: Inline block - What is that space?
There’s actually a really simple way to remove whitespace from inline-block that’s both easy and semantic. It’s called a custom font with zero-width spaces, which allows you to collapse the whitespace (added by the browser for inline elements when they're on separate lines) at the font level using a very tiny font. Once you declare the font, you just change the font-family on the container and back again on the children, and voila. Like this:
#font-face{
font-family: 'NoSpace';
src: url('../Fonts/zerowidthspaces.eot');
src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
url('../Fonts/zerowidthspaces.woff') format('woff'),
url('../Fonts/zerowidthspaces.ttf') format('truetype'),
url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}
body {
font-face: 'OpenSans', sans-serif;
}
.inline-container {
font-face: 'NoSpace';
}
.inline-container > * {
display: inline-block;
font-face: 'OpenSans', sans-serif;
}
Suit to taste. Here’s a download to the font I just cooked up in font-forge and converted with FontSquirrel webfont generator. Took me all of 5 minutes. The css #font-face declaration is included: zipped zero-width space font. It's in Google Drive so you'll need to click File > Download to save it to your computer. You'll probably need to change the font paths as well if you copy the declaration to your main css file.
2021 Solution
Unfortunately white-space-collapse is still not implemented.
In the meantime, give the parent element font-size: 0; and set the font-size on the children. This should do the trick
Two more options based on CSS Text Module Level 3 (instead of white-space-collapsing:discard which had been dropped from the spec draft):
word-spacing: -100%;
In theory, it should do exactly what is needed — shorten whitespaces
between 'words' by the 100% of the space character width, i.e. to
zero. But seems not to work anywhere, unfortunately, and this
feature is marked 'at risk' (it can be dropped from the specification, too).
word-spacing: -1ch;
It shortens the inter-word spaces by the width of the digit '0'. In a monospace font it should be exactly equal to the width of the space character (and any other character as well). This works in Firefox 10+, Chrome 27+, and almost works in Internet Explorer 9+.
Fiddle
Use flexbox and do a fallback (from suggestions above) for older browsers:
ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
Though, technically not an answer to the question:
"How do I remove the space between inline-block elements?"
You can try the flexbox solution and apply the code below and the space will be remove.
p {
display: flex;
flex-direction: row;
}
You can learn more about it on this link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Simple:
item {
display: inline-block;
margin-right: -0.25em;
}
There is no need to touch the parent element.
Only condition here: the item's font-size must not be defined (must be equal to parent's font-size).
0.25em is the default word-spacing
W3Schools - word-spacing property
font-size:0; can be a bit trickier to manage...
I think the following couple lines is a lot better and more re-usable, and time saver than any other methods. I personally use this:
.inline-block-wrapper>.inline-block-wrapper,
.inline-block-wrapper{letter-spacing: -4px;}
.inline-block-wrapper>*{letter-spacing: 0;display: inline-block;}
/* OR better shorter name...*/
.items>.items,
.items{letter-spacing: -4px;}
.items>*{letter-spacing: 0;display: inline-block;}
Then you can use it as following...
<ul class="items">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
As far I as I know (I may be wrong) but all browsers support this method.
EXPLANATION:
This works (maybe -3px may be better) exactly as you would anticipate it to work.
you copy and paste the code (once)
then on your html just use class="items" on the parent of each inline-block.
You will NOT have the need to go back to the css, and add another css rule, for your new inline blocks.
Solving two issues at once.
Also note the > (greater than sign) this means that */all children should be inline-block.
http://jsfiddle.net/fD5u3/
NOTE: I have modified to accommodate to inherit letter-spacing when a wrapper has a child wrapper.
Generally we use elements like this in different lines, but in case of display:inline-block using tags in same line will remove the space, but in a different line will not.
An example with tags in a different line:
p span {
display: inline-block;
background: red;
}
<p>
<span> Foo </span>
<span> Bar </span>
</p>
Example with tags in same line
p span {
display: inline-block;
background: red;
}
<p>
<span> Foo </span><span> Bar </span>
</p>
Another efficient method is a CSS job that is using font-size:0 to the parent element and give font-size to a child element as much as you want.
p {
font-size: 0;
}
p span {
display: inline-block;
background: red;
font-size: 14px;
}
<p>
<span> Foo </span>
<span> Bar </span>
</p>
The above methods may not work somewhere depending on the whole application, but the last method is a foolproof solution for this situation and can be used anywhere.
I'm not pretty sure if you want to make two blue spans without a gap or want to handle other white-space, but if you want to remove the gap:
span {
display: inline-block;
width: 100px;
background: blue;
font-size: 30px;
color: white;
text-align: center;
float: left;
}
And done.
I had this problem right now and from font-size:0; I've found that in Internet Explorer 7 the problem remains because Internet Explorer thinks "Font Size 0?!?! WTF are you crazy man?" - So, in my case I've Eric Meyer's CSS reset and with font-size:0.01em; I have a difference of 1 pixel from Internet Explorer 7 to Firefox 9, so, I think this can be a solution.
p {
display: flex;
}
span {
float: left;
display: inline-block;
width: 100px;
background: red;
font-size: 30px;
color: white;
}
<p>
<span> hello </span>
<span> world </span>
</p>
I’ve been tackling this recently and instead of setting the parent font-size:0 then setting the child back to a reasonable value, I’ve been getting consistent results by setting the parent container letter-spacing:-.25em then the child back to letter-spacing:normal.
In an alternate thread I saw a commenter mention that font-size:0 isn’t always ideal because people can control minimum font sizes in their browsers, completely negating the possibility of setting the font-size to zero.
Using ems appears to work regardless of whether the font-size specified is 100%, 15pt or 36px.
http://cdpn.io/dKIjo
I think there is a very simple/old method for this which is supported by all browsers even IE 6/7. We could simply set letter-spacing to a large negative value in parent and then set it back to normal at child elements:
body { font-size: 24px }
span { border: 1px solid #b0b0c0; } /* show borders to see spacing */
.no-spacing { letter-spacing: -1em; } /* could be a large negative value */
.no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */
<p style="color:red">Wrong (default spacing):</p>
<div class="">
<span>Item-1</span>
<span>Item-2</span>
<span>Item-3</span>
</div>
<hr/>
<p style="color:green">Correct (no-spacing):</p>
<div class="no-spacing">
<span>Item-1</span>
<span>Item-2</span>
<span>Item-3</span>
</div>
The simplest answer to this question is to add.
css
float: left;
codepen link: http://jsfiddle.net/dGHFV/3560/
With PHP brackets:
ul li {
display: inline-block;
}
<ul>
<li>
<div>first</div>
</li><?
?><li>
<div>first</div>
</li><?
?><li>
<div>first</div>
</li>
</ul>
I'm going to expand on user5609829's answer a little bit as I believe the other solutions here are too complicated/too much work. Applying a margin-right: -4px to the inline block elements will remove the spacing and is supported by all browsers. See the updated fiddle here. For those concerned with using negative margins, try giving this a read.
The CSS Text Module Level 4 specification defines a text-space-collapse property, which allow to control the how white space inside and around an element is processed.
So, regarding your example, you would just have to write this:
p {
text-space-collapse: discard;
}
Unfortunately, no browser is implementing this property yet (as of September 2016) as mentioned in the comments to the answer of HBP.
I found a pure CSS solution that worked for me very well in all browsers:
span {
display: table-cell;
}
Add white-space: nowrap to the container element:
CSS:
* {
box-sizing: border-box;
}
.row {
vertical-align: top;
white-space: nowrap;
}
.column{
float: left;
display: inline-block;
width: 50% // Or whatever in your case
}
HTML:
<div class="row">
<div class="column"> Some stuff</div>
<div class="column">Some other stuff</div>
</div>
Here is the Plunker.
There are lots of solutions like font-size:0,word-spacing,margin-left,letter-spacing and so on.
Normally I prefer using letter-spacing because
it seems ok when we assign a value which is bigger than the width of extra space(e.g. -1em).
However, it won't be okay with word-spacing and margin-left when we set bigger value like -1em.
Using font-size is not convenient when we try to using em as font-size unit.
So, letter-spacing seems to be the best choice.
However, I have to warn you
when you using letter-spacing you had better using -0.3em or -0.31em not others.
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
cursor: auto;
}
.nav {
width: 260px;
height: 100px;
background-color: pink;
color: white;
font-size: 20px;
letter-spacing: -1em;
}
.nav__text {
width: 90px;
height: 40px;
box-sizing: border-box;
border: 1px solid black;
line-height: 40px;
background-color: yellowgreen;
text-align: center;
display: inline-block;
letter-spacing: normal;
}
<nav class="nav">
<span class="nav__text">nav1</span>
<span class="nav__text">nav2</span>
<span class="nav__text">nav3</span>
</nav>
If you are using Chrome(test version 66.0.3359.139) or Opera(test version 53.0.2907.99), what you see might be:
If you are using Firefox(60.0.2),IE10 or Edge, what you see might be:
That's interesting. So, I checked the mdn-letter-spacing and found this:
length
Specifies extra inter-character space in addition to the default space between characters. Values may be negative, but there may be implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text.
It seems that this is the reason.
Add letter-spacing:-4px; on parent p css and add letter-spacing:0px; to your span css.
span {
display:inline-block;
width:100px;
background-color:palevioletred;
vertical-align:bottom;
letter-spacing:0px;
}
p {
letter-spacing:-4px;
}
<p>
<span> Foo </span>
<span> Bar </span>
</p>
I thought I'd add something new to this question as although many of the answers currently provided are more than adequate & relevant, there are some new CSS properties which can achieve a very clean output, with full support across all browsers, and little to no 'hacks'. This does move away from inline-block but it gives you the same results as the question asked for.
These CSS properties are grid
CSS Grid is highly supported (CanIUse) apart from IE which only needs an -ms- prefix to allow for it to work.
CSS Grid is also highly flexible, and takes all the good parts from table, flex, and inline-block elements and brings them into one place.
When creating a grid you can specify the gaps between the rows and columns. The default gap is already set to 0px but you can change this value to whatever you like.
To cut it a bit short, heres a relevant working example:
body {
background: lightblue;
font-family: sans-serif;
}
.container {
display: grid;
grid-template-columns: 100px 100px;
grid-column-gap: 0; /* Not needed but useful for example */
grid-row-gap: 0; /* Not needed but useful for example */
}
.box {
background: red;
}
.box:nth-child(even) {
background: green;
}
<div class="container">
<div class="box">
Hello
</div>
<div class="box">
Test
</div>
</div>
Negative margin
You can scoot the elements back into place with negative 4px of margin (may need to be adjusted based on font size of parent). Apparently this is problematic in older IE (6 & 7), but if you don’t care about those browsers at least you can keep the code formatting clean.
span {
display: inline-block;
margin-right: -4px;
}
One another way I found is applying margin-left as negative values except the first element of the row.
span {
display:inline-block;
width:100px;
background:blue;
font-size:30px;
color:white;
text-align:center;
margin-left:-5px;
}
span:first-child{
margin:0px;
}
I've written this code to create simple CSS and Javascript dropdown menu.
HTML:
<li>XYZ
<ul id="rankSubMenu" onmouseover="showRanksSubmenu()" onmouseout="hideRanksSubmenu()">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
</li>
CSS:
#rankSubMenu {
display: none;
position: absolute;
bottom: 10px;
left: 278px;
}
JS:
function showRanksSubmenu() {
document.getElementById('rankSubMenu').style.display = 'block';
}
function hideRanksSubmenu() {
document.getElementById('rankSubMenu').style.display = 'none';
}
Menu items have of course some height, background and other stuff to make them look like buttons. The problem is that, there is some empty space between this buttons (like a few pixels) and when user stops mouse cursor there, menu disappear (in fact menu always does that, unless you move your cursor real fast). I tried to define this whole area as div or try any other ideas that I thought about, but with no success. Any suggestions how can I solve this?
First off, welcome to the wonderful world of web development. Based on your use of inline styles, li as a top-level container, and attempted use of Javascript for a simple menu show/hide I can tell you're pretty new. No matter! Its a learning process, and web development is fun. :)
First, for what you want, you can do this via CSS only, and without the need for position:absolute in your menu items or anything crazy like that. Here is a working example of a cleaner menu display:
jsFiddle example
My recommendations for the learning process:
Get comfortable with external CSS sheets, use of inline styles is pretty ancient, and very difficult to maintain
Learn about the benefits of classes over IDs when styling; rarely (never?) do you need to use IDs for styling, and class is usually preferred because you can apply it to multiple elements
Get familiar with proper semantic markup; for example li should not be a top-level container, only the container of another ul if there is a sub list or something
Learn external JS event handlers; using inline onwhatever handlers in HTML is another pretty ancient method, and again makes maintenance very difficult
Best of luck!
CSS
.dropdown li{
float:left;
width: 240px;
position:relative;
}
.dropdown ol{
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than
display:none;) */
}
.dropdown li:hover ol{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
HTML
<ul class="dropdown">
<li>
<a href="#" >Your Link</a>
<ol>
<li> Your Link 1 </li>
<li> Your Link 2 </li>
</ol>
</li></ul>
What else would u need for this? Is there any reason to use javascript to create this?
Take a look at this Fiddle. Perhaps it's what you're looking for.
it's only using HTML and CSS.
#rankSubMenu is probably 0px high, try to add some height, also you can do this js free by using :hover
My guess would be set your anchor tags to display block. If an anchor tag is not a block it will ignore a few css properties, width and height being the two main ones, so your click is just the text.
another possible reason is that the submenu coming in is partially covering the link (check your inspector to see what area it's covering).
if you set the height to that of the original item with overflow hidden and then on hover set height to auto
HTML
<nav class="navigation">
<ul>
<li>Menu</li>
<li>Home</li>
<li>About</li>
</ul>
</nav>
CSS
.navigation {
height: 20px;
overflow: hidden;
}
.navigation {
height: auto;
}
no javascript needed
I have an issue with this website when resizing the window: http://goo.gl/BaIuy
Let me try to explain. I'm trying to achieve the experience of being in a fishbowl as you can see. It's made with 4 different containers, one for the water background, one for the content, another for the fish images and the last one for the graphic objects like the driftwood and seaweed.
Each container, except the one for the water background, have a main <ul id="mask"> that is 600% wider than the window size. This ul#mask contains six <li> elements that correspond to each one of the sections of the website and have a width of 100% of the window size each one.
<ul id="mask">
<li id="home" class="box"></li>
<li id="about" class="box"></li>
<li id="services" class="box"></li>
<li id="clients" class="box"></li>
<li id="give" class="box"></li>
<li id="contact" class="box"></div></li>
</ul>
#mask {
float: left;
padding: 0;
width: 600%;
}
#mask > li {
float: left;
list-style: none;
width: 16.66666666%;
}
The problem is that when you are positioned on a section different from the first one (first <li id="home">) and resize the window all <li> elements start to decrease their width but the current <li> doesn't full the window size any more and other <li> elements start appearing in the screen due the resizing action.
I already tried to give the resized width to elements by calculating the width with javascript and deactivated the width of elements in the stylesheet so the javascript does it giving it the window width when page has been loaded., but it seems something is missing or I'm doing something wrong, take a look here:
$(function () {
$('.header').fadeIn(1600);
$('.mainWrapper ul#mask').fadeIn(4000);
$('.secondLayer ul#mask').fadeIn(4000);
$('.thirdLayer ul#mask').fadeIn(4000);
$('ul#mask').css({width: '600%'});
$('ul#mask li').css({width: '16.66666666%'});
$(window).resize(function() {
var viewPortSize = $(window).width();
var maskSize = parseInt(viewPortSize)*6
var maskLiSize = parseInt(maskSize)/6
$('ul#mask').width(maskSize);
$('ul#mask li').width(maskLiSize);
});
});
#mask {
display: none;
float: left;
padding: 0;
/* width: 600%; */
}
#mask > li {
float: left;
list-style: none;
/* width: 16.66666666%; */
}
I hope someone can help and appreciate your time to take a look at this.
Update the scroll position when the browser is resized
When the browser is resized, the horizontal scroll positions of the containers aren't getting updated. Given that the widths of the elements have changed, and given that the page may have switched to a different layout via the #media queries, the previous horizontal scroll positions are no longer valid and need to be updated.
After the resize, each container should be scrolled instantaneously to the correct scroll position, as if the user had re-clicked on the current navigation element (except that the scroll operation should be performed with a duration of 0 msec).
I'm not sure if this alone will entirely fix the problem. At worst, this is a separate issue that needs to be addressed as well.
I had a similar problem which i fixed in this post if you want to have a look.
I tried searching for an answer first, but this seems to be an edge case.
I'm adding a class to a link via JavaScript (well jQuery actually but I don't think it matters in this case). The class adds an icon as a background image and some padding. The padding and background image fail to appear on certain links. The problem shows up in IE8, but surprisingly works fine in IE7. I can't test IE9/10. Works fine in Firefox.
I reduced the code down to a bare minimum and created a jsFiddle that illustrates the problem. http://jsfiddle.net/toxalot/fsdcu/
I'll try adding the code here.
<style type="text/css">
body { background-color: #fff }
a:hover { background-color: transparent; color: #c30 }
ul { padding-left: 40px }
.iconNewWindowLeave { padding-right: 15px; background-color: #ccc }
</style>
<ul>
<li style="float: left"><a class="iconNewWindowLeave" href="#">left link</a></li>
<li style="text-align: right">some stuff on the right</li>
</ul>
<ul>
<li style="float: left"><a class="linkExternal" href="#">left link</a></li>
<li style="text-align: right">some stuff on the right</li>
</ul>
<script type="text/javascript">
$('.linkExternal').each(function() {
$(this).addClass('iconNewWindowLeave');
});
</script>
I've removed the image from the example and added a background color for illustration. In IE 8, the second link doesn't have right padding. Hovering over the link, adds the padding. If I remove the a:hover CSS, hovering doesn't correct the problem. If I remove the float, the problem goes away. If I remove any of the other CSS, the problem goes away.
So I've narrowed down the cause(s), but I don't know what to do about it. I don't want to remove or change the existing code. It's all required for the site layout. If possible, I'd like to add some CSS or JavaScript to fix it. It's a minor issue, but it's bugging me. I'm also curious as to whether or not the problem appears in newer versions of IE.
try to add : a display:inline-block; or display:block; to .iconNewWindowLeave
.iconNewWindowLeave { padding-right: 15px; background-color: #ccc; display:inline-block; }
(not tested)
Whenever you have some floating containers on the page, always clear the parent container.
In your case add a style clear:left on the ul. That should work.
And in case you are using many float throughout your application, better add a clearfix class on the parent container.
I need to create a menu tree using HTML. I had a search on Google, but they are providing some software to download in order to create this. But I need some script and HTML tags to do this.
Can anyone help me solve this problem.
Thanks in advance.
Here is something very simple to start with.
http://www.dynamicdrive.com/dynamicindex1/navigate1.htm
EDIT
Implementing what I learned from #sushil bharwani.
Here is how I found the above URL i.e. at the courtesy of #sushil bharwani
http://www.google.co.in/search?q=Menu+Tree+using+UL+L&qscrl=1
You don't need to use JavaScript (unless you want compatibility with outdated browsers), you can achieve it with HTML+CSS alone. And in a much more semantically-correct way. :)
You can make vertical dropdown menus or (prettier example) horizontal menus using the techniques explained in the Sons of Suckerfish article at HTMLDog.
Simple and meaningful.
Sample
Here is a simple example. In it you can see the hover functionality working perfectly.
The CSS is not good, because it's only a sample.
To work on the style, disable the display: none; line: that will stop the submenus from hiding when not hovered, and you can work on styling everything.
When you are done, simply re-enable the display: none; line to get the submenus to hide and only show on hover.
HTML
<nav>
<p>Collapsing:</p>
<ul class="collapsable">
<li>a<ul>
<li>a1
<li>a2
</ul>
<li>b<ul>
<li>b1
</ul>
</ul>
<p>Not collapsing:</p>
<ul>
<li>a<ul>
<li>a1
<li>a2
</ul>
<li>b<ul>
<li>b1
</ul>
</ul>
</nav>
CSS
nav li:hover {
background: #EEEEEE;
}
nav li>ul {
display: inline-block;
margin: 0;
padding: 0;
}
nav .collapsable li>ul {
display: none;
}
nav li>ul::before {
content: ": { ";
}
nav li>ul::after {
content: " } ";
}
nav li:hover>ul {
display: inline-block;
}
nav li>ul>li {
display: inline-block;
}
nav li>ul>li+li::before {
content: ", ";
}
Here is a jsfiddle: http://jsfiddle.net/x8dxv/
With a bit of javascript and a knowledge around CSS you can convert a simple UL LI list to a menu tree. its right that you can use jQuery if you understand it.
You can narrow your google search by Menu Tree using UL Li. or CSS to convert UL LI to tree.
Navigation menus are mostly created using a combination of UL and LI.
<UL id="Menu">
<LI>Home</LI>
<LI>Links</LI>
</UL>
And you can insert UL inside LI element and thus get a tree structure for navigation.
Here is a simply way to do it if you don't want to write one yourself..
http://www.mycssmenu.com/#css-menu-demo
You might want to look into some of the online tools that builds the menu for you. E.g. CSS Menu Generator
I am not sure if you will find your answer, but here is a list with several different types of vertical menus
http://css.maxdesign.com.au/listamatic2/index.htm
no javascript is involved in those examples