White space above div - css

Please take a look at the following image..
As you can see.. I have added :hover property to the div enclosing each comment. but I get a small white space. When I use the chrome dev tools to highlight elements, the white space comes out of the area of all elements. it seems its a white space stuck between two divs. Please help me remove it. I added margin-top as a neg value but it gives a jerking effect on hover.

Without source to go on, I can only speculate about the HTML so bear with me.
Check for margins extending from the elements inside the <div>. If there's a <p> in there, the margins could be extending past the boundaries of the parent <div>.
If that's the case then this should do the trick:
div p {
margin: 0;
}

Assuming your layout is something like:
<div>Line 1</div>
<div>Line 2</div>
<div>Line 3</div> ...
You'd simply need to reset their margins:
div {
margin:0;
}
You may need to apply this to div:hover as well.
Alternatively you could look through your existing styling and (if it isn't user-agent styling causing this - which is unlikely for the div element), simply change your custom styling accordingly.

Thanks guys. I should have added a jsfiddle.
I had used a HR at the bottom of each comment and this HR had a margin after property. I removed hr and added a border-bottom for the div containing the comment. So that margin was removed. :)
Thanks a ton! I added padding to give space for the comments.

Related

Odd space between image and div (CSS)

This is kind of trivial, but I have a frequent problem with divs and images that are separated by spaces when they ought to nest flush against each other.
Below is some code I'm wrestling with right now. As you can see, the second div (class Shadow2) contains an image, followed by a div containing text. The class Black gives the caption a black background. Thus, visitors should see nothing but an image above a black box with white text. Instead, the default background color of Shadow2 can be seen between the img and the caption div.
<div class="Cool R P Max300">
<div class="Shadow2">
<img src="">
<div class="Caption Black">Text</div>
</div>
</div>
I added styles setting all images' border and padding to 0 and setting div.Caption's top margin to 0, but it doesn't change anything.
I could fix the problem by applying relative position to the image and lowering it a few pixels, but that seems like a pointless fix for what must be a common bug. Can anyone tell me what's going on here? Thanks.
There is probably some white-space causing this line break. Simply setting the image to display: block; solves the issue.
Also, don't forget to close your img tag (<img src="" alt="" />), but that's not related to the white space.
See it here: http://jsfiddle.net/fkfF7/
The other, hackish solution, is to put font-size: 0; on the parent div. Of course, you'd have to specify the font size for you caption div then.
Here's that one: http://jsfiddle.net/fkfF7/1/

How to get minimal width behavior (such as when floating or pos: abs) without using a float or pos: abs

Let's say I have a block element, such as an h2:
<h2>Title</h2>
And I give it a background color. The background will span the entire width of the wrapper (as it should).
If I float it, or position: absolute, it will 'shrink wrap' the words. However, both of these methods take the element out of the 'flow' and prevent it from pushing the rest of the content down the page.
I'd like to avoid having to add a clear underneath the title every time. Is there a better solution? I thought the overflow property could do it, but I'm not figuring it out.
fiddle:
http://jsfiddle.net/QxRRh/
Here's one (very simple) way ...
h2 {
display: table;
}
Fiddle
Wrap the header text in a <span> and apply the background color to that span.
HTML:
<h2><span class="blue">Title</span></h2>
CSS:
.blue{
background-color:blue;
}

why the background property is not running?

There are my codes. (jsfiddle)
Why this part of my codes isn't running?
header{background-color: #2bd5ec;}
I want to add background color to header tag. What i need to do?
The issue here is that since the elements inside your header are floated, they're considered in a different flow than your header, and thus it doesn't resize to fit them.
One way to fix this is to append <div style = "clear: both;"></div> to your header; little demo: little link.
You can also just add overflow: hidden; to your header: another little link, or float it as well: yet another little link.
you can set Height for Header.
for example :
header{background-color: red; height:100px;}
and you can use "clear" like this :
<header>
<div id="info">
<h1>Oyunn.in</h1>
</div>
<div id="categories">
<p>Barbie - Benten - Senten</p>
</div>
<br clear="all"/>
</header>​
and css:
header{background-color: #2bd5ec;}
#info{float: left;}
#info h1{font-size: 100%;margin: 0;}
#categories{float: right;}
#categories p{margin:0;}​
use overflow:hidden
header{background-color: #2bd5ec; overflow:hidden;}
The overflow CSS property specifies whether to clip content, render scroll bars or display overflow content of a block-level element.
Using the overflow property with a value different than visible, its default, will create a new block formatting context. This is technically necessary as if a float would intersect with the scrolling element it would force to rewrap the content of the scrollable element around intruding floats. The rewrap would happen after each scroll step and would be lead to a far too slow scrolling experience. Note that, by programmatically setting scrollTop to the relevant HTML element, even when overflow has the hidden value an element may need to scroll.
The overflow declaration tells the browser what to do with content that doesn't fit in a box. This assumes the box has a height: if it doesn't, it becomes as high as necessary to contain its contents, and the overflow declaration is useless.
SEE DEMO
Add
header{background-color: #2bd5ec;width:100%; height:30px;}
Background attribute usually needs div's dimensions
actually you didn't clear your child floats so whenever we are using float so we should clear the floats and we can give overflow: hidden; in our parent div to clearing the child floated div's.
header {
background-color: #2BD5EC;
overflow: hidden;
}
see the demo:- http://jsfiddle.net/vE8rd/17/

CSS - Div must fit content AND break line

Is there a way to make a div element fit its content AND break the line, so that the next element is under that div?
I´ve tried to set the display property to inline-block, but then the div doesn´t break the line anymore... By default, it breaks the line, but doesn´t fit its content.
Hope someone can help me.
Thanks!
If you're trying to do it without an extra div, I don't think there's a way. Here's how with 2 divs:
<div>
<div style="background-color: #FF0000; display: inline">Test</div>
</div>
Something like this buddy?
http://jsfiddle.net/A6n2h/2/
I used this CSS code:
.container div *{float:left; display:inline-block; clear:both;}
There was a few errors in your HTML code too.

css - hidden div has large white space in its place in IE

Any ideas how I get rid of white space on my IE browser. It is caused by a hidden div. When I remove the div the white space goes. Works fine in FF.
Here is the DIV:
<div class="hidden" id="popup">
<div>
<H1 class="center" id="popupTitle"></H2><br/><br/><br/>
<div style="position:relative; display:inline;">
<p id="popupText" style="float: left"></p>
<img id="popupImage" style="float: right"></img>
</div>
</div>
</div>
Here are the styles associated with it:
.ofCommunications .hidden { display:none; visibility: hidden; }
I am also trying to get the p and the img inside the third div to display on the same line but that doesn't seem to be working either.
Thanks in advance
Caroline
The spacing problem is most likely caused by your improperly closed tag ("") as well as using both display: none; and visibility: hidden;
Visibility will cause the element to still take up space so you need to get rid of that style.
If you make those adjustments it should work unless you have other issues not seen in the code provided (for example: your parent container to .hidden having a misspelled class name).
Tips:
Never create space with < br/ > tags. They're only used for breaking text.
Get rid of display: inline; and position: relative; on your other < div > as it doesn't make sense to have it there (relative positioning is default).
Lowercase all of your tags. Uppercase tags are a thing of the distant past and not ideal.
A couple of comments. Once you clean this up it might help to resolve this and other future headaches:
Remove your inline styles and put them in a stylesheet.
What is that second div doing under the hidden div? It looks redundant and unnecessary to me. Remove it.
If you're floating elements then you'll need to clear them down the track. This could be why you have things floating in the wrong spots.
Have you display:block'ed the p element next to the image and given it a width? Otherwise it's not going to float anyway.
Your h1 should not be uppercase.
Hope those few suggestions help out a bit.
Try this to get the <p> and <img> lined up:
<div>
<p id="popupText" style="float: left"></p>
<p style="float: right"><img id="popupImage" /></p>
</div>
I removed the position: relative because it's not needed with the code you provided, and the display: inline because it doesn't make sense to make the div inline.
Have you checked the widths of the parent elements? If a width is set too small on a parent element there will not be enough space to render your paragraph and image on the same line. This could cause your paragraph and image to render on different lines.

Resources