Please check this
http://www.theprinterdepo.com/hp-designjet-750c-24-refurbished-plotter-1
in the quick overview, it shows some text with big spaces.
But if you see this:
http://www.theprinterdepo.com/printer-bundles/plotters-bundles
It doesnt show the spaces.
I havent been able to find how to remove those spaces even though its the same html code.
<p><span style="color: #ff0000; font-size: large;"><strong>SAVE 5% ON ALL BUNDLE ITEMS TOGETHER.</strong></span></p>
<p>1 x Black Ink (51645A)<br/>
1 x Cyan Ink (51644C)<br/>
1 x Magenta Ink (51644M)<br/>
1 x Yellow Ink (51644Y)<br/>
<strong>2 x 36" 20 bond paper (C3859A)</strong><br/>
1 X Network Card<br/>
1 Year Extended Warranty
I tried with LI, with P, and with BR but none of them work.
THe
The space is because you have double <br /> between entries in the HTML code.
The extra new lines on the first page are caused by extra <br> tags. If you're editing the HTML and only seeing one <br> tag in a row, then you're editing the wrong file or wrong part of the file.
Note: If you're 100% positive it's the only file, then your content management system is adding in the extra <br> tags by itself. If this is the case, then possibly removing the raw new lines (not <br>, but the new line in the html source) may fix the issue.
This can be fixed by assigning the line-height of your div class "std" to be .67
.std {line-height:.67;}
An easier approach to fixing the spacing issue would be to remove the extra <br> in the code.
Related
Why are these two blocks of code being rendered different?
<button>text1</button>
<button>text2</button>
vs
<button>text1</button><button>text2</button>
Editted for clarification:
We can see in this Fiddle:
writting controls in diferent lines adds a white space between them (this space cannot be reached by console inspection, but can clearly be seen)
writting controls in the same line doesn't.
It's because the browser has no concept of linebreaks or tabs outside of special situations like the <pre> tag so wherever it finds them it converts them to whitespace. Keep in mind it will ignore all whitespaces, line breaks and tabs except the first one. You could have 30 consecutive line breaks and 100 spaces in your code, but it will render as 1 space in the browser.
Even code that only has a line break but no spaces or indents will still show a space when rendered.
An example: code with a line break but no space:
<button>text1</button>
<button>text2</button>
It will still render 1 whitespace character between them because of the line break. You can verify this in the fiddle.
Typically any sort of formatting like this is handled by CSS.
MDN's explanation is about as good as any. The actual spec.
The "EOL" in HTML you have to tell it, try put <br> between buttons.
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Case 1</h1>
<button>text1</button>
<br>
<button>text2</button>
<h1>Case 2</h1>
<button>text1</button>
<br>
<button>text2</button>
</body>
</html>
I have a page which is not formatting properly, or at least not formatting as I expect it to.
Below is a simplified version of the code.
<div ...>
<div class="db_notes">
<pre>
Some Text.
<span class="blue">Lots more text that may be one line or multiple lines and is
retrieved from a database in preformatted form and often has one or more
links within the preformatted text.</span>
Some Additional text.
<span class="blue">More text that may be one or more lines and is reformatted
and comes from a database and often contains one or more links
within the text.</span>
And more text.
</pre>
</div>
</div>
Only the font color is changed by the <span class="blue">.
The color of the text between the <span class="blue"> and the <a href...> is blue (as desired), but the color of the text between the </a> and the </span> is black (instead of blue).
Any idea as to why, after the </a> tag, the text color does not return to blue?
Thanks!
John
* UPDATE *
First, thanks to all who created examples to test the premise that the color SHOULD be blue after the </a> tag! You proved I'm not crazy! (or not completely crazy).
I made a copy of the example at JS Bin and on the copy page pasted in a major section of the page with the text color problem. To my amazement, the text after the </a> tag is blue, as it should be.
Next I looked through the CSS to find any style elements that might affect the div, span, a, or pre tags, and put them in the CSS section on JS Bin. The resulting formatting still looks correct, with the text after the </a> tag still blue.
So then I copied the entire CSS file and pasted it into the CSS section on JS Bin. That broke it. The text after the </a> tag changed to black, which was the problem I've been having with the page.
So, somewhere in this massive CSS file there is something which is affecting how this page renders. Why, I don't know. I've always been under the impression that after an in-line closing tag the formatting should return to that in effect before the opening tag, but somehow something is changing that behavior.
It is now about 2:15 AM here, so I'm going to call it a day, get some sleep, and take a fresh look at it after some rest.
John
* UPDATE *
I've gone through the entire page making sure that all tags are matched, the nesting correct (no DIV elements inside a SPAN, etc.), and it still does not format properly.
I can't spend any more time on it, so I've come up with a kludge - close the span immediately before the <a href...> and open a new <span class="blue"> immediately after the </a>, as shown below. I know it shouldn't be necessary, but if that is what it takes to make it work, so be it. So, here is the revised simplified code.
<div ...>
<div class="db_notes">
<pre>
Some Text.
<span class="blue">Lots more text that may be one line or multiple lines and is
retrieved from a database in preformatted form and often has one or more
</span>links<span class="blue"> within the preformatted text.</span>
Some Additional text.
<span class="blue">More text that may be one or more lines and is reformatted
and comes from a database and often contains one or more
</span>links<span class="blue">
within the text.</span>
And more text.
</pre>
</div>
</div>
I still would like to know why the browsers are behaving in this manner. If anyone has any thoughts as to what is happening to cause the formatting to break down after the </a> tag, I'd love to hear them.
Thanks,
John
I couldn't get into a source code file for another project (locked for editing), so while waiting I took another look at the problem page.
In looking through the page in Firebug I noticed that while the page source has exactly one <a name="top"> tag, the Firebug display shows multiple instances of that tag. Strange.
Then I looked closer and noticed that there was no </a> tag matching the <a name="top"> tag.
After replacing:
<a name="top">
with:
<a name="top"></a>
The page works correctly!!!
At some point the web site needs to be updated to replace the:
<a name="top"></a>
...and other "a name=" tags with:
<a id="top"></a>
...tags to comply with HTML 5, but with over 2,300 dynamic pages, most with from one to thirty <a name="text"> tags, it will be a long time before there will be funding for such an effort. Another reason why some tags and options need to be supported for backward compatibility.
Thanks again to all who have contributed assistance in any form!
Best wishes,
John
The color of the text between the <span class="blue"> and the <a href...> is blue (as desired), but the color of the text between them </a> and the </span> is black (instead of blue).
If I assume you are using .blue {color: blue;} this property for span then it will change the text color blue for text which is inside the span tag. The text out of <span> will be black.
Have a look at this DEMO.
in this case, I've changed the <span> color from blue to red and you see <a> tag text is still blue which is by default.
Note: only the text inside span will be in blue color that not include the text inside the<a> tag. by default giving a link to <a> tag its change to blue color.
I am trying to make a website that has a contents page.
I use the go to chapter 1 as the contents part,
and when it clicks it does to the <a name="chapter1"><u>Chapter 1</u></a>
This works well, but there's 1 catch (there's always a catch)...
I want to make it look like the ones on Wikipedia:
[View Image][1]
[1]: http://crystalanalysis.anydns.com/images/wikipedia_contents.png
But I didn't want to copy the one from Wikipedia, I wanted to make my own,
I looked around, found the parts I needed and had 2 problems! The first problem I am
having has something to do with the Indent. I tried using the p.indent {text-indent:150px}
but it only did the indent for the line I put it before. So:
Indented text
But it was annoying having to put the Indented text before every single line in the
contents box, but it works:
<header>
p.contenttitle {text-indent:50px;}
p.contentsub {text-indent:100px;}
</header>
<body>
<div style="background-color:#FFFFFF;width:1024;border:solid 1px #000000;"><br>
<font class=Blackverdana><b>Contents:</b><br></font>
<div align="left">
<!-- CONTENTS a href --><font class=Blackverdana>
<p class=contenttitle>Chapter 00: First things first...
<p class=contentsub>Chapter 0.2 Finding the SDK for your game
<p class=contentsub>Chapter 0.3 Running the Hammer Editor
<p class=contentsub>Chapter 0.4 First Load<br><br>
</body>
The other problem I am having is that if you look at the contents page:
http://crystalanalysis.anydns.com/7-12-2013.html
you will see that there seems to be some sort of <br> after every line.
I did not plan to have those there, they just appeared. Maybe a connotation with the "p" tag?
Any help would be greatly appreciated
And also the website is a blog and I am making a Hammer Editor Tutorial if anyone was wondering.
So it seems that you aren't ending the tags when you first start them.. An example of this:
<p class=contenttitle>Chapter 00: First things first...
When in all reality it should be:
<p class=contenttitle>Chapter 00: First things first...</p>
That could be a possible issue, as well as you should really look into using a CSS page to reference your HTML. Creating a class/id will actually make that indentation process ten times easier. For more information on that I can provide a handy link from w3.org that can explain the entire process of using CSS and how it can make your life a lot easier!
http://www.w3.org/Style/Examples/011/firstcss.en.html
Here is another for my previous question:
Is it impossible to have 2 blank lines between p tag? Markdown
After various comments given, I once thought I can manage it;
in fact, I cannot.
--------
br
--------
AB
--------
p tag
--------
A
B
--------
OK, now, I want to insert 2 lines instead of 1 between A and B elements without any modification of the original elements;
The result I expect is like this (br emulation)
--------
AB
--------
trying with p tag
--------
A
B
--------
Ouch!! 3 lines inserted instead of 2.
so, is there no way to do this by HTML and CSS??
The code:
http://jsfiddle.net/LhDFs/9/
--------<br>
## br<br>
--------<br>
A<br>B
<br>--------<br>
## p tag
<br>--------
<p>A</p>
<p>B</p>
--------<br>
## OK, now, I want to insert 2 lines instead of 1 between A and B elements without any modification of the original elements;<br>
## The result I expect is like this (br emulation)
<br>--------<br>
<br>
A<br><br><br>B
<br>
<br>--------<br>
## trying with p tag
<br>--------<br>
<p>A</p>
<p style = 'margin: 0;'> </p>
<p>B</p>
--------<br>
## Ouch!! 3 lines inserted instead of 2.
<br> ## so, is there no way to do this by HTML and CSS??
Edit:
some people mention that my understanding to HTML is immature, well I won't deny it; however, what people said is about HTML restriction.
To make things clearer, this is for HTML+js coding, not static. So, again I want to insert 2 (or any number ) lines instead of 1 between A and B elements without any modification of the original elements;
Because the function is not to modify the original context but to insert blank lines. What I intend is to insert things. When I insert things, if I need to modify the original context, more complicated and things generally don't go well. So, if it is really impossible to insert exact lines between original elements, I gave up and make a mess to modify original context. What I would like to know is if it's possible or impossible.
If it's really impossible, just tell me so instead of giving me some codes.
Thank you.
Edit:
I conclude it is not possible to insert the exact lines as long as the default paragraph tag context exists.
So, instead, the whole context should be constructed with 'noMargin' paragraph tag.
http://jsfiddle.net/LhDFs/10/
<p class="noMargin">No margin</p>
<p class="noMargin"> </p>
<p class="noMargin"> </p>
<p class="noMargin">No margin</p>
css
p.noMargin {
margin: 0;
}
or simply
<p>No margin</p>
<p> </p>
<p> </p>
<p>No margin</p>
css
p{
margin: 0;
}
The credit goes to
#3dgoo
Is it impossible to have 2 blank lines between <p> tag? Markdown
Thank you everyone, and if someone had unpleasant feelings on my post, my apologies.
I will show you the Right Way to do it. Which is very easy to understand, improve upon, and modify in future.
http://jsfiddle.net/techsin/FDK7P/
Oh and css is not javascript
css code .double-space {margin-top:2em;} then apply class attribute to whatever paragraph you want to have double space. But if you want to do it the first way i did it, using pseudo selectors, then it's fine but more work and inefficient.
But there is a way to do it other ways...
http://jsfiddle.net/techsin/FDK7P/1/
I recommend the first way of doing it...because look at pictures below
Css Styles in gray are applied by browser automatically/default values for or block elements.
So therefore we make 1em to 2em for whichever paragraph we want to modify. Which overrides the default value of 1em.
Ok, let's get back to html basics, probably it'll help!
First of all, a p tag is a block element that contains inline elements.
Short tutorial here: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
So p is a paragraph, and br means a line breaks. In fact, you divides your content in paragraph, and sometimes your need to change line with line breaks. If you want to have, lets say:
text A
text B
Then you should have two different paragraphs:
<p style="margin-bottom: 1em;">text A</p>
<p>text B</p>
(ok, put you css in a different file, not inline)
The margin push the other paragraph. For line breaks, it should look like this:
text A
text B
<p>text A<br>text B</p>
I keep the paragraph around all, but a line break in it.
And applying margin-bottom to p in css, all your paragraph will have the same distance! A bit like the style thing with normal, header 1, header 2... in Word where you can decide margin before and after.
Hope it helps!
EDIT:
You can do it with Javascript, or I prefer to use jQuery that way:
(in jQuery coding)
$('p').each(function() {
var $this = $(this);
if ($this.html() == ' ') {
$this.remove();
}
});
You can use regex, for example. I removed the p tag containing the non breaking space because it add a full paragraph between. Keep two different paragraph so it will be easier to put some margins and control everything with css (like I said a the top of my answer. Don't try to add br or p between, but margins!). With br, you need 3 br to skip two lines between.
Is that what you need? If not, please be more clear!
You 'see' three lines because the A and B paragraphs (p elements) add up their own margin. You need to style those elements to achieve what you need.
Something like this (obviously is better to use css classes instead of style attribute:
<p style='margin: 0;'>A</p>
<p style='margin: 0;'> </p>
<p style='margin: 0;'>B</p>
Try to style it like one of these
<p style="margin-bottom: 10px;">text</p>
<p style="line-height: 200%;">text</p>
A line height in percent of the current font size
Yet another "IE is doing something different from other browsers" question but this is one is slightly unusual in that IE7 does the correct thing but IE 8 and 9 do not.
Here is the situation, I have a simple 3 column layout. The first 2 columns are fixed width and the third I want to be variable width so that it uses up the available space.
I am outputting textual data in the third column. The text data should be free to wrap at the end of a data value/sentence - so I output it as .
<span class="nowrap">foo bar</span>
<span class="nowrap">moo bahh</span>
(See the example below also)
everything works like a charm in FF, Chrome and IE7 but internet explorer 8 and 9 treat the consecutive nowrap spans as 1 big nowrap element (i.e. it puts all the values on one line). There is white space between the spans and so (IMO) it should be free to wrap.
The only way i can get IE8/9 to wrap as I want is to include some non-white space between the nowrapped spans.
This workaround is OK but I am curious to know:
Is IE rendering the markup correctly or incorrectly (i.e. is my expectation that the values should wrap incorrect. I only assume that IE is at fault because the other browsers do it differently)
Is there a more elegant solution that the one I have: In an ideal world, I would want to ensure that the separating comma never wrapped to the start of a new line.
Thanks in advance
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head runat="server">
<style type="text/css">
.leftBit {float:left; margin-right: 10px; background-color: yellow;}
.middleBit {float:left; width:305px; margin-right: 10px; background-color: orange;}
.remainder {margin-left: 420px; min-width: 200px;background-color: #DDD;}
.nowrap { white-space:nowrap;}
.clear {clear: both;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div >
<div class="leftBit">Left bit</div>
<div class="middleBit">This value wraps - but I want to keep the values on the same line</div>
<div class="remainder">
<span>Blue the colour of the sea and the sky, </span>
<span>Green green green green of home, </span>
<span>Red red red red fire engine red red red red</span>
</div>
</div>
<div class="clear"></div>
</div>
<div>
<div >
<div class="leftBit">Left bit</div>
<div class="middleBit">I don't know why these values do not wrap? They do in FF and chrome and IE7 but not IE8/9</div>
<div class="remainder">
<span class="nowrap">Blue the colour of the sea and the sky, </span>
<span class="nowrap">Green green green green of home, </span>
<span class="nowrap">Red red red red fire engine red red red red</span>
</div>
</div>
<div class="clear"></div>
</div>
<div>
<div >
<div class="leftBit">Left bit</div>
<div class="middleBit">Here is my "work around" - I have to include some non-whiite space between the "nowrap" elements. Is this a bug or expected behaviour?</div>
<div class="remainder">
<span class="nowrap">Blue the colour of the sea and the sky </span> ,
<span class="nowrap">Green green green green of home </span> ,
<span class="nowrap">Red red red red fire engine red red red red</span>
</div>
</div>
<div class="clear"></div>
</div>
<hr />
</form>
</body>
</html>
Determining word breaks isn't preformed the same in different browsers or between different specifications. I believe Firefox is the only latest release that will format the way you are expecting. There are certain length situations where Chrome will also break out of the parent box.
As such, manual hints need to be provided in the HTML to get consistent output.
In the specific example, a way to get around this is to use the unicode character for Zero Width Space. This will break apart your code without introducing additional space.
<span class="nowrap">foo bar</span>
<span class="nowrap">moo bahh</span>
If for some reason you can't use the unicode code, you might want to try the html entity which is a thin space. It will, however, introduce some additional space into your html output.
Although this seems like an issue where there should be consistency between the browsers, http://www.cs.tut.fi/~jkorpela/html/nobr.html quotes several technical documents and their differences between how words should be broken, in addition to the differing browser interpretations of those documents. I'm guessing each browsers overall strategy plays a part in this specific example.
Except for preformatted elements - -, each block structuring element is regarded as a paragraph by taking the data characters in its content and the content of its descendant elements, concatenating them, and splitting the result into words, separated by space, tab, or record end characters (and perhaps hyphen characters). The sequence of words is typeset as a paragraph by breaking it into lines.
Source: HTML 2.0, section Characters, Words, and Paragraphs
In HTML, there are two types of hyphens: the plain hyphen and the soft hyphen. The plain hyphen should be interpreted by a user agent as just another character. The soft hyphen tells the user agent where a line break can occur.
Source: HTML 4.0, section Hyphenation
see Unicode Technical Report #14: Line Breaking Properties (technicality alert!), which seems to allow a "direct break" between an alphanumeric character and an opening parenthesis, for example. This is hardly a good idea in general, though. It would even allow very dishono(u)rable breaks!
Thanks to #nosilleg's answer I made a great solution using CSS only.
Given that you're already using classes this is easy, add this;
.nowrap:before {
content : '\200B';
}
What this does is inserts the Zero Width Space character just before each of your nowrap elements, without you editing the HTML!
Now you wont have to remember to add in that pesky HTML entity every time you use your nowrap class.
Worked in IE8 and 9 and didn't affect the other browsers.
I hope IE9/any can be rendered as IE8/any by adding below line of meta in the head of html
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
then it works as in the fashion we liked to