Take a look at the following fiddle:
http://jsfiddle.net/DNhAk/14/
When you have an image with text wrapped in an anchor/link, the whitespace between the image and the text in the code creates a underlined whitespace in the rendered page right before the text.
When there is no image, there is no underlined whitespace even though there is whitespace in the code.
The only way I can see the avoid this underlined whitespace is to eliminate the whitespace in my code. But I hate altering my coding style in order to alter the presentation of the rendered page. Anyways, altering your HTML in order to manipulate the presentation of a page is wrong anyways. It's like using line breaks (<br/>) to add space between elements instead of using CSS.
Is there a not-so-obvious-to-me CSS property that is used to fix this issue?
UPDATE
For some reason people are getting hung up on the image borders and margin that I had in the code. I only put them in there to make it look nice. They have nothing to do with the problem, so I removed them and updated the fiddle just so people can understand more clearly what the problem is.
You could set the CSS for the a element like this:
a {
display: inline-block;
}
You can emulate the effect with some CSS:
img {
border: 1px solid #CCC;
padding: 10px;
vertical-align: middle;
float:left;
}
a {
display:block;
height:70px;
line-height:70px;
}
http://jsfiddle.net/DNhAk/8/
The behavior you are experiencing is part of the spec ( http://www.w3.org/TR/html401/struct/text.html ) :
For all HTML elements except PRE, sequences of white space separate "words" (we use the term "word" here to mean "sequences of non-white space characters"). When formatting text, user agents should identify these words and lay them out according to the conventions of the particular written language (script) and target medium.
This layout may involve putting space between words (called inter-word space), but conventions for inter-word space vary from script to script. For example, in Latin scripts, inter-word space is typically rendered as an ASCII space ( ), while in Thai it is a zero-width word separator (). In Japanese and Chinese, inter-word space is not typically rendered at all.
So by adding an element (img) followed by whitespace (newline) in your markup, you instructed the agents to interpret your image as a "word", and add whitespace as appropriate to the language the agent is set in. If you would like to remove this whitespace from the result, you will need to remove it from the markup.
Alternately, you could remove the image from your markup entirely, and place it instead as a background on the anchor, thus eliminating any presentation pieces from your markup. Example here:
<a href='#' class="imglink">
There is
<em>no</em>
underlined whitespace at beginning of this text</a>
CSS:
.imglink {
min-height: 50px;
background: transparent url("http://www.cadcourse.com/winston/Images/SoccerBall.jpg") no-repeat;
background-size: 50px 50px;
display: block;
padding-left: 55px;
line-height: 50px
}
There are some weaknesses to this method of course, but it is a potential solution depending on your other constraints.
http://jsfiddle.net/hellslam/pvHK8/
this is the expected behavior, since there are spaces after the images:
You must change your html structure, use instead :
<a href='#'>
<img src='SoccerBall.jpg'/> <span>Your text</span>
</a>
CSS :
a{text-decoration:none;}
a>span{text-decoration:underline;}
Use two separate links for different elements, which are inside the current . I haven't seen yet a CSS fix. It is because the whole area is considered link, obviously. This workaround is working from the time being.
<a href='#'>
<img src='http://www.cadcourse.com/winston/Images/SoccerBall.jpg'
width='50' height='50'/>
</a>
<a href='#'>
No Underlined Whitespace
</a>
Get rid the space in the anchor between the image and the text (this is what's being underlined). In your css, give img 'margin-right:10px' (or whatever value you want). Remove the padding.
EDIT
To clarify:
Inserting a space character after the image does not fall under "coding style" - you have specifically encoded a space into the text value of the anchor.
CSS is behaving as intended in this regard: it is styling the text content of the anchor (including the space) with an underline, because you have not overridden that behavior for text content in an anchor.
By removing the space you are not altering your coding style, you are altering the content. It so happens that this will eliminate the styling issue you are facing.
I understand that you're asking if there's a way to retain the space in the anchor and also target that character with CSS - I don't think there's a way to do that.
I'm pointing out that by removing the space you are not altering the semantics of the content in any meaningful way (certainly not visually, because you want to hide it anyway, so the only possible effect it could have is for non-visual agents, most of which do not convey spacing in a meaningful way in this context anyway).
In fact, I suspect that the intent of that space character is more presentation-oriented than semantics-oriented.
Altering HTML for presentation purposes is not ideal, but generally it's not about altering your HTML per se - it's about altering the meaning which you are conveying with HTML. In this instance I believe it's entirely correct to alter your HTML to convey the same meaning.
There are times when you alter your document to suit both your semantic needs and your styling needs - as long as you're conveying the same meaning and logical flow of information, it really isn't an issue for the consumer of the content.
I certainly agree with your question and think it is well thought out and brings up a very good point. As referenced in this SO question, there is an experimental CSS3 property called text-space-collapse that has proposed values of discard, trim-inner, trim-before and trim-after which all could be used to resolve this problem.
I think the best solution you are going to find until text-space-collapse is implemented will be to alter your markup slightly. You can wrap the text in a span and then use display: table as one solution.
http://jsfiddle.net/CPh82/
a { display:table; }
a > * { display: table-cell; vertical-align: middle; }
<a href='#'>
<img src='http://www.cadcourse.com/winston/Images/SoccerBall.jpg' width='50' height='50'/>
There is underlined whitespace at beginning of this text
</a>
instead of padding, try margin
img {
border: 1px solid #CCC;
margin: 10px;
vertical-align: middle;
}
Related
Why is this page (http://calvoter.org/issues/votereng/votebymail/study/findings.html) so wide. The table with the white background has a 750px image at the top but the page is wider than needed. I made a copy and deleted all the images/tables in the content and the page remained wider than it needs to be. The text was copied from a Word doc to textwrangler then Dreamweaver
The finding.html page is from the same template as http://calvoter.org/issues/votereng/votebymail/study/ocprofile.html which does not have the extra width issue. Thanks for any help.
The page was made with Dreamweaver CS5.5
Your table is 970 pixels wide. It is stretching to accommodate an image you have in one of the table cells. The image is
<img src="graphics/uncounted_ballots.png" width="690" height="253" hspace="100">
This accounts for 890 pixels of width. This is inside a blockquote with a margin of 40 on both sides. Add is all up and you get 970 pixels. The difficulty in figuring this out is why we try to use better coding practices. Your HTML is a maze of nested tables and block quote, which makes it almost impossible to decipher.
basically, it comes from bad coding practices. You have enclosed everything inside block quotes, so you have two paths here: just add this to your stylesheet
blockquote{margin:0;}
the problem here is you will actually lose the blockquote formatting, but if you don't care about it, it will solve your issues at once. You can also add margin:5px or something like that.
The best approach is to simply "kill" those blockquote elements, and use then ONLY when they are intended to be used. The easiest way is to open your source code with a raw text editor (like Notepad, NOT WORD!) and replace any occurrence of <blockquote> and </blockquote>. Or even better: replace <blockquote> with <div> and </blockquote> with </div> (do a backup first!). That will solve it for you.
because you are not set the main part:<blockquote>'s width,and it's width will change and enlarge <table>'s width.
first,set <blockquote>'s width to inherit in main.css line 134:
div#main blockquote {
font-family: sans-serif;
font-style: normal;
width:inherit; /* add this to control blockquote's width */
}
then,change some title and img,they are the main reason that blockquote become too large,like these:
there is no need to have two nesting <blockquote> here,delete them.
finally,give a reasonable position of your <img> ,like this:
set hspace is not a good habit,you can simply change it or set a compatible css style.and you can delete this attribute here
If this has any help,please let me know.
UPDATE:
actually,If you control elements well in <blockquote>,you needn't to set it's width.but if you want to reach your expectation,you'd better do this.
html
<div id="home_header_minitab">
<img src="topnavi_1.gif" />
<img src="topnavi_2.gif" />
<img src="topnavi_3.gif" />
<img src="topnavi_4.gif" />
</div>
css
#home_header_minitab{
width: 100%;
float: right;
text-align: right;
}
and the result,
If i delete float and text-align, it prints fine. but if i add that two, it shows like that. but the requirement is to locate the images to the right side. :(
If I'm wrong, I'll appreciate if there is a better way to print images straight forward.
Replaced inline elements are treated in the same way as characters.
There is a space between <img> <img> for the same reason that there is a space between a a.
Remove the whitespace between the elements from the HTML.
Unless otherwise specified, whitespace in HTML is usually collapsed into a single space. So in your code there is actually a space between the images.
Now, because img tags are inline elements, they are part of the normal text flow and as such will appear as if they are text elements themselves—separated by a space. That space will be rendered as a normal space with its normal size between the images which is why you see it.
There are usually two ways to solve this without replacing the inline layout by your own (e.g. using floats). The first way is to simply get rid of any whitespace between the elements in HTML. This is the easiest and most effective solution.
The other solution would be to change the font size to zero, so the space actually has no size itself:
#home_header_minitab {
font-size: 0;
}
Note that you need to be careful here in case you want to actually display text, or if you want a fallback to the alternative image titles.
I can not remember what it was that was basically blank, but also worked as a space. It's something like &nlsp; or something like that.
I was using but I really wanna remember this one. I wish I could word the post better to explain what I'm talking about, but I'm sure someone here understands just by the confusion of &nlsp;
It is used for non-line breaking space in html.
and
having too many consecutive is eye itching and bad. If you want bigger space to be generated then use a <span class="spaceOf5px"> <span>. This is useful only as inline space. For block level, use DIV tag.
/*CSS for Wide Space Class*/
.spaceOf5px{
width: 5px;
}
.spaceOf10px{
width: 10px;
}
Remember - there is a space between the span tags.
It is . You can find out more about it in several online references, such as wikipedia. It stands for non-breaking space.
is the HTML entity for non-breaking space. No line break will occur between words separated by a non-breaking space even in the cases where a browser would normally perform text wrapping.
is a Non-Breaking SPace in HTML. Normally in HTML, when multiple spaces separate text, as seen here,
<h3>Before spaces After spaces</h3>
the browser renders them as only one space:
However, if you use , the browser renders each space as non-breaking:
<h3>Before spaces After spaces</h3>
The spaces do not collapse to one (hence 'non-breaking'). Each space is rendered:
My biggest gripe with HTML is that line breaks add a tiny bit of space between elements. (jsFiddle.)
This can screw up layouts where child elements are sized to exactly fit their parents.
I read somewhere that you can remove this implicit padding - while still keeping the code somewhat legible - by using comments like this:
<!--
--><div>Foo</div><!--
--><div>Bar</div><!--
--><div>And so on...</div><!--
-->
This works, but I feel like there has to be a better solution. What other ways are there to work around the line-break padding?
That isn't "a little bit of space", but literally a space character. You are using display: inline-block to align your elements horizonally, and that's how "inline" works.
If you want to use inline-block you need to remove the white space between the elements as you are doing it.
Otherwise you can use one of the other methods to horizontally align, for example floating or display: table-cell.
A solution would be to use some HTML compressor before publishing your pages to remove unneeded space from your markup, like in this example.
From what I've seen though, they tend to leave always one space at least, because they don't know if you really wanted that space or not, and since browsers considers only the first space if there are more than one, compressors leave one space there.
You should try font-size:0px; line-height:0px for outer div.
Something like this:
<div class="outer">
<div class="inner">123</div>
<div class="inner">34556</div>
</div>
<style>
.outer {
font-size:0px;
line-height:0px;
}
.inner {
font-size:14px;
line-height:16px;
display:inline-block;
}
</style>
This is because you use display: inline-block; for the div elements.
Block elements strip white space around them, inline elements don't.
Try float: left; instead.
What is a good way to put more than one space in HTML?
To show one space we write . For five spaces, we have to write five times, and so on.
Is there a better way? Is there a special tag to use?
You can use the
<pre>a text with multiple spaces</pre>
tag.
As far as I know, if you are not using CSS then is the only way. These days using CSS and adding a spacer <span> would be more advisable.
You could use something like <span style="margin-left: 20px;"></span> to create some sort of 20px space between two words. Other than that, no.
It is often best to handle this with CSS instead of HTML. CSS gives you more control over the whitespace than the <pre> tag does. Also, browsers apply default styles to <pre> that you might not want.
.pre {
white-space: pre;
}
.pre-wrap {
white-space: pre-wrap;
}
body {
max-width: 12em;
}
<div class="pre">Text that preserves whitespace and does not wrap</div>
<div class="pre-wrap">Text that preserves whitespace and wraps as needed</div>
<pre>Text inside a <pre> tag also preserves whitespace</pre>
To actually insert spaces you are stuck with , the other common thing for spacing things out is to use 1x1 pixel gif and set the images with in the IMG tag.
The simplest way I have used is to add <span style="color:white;">(anything here)</span>
The bit in the span can be as long or as short as you like- it's not seen. The color of course is the color of the page/section where you place it. I prefer XXXXXXX as X is standard width (unlike M and I) and it's easy to see how many Xs you will need for a given space.