The problem is that I have several "h2" tags that have a display:inline attribute, and on Microsoft's wonderful browsers the space between them doesn't appear. Is there a workaround?
I know there is a "non-breaking space" in HTML but I was wondering if one can make a space that may be a "breaking space".
--- edit ---
The website is http://newstoday.ro and the behaviour is in the footer. If the site is opened in IE the list is continuous, even though there is a space between the words. Please don't comment the rest of the code as I am just the plumber in this situation. Also there is a must for the headings as the client thinks it is better for SEO.
I can't think of a rationale for why you're wanting h2's to display inline. In fact, why would you want two headers to read together? Think of the way it should be read. Do you want it to read:
"Header one header two"
or:
"Header One"
"Header Two"
If it's the first way, then it's probably your HTML that's messed up. If it's the second, then you should probably think of it's positioning rather than changing it's behavior and utilize other css methods like float and position.
Have you tried setting the "margin" property? Not sure if that directly applies to your question.
Throwing an in there seems to create a space:
<html>
<head><title>Blah</title></head>
<body>
<h2 style="display:inline;">Something</h2>
<h2 style="display:inline;">Something Else</h2>
</body>
</html>
In this example, you actually end up with 2 spaces, so you might want to eliminate whitespace between the tags and the if you require only one space. Another option would be to add a left/right margin to the header element.
You can just use a regular space, but add "margin-right:_ px" to the h2 css definition to adjust the spacing between tags. Negative values are allowed too.
Apply the style margin: 0 0.5em to both headers - adjust 0.5 to suit (maybe 0.25 or 0.75 is better; also the first 0 is top/bottom margin, adjust as relevant).
Note: Since you want a character space, you want em not px as suggested earlier.
Complete example code...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Inline Header Example</title>
<style type="text/css">
h2
{
display: inline;
margin: 0 0.5em;
}
</style>
</head>
<body>
<h2>First Header</h2>
<h2>Second Header</h2>
</body>
</html>
Well the braking space is just a space, you know a " " without the quotes...
The answer is that it's not possible. You mean you want text that's in a larger block of text to flow just like the rest of it, as if the tag were < strong > instead of of < h2 >
Since h2 is a block level element no matter how you style it, some browsers (cough) will choke on your attempt to flow it inline with other text.
Related
This may be an odd question, but I'm trying to make a div that will act as a sort of preview pane for an HTML mail message in which I want to make sure all styles are done inline. So I'd like for the div and its contents to receive no styling from the outside page.
Is there a way to do this (in CSS or Javascript) or do I have to override every individual style that has previously been set?
I'll show some code, but that's kind of breaking what I wanted this question to be. For example, let's say I have a div:
<div id="somediv">
<h2>Message Header</h2>
<p>This is some content</p>
</div>
Since this div is a part of a larger page, it and its contents are subject to styling (such as margins, paddings, fonts, font sizes, colors, etc) from the surrounding page and any CSS files included. Is there a way to negate ALL of that styling rather than individually overriding them?
In the future, you reset all properties with all: unset declaration, but it's only available on Firefox 27+.
For now, you can put your "inner" content in a separate document and embed it via iframe:
<iframe src="content.html"></iframe>
content.html (minimum valid HTML5 document):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Content</title>
</head>
<body>
<h2>Message Header</h2>
<p>This is some content</p>
</body>
</html>
I guess the closest you can get is to do some sort of CSS reset on everything within a given container, and then possibly try to re add some default-like margins and such till it looks "unstyled" again. And then take it from there with your inline CSS.
Another, completely different approach could be to display the mail in an iframe, in which there is no applied styling at all. Can probably be done, but might be a more complex thing to implement.
If you want to rewrite inherited CSS and not use the browser-default-CSS, you can add an !important behind every property. For example:
#noInherit {
background-color: #fff !important;
}
I'm not sure if you can stop inheritance. Maybe someone else can give you a better answer.
I don't believe you can remove all styles as there is no such thing as null in css. You can put everything to auto it one big dump
.noStyle{
width: auto;
height: auto;
etc...
}
but I don't think that would get the effect you are after as it will just make the div inherit everything from it's parent(s). More detail about exactly what you are trying to accomplish might make it easier to help you find a workable solution but I don't think the question as currently posed is "solvable".
You can use the negate selector. Just add :not before any CSS rule you don't want to apply on that div.
http://www.w3.org/TR/css3-selectors/#negation
Hard work if you do it manually, but you can automate it if you feel like. Note it will only work on modern browsers.
The other way is to use iframe. Not recommended.
I don't like how the fragment identifier jumps to the actual point of where the content begins on the page. It looks awkward having the box start right at the top of the screen. It kind of bugs me. So I was using an anchor with a name attribute above it, set to display: block so that it would pay attention to the 10px margin on the top of the box below it. Using this method, it essentially jumped down to that content, with 10px spacing between the start of the content and the actual top edge of the browser window.
<a name="some-text"></a>
But it seems that I'm no longer allowed to do this in HTML5, as when I try to validate the page, I get this nice warning:
The name attribute is obsolete. Consider putting an id attribute on the nearest container instead.
I can't just change all the name attributes to id attributes because it becomes an empty hyperlink rather than a named anchor (I've also tried, the display: block no longer gets applied to it).
So, given a group of divisions, like so:
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
and assuming that they all have a 10px margin applied to the top of them, is there any way to re-apply the IDs to them so that when I use fragment identifiers to jump to different spots, it still includes the 10px space between the content and the top edge of the browser window?
Note: I've tried applying the ID directly to each division, but the browser ignores the margin on the element when determining where to jump.
I didn't get you right at first, let me try again. You say:
I can't just change all the name attributes to id attributes because it becomes an empty hyperlink rather than a named anchor (I've also tried, the display: block no longer gets applied to it).
I don't really understand where is the problem here or why would you like it to use display: block. Its purpose as I and apparently the W3C see it is a placeholder, it should act as an anchor like it did in HTML4, only using id instead of the name attribute.
If you'll run this simple html through the W3C's markup validator you'll see it is valid html5.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a id="test"></a>
</body>
</html>
So it comes down to these two options:
a. I didn't get something right, I'm sorry and hope you'll be able to correct my mistake.
b. You are going out of your way to accomplish things that could be easily achieved.
Use padding could avoid this problem. As margin is not included in the content boundaries, so the browser would ignore it.
<!doctype html>
<html>
<head>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
div {
padding-top: 10px;
}
</style>
</head>
<body>
<div id="1">How can I jump to a point slightly above the fragment identifier?<br/>
up vote 2 down vote favorite</div>
<div id="2">
I don't like how the fragment identifier jumps to the actual point of where the content begins on the page. It looks awkward having the box start right at the top of the screen. It kind of bugs me. So I was using an anchor with a name attribute above it, set to display: block so that it would pay attention to the 10px margin on the top of the box below it. Using this method, it essentially jumped down to that content, with 10px spacing between the start of the content and the actual top edge of the browser window.</div>
<div id="3">
But it seems that I'm no longer allowed to do this in HTML5, as when I try to validate the page, I get this nice warning:</div>
<div id="4">
The name attribute is obsolete. Consider putting an id attribute on the nearest container instead.</div>
<div id="5">
I can't just change all the name attributes to id attributes because it becomes an empty hyperlink rather than a named anchor (I've also tried, the display: block no longer gets applied to it).</div>
<div id="6">
So, given a group of divisions, like so:</div>
<div id="7">Content</div>
<div id="8">Content</div>
<div id="9">Content</div>
<div id="10">Content</div>
<div id="11">
and assuming that they all have a 10px margin applied to the top of them, is there any way to re-apply the IDs to them so that when I use fragment identifiers to jump to different spots, it still includes the 10px space between the content and the top edge of the browser window?</div>
<div id="12">
Note: I've tried applying the ID directly to each division, but the browser ignores the margin on the element when determining where to jump.</div>
<div id="13">
html fragment-identifier</div>
</body>
</html>
.spacer{height:25px;}
Place an element with a class that has the height you want immediately after the anchor.
Fiddle example. http://jsfiddle.net/calder12/sJEkQ/3/
I do know that HTML is insensitive to space. But what can I use to make empty spaces between words, or phrases. I have tried <p></p> such kind of tags, but the HTML automatically omit it.
Can somebody give me example codes?
You can use , aka a Non-Breaking Space.
It is essentially a standard space, the primary difference being that a browser should not break (or wrap) a line of text at the point that this occupies.
This will give you the space you're looking for.
The "pre" tag defines preformatted text. It preserves both spaces and line breaks.
<!DOCTYPE html>
<html>
<body>
<pre>This paragraph will be pre-formatted.
I hope this helps!
All spaces will be shown as it is in the original file.
</pre>
</body>
</html>
As others already answered, $nbsp; will output no-break space character.
Here is w3 docs for   and others.
However there is other ways to do it and nowdays i would prefer using CSS stylesheets. There is also w3c tutorials for beginners.
With CSS you can do it like this:
<html>
<head>
<title>CSS test</title>
<style type="text/css">
p { word-spacing: 40px; }
</style>
</head>
<body>
<p>Hello World! Enough space between words, what do you think about it?</p>
</body>
</html>
Use white-space: pre:
<!DOCTYPE html>
<html>
<span style="white-space: pre"> My spaces </span>
<br>
<span> My spaces </span>
</html>
“Insensitive to space” is an oversimplification. A more accurate description is that consecutive whitespace characters (spaces, tabs, newlines) are equivalent to a single space, in normal content.
You make empty spaces between words using space characters: “hello world”. I you want more space, you should consider what you are doing, since in normal text content, that does not make sense. For spacing elements, use CSS margin properties.
To get useful example codes, you need to describe a specific problem, like markup and a description of desired rendering.
To add non-breaking space or real space to your text in html, you can use the character entity.
Either use literal non-breaking space symbol (yes, you can copy/paste it), HTML entity, or, if you're dealing with big pre-formatted block, use white-space CSS property.
If you are looking for paragraph indent then you can go for 'text-indent' declaration in CSS.
<!DOCTYPE html>
<html>
<head>
<style>
p { text-indent: 50px; }
</style>
</head>
<body>
<p>This paragraph will be indented by 50px. I hope this helps! Only the first line will be indented.</p>
</body>
</html>
You can preserve white-space with white-space: pre CSS property which will preserve white-space inside an element. https://www.w3schools.com/cssref/pr_text_white-space.asp
After, or in-between your text, use the (non-breaking space) extended HTML character.
EG 1 :
This is an example paragraph. This is the next line.
If you want to leave blank space in HTML while editing the website just use <br /> and copy-paste it under the last one and keep going like that until you have enough space. Hope it helps.
Okay, this is a weird one to me. Here's the HTML element I'm working with:
LOLZ http://www.ubuntu-pics.de/bild/14571/screenshot_030_0O2o3D.png
A photo with a caption. Ideally, I'd like it to look like this, through pure CSS:
alt text http://www.ubuntu-pics.de/bild/14572/screenshot_031_mp84u7.png
The width of the image's parent element needs to be dependent on the image's size.
I can change the markup all I need to. (The text isn't currently in its own div, but it can be if necessary.) Is there any way in CSS to accomplish this? I get the impression that I need to "force" the text to wrap as much as possible (which doesn't seem achievable), or make the whole element's width dependent on just one element and ignore the other (which I've never heard of before).
Is there a real way? Or do I need to use magical Javascript instead? (The JS solution is fairly simple, but fairly lame...)
Check out this great article on the best ways of handling the image-with-a-caption scenario.
Personally this is one of those cases where you gotta suck it up and go with that works.
Make the container a table with table-layout:fixed and put the image in the top row. You can also do this with pure CSS using the display:table-* properties (and the IE7-js library for IE6 compatibility).
What table-layout:fixed does is make the table drawing algorithm lock the width of each table column once the width of the first cell in that column is known. The caption will have nowhere to expand to so it will wrap to the width of the image (the first cell).
Alright, it looks like there's no simple solution that I can pull off. Thanks for helping me work that out :)
I think that, given how I'll be storing those images, accessing width won't involve constant recalculation. I may just use that server-side magic instead.
Thanks!
Here's a solution that probably does not work for you even though it does produce the layout you requested:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
div.a {float: left;
position:relative;}
div.b {
position: absolute;
top: 100%;
left: 0;
right: 0;
text-align: center;
background-color:gray;}
</style>
</head>
<body>
<div class="a">
<img src="http://stackoverflow.com/content/img/so/logo.png" alt="">
<div class="b">Caption text Caption text Caption text Caption text Caption text </div>
</div>
</body>
</html>
You see the reason why it is unsatisfactory if you place some content below the div a. It will overlap with the caption, because the absolutely positioned caption did not extend the parent div vertically. It still may work for you if you have enough white space below anyway or you are willing to reserve it.
I came up with a working and fairly clean solution.
The solution uses a table (or div with display:table if you prefer) and adds a second column to "push" the first cell into the minimum space it really needs. The table can be set to 1px width to stop it growing across the page. I've put together a demo to show this in action:
http://test.dev.arc.net.au/caption-layout.html
Tested and working in IE8, Firefox and Safari/Win
The table answer would work. Easily. I can't encourage its use but ease-of-use does have merit. I was going to suggest using the clip: CSS property, but I can't get it to work on my local machine (for some reason, though it renders the example at cssplay.co.uk perfectly).
The downside of this is that it probably only works if you define fixed-widths for the containers. I'm sure there must be a way, though. I'll keep looking.
I'd like to show a div that has a background-color with the height and width set to 100% but no content. Is it possible to do that without putting a inside?
Edit: Thanks to Mark Biek for pointing out that empty div with width and height styles shows how I'd expect. My div is in a table cell, where it does not show.
<table style="width:100%">
<tr>
<th>Header</th>
<td><div id="foo"></div></td>
</tr>
</table>
This seems to work in Firefox, Safari, IE6, & IE7.
<html>
<head>
<style>
#foo{
background: #ff0000;
width: 100%;
height: 100%;
border: 2px dashed black;
}
</style>
</head>
<body onload="">
<div id="foo"></div>
</body>
</html>
Hmmm... I'm not sure what exactly the specs say, but I know that while empty inline-elements (e.g. span) are valid, empty block-elements (e.g. p or div) get "cleaned up" by html-tidy.
Thus I'd say it's safer to stick to the as it does no harm in your case. I'd also add a comment like "<!-- background container -->" or something like that. So everyone who's going to change your html knows that the div has a special meaning even though it's empty.
IMHO you should include the nbsp for otherwise empty DIVs if you want them to actually render into something.
On a "theoretical" note .. the browser is not supposed to show anything if there is no content. The entire point of nbsp is to indicate empty space. This is both common sense and (I believe) the standard.
On a practical side .. are you have three choices. One is to leave nbsp off, knowing that you will get unpredictable results. This is likely the easiest to code. Another is to always include nbsp, either by always putting nbsp at the end of the div or testing for empty and adding nbsp if it is empty. The third it to test for the browser and insert nbsp when needed.
I think it depends on the browser (IE/Gecko engine/Webkit engine) and on the mode (Standards mode, Quirks mode). I had some divs appearing in FFox/Standards mode and not appearing in IE6/7.
You probably can do it in a cross browser way with only css, but you'll probably resort to some css hacks.
From experience, IE won't render borders of empty elements (at least empty <td> elements)
perhaps
#foo {empty-cells: show;}
although that may be only for <td>
You should include at all times.