I have strange problems developing a site.
Any browser on my computer adds a spacing above some elements at the page (e.g. above the navbar, the dropdown in navbar, the container etc). In the Chrome Developer Tool it displays like having a strange text element (quotes with spacing):
but in source code it displays without it:
If I delete that quotes from the Tool, the spacing disappears.
That quotes (spacing) can't be added by Javascript or PHP: it exists ever it we comment all script includes and disable php preprocessing for .html files (example).
This spacing can't be added by CSS: e.g. for navbar we have rule:
.navbar {
margin-top: 0;
}
The spacing exists in all browsers at my computer (tested in Firefox, Chrome, IE 9).
Moreover, Firefox Dev Tool doesn't display any quotes:
but adds spacing in code in that places where are quotes in Chrome Dev Tool.
So, what's it? How to remove this spacing (I don't want to use ugly solutions like negative margin)?
Please comment do you have this problem on your machine? Thanks.
It seems to me, that the spaces are 'special spaces' like is one. They may look like a normal space character, even in a text editor
Look at the code, which generates the HTML structure.
Then delete the spaces in request. Put back the formating spaces by using the space bar key.
edit
looking closer in my text editor i realised, you have a special diacritical character in your code.
When you look a my screen from Notepad++ editor, there are small 'hooks' at the less than character (<) of the <nav> and the <li> tag which I marked red.
Don't just delete the spaces, delete the less than character (<) too and retype it using the keyboard.
The characters between the <body> and <nav> elements are a line feed and a BOM - Byte Order Mark (aka zero width non-breaking space) U+FEFF (EF BB BF in UTF-8). See the image below taken from Hex editor Neo
It's the BOM that you need to remove.
There is whitespace in your source HTML: between the <body> and <nav>. The only way to make it go away is by running the two tags together, as in
<body><nav class="..."> ... </nav></body>
HTML dictates that runs of whitespace outside of attribute values are treated as one single space, so it doesn't really matter how much whitespace there is, if it's newlines or not, etc. Even if you have a single space character in your HTML, a conformant browser has to treat it as a text node. It's these text nodes that Chrome hints to by showing the quotes.
Related
I was using the default html font - Liberation Serif—30 glyphs in my page. Then i faced a problem, that multiple spaces to align two columns of text is not working properly.
I found out, spaces are not displayed at the same width as other characters and hence the same number of characters doesn't use same width. so, i started using monospaced font. It solves the alignment problem.
The alignment looks good now but the font is not the commonly used one as per the corporate standards.
How can i use a font like Liberation Serif and still do alignment using space characters?
If you want to align text in columns, how about using a <table>? Or if it's not tabular data, some CSS and float: left;.
To use a monospace font for primitive formatting in HTML, you can use the <pre> ... </pre> element. In fact, this tag will automatically select a monospace font for you:
<!-- the following shows the HTML, and the output will have the same column
formatting as it appears between the 'pre' tags -->
<pre>
9 328
2,345 208
xyz 4
</pre>
<pre> stands for "preserve." You can also apply it as a css style to other types of HTML tags. In this case, you would need to explicitly specify the monospace (such as "Consolas" on Windows) font to use:
<div style='font-family:Consolas; white-space:pre;'>
9 a
2,345 quick
xyz f o x
</div>
Make sure the text editor you use to create the HTML file is set to insert space characters. The layout might not look the same in the browser if it has any tab characters, or a mixture of tab and space.
Also, since the column and row formatting of the entire text inside a <pre> tag is preserved exactly, the examples shown above this would include an initial "line break" before the first row which (unlike the final line break) you might not want. It's because the text that's included actually starts immediately after the > character of the opening tag. There a few ways to address this, which are left as an exercise for the reader.
I found this article about hanging punctuation:
http://webdesign.tutsplus.com/articles/getting-the-hang-of-hanging-punctuation--cms-19890
and this link in the comments: http://dabblet.com/gist/9623025
It's a really nice idea, and it would be an awesome way to hang soft hyphens generated by some tool like Hyphenator or Hypher. I started playing around with Hypher and encapsulated the hyphens in a span...
Then I realized I don't know how to style soft hyphens.
This code should make an hyphen red, but of course the one in span is not breaking a word, so the browser doesn't show it:
<style>
.box{
width:40px;
background-color:yellow;
}
.hyphen{
color:red;
}
</style>
<div class="box">
<p>aaaabbbb<span class="hyphen"></span>cccc</p>
</div>
http://jsfiddle.net/5LazU/
Is there any way to do it?
It is somewhat unclear what the question is about, so I will address different interpretations of it.
The hyphens introduced by a browser’s automatic hyphenation (due to the use of the hyphens property) cannot be styled as separate entities (i.e., in a manner that differs from the style of the surrounding text), since they do not constitute elements or pseudo-elements.
Styling SOFT HYPHEN characters in HTML is a different issue, with browser-dependent answers. The answer does not depend on the method of entering SOFT HYPHEN (as a raw character vs. the reference vs. a numeric reference), since they result in the same data in the DOM: But it depends on wrapping the character in an element, as in the question.
The code in the question causes a red hyphen to be displayed on Firefox and on IE, but on Chrome, there is no hyphen after “bbbb”, so I guess the code was tested on Chrome. This appears to be a bug: the element is treated as allowing a direct line break without inserting a hyphen.
The issue of “hanging punctuation” is something completely different. The reason why hanging punctuation techniques word for quotation marks (which is what the linked documents contain) is that the marks appear at the start and at the end of a segment of text. Browser-inserted hyphens are different, and the key thing there is that the browser analyzes how many characters will fit on a line before it inserts a hyphen (due to automatic hyphenation or as a result of rendering SOFT HYPHEN as a visible hyphen). I don’t see how there could be a way to intercept this unless the browser provides an API for the purpose.
Brackets seems nice, but I'm encountering two problems using it :
First, I usually autocomplete tags this way : div.class - PRESS TAB -becomes<div class="class"></div>
I can't achieve that... I tried downloading a bunch of plugins, nothing works...
Second problem :
#container
h3
color: $ltGreen
text-transform: uppercase
font-size: em(24)
margin-bottom: 0.5em
font-weight: bold
In this example, if I press Enter/Return key wherever in that part of code, the cursor comes back to the beginning of the line... So I have to press tab lot of time each time I press enter/return...
Is it possible to do that in Brackets ? How ?
For the first issue, try the Emmet extension. It lets you use that exact CSS-like shorthand and auto-expand it to HTML code.
For the second issue, what type of file are you in? Brackets uses "smart indent" to position the cursor on new lines based on the syntax of the code. If you're in an HTML file, it will follow the nesting level of the tags surrounding the cursor to decide how far to indent (since the code above isn't proper HTML syntax, it won't use it as a cue for indentation - it will treat it as plain text content, to be ignored). If you're in a plain text file, it will just follow the indent of nearby lines (so the problem you're describing won't happen).
It looks like you might actually be writing "classic"-style Sass code in this case? If so, just ensure you're using standard .sass file extension and newlines should get the correct indent level automatically.
Here's what a .sass file should look like before pressing Enter:
And after pressing Enter - note the cursor is correctly indented:
Try Shift+Enter when the tag is suggested.
I'm trying to break a specific word using css.
The word is "sales/telemarketing", and I'm trying to break the word after the "/tele" part. I'm trying to avoid using <br> as it might affect the way the layout for the paragraph tag.
Is there a way to break it using CSS?
I know you said you want to avoid <br>, but there is <wbr>..
jsfiddle demo
Example usage:
<p>some random text and stuff sales/tele<wbr>marketing some more words here</p>
If you re-size the p, the word will break after tele.
See MDN
Sadly, there is limited support for <wbr>, as it isn't supported by IE10.
I just thought of a random CSS alternative..
jsFiddle demo
HTML
<p>some random text and stuff sales/<span>tele</span> marketing some more words here</p>
CSS
span {
margin-right:-4px;
}
Basically, you just include a space after tele, therefore it breaks to a new line.. By selecting the word tele, you can remove the space.. not ideal - but it works nonetheless.
You cannot specify a word division point in CSS (except in a contrived way, which would be just an unreliable emulation of the proper way). Instead, include a hyphenation hint, the soft hyphen, U+00AD, either by entering it directly if you know how to, or using the reference :
sales/telemarketing
You can add other hyphenation hints to the same word if you like. And you can add <wbr> after / to specify an allowed direct break point (no hyphen appears if the string is divided).
I'm trying to make a chord website where you can take lyrics and put chords above them.
While I was able to position the chords successfully above the lyrics by spanning them separately, displaying them in a block, and then wrapping them in another span which displays inline-block, when I try to copy and paste them into Notepad, it doesn't retain the whitespace and instead pastes them as separate elements.
Here's an example of what I'm talking about: http://jsfiddle.net/CPYTg/3/
The setup:
<li class="pair" onclick="javascript:doNote(0);">
<span class="chord" id="ch_0">E</span><span class="lyric" id="ly_0">Tonight</span>
</li>
li.pair {display:inline-block;padding:0 5px;}
.lyric {display:block;}
.chord {display:block;text-align:center;}
As you can see, the chords and lyrics display correctly in the browser, but when it comes to copying and pasting them into Notepad, it formats them as separate items. Is there any way to remedy this so that when you copy and paste them, it retains the whitespace?
Yep, you should be able to use 'pre' tags which mean pre-formatted. So the stuff inside the tags isn't really 'parsed' by the browser as HTML, the browser just spits out the characters on the screen as it finds them in the HTML file. Try this, (with no indenting in the HTML):
<preX>
E G#m C#m
Tonight I'm gonna have myself a real good time
F#m B E
I feel alive and the world...
</preX>
Obviously remove the X from the tags, this is just so stackoverflow won't parse it. This will show in the browser how it looks and will copy/paste fine to notepad.