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/
Related
I am trying to create a link that goes directly to a certain section of a different page. Here is what I'm doing.
I create an anchor point using the name attribute:
<a name="fish"></a>
<p>some content....</p>
I create a link with the # added to the end
"http://example.com#fish"
***note I have also tried the id method instead of name which still gives me the same issue.
example: <div id="fish"></div>
The functionality works fine and it takes me to the specific part on the page, the only issue is that it looks different on different browsers. What firefox displays is about 5 inches higher than what chrome displays.
It's probably because the a tag is taking up some space.
Easiest solution, use an id instead.
<p id="fish">some content....</p>
Make sure there's enough content below so it can scroll
Most browsers have the same css default value for common html elements, however it is possible that some elements have different attribute values for padding and margin.
One way to avoid these differences is explicitly applying the values in the css statements.
p {margin: 10px 0px}
If you do not want to do this, I recommend you put link exactly in the position where text is located.
<p><a name="fish"></a>some content....</p>
You can locate the link anywhere since the anchor element will not be visible in the viewport
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'm having a little CSS problem with a list of thumbnails. Here's an example:
http://jsfiddle.net/22hs8/
The problem is that when the link is too long to fit in the 150px block it will push the image down. By using inline-block on the list elements instead of a float I could get the images to line up properly, but now I want to have the links at the same height as well.
One thing I tried is making the links itself a block (or surrounding it by a div) and giving that a height, but that would mean they are always the same height even if none of the links uses two rules. Also, if a link is so long it uses three lines the same problem would occur.
In short: how do I align the links to the top of the list items, without breaking the image alignment?
To address one issue, you can add vertical-align:top; to the <li> tag in order to align the content to the top of the element, but unfortunately, I don't believe there's a way to resolve the issue entirely without also implementing one of the following methods:
Placing all of the tags in a separate
Specifying a height on the tags
Using javascript to equalize heights
Options
1. Separate Div
By moving the anchor tags into a separate div, they could be given the same width as the images and floated or displayed inline accordingly, but your markup becomes less semantic when you separate the anchor from the content (and may also be programmatically more complex if these are being dynamically generated).
2. Specifying a Height
This option can be thrown out almost immediately because, as you've stated, the anchor lengths can fluctuate to multiple lines. You could specify the height the the largest know line length, but then you'll ultimately end up with unnecessary white space with groups of short links.
3. JavaScript (jQuery)
While It would be ideal to resolve this issue without the requirement of JavaScript, I think it may be the only option that would allow you to preserve the semantics of your markup, and also apply an equal height to each of the anchor tags.
Recommended Solution
I would recommend setting a default height on the anchors of the largest known line length, then applying a bit of jQuery to normalize the heights of the anchors. This way, if the JavaScript parsing fails or JavaScript is disabled, the user still sees a uniform layout (albeit with potentially more whitespace), and with JavaScript active the heights are normalized.
Apply vertical-align:top; to the <li>
Define default height for non-js users
Equalize heights using jQuery:
(function(){
$.fn.equalizeHeights = function(){
return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ))
}
$(function(){ $('li a').equalizeHeights(); });
})();
Example: http://jsfiddle.net/Eg7hy/
How is this:
http://jsfiddle.net/22hs8/3/
So you're saying that you want the links to not push the content down? I don't see that as being possible unless you don't allow your content to stretch at all. It's natural flow of a page for something above content to force the content down after it if it needs more space.
Have you thought about chopping off the text after a certain number of characters, with a '...' and providing the full text through a title, and providing the full text through a popup (since I assume you're creating some kind of photo gallery)?
The first answer that came to mind was:
"just use a table, it makes this really easy, and works everywhere"
Live Demo
However, I would probably get down voted into oblivion if I posted an answer only containing a <table> tag version, so here's a version using CSS display: table and friends:
Live Demo
Of course, that won't work in IE7 because that browser doesn't support display: table.
I can't think of a way to do this using code closer to your original and display: inline-block, which would also support an arbitrary number of lines. I'd love to see a better way to do this.
HTML:
<div id="container">
<div class="row">
<div class="cell">Some text</div>
<div class="cell">Some more text (too long)</div>
<div class="cell">Some text</div>
<div class="cell">Some text (seriously too long) text text text text text text text text text text text text text</div>
</div>
<div class="row">
<div class="cell"><div class="image">image</div></div>
<div class="cell"><div class="image">image</div></div>
<div class="cell"><div class="image">image</div></div>
<div class="cell"><div class="image">image</div></div>
</div>
</div>
(you could change some of those div tags into ul and li if you wanted to)
CSS:
#container {
display: table
}
.row {
display: table-row;
text-align: center
}
.cell {
display: table-cell;
width: 150px
}
.image {
width: 150px;
height: 150px;
background: grey
}
Add vertical-align:top; to the images.
I'm having an odd issue with whitespace in a design I'm building.
I created a <div> to contain voting elements - it holds an upvote button, downvote button, and vote total, each inside their own <div> element, and using <img> for the buttons.
Source:
<div class="votebox">
<div class="vote"><img src="upvote.png" /></div>
<div class="votetotal">15</div>
<div class="vote"><img src="downvote.png" /></div>
</div>
In the mini-reset in my CSS, both <div> and <img> elements are defined to display without margins or padding, and FireBug confirms these specific elements have no margins or padding, but I'm seeing whitespace being added between the bottoms of the <img> elements and the bottom of their respective containing ` elements.
I added the following CSS to display a border around each element:
.votebox * {
border: 1px #000 solid;
}
and this is how it displayed in Firefox 3.6 (yes, those are StackOverflow vote images.. I'm using them as placeholders for the moment):
Now, the obvious answer to this problem is to simply set the "vote" class to have an explicit height of the images (and I will do this, possibly even opting for CSS sprites over <img>s), but I'm much more interested in learning why these elements are displaying in this manner (this is supposed to be a self-teaching project after all).
Can anyone shed some light on this for me?
Edit: Steve H has pointed out to me that I should be using outline, rather than border, to show the outer edges of elements. I've made that change, and also separated the elements in CSS so they each display as a different colour.
The new outline looks like this:
As you can see, the issue is a bit different than I thought. It looks like there is some whitespace below the image, but this is compounded by the fact that the bottom image seems to be rendered slightly outside its containing <div>. This seems weird to me.
Images in HTML are inline elements and are by default placed on the font base line, so what you are seeing is probably the space for the descenders. The usual way around this is either setting them to display: block or vertical-align: bottom.
EDIT: BTW, you can format images with CSS just like any other element, so you can mostly likely drop the extra divs around the images.
Your using a strict doctype, so
.votebox img{display:block;}
Should do the trick
Depends on the doctype you use. If you use Transitional ( <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ) it will be shown in the way you want.
example with transitional: http://jsbin.com/icesi
example with strict: http://jsbin.com/icesi/2
A related statement that may help you understand the issue is the following
Here's another example. You may have
found that setting font-size: medium
results in different font sizes in
Explorer versus Navigator. This occurs
because of the way the Internet
Explorer for Windows team interpreted
the intent of the CSS specification.
In order to stay consistent with the
Windows version, Internet Explorer for
the Macintosh emulated its behavior in
the 4.x series. If you put IE5/Mac
into bugwards compatibility mode, it
will continue to treat font-size:
medium as IE4.x/Win does. In strict
mode however, it will act as Navigator
does, which is actually the correct
interpretation according to the W3C.
Source: http://oreilly.com/pub/a/javascript/synd/2001/08/28/doctype.html?page=2
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.