a little css problem that i cannot quite find on SO - although I assume it has been asked before, apologies.
So, here is the html:
<html>
<body style="color:white">
<div class="a" style="width: 70%; background: blue;"><p>helloes helloes helloes</p></div>
<div class="b" style="width: 70%; background: pink;"><p>talk talk talk</p></div>
<div class="a" style="width: 70%; background: blue;"><p>yay! yay! yay!</p></div>
</body>
</html>
lovely.
If i open this in ff, i get three vertically stacked divs - but with space in between them! This is not what i wanted! Drama-rama!
ie renders this as i'd expect, which raises some alarm bells.
ie is 9, ff is 11
cheers,
andrew!
UPDATE a lot of mentioning the "p" tag - why/how is the p tag affecting anything? Isn't it wrapped by the div, and the div has the background color applied? Shouldn't, in fact, the div just be internally bigger, but with no space between adjacent divs?
UPDATE:
So i tried this html instead:
<html style="margin:0px; padding:0px;">
which didn't fix the issue, and also this:
<body style="color: white; margin:0px; padding:0px;">
which also didn't fix the issue - shouldn't the css be inherited by the "p" tag in both cases? Interestingly, i also examined the resultant css with firebug, and the p tags all have a margin and padding of 0...
ideas?
UPDATE: a lot of responses asking me to set padding to 0. This doesn't work. Any more answers stating that and i'll down vote 'em.
UPDATE: the question is really specific about using inline css. I don't actually care for inline css myself, but why is everybody providing css stylesheets for their answer?
UPDATE: somebody mentioned -webkit, and while i'm not using a google chrome at all, it is an interesting idea. I cannot see any ff related extra css that might be causing this problem, anybody have any ideas?
I tried it with Chrome and saw the same behavior. After looking at the underlying CSS (F12), Chrome is applying the following two lines to the <p> tag:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
If I add the following to the css the blank lines go away:
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
Hope that helps!
Basically the P tags are by default taking margin. Add css
p{margin:0px; padding:0px;}
This is because of the auto-generated margin of a <p> element.
Firefox (and others) do this differently than IE.
You can "reset" this simply by doing a p{margin: 0} in your css.
You can do the same for all elements at once (which I recommend) by simply adding * { margin: 0; padding: 0;} in your css.
Small tip: Install a browser extension to inspect the behavior of your elements such as Firebug.
Your <p> tags have vertical margins. Vertical margins in CSS collapse, so that child margins can sometimes apply to parents. See http://www.w3.org/TR/CSS21/box.html#collapsing-margins
I resolved this be specifying a CSS 'line-height' I just set it to the same as the font size and then I got consistent DIV spacing across all browsers.
Related
I have found that there is no float center in CSS and I was a little disappointed. However, I can't help but ask myself why. While many people want to use this for centering content I wished to use it to float a bunch of blocks into rows on a dynamic page size. Unfortunately without a float center it looks sloppy as there is extra space (whatever fraction of a full block doesn't fit) on one side. It makes me sad that the intended use of floats is hurt by this property missing.
I can't see a reason why there isn't a float center and was wondering if anyone had reasons, either technical or otherwise why a float center was not included in the standard.
Instead of using float: left, use display: inline-block on the individual elements and center their container.
http://jsfiddle.net/ExplosionPIlls/rAkNY/5/
Yes, There is not Float center/middle and may the W3C having the answer.
There is <center> tag but no-longer.
The <center> tag is deprecated as of HTML 4, and using it creates a
few different issues. HTML centered elements can display differently
in different browsers, and using the tag can increase page
load time. Also, heavy use of will complicate your site
redesigns — removing hundreds of tags takes a lot longer than
changing one style rule in a stylesheet.
The tag was officially deprecated many, many years ago, but
it is still recognized by most browsers through their
backward-compatibility features. So yeah, if you something,
it'll be centered. However, in the interest of future-proofing you
should use modern CSS centering
methods instead.
Use margin:0 auto;
If you're centering something else, margin: 0 auto; will get your element centered most of the time. (Quick note: your element must have a declared width for this to work.)
The margin: 0 auto; rule is shorthand for 0 top and bottom margin, and
automatic left and right margins. Automatic left and right margins
work together to push the element into the center of its container.
there is no float center because floats take elements out of the content flow and position them as far left/right as possible. floats by themselves only move things sideways. not 100% on this last part, but i reckon it has something to do with print. i know the idea of floats was taken from the print industry.
If you want to center contents:
1. set css property display: inline-block or inline to each content item.
2. set css property text-align:center to their parent node.
It doesn't need to use CSS it needs only HTML. <center> tag will make it's child elements to center.
Demo:
div {
color: white;
padding: 5px;
}
#blueDiv {
background-color: dodgerblue;
}
#orangeDiv {
background-color: orange;
}
<!DOCTYPE html>
<html>
<head>
<title>Demo - Center elements</title>
</head>
<body>
<div id="orangeDiv">this div is not centered</div>
<br>
<center>
<div id="blueDiv">this div is centered!</div>
</center>
</body>
</html>
I want to implement a empty div with background color in it.
<html>
<head>
<style>
.dark_green {
background-color: #00D100;
width: 20px;
height: 4px;
}
</style>
</head>
<body>
<div class="dark_green"></div>
</body>
</html>
Under IE7/8/9 the height of this div is not 4px, it automatically change to 19px; Under FF and other chrome it is right.
Any suggestions?
It kind of depends on what you are trying to do. There are a few things that would work:
.dark_green {
[...]
line-height:4px;
}
or
.dark_green {
[...]
overflow:hidden;
}
Would both work.
The reason this is happening is because the text in your DIV (even if it's just whitespace) has a rendered line-height of 19px. The problem browsers are using that value instead of what you are setting as a fallback to not cut off text. Telling the browser that you want the text smaller (font-size:4px;), the line height smaller (line-height:4px;), or the text to get cut off (overflow:hidden;) should correct the issue.
The reasons I wouldn't use font-size in this context are:
It only works because the the line-height that is inherited when you
apply the new font size, so you might as well just set the correct
property.
Certain browsers have a minimum font size which is larger than 4px
(11px on FF, not sure if you can set this in IE), meaning that if
the user had a larger minimum set, your fix wouldn't work.
Add a doctype as the very first line such as <!DOCTYPE html>, to escape quirks mode. This is an important thing to do, or you'll have endless problems with IE.
Once you've done this, your original code will work in IE7 and greater just like it does in Firefox/Chrome.
I found this solution:
font-size: 4px;
add any item to the div you want to collapse, and set the display on that element to none.
if your problem div is
<div class="collapseToZero"></div>
Add something like this:
<span class="nothing"></span>
and add this style for the class
.nothing{display:none;}
and your resulting HTML will look like this
<div class="collapseToZero">
<span class="nothing"></span>
</div>
Now ie 7 will render your problem div with a height of zero instead of font size.
Another way - just to throw this into the mix: add an empty comment as the divs content. Yes its adding extra markup but it does work:
<div><!-- --></div>
I have a some images that I need to line up without any gaps. I can get them fine in jsFiddle, see http://jsfiddle.net/QZLSf/2/
But on the actual SharePoint site the images have a gap between them, kind of like http://jsfiddle.net/QZLSf/1/
I have checked with FireBug and the images, and links, have all the properties they should have, but I can't get rid of that gap.
What could I be missing?
EDIT: I know that the second link has footerlinks defined as a class, but I was just using that to illustrate the problem I'm having. That's not what my actual code is.
EDIT: EDIT: Ok guys there seems to be a misunderstanding as to what I am asking here. I know HOW to get the required result, just that it isn't working on the SharePoint site. I just need advice on what might be wrong as everything that should work isn't working.
Remove the whitespace/line breaks between images.
Demo: http://jsfiddle.net/QZLSf/12/
Just posted this solution elsewhere and think it's the same thing.. is your Sharepoint implementation putting the <img> elements on separate lines in the HTML?
In your fiddle you have them all on one line.. if that's the difference then I'm afraid it's natural behaviour for inline elements (space between words).. there are hacks out there that involve HTML comments or removing the spacing or splitting the img tags, but if you can't have (or don't want) an HTML workaround - then something like this should work
CSS:
div {word-spacing: -4px; background: #eee; border: 1px solid #000; width: 600px;}
div p {word-spacing: 0;}
HTML
<div>
<img src="http://dummyimage.com/150x50/dad/fff" alt="my mini thing" />
<img src="http://dummyimage.com/150x50/000/fff" alt="my mini thing" />
<img src="http://dummyimage.com/150x50/dad/fff" alt="my mini thing" />
<img src="http://dummyimage.com/150x50/000/fff" alt="my mini thing" />
<p>the div containing these images and text has it's word-spacing set to -4px which removes the default whitespace</p>
<p>but then you want some text with normal spacing reset the word-spacing to 0 on the <p> elements, which is the default</p>
</div>
this is your code:
#footerlinks a, #footerlinks img{
but footerlinks is class not an id, so use this:
.footerlinks a, .footerlinks img{
ways to skin cats...
http://jsfiddle.net/eCSYt/45/
Update for bazmegakapa:
Sorry assumed the code was pretty easy to follow and I just presented it as an alternative way to approach it..
The gaps were caused by the white space in the HTML formatting - which is significant. By setting the font-size to 1px (actually 0 would be better if it is supported xbrowser) the white space is too small to render. In a real page you may also need to zero the line-height as well.
I used text-align to centre the text just to show an alternative method... and it has the advantage that you don't need to know the total width of the images
That's just the way it is. You have to set the margin-left to -4px
.footerlinks img {
margin-left: -4px;
}
.footerlinks img:first-child {
margin-left: 0px;
}
Demo: http://jsfiddle.net/QZLSf/11/
EDIT: This solution is more correct. I fixed the margin on the first child.
I'm having trouble getting this working in most browsers, except for IE (it even works correctly in IE6) and Opera.
Firefox separates the divs correctly but only prints the first page.
Chrome and Safari only applies the page break to the last div.
How can I get this working across all browsers correctly?
The HTML:
<div id="leftNav">
<ul>
<!--links etc-->
</ul>
</div>
<div id="mainBody">
<div id="container">
<div class="pageBreak">
<!--content-->
</div>
<div class="pageBreak">
<!--content-->
</div>
<div class="pageBreak">
<!--content-->
</div>
</div>
</div>
The divs with the IDs #leftNav and #mainBody are are set to float:left, so they display nicely.
I only want to print the .pageBreak classes, hiding the #leftNav and the rest of the #mainBody with CSS.
The CSS:
#media print
{
#leftNav
{
display:none;
}
#mainBody
{
border:none;
margin:none;
padding:none;
}
}
Parent elements can not have float on them.
Setting float:none on all parent elements makes page-break-before:always work correctly.
Other things that can break page-break are:
using page-break inside tables
floating elements
inline-block elements
block elements with borders
For the sake of completion, and for the benefit of others who are having the same problem, I just want to add that I also had to add overflow: visible to the body tag in order for FireFox to obey the page breaks and even to print more than just the first page.
I've found that Twitter Bootstrap classes add a bunch of stuff to the page which has made it difficult to get page-breaks working. Firefox worked right away, but I've had to follow various suggestions to get it to work in Chrome and, finally, IE (11).
I followed the suggestions here and elsewhere. The only property I "discovered" that I haven't seen yet mentioned is "box-sizing". Bootstrap can set this property to "box-sizing: border-box", which broke IE. An IE-friendly setting is "box-sizing: content-box". I was led to this by the caveat about "block elements with borders" made by Richard Parnaby-King https://stackoverflow.com/a/5314590/3397752.
It looks like it's a bit of an arms race to discover the next property that might break page-breaks.
This is the setting that worked for me (Chrome, FF, IE 11). Basically, it tries to override all the problematic settings on all divs on the printed page. Of course, this might also break your formatting, and that would mean that you'll have to find another way to set up the page.
#media print {
div { float: none !important; position: static !important; display: inline;
box-sizing: content-box !important;
}
}
There is a solution if the parent has float . For the element to which you applied the page-break, make the element overflow:hidden. Thats all. It worked for me.
<div style='float:left'>
<p style='overflow:hidden;page-break-before:always;'></p>
</div>
Although this is not prominently documented, it should be noted that the page-break properties cannot be applied to table elements. If you have any elements that have a display: table; or display:table-cell; applied to them (common in many templates under the clearfix class) then contained elements will ignore the page-break rules. Just cancel out the the rule in your print stylesheet and you should be OK (after the floats have also been removed, of course).
Here is an example of how to do this for the popular clearfix problem.
.clearfix:before, .clearfix:after{
display: block!important;
}
The other place I have run into this is when the template declared the entire page (usually called main or main wrapper) with display:inline-block;
If the section is inside of an inline-block, it will not work so keep your eyes open for those as well. Changing or overwriting display:inline-block; with display:block should work.
I had a position: absolute; in the div printing that caused this not to work.
Make sure the parent element has display:block; rather than display: flex;. This helped me fix the issue
"Firefox versions up to and including 3.5 don’t support the avoid, left, or right values."
IE support is also partial
you can achieve what needed by :page-break-before:always; which is supported in all browsers
"but only print the first page" : I don't think it is css related , I suppose it's sth on print window of browser :)
what's your code?
like this?:
<style>
#media print
{
table {page-break-after:always}
}
#media print
{
table {page-break-before:always}
}
</style>
I am using yaml for layout and famous clearfix css to make sure container with floats get extended.
Everything works fine with Firefox 3, IE6, IE7, IE8, Opera 9 and Google Chrome, but I have issue with Firefox 1, Firefox 2 and SeaMonkey. The problem is that clearfix container gets extended too much, as you can see on the website:
http://www.slagalica.tv/game/mojbroj
Here are screenshots of Firefox 2 and Firefox 3 rendering.
Update: Screenshots on BrowserShots.org
Unfortunately, stats show that more than 10% of my visitors are using FF2, so I cannot simply ignore the problem. I tried removing or tweaking some parts of clearfix CSS, but no matter what I do, the timer DIV (green) is separated by a large margin from the rest of the page.
Does anyone have an idea how to solve this?
Update2: I finally gave up and put TABLE tag and solved the issue in few minutes. So, don't try to look into HTML source - problem is not evident anymore.
So if you look at the original article that promotes clearfix on positioniseverything, you will note that the author recommends that since the fix is out of date the reader should look at an article on sitepoint. This sitepoint article points out a method which I have been using for a long time now.
Very simply if you give the parent overflow: hidden and make sure it has 'layout' in IE then this will clear the internal floats.
<div id="wrapper">
<div id="leftcol">
Text
</div>
<div id="rightcol">
text
</div>
</div>
and then the corresponding CSS:
#wrapper{
overflow:hidden;
width: 100%;
}
#leftcol{
float:left;
width: 50%;
}
#rightcol{
float:right;
width: 50%;
}
In the above example I have used width: 100% to give layout to IE, but you could just as easily use zoom: 1 or height: 1% if you would rather.
Try replacing clearfix with this technique and your problem should be solved.
Things to bear in mind with this technique, be careful of your internal widths otherwise you may get clipping and it is important to override the wrapper in your print stylesheet as overflow: visible otherwise it will only print the first page. but I have been using this method in production successfully for years now and I have never had any unresolvable issues with it.
clearfix is just a hack for the lazy or obsessive purist. Put a clearing div where you need it (at the bottom of your div) and get on with life.
<div>
... floated content ...
<div style="clear:both"></div>
</div>
BTW. Purist who claim this breaks semantics are incorrect. The HTML specification defines no semantic meaning for <div>. At worst it mixes style/structure but it's hardly a burden to remove when the site is redesign in the future and a pure css solution becomes practical.
I looked at it using browsershots, and I'm trying really really hard to figure out what the difference between it in FF2, 3, and chrome is. I'm not seeing it.
Looking at your page though, why not do something along these lines?
<div id='wrapper'>
<div id="leftcol">
Text
</div>
<div id="rightcol">
text
</div>
<div id="foot">
text
</div>
</div>
And the CSS:
#wrapper{
min-height:1%; //to fix IE6 floats escaping ancestor div
}
#leftcol{
float:left;
}
#rightcol{
float:left;
}
#foot{
clear:both;
}
Seems like this is a bug, and is fixed in newer versions. However, to maintain compatibility, tables have to be used instead of CSS.