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.
Related
Please have a look at this simple jsfiddle. It contains the following code:
<div style="background:yellow; display:inline-block;">
<img src="http://www.wedesoft.de/test/test.png" />
</div>
As you can see, this will output a space under the image so that you can see the yellow colored container. I do not know why, because no space was defined.
Can somebody tell me what is going on please?
An image is an inline element. That means it is treated as text. Text has a line-height. The line-height is what is causing the space at the bottom. There are multiple ways to solve this.
The following are my favorites:
div {
line-height: 0;
}
By setting line-height to 0, the space goes away.
img {
display: block;
}
By making the image a block element, it's no longer considered text, thus, line-height isn't applicable anymore.
As Marc Audet stated in the comments, another way to solve this would be by using vertical-align.
img {
vertical-align: top;
}
It doesn't matter whether you use top or bottom.
This occurs due to the line-height attribute; try this Jsfiddle
Where i just set the line height to 0.
i think you missed line-height try this
<div style="background:yellow;display:inline-block;line-height: 0px;">
<img src="http://www.wedesoft.de/test/test.png">
</div>
other way you can apply style display: block; to img. like
<div style="background:yellow;display:inline-block;">
<img src="http://www.wedesoft.de/test/test.png" style="display: block;">
</div>
For some reason
display:block;
solves this problem as you can see in the accepted answer here:
Remove white space below image
Is still do not know why...
take a look at line-height propety on this web: http://www.w3schools.com/cssref/pr_dim_line-height.asp
basicly what's happening is that there's some default space on the div so that's why you see the yellow line. Adding line-height: 0px; should solve the problem.
I have several DIV's displayed as inline-blocks; and they seem to be getting spacing automatically applied in between them from the browser. They have margin/padding set to 0. Is there a way to correct this without using negative margins?
Sam, that space you're seeing is actually whitespace. That's why removing the paddings and margins does nothing. Let me explain. When you have this:
HTML
<div>
a
a
a
a
</div>
this is how it's rendered:
a a a a
...right?
So, if you have this:
<div>
<div style="display:inline-block"></div>
<div style="display:inline-block"></div>
<div style="display:inline-block"></div>
</div>
...you'll get the same thing:
block [space] block [space] block
Now... there are many different solutions to this problem. I believe the most common is commenting out the whitespace in the html:
<div>
<div style="display:inline-block"></div><!--
--><div style="display:inline-block"></div><!--
--><div style="display:inline-block"></div>
</div>
I don't like it though - I prefer keeping the html as clean as possible. My preferred way is to set the parent's font-size to 0, and then set back the desired font-size on the inline-blocks themselves. Like so:
div {
font-size: 0; /* removes the whitespace */
}
div div {
display: inline-block;
font-size: 14px;
}
You don't need to use negative margins to offset the original margins.
Instead you can override them with the following:
* { margin:0; }
or:
.div { margin:0; }
if it's element specific.
EDIT:
It appears the problem may be a result of unintended whitespace. For instance:
<div style="display:inline-block">
...
</div>
<div style="display:inline-block">
...
</div>
There exists white space between the two dividers and the browser will print the white space as a result. To fix this, you'll need to change it to:
<div style="display:inline-block">
...
</div><div style="display:inline-block">
...
</div>
Enjoy and good luck!
You can use both display: inline-block and float: left to remove that space.
Here goes plunkr: https://plnkr.co/edit/Sn3NG77asiXO8UrrpxWD?p=preview
Inline-block is originally a IE6 hack
This is what its used for:
To fix the IE6 double-margin bug on floated elements
To place multiple block-like elements on the same horizontal line
without floating them(if you can't float 'exceptional cases)
To allow an inline element to have width and/or height while still
remaining inline
To allow an inline element to have padding or margins
So if you wanna have multiple divs beside eachother please use float, its gonna solve many of your css problems that inline-block can cause, especially cross browser issues
More about inline-block here arcticle 9.2.4
Best regards
SP
please comment if disagree
Another way I have found the method altering the word-spacing on the parent container works for me https://jsfiddle.net/1ex5gpo3/2/
.parent {
word-spacing: -1em;
}
.child {
word-spacing: normal;
display: inline-block;
}
I didn't have code to show my question but I pulled some off the w3schools website. Here's an example they give you to play with clear.
<style type="text/css">
img
{
float:left;
}
p.clear
{
clear:left;
}
</style>
</head>
<body>
<img src="http://www.w3schools.com/cssref/logocss.gif" width="95" /><p>
<p class="clear">This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p>
My question is about using the clear property. Why is it that you can't move the cleared element DOWN any farther away from the floated element that comes before it?
Meaning, let's say I wanted there to be a couple of blank lines between the text paragraph and that image for whatever reason. Page breaks don't seem to work.
If I add relative positioning to the paragraph and give it a larger top margin, that works BUT in the example I had that I no longer have to show you anymore, it was a cleared div under a floated div, not a cleared paragraph under a floated image, and in THAT case, even relative positioning to add a margin didn't work.
What, exactly, does clear do to how the element you apply it to flows with the rest of the document? I know what clear DOES. I know it's saying which side no previous floated object can be on but what does it do to the element ITSELF? Does a cleared element get attached to the same flow as the floated elements somehow?
The clear property specifies which sides of the element's box cannot be adjacent to floated elements, and only does so when these floated elements are in the same block formatting conext.
From SitePoint:
Clearing adds space above the cleared element's top margin until it's
clear of the affected floated boxes. As a result, we can’t use the top
margin on the cleared element if we want a specific amount of space
between it and the floated box.
Attempting to put other elements that have not been cleared after the floated elements will essentially keep in them in the same context. This has to do simply with the way floating works.
If you wanted to put blank lines in between the image and the paragraph, I'd add a margin-bottom to the img element:
<style type="text/css">
img
{
float: left;
margin-bottom: 10px;
}
p.clear
{
clear: both;
}
</style>
</head>
<body>
<img src="http://www.w3schools.com/cssref/logocss.gif" width="95" />
<p>This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p>
I could go on, but I think this will tell you everything you need to know about floating and the CSS clear property:
http://reference.sitepoint.com/css/floatclear
And on that note, I highly recommend against w3schools, as they are known to have faulty information. See:
http://w3fools.com/
Just but a <br class="clear" /> in front of the paragraph, or add a top margin to it.
I've been stuck on a float issue for a little while so I am hoping the community can help me again. I have a new webform here. As usual it looks fine in everything but IE7 (or IE8 in compatibility).
For some reason some of the containers are ending up with the form field on a new line below the form text. CSS is not my strong point, otherwise I'd be able to fix this I am sure. Can anyone tell me what I am missing here?
I tried adding float: left to the form text but that ended up with a whole other mess.
Try to small change markup: place items with a float before items without it (from the same row). It should help.
I know it's been a long time since this was posted, but I found a solution that I like for this. The gist is using 'expression' tag in your CSS for IE7 only to move the floated element to be the first element of the parent in the DOM. It will be semantically correct for all other browsers, but for IE7 we modify the DOM to move the floated element.
In my case, I have:
<div>
<h1></h1>...<p>any other content...</p>
<small class="pull-right"></small>
</div>
In my CSS for pull-right, I use:
.pull-right {
float:right;
*zoom: ~"expression( this.runtimeStyle.zoom='1',parentNode.insertBefore( this,parentNode.firstChild ))";
}
The result is that IE7 moves my <small> to be the first element of <div> but all other browsers leave the markup alone.
This might not work for everyone. Technically, it is modifying the markup but only in the DOM for IE7 and it's also a javascript solution.
Also, I understand there may be some performance issues with expression (it's slow), so perhaps it's not ideal there are a lot of floats like this. In my case, it worked well and allowed me to keep semantically correct HTML.
If you float your .formText left, float your span.required left, and then float your inputs left as well you should be able to line them up on the same line.
I'd modify your markup a bit. your <span class="formText"> should really be a <label>
For example:
<P class=formRow>
<label for="FirstName">First Name<SPAN style="FLOAT: left" class=required>*</SPAN></label>
<INPUT id=FirstName class=formTextbox name=FirstName>
</P>
and your css would be something like this:
.formRow {
clear: both;
}
.formRow label {
float: left;
width: 150px;
}
.formRow input {
float: left;
}
You could try to make the span tags you have for the text a fixed width, float them left, and do the same for the input field you want to correspond with. I'd also recommend using a label tag instead of a span tag on forms. No real solid reason for it, it's just that a label was meant for exactly what you have the span tag doing.
What you want to do is add a clear:both as the last sibling of your floated elements.
So something like:
<div style="float:left;">
<!-- children of div here -->
</div>
<div style="clear:both;">
<!-- leave empty -->
</div>
OK so what would happen if I have 2 divs (one containing text, the other an image). The image always has a static width but the text varies. hence making its containing div variable.
I can make it work for all other browsers (except IE6 and IE7) by using CSS display:table. IE6 and 7 don't have that so I can't find a workable solution to center them all.
... so you know what I'm talking about...
.container{text-align:center; width:100%}
.container .centered{display:table; margin:0 auto}
<div class="container">
<div class="centered">
<div id="text">varying length text</div>
<div id="image">IMAGE</div>
</div>
</div>
Quite apart from the lack of IE support, setting display: table as you have without its children using display: table-row/table-cell results in undefined behaviour. It doesn't make sense to put block elements directly inside a table element and the browser might do anything at all.
What you are trying to do is get shrink-to-fit width behaviour without using float, which is a normal way of getting shrink-width but requires that the block in question goes to the left or right not centre. Probably a better way of saying that would be to use an inline-block:
.centered { text-align: center; }
.centered span { display: inline-block; border: dotted red 1px; }
<div class="centered">
<span id="text">varying length text</span>
</div>
<div class="centered">
<span id="image">IMAGE</span>
</div>
(You have to use a naturally-inline element like span to make it work under IE<8; div would fail. There is also -moz-inline-box if you need to target Firefox 2.)
Are you using quirksmode or standards compliant mode? In other words have you included a DOCTYPE declaration at the top of your html page?
You shouldn't need to use display:table just margin:auto should do the trick provided you are using a standards mode.