I am currently having trouble getting rid of a sliver of white...
Here is an example page: http://m.stackoverflow.quickmediasolutions.com/view_question.php?id=97969&site=serverfault
As you can see, the answers have a sliver of white stuffed between the top of the 'button' and the content.
Here is some relevant code:
<!-- this is the top of the 'button' -->
<div class='top'></div>
<!-- right here is where the space is -->
<div class='content'></div>
.top {
height: 5px;
}
.content {
display: block;
padding-left: 10px;
}
Edit: this problem is fixed now and I will accept the answer below shortly.
This looks like native margin the <p> element has:
.question p { margin: 0 }
A relevant tip here it to use a CSS-Reset, it eliminates most of these oddities and cross-browser compatibility issues.
you know, you'd be surprised how often whitespace breaks layout. I found out the hard way.
Just for $hits and giggles write it out together and see what happens:
<div class='top'></div><div class='content'></div>
and of course I would make sure that in your css you define margin:0px; for both divs
Related
For a webpage grid-layout I decided to use Flexbox. Now I wanted to implement some "auto-functionality", so that grid-boxes can later be inserted without the need to add classes or styles in the HTML. One of this features is to make a box allways be 75% as tall as it is wide - even if the box is resized by, for example, browserwindow resize. Off course, if the boxes content extends the 75%-height, it should (and only then should) increase its height to fit the content. I searched for hours to find a suitable solution, but I finally got it working. So I thought at least, until I added content to the box.
The auto aspect-ratio works fine, as long as the box is empty. If I add content, the 75% of the width is allways added to the height it has through extension by its content. I made a jsfiddle to clearly visualize the problem:
JSFiddle wd5s9vq0, visualizing the following Code:
HTML-Code:
<div class="container">
<div class="content-cell"></div>
<div class="content-cell"></div>
</div>
<div class="container">
<div class="content-cell">
This cell has an inreased height because of
it's content. The empty space below the
content is the 75% of the cells width.
</div>
<div class="content-cell"></div>
</div>
CSS:
.container {
display: flex;
width: 400px;
}
.content-cell {
flex: 1 1 0;
margin: 10px;
background-color: #ccc;
}
.content-cell::after {
content: "";
display: block;
padding-top: 75%;
}
If I didn't knew it better, it looks like a floating-problem - but I think the ::before / ::after selector should add the block-element before the element it is used on and not inside it.
Does anyone has an idea on how to fix this problem?
This seems to be a very widespread problem on the internet, and most solutions you find are either about wrapping the content, absolute-positioning the content or a mixture of both. This has numerous and case-dependent downsides. After hours of playing around with the code, I finally found a combination of CSS proporties that work without the need to add any DOM or make the content absolute-positioned. This looks quit basic, and I am wondering why it took me so long and why you can't find it out there on the web.
The HTML:
<div class="mybox aspect-full">
This is text, that would normally extend the box downwards.
It is long, but not so long that it extends the intended aspect-ratio.
</div>
The CSS:
.mybox {
width: 200px;
}
.aspect-full::before {
content: '';
display: block;
padding-top: 100%;
float: left;
}
The only downside I could find is that the content of your cell must float. If you use clear on one of your child objects, it is positioned below the expander-block and you are back to the original problem. If you need to clear the floating of divs inside of these aspect-ratio-cells, you might consider to wrap them and keep the wrapper floatable.
Roughly speaking, attempting to build a four-column layout, I've got this HTML:
<div>
<div>A column</div>
<div>A column</div>
<div>A column</div>
<div>A column</div>
</div>
And I've got this CSS:
div {
background: #ccc;
}
div div {
background: #eee;
display: inline-block;
width: 25%;
}
-> Fiddle me this <-
When rendered in the browser (Currently, I have been testing with Chrome only) the whitespace between the nested div elements (in this example the whitespace is caused by line breaks) is rendered, thus throwing my layout out.
Clearly, I can float my nested divs...
div {
background: #ccc;
}
div div {
background: #eee;
width: 25%;
float: left;
}
-> Fiddle me that <-
But then my container div collapses and I don't want to have to have to use CSS clearfix hacks or extra HTML to open it back up.
Alternatively I can modify my HTML such that the whitespace is removed...
<div><div>A column</div><div>A column</div><div>A column</div><div>A column</div></div>
but that makes it hard to work with. The alternative of breaking the tags so that it becomes more readable somehow leaves me feeling dirty...
<div>
<div>A column</
div><div>A column</
div><div>A column</
div><div>A column</div>
</div>
I've found a resource or two (I failed to find anything on SO) but I don't really like any of the solutions - they are all workarounds, which I will entertain if I must but surely there's an alternative?
So my question(s)... is there a cross-browser, w3c-compliant, non-javascript, hack-free, tidy HTML, bombproof way of preventing HTML whitespace from being rendered in the browser whilst using display:inline-block? Or is there an alternative to inline-block that can be used that has no unpleasant side effects?
EDIT
Assuming that this is genuinely impossible, the best solution would be something that required no addition HTML markup and 'flexible' CSS. In other words, a webmaster could edit the HTML as normal without consideration of breaking the layout, and the CSS (hacked or otherwise) will accommodate the webmaster's amends without having to be amended itself.
MY "WORKAROUND"
Well, it looks like something's got to give. In my situation it is more important to have HTML that doesn't require extra markup so the best solution is to work in a CSS hack that "just works" invisibly. The solution is to float the nested divs and add a hack...
div div {
float: left;
}
div::before,
div::after {
content: "";
display: table;
}
div::after {
clear: both;
}
div {
*zoom: 1;
}
...which is a derivation of a fix I've been using for some time and was hoping to avoid. This succint version of the fix was found on this site.
So now every single div in the markup has got the clearfix hack applied to it whether it needs it or not. I'm yet to learn if this has any bad side-effects by being applied to all divs - I look forward to debugging and fixing when any problems surface ;-)
You provided nearly all possible solutions to this big layout question. I just want to point out my preferred solution.
Set font-size to the parent to 0 and resetting it again with REM's.
You'll have no trouble with your code and layout if there is no additional text inside the parent div (not the child divs).
REM's (Relative EM's) are not relative to the font-size of the parent elements (like normal EM's are), but relative to the root element of your document – the html element.
HTML:
<div class="parent">
<div class="child">column 1</div>
<div class="child">column 2</div>
<div class="child">column 3</div>
<div class="child">column 4</div>
</div>
CSS:
html {
font-size: 1em;
}
.parent {
font-size: 0;
}
.child {
display: inline-block;
font-size: 16px; /* Add pixel-based font-size to support IE8 and below */
font-size: 1rem; /* Don't use rem along with the font-shorthand to avoid problems in IE9/10 - see note below */
width: 25%;
}
No Browser support:
IE8 and below: Add pixel-based font-size to make it work.
IE9/10: not working with font-shorthand; use font-size instead!
(Opera Mini & iOS 3.2)
is there a ... way of preventing HTML whitespace from being rendered in the browser whilst using display:inline-block?
Yes, there are several ways. None of them really meet your criteria of 'hack-free' and 'tidy', but they do work.
Reformat ('minify') your code so that it doesn't have any white space between the elements.
This is probably the most hack-free and cross-browser solution. It isn't necessarily tidy though, and it means you're fixing your layout by adjusting the HTML rather than the CSS, which isn't ideal. But it does work well. If you want to keep your code readable, you could use HTML comments so you can keep the gaps but without them being in the DOM:
<div>block 1</div><!--
--><div>block 2</div><!--
--><div>block 3</div>
Still not ideal, but more readable than a massive single line of code.
Set the font-size to zero for the container, and back to full size again for the blocks.
This works really well. It's a pure CSS solution and easy to do. The down side is that it can be difficult to work with if you've got relative font sizes (ie setting back to 14px is fine, but setting to 1em won't work because 1em of the previous font size of zero is still zero).
Set a 1em negative margin to close the gap.
This also works pretty well, but can be imprecise.
Or is there an alternative to inline-block that can be used that has no unpleasant side effects?
There's always float:left. But that's got a whole range of different issues of its own. If you're using inline-block, the odds are good it's because you don't want to use floats.
Use position:absolute and do the layout manually.
You can use the float method you described in your question, but you didn't clear your floats, which is why the container collapses.
A good method is to use an ::after pseudo element attache to the container element to "auto-clear" itself:
div:after {
content: "";
display: table;
clear: both;
}
http://jsfiddle.net/s2rJW/3/
When i saw your "workaround" i was thinking: Why don't you use a <table>?
And then i figured this out:
div {
background: #ccc;
display: table;
width: 100%;
}
div div {
background: #eee;
display: table-cell;
width: 25%
}
<div>
<div>A column</div>
<div>A column</div>
<div>A column</div>
<div>A column</div>
</div>
.item-list {
letter-spacing: -0.3em;
}
.item-list a {
letter-spacing: 0;
display: inline-block;
}
<div class="item-list">
a
a
a
a
</div>
only in win ie6,the gap between a is still exit ,the style letter-spacing:-0.3em will make effective when delete the style of a { letter-spacing:0 }
why? can i figure out this problem?
wow this one stumped me for a while...believe it or not here is your answer:
font-size:0; must be added to parent element
In the case of your example, I would define the font-size of the a tags separately, and add "font-size:0;" to the parent div element
In other words:
css:
.item-list{letter-spacing:-0.3em; font-size:0;}
.item-list a{letter-spacing:0;display:inline-block; font-size:SOMETHING HIGHER;}
(also your DOCTYPE declaration must be correct or display inline-block can have problems working in IE, at least I had trouble with it with IE7)
This should end any extra margin frustration you're experiencing from display:inline-block;
It has to do with how you're typing your HTML. Because you're formatting it nicely in your IDE, a la, with spaces and new lines, those spaces and newlines show up when displayed on the page. So instead of
<div class="item-list">
a
a
a
a
</div>
type it out as one line and they will go away:
<div class="item-list">aaaa</div>
You can add this CSS
a{float:left}
Gap will Remove
I always use:
line-height: 2.2; //or whatever value you want
I took from facebook layout and works amazing for me
I recently start to learn CSS and table less design.
After reviewing some tutorials now I am involved with converting PSD Mockup to XHTML and CSS.
Most often my problem is to positioning elements and containers.
for example this below design:
I am converting this to CSS and HTML.
I have no problem with styling Input elements.
about main layout it seems two columns layout , right ?
How do I style containers ?
I wrote this code It displays better here.
I divided my page to two containers and valued (float:left) to left container.
As specified in jsFiddle link elements on the left side container had come out of the box (I think its because of float).
I can't set containers position to absolute.
Now please help me to refactor and change my code. And please explain to me how to position elements right ?
i think a
<div style="clear:both;"></div>
before the </div> of the container will work.
edit:
http://jsfiddle.net/xNwAc/5/
Try and have a wrapping element to contain your two columns. with W3C code, you'll want to use floated elements. The elements don't have any padding, you can work on them yourself, but it's a very basic structure to follow:
The CSS:
#wrapper { width: 960px; margin: 0 auto; background: blue; } /* positions it center of page */
#left { float: left; width: 50%; background: red;}
#right { float: right; width: 50%; background: green;}
The HTML:
<div id="wrapper">
<div id="left"> Left content </div>
<div id="right"> Right content </div>
</div>
You have to set a new formating context on the container, with overflow:auto; eg.
I sugger you to read the specification which is very clear and useful.
As the exclamation point is not a part of the content you can place it as a background image.
I saw a similar question here, and did not see an answer. I'm having an issue where an element is floated right, inside a parent div, and it's causing the div to stretch the entire width of the page in IE7. This does not happen in any other browsers (Firefox and Chrome). I've also posted pictures after the question, for reference. The HTML I'm using is below:
<div id="journal" class="journalIE">
<div class="title_bar">
<div>
Testing
</div>
<div class="actions"></div>
<div class="clear"></div>
</div>
</div>
The CSS I'm using for these tags is below as well. One thing I noticed consistent between the other person's question referenced above, and my issue, is that both parent div's have positioning applied (person above has absolute, I have fixed).
#journal
{
z-index: 1;
}
.journalIE
{
right: 1px;
bottom: 18px;
position: fixed;
}
#journal .title_bar
{
background: #F3F3F3;
border: 1px solid #C5D6E8;
color: #363638;
font-size: 11pt;
font-weight: bold;
height: 20px;
padding: 4px;
margin-bottom: 4px;
}
#journal .title_bar .actions
{
float: right;
}
.clear
{
clear: both;
}
Notice that the 'actions' class is floated right. If I take away that float, my box looks like this. But with the float added, it stretches the entire screen, and looks like this. Is this a known IE bug, because it's not happening in any other browser, and it's driving me crazy.
For those wondering, I did have content in the 'actions' div, but have stripped away everything down to the root problem.
Any assistance would be greatly appreciated. Thanks very much.
You need a width: *A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements). *
via: W3C
Do this
<div id="journal" class="journalIE">
<div class="title_bar">
<div class="Test">
Testing
</div>
<div class="actions"></div>
<div class="clear"></div>
</div>
and then add a Css class
.Test
{
float:right;
}
should do it, let us know if it does not work.
MNK
I'm not entirely sure what you want, as you didn't explain what you wanted to do with the "actions" div, but if you wanted the "actions" div to float right next to the "Testing" div, I just tried making a separate .floatr class, or it will also work if you just apply style directly to div.
.floatr {
float: right;
}
with .floatr class, apply that to "actions" div:
<div class="actions floatr"></div>
I don't know why, but it seems to me that "actions" div is ignoring the float setting in the class you set in that manner. I personally prefer to apply multiple classes to divs, which allows me to reuse that class over other divs for which I want that effect, but I've heard that some browsers will ignore any classes declared after the first one. Oh well, I haven't run into that problem yet with major browsers...
Oh wait.
I looked over code again, and I think you just had a problem with how you set your classes. Your "actions" div was missing out on the action, try adding a comma to CSS:
#journal .title_bar, .actions
{
float: right;
}
I guess sometimes to figure something out you gotta apply effect directly to make sure it can behave in the manner you expect it to, and then probably figure it's some sorta syntax error if it does work. heh.