Why is the browser injecting space into my LI? - html

I'm running into a weird issue that I've never noticed before. I have the following code:
<div class="feedback">
<span> Was this helpful?</span>
<ul>
<li>
Yes
</li>
<li>
No
</li>
<li>
No
</li>
</ul>
</div>
Very simple block of code. Ignore the second no, as it's literally only there to give me a third li to help me figure this out. Now, here's the CSS...
div.feedback {
position: relative;
}
span {
float: left;
}
li {
display: inline-block;
padding: 0;
margin: 0;
border-left: 1px solid #000
}
Now, here's what's happening:
See the extra spacing that's seemingly coming from nowhere? I moved to border-right just to test it, and got even more inconsistent results:
Now, the 3rd LI has 0 padding and margin, as it should. The other two still have a spare space.
Lastly, the browser comprehends the proper height and width of the li, and attributes no margin or padding to it. According to the browser, the text should be smashed up against the border, as I also expect.
Can someone please explain what this extra 3-5 pixels of spacing is on the right of the text?

That's because linebreaks are treated as a space in HTML. You've specified your inner elements to be inline-block, which means that spaces between them are displayed.
You can either:
Set the font-size on the parent to 0, and then back to normal on the <li>,
Simply eliminate the linebreaks between <li>s.
A third (lesser) option exists, it's the use of float.
float was originally meant to allow for elements to be pushed to the edges of the container, while having text flowing around it freely (like images in a newspaper). That feature was exploited used for layout as well, when people discovered it would make block level elements stack horizontally.
Using float would mean you need to clear after yourself, by either using a clearfix, or having an element with clear: both set on it.
This option is lesser, because much like tabular layouts, it's not the original purpose of float, implementation may differ between browsers and between time periods, but most importantly, it adds the overhead issues of clearing. (So stick with display: inline-block if you can help it!)

It's from white space in your code. See this jsFiddle example
<div class="feedback">
<span> Was this helpful?</span>
<ul>
<li>
Yes
</li><li>
No
</li><li>
No
</li>
</ul>
</div>โ€‹

Somewhere you have a display:inline-block.
The inline-block display behaves like this. It shows any space in the code and newlines as spaces.
You have to either manually remove spaces and returns in the HTML or to change the display to something else.

Related

Newline between html element breaks html layout

I know that a newline in html between elements is treated as space, but I think this is pretty scary when you try to play with responsive layout.
For example, here we have the expected and correct behaviour, but to obtain it I had to remove the newline in the html between the element:
https://jsfiddle.net/xew2szfu/1/
<div class="recommend-friend__dialog">You should see only me</div><div class="recommend-friend__dialog recommend-friend__dialog--variant">... but NOT ME!</div>
Here I wrote the html with a newline, as you normally do, and everything got broken:
https://jsfiddle.net/rL1fqwkc/1/
<div class="recommend-friend__dialog">You should see only me</div>
<div class="recommend-friend__dialog recommend-friend__dialog--variant">... but NOT ME!</div>
I know I can fix the problem with a float: left, but I wonder if I missed something, the default behaviour sounds really incorrect to me.
It is happening because inline-block puts a space in between elements, and with the space the second div moves down, since it can't fit on the line any more.
There are many ways to combat this. As you said, float is one of them. This excellent CSS Tricks article is a great help, but I'll go over the ones you probably want:
Negative margin:
nav a {
display: inline-block;
margin-right: -4px;
}
Very simple, you can have a nice html format, but moves the element over to hide the space.
Set the font-size to 0:
.recommend-friend__slider{
font-size: 0;
}
.recommend-friend__dialog {
font-size: 12pt;
}
Or, my personal favorite, skip the inline block and use flexbox instead.

extending <a> elements to extend gradient nav bar to end of page

I'm creating a site with a horizontal navbar in which the buttons are designed as elements, making them easy to differentiate, and they individually light up when you a:hover over them. Here's a link: http://allpropestmanagement.net/commercial2.html
Obviously not a finished product.
My current problem involves that big purple field on the far right of the navbar, the one that's not a button. That too is an element, but with hover disabled and a whole load of nonbreaking spaces to pad it. That's the problem. I would like that purple field to extend all the way to the right end (with a tiny margin, like it does on the left side). The trouble with nbsp, as you can imagine, is that there's a finite number of them, and they don't scale. So if the navbar is the perfect length on my computer with, say, 16 nbsps, on someone else's machine it won't reach all the way and on yet another person's it will reach too far.
The html looks like this:
<div id="navmenu">
<form>
Home
Commercial
Meet The Pro
Contact
<a id="farright" style="border-top-right-radius:25px;">
<i> "We'll get the job done right!"
</i></a>
</form>
</div>
I feel odd saying this, but the css is kind of bulky and I'm having trouble formatting this post. Perhaps I'll add it in a few minutes once this post is visible, but the css file is "smithmicropurple.css".
Anyway, I would like a way to stretch that element so it always fits correctly, or if not, some other method that achieves the same effect. I have already tried setting widths individually for each element and that doesn't appear to work.
I like to do these types of things to "help" others (rarely, if I'm lucky), but also to help me learn more about html/css.
So I've given it the old college try with this FIDDLE.
HTML
<div class='holderdiv'>
<a href='#'>One</a>
<a href='#'>Two</a>
<a href='#'>Three</a>
<a href='#'>Four</a>
<a href='#'>We'll Get the Job Done Right!</a>
</div>
I won't post the CSS because it's pretty long. It's in the fiddle.
Please don't consider this a "real" answer. Perhaps just something to think about.
Semantically, I am not sure why the parent is a form element, i'd suggest changing that to a HTML5 <nav> element. (assuming you're using HTML5, of course)
The approach taken here is to set the child elements to display:table-cell, and give the targeted element, #farright a width of 100% to fill the remaining space. Also, text-align:center will effectively center all the child elements. No need for %nbsp;
#navmenu {
font-size: 14pt;
margin: 5px 0 0 5px;
}
#navmenu form {
width: 940px;
}
#navmenu form > a {
display: table-cell;
white-space: nowrap;
text-align:center;
}
#navmenu #farright {
width:100%;
}

Adjusting line-height for different ems in stacked text?

I'm trying to "stack" some text, but have one small word inserted among the big words, like so:
THIS
IS AN
important
SENTENCE
I have the HTML laid out with the main text in its own class, with the font size at 8em, and a span in the middle for the smaller word. In the CSS, I've set up a class for "important":
.important {
font-size: 0.5em;
line-height: 0.5em;
}
THIS<br>IS AN<br><span class="important">important</span><br>SENTENCE<br>
...and it's there, and looks great, BUT the line-height doesn't seem to take. The word "important" is 0.5em in size, but the line-height is just as tall as the rest of the words, resulting in a giant space after IS AN and before "important".
I've tried with the <br> both inside and outside the span, on both sides of "important", like
THIS<br>IS AN<span class="important"><br>important<br></span>SENTENCE<br>
...but I just can't seem to get the line-height to take. What am I doing wrong?
This is a side-effect of the markup used. Replace the line breaks (<br>) with block-level containers to achieve the desired behavior (stack the words on one another), e.g.:
HTML
<div>THIS</div>
<div>IS AN</div>
<div class="important">important</div>
<div>SENTENCE</div>โ€‹
You can also lose the line-height declaration, as it no longer serves a purpose:
CSS
body {
font-size: 8em;
}
.important {
font-size: 0.5em;
}โ€‹
References
A live demo on dabblet
HTML block level elements on Mozilla Developer Network
Note: You may use any block level elements, e.g. div containers or p elements. Paragraphs will be more appropriate semantically, but you should be aware of any default styles applied to them such as thick padding, bottom margins etc..
Line height is a tricky thing to control with precision, because of the vagaries in the way different browsers and OS interpret the how the calculation is made. Adam Twardoch wrote about how line height varies with browsers over at webfonts.info, where there's also a more general piece on working with line-height.
Line-height controls aren't really intended for more 'graphic' layouts, but are a part of the designers toolbox for setting legible paragraphs. As Eliran said, use block elements for what you're trying to do. That way you can control positioning far more accurately.
I don't know if this is the most kosher way to do it, but I've had success giving negative margins to text like that instead of adjusting line height.
I usually prefer <p> for adjusting line height. Try something like this:
CSS:
p.important
{
font-size: 0.5em;
line-height: 0.5em;
}
HTML:
THIS<br>IS AN<br><p class="important">important</p><br>SENTENCE<br>

Ensuring similar block height of horizontally aligned DIVs with unknown content length

On a website i'd like to show products in the following structure:
[IMAGE]
[PRODUCT TITLE]
[PRODUCT ID]
[DETAIL TEXT]
[FEATURE LIST]
[PRICE]
Resulting in a product display such as:
Now, the thing is that there are multiple products on display, just like this one, but sometimes they are aligned next to one another.
The problem is that i would like to make the price appear at the same position (vertical wise) in all blocks. Of course i see only one solution at first - overflow:hidden on the detail text / feature listing. But then i'd end up having content cut off, right?
Another problem is that there should also be a more>> button (expander) that appears if the UL/LI-listing is longer than 4 entries. Just like this:
I thought this through quite often, but i seem to find no proper solution. For one i will never know if an LI will be multiline, as the content might be longer or shorter - and i cannot calculalate this serverside, as the font width/height might vary.
I'd appreciate any constructive input here.
Thank You!
As long as you have a fixed width you could use inline-block mixed with negative margins : http://jsfiddle.net/bymaK/11/
The sad thing is that it works in Chrome, Opera and IE 9 but completely break Firefox as it's management of with:0 and negative margin seem buggy (Added issue #709014 to Bugzilla following this post). The solution is to detect this browser and set the width to 1px for it...
It create a small bug as when you resize there is 1 pixel where the price warp to the next line but not the block but it's a lot less visible that the result otherwise :
<div id="container">
<p>texttexttext</p>
<ul>
<li>texttexttext</li>
<li>texttexttext</li>
<li>texttexttext<Update/li>
<li>texttexttext</li>
<li>more ยป</li>
<li class="more">more text</li>
<li class="more">Even more text.</li>
</ul>
</div><p class="price">$3993.99</p>
.price
{
height:40px;
display:inline-block;
margin-left: -200px;
margin-right: 200px;
vertical-align: bottom;
font-weight: bold;
}
#container
{
display: inline-block;
margin-right:10px;
position:relative;
width:200px;
padding-bottom:40px;
vertical-align: top;
}
ul
{
list-style-type:disc;
margin-left:30px
}
li.more
{
display: none;
}
$(function(){
$('a.more').click(function(){
$(this).parent('li').hide().nextAll('li').show(200);
});
});
Maybe have the containing div set to position: relative, and then price set to position: absolute; bottom:0? That way, no matter how much text is in the box, the price is always at 0 (or whatever number you set).
Here's a rudimentary example: http://jsfiddle.net/PFwJ6/1/
You might want to use javascript to find the height and display a "click to view more link".
First, create a div over the price div that would contain your "click to see more" link and set it to display:none. Then you can use offsetHeight in javascript to find the height of the div. If the height is over what is acceptable then you would set the div to display:block. That means you can set all of your containing divs to the same height with the price div pinned to the bottom using positioning.
I'm sorry I don't have concrete code for you. I might be able to put some together shortly. But this should point you in the right direction.

Where is this extra space between divs coming from?

http://www.lethalmonk6.byethost24.com/index.html
If you inspect with firebug the spacing between the "project-link" divs, there are a few pixels of added margin between each div. I have the margin set to 20 px, and then these little bits gets added on. Where is it coming from?
You're using display:inline-block so the white space between the elements is what you are seeing there. You can either remove the white space between the divs or use float: left instead.
To elaborate... if you're using display: inline-block do this:
<div></div><div></div>
Instead of this:
<div></div>
<div></div> // White space is added because of the new line
As Terminal Frost said, add float: left to the class, and remove display: inline-block. Additionally, add content: "." to the parent div container to fix the wrapping issue you'll have from doing that.
As Lucifer Sam said, display:inline-block will show you space between element if there are one.
The slution given is good:
<div></div><div></div>
But for element with large content, i personnaly prefer this solution of not having the white space between display:inline-block elements. This is what i do:
<div>
large content
</div><!-- No space
--><div>
large content 2
</div>
I wasn't quite happy with the provided solutions here and then I came across a fix that I actually was using to address this issue before, but forgot about it...
All you might need is to simply add font-size: 0; to the parent container (you can overwrite this rule for the children, so it shouldn't break your fonts).
So, here's a basic example:
<div class="font-zero">
<div class="inline-block"></div>
<div class="inline-block"></div>
<div class="inline-block"></div>
</div>
<style>
.font-zero { font-size: 0; }
.inline-block { display: inline-block; }
</style>
With that example you don't have to worry about the markup in your code (personally, I think removing line breaks in the code to solve this issue is really ugly) and also you don't need to use floating, which might be not optimal for many reasons.
Since this page was the first Google result, I hope I'll get here next time I come across this issue and forget the easy fix... And maybe it would be useful for someone else too :)