This is my html
<div style="width:100%;clear:both;"/>
The above empty div creates a line break in IE6 & IE7. In IE8 it is not creating any line breaks. I do not think the style of this div is the problem. I am not able to find a post related to this Stackoverflow. Please clarify or point me to the right post.
EDIT: Here's the link to the fiddle http://jsfiddle.net/spsaravanaselvan/RuvHg/. I have two textboxes for sample. In IE7 standard document mode, there is a small space between the textboxes but not in IE8.
<br/>
Is how you would normally create a line-break, closing off a div like that may not be valid as well. 'clear:both' is normally used to make sure a new element falls below floating elements, don't know why you'd use it as new line.
Related
I've been working with contenteditable recently within a HTML5 page and encountering bugs when using it with certain elements, and I'd like to know where and how I can actually safely use it.
I've discovered that making a span element contenteditable results in some buggy behaviour in both Firefox1 and Chrome2. However, making a div or section contenteditable appears completely safe3.
A guideline a couple of people have mentioned is that only block-level elements should be made contenteditable. However, the Mozilla Developer Network lists the heading elements h1 through to h6 as block-level elements, and making a heading element contenteditable is buggy in Firefox4 and can crash the page in Chrome5.
I'd like to be able to use more than just divs and sections, but I'm not clear on what elements I can actually safely make contenteditable. By safely, I mean that using the element under normal conditions, I should be able to perform normal editing tasks without it doing unexpected or buggy things. I should be able to write in it, delete content, cut, copy, paste, and move my text cursor about and highlight text without unexpected or strange behaviour.
So, which elements can I really make contenteditable safely? Is there a specific category? Are there certain criteria the safely-contenteditable element must match?
Bug notes:
Firefox 21 w/ span: Element loses focus if the text cursor is brought to the beginning or end of the element, but not if it got there by deleting content. Highlighting part of the element, cutting and then pasting will split the element in two at that point then insert a blank element between the two parts - without actually putting the text you were trying to paste anywhere.
Chrome 27 w/ span: If the span covers multiple lines e.g. by being wordwrapped, cutting and pasting content will often insert a linebreak after the pasted content.
Unless you make the div display:inline, in which case it can still lose focus as in 1, but apparently only if you bring the text cursor to the end. I don't consider this "normal" usage of the element though.
Firefox 21 w/ heading: Selecting part of the content then cutting and pasting will, similarly to 1, split the heading element in half at that point, and insert a third heading element between the two halves. It will, at least, have your pasted content inside it, but now you have three heading elements where there was originally one.
Chrome 27 w/ heading: Select some content and cut and paste. The page crashes. You get an "Aw snap!" message. That's it.
Demo code
Here's a demo for reproducing the above. It's pretty simple, though at the moment the only thing it isn't reproducing is the lose-focus bug.
[contenteditable=true] {
border: 1px dotted #999;
}
<article style="width: 100px">
<h1 contenteditable="true">Heading</h1>
<p>
<strong>Some adjacent content</strong>
<span contenteditable="true">Span! This is long enough it will spread over multiple lines.</span>
</p>
<div style="display: inline" contenteditable="true">An inline div also with multiple lines.</div>
</article>
In my opinion, I'd say div is the safest bet across the board. Any element you wish to truly edit (be it a span, header, etc), you can place inside the div and edit as if it were just that element. Also, to account for the display:inline issue you mentioned, you could always use float:left or float:right on your editable div to give it an "inline feel" without having it actually be inline.
Hope that helps!
Since this is an evolving feature with, apparent, low priority from the browser vendors support has been sketchy and regressions not uncommon. The current state of affairs is evolving, so check the Googles, CanIUse etc and make sure support is there for your sites visitors, everything else is moot ...
Support in Firefox seems to be solid, at least for some elements, now https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content
It works well in Chrome as well as far as my testing goes.
And CanIUse looks good: http://caniuse.com/#feat=contenteditable
There are a number of different bugs related to the feature in the different browsers though, but for simple use cases it should be ok now, as of August 2016.
Example page
I have some <span> elements which are inline-block and after the last <span> I have a <br> to break a new line (could be more than just one <br>).
The new line works on Firefox but doesn't work on Chrome (v. 24). Don't know why.
I write this so people who are searching the internet would have something to read regarding this matter, because I did not find anything on google/stackoverflow regarding this.
as soon as u add content, it works. chrome just doesn't like giving you empty space.
try adding on the empty new line.
Edit: changing since there was so much discussion on the topic.
Firefox has a bug, it should not display the newline. According to W3C standards the element "must be used only for line breaks that are actually part of the content". Without content following the <br>, it will not create this newline.
Might not be the best solution, but if you add a white space after the <br /> it works in Chrome.
<br />
Solved: http://jsbin.com/ezatoy/32/edit
By adding a ZERO WIDTH SPACE to the container element like so:
div:after{ content:'\0200B'; }
This insures that there will be some content after the last <br> occurrence, effectively breaking into a new line. no need to add/change any DOM.
When I try to create a navigation with inline-block, I get 4px to the right of each list item.
When I do it by floating each list item, it works fine.
Is there a reason the first option is applying that 4px? I have set EVERYTHING to have a margin of 0px and padding of 0px, I don't understand it. Even Firebug reports it as having 0, yet the gap is still there.
Thanks
Yes, space is by design and should be
Is there a reason for that? Yes it is. What got added is actually a word space. The same as if you'd have two lines of text. Browsers put a space between texts in separate lines so last words don't touch first words of the next line:
<p>
This is my text that's in two lines
inside my HTML source.
</p>
There would be a usual word space between lines and inside so text gets correctly displayed in browser:
This is my text that's in two lines inside my HTML source.
The same happens in your case, because your elements are inline. Your navigation elements are listed one per line in HTML source hence a word break gets added between them.
How to avoid excessive spaces between elements?
There are basically 3 approaches to mitigate this problem. All of them work on the premise to put all elements in the same line as seen by the HTML renderer:
Put all elements unspaced in a single line:
<ul>
<li>First</li><li>Second</li>...<li>Last</li>
</ul>
This one actually puts all elements in one line which may make it harder for people to manipulate these elements. If every LI would have an anchor tag inside (with a long link), this line gets too long to handle.
Comment-out line breaks:
<ul><!--
--><li>First</li><!--
--><li>Second</li><!--
...
--><li>Last</li><!--
--></ul>
Make tags break the line:
<ul
><li>First</li
><li>Second</li
...
><li>Last</li
></ul>
This one is least obtrusive to the eye but may seem confusing to beginners hence other team members (if you work in such environment) may feel tempted to put tag ends back to where they were originally (and usually are). They may feel these were broken by error.
The result of all three of them can be seen in this JSFiddle example.
Pick the one that suits you best. I usually use commenting because it's least distracting in my development editor because comments are very subtle.
Yes, so I got the problem that if you type a long sentence with no space e.g eeeeeeeeeeeeeeeeeeeeeeee, it will break itself, but then now I would need to start typing some ugly non-breaking coding.
Example:
http://jsfiddle.net/r3CFJ/
I need to have everything in one sentence in order not to make it break itself. Check here to see the result of not having everything in one sentence:
http://jsfiddle.net/r3CFJ/1/
How can I fix this please any solutions?? as my further coding will get very ugly and not readable?
You are getting this spacing because of the CSS, I am not sure why you add the pre type formatting and then wonder why it shows 'exactly' what you do (multiple lines, etc).
If you remove the CSS it looks just fine on 1 line.
Look: http://jsfiddle.net/r3CFJ/10/
Here's the problem, the white-space property in CSS forces new lines to break for all values except "normal" and "nobreak". There is no value for this property that will allow you to wrap lines while no breaking on new lines in the code. Don't like it? Get the W3C to add another value and get the major browsers to adopt the rule.
You don't want your entire div to be subject to a property set to such a value since you don't want new lines to break within the div. You do want elements inside your div to be subject to such a property. Wrap all the text in anchor element tags and apply the CSS to the elements that will require wrapping.
Here's a modification of your example working as expected. (Assuming no forced breaking due to line breaks in code but wrapping of long lines)
If you want the image and text will be inline set a or fancybox_vid to be position:absolute;
Example http://jsfiddle.net/huhu/r3CFJ/30/
I know this kind of question must get asked all the time but I haven't found a solution for my problem yet.
Using FF, Opera and the IE that is on Windows 7 (can't remember what it is), the page looks exactly as it should, but using IE7 on Windows Vista, there is a gap between my navigation bar and the rest of the page which frankly makes it look stupid, and the illusion of tabbed pages is lost.
I have a reset stylesheet to reset all the elements to have no padding, margins etc and FF, Opera and the IE on Windows 7 produce the page as they should, it's only IE7 (and I'm guessing earlier versions of IE) that don't.
Here are 2 screenshots showing the problem, the first from FF/Opera/IE on Windows 7:
This one is from IE7 on Windows Vista:
alt text http://img43.imageshack.us/img43/7558/figarosiegap.jpg
And here is a link to the actual website in question: Figaro's Ristorante
Any ideas anyone?
Thanks for your time.
I've run into this problem a bazillion times. Add this to your CSS:
#header img { vertical-align: bottom }
There's a funny bug in IE up to and including version 7 where it will treat some whitespace (an empty text node, really) as a real text node, and align the image as if there was text in the element as well.
Another option would be to declare the image as a block level element:
#header img { display: block }
This CSS is safe to add to your global file, it will not interfere with how other browsers render the page.
The IE on windows 7 is IE8
I've taken a look at it using IE7, and the gap appears to be because of the image in the 'header' div. If you look at it with a tool like IE Developer toolbar you can see the boundaries around the objects on the page.
Sorry i cant paste an image but i'll try to describe it:
there is a #text element after the image which is being forced onto a new line by IE7.
if you change the style on the img to include
float: left;
This fixes the problem for me.
Hope this helps!
(Let me know if you need more clarity)
The gap is part of the text line where the menu image is, because the image is an inline element so it's placed on the baseline of the text line. The gap is the distance from the baseline of the text to the bottom edge of the line, i.e. the space used by hanging characters like 'g' and 'j'.
Simply adding display:block; to the style of the image solves the problem. It turns the image element from an inline element to a block element so that it's not placed on a base line of the text but as a separate element.
I've run into this problem a thousand times, and finally, after using overly complicated fix after fix, the answer is simple! (At least when <img>'s are involved.) In the div that is producing a gap under it, add 'overflow: hidden;' to its css; you will need to set its height, of course. So, if your div is 39px high, this will keep it at 39px high, ignoring the extra whitespace IE loves to put under <img>s
Hope it helps.
There's not much useful information (html or pictures that work) in this question. So, here's a random guess.
I've had situations where a line-break or spaces between elements can cause vertical space between elements. Try placing the closing and opening tags immediately next to each other and see if this corrects the issue.
Different browsers all have different default margins and padding. In this case, I'm guessing IE7s defaults are throwing you off. There are two general solutions to the problem. You can set your own margin and padding at the html, body level:
html, body {
margin: 0;
padding: 0;
}
or you can use IE conditional comments to load sepearte stylesheets for different versions of IE. Last I checked, the conditional comments were considered a better solution because browser defaults do provide some usefulness.
Jason is correct that it's a bug in how IE handles whitespace in the html... treating it as a text node. Though I don't think it's unique to images. I believe I've seen this behavior with divs as well. As a global change you may try applying vertical-align:bottom to both images and divs. Though I don't know what mayhem that may produce.
But the quick and dirty fix is to just remove the whitespace. Kinda sucks, but change stuff like this:
<img src="blah" alt="" width="5" height="5" />
<div>blorg</div>
To this:
<img src="blah" alt="" width="5" height="5"
/><div>blorg</div>
I warned that this is quick and dirty. But it works.