If you want the &quot;old&quot; rendering, and no button to show up on the toolbar so that users can switch modes you can use this:

    &lt;head&gt;
      &lt;!-- Mimic Internet Explorer 7 --&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=EmulateIE7&quot; &gt;
      &lt;title&gt;My Web Page&lt;/title&gt;
    &lt;/head&gt;

other options (old and new) include:`IE=5`, `IE=7`, `IE=8`, or `IE=edge`

(edge equals highest mode available)

You probably need to set your DOCTYPE correctly. Check out MSDN&#39;s articles on [DOCTYPE][1] and [Defining Document Compatibility][2] for more info.


  [1]: http://msdn.microsoft.com/en-us/library/ms535242(VS.85).aspx
  [2]: http://msdn.microsoft.com/en-us/library/cc288325(v=VS.85).aspx

Please also note that also IE8 browser settings can enforce a certain mode. I have a customer who has IE8 compatibility mode enforced by policy in intranet mode.

Please add to force IE not apply Compatibility Mode

    &lt;meta http-equiv=Content-Type content=&quot;text/html; charset=utf-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=EmulateIE8&quot;&gt;

In my case, I fixed it by adding the following tag after the `&lt;head&gt;` tag:

    &lt;meta content=&quot;IE=edge&quot; http-equiv=&quot;X-UA-Compatible&quot;&gt;

Is there a simple way (i.e. without writing a script or elaborate keymap sequence) to Yank a group of lines and leave the cursor wherever the Yank was performed, as opposed to at the start of the block?  

According to VIM&#39;s help: &quot;Note that after a characterwise yank command, Vim leaves the cursor on the first yanked character that is closest to the start of the buffer.&quot; Line-wise seems to behave similarly.

This is a bit annoying for me since I tend to select a large region from top to bottom, Yank, and then paste near or below the bottom of the selected region.  Today I&#39;m setting a mark (m-x) just before Yank and then jumping back, but I suspect there may be a different Yank sequence that will do what I need.

I&#39;ve searched SO and the web for this numerous times. There is so much existing &quot;VIM shortcuts&quot; material to wade through yet I&#39;ve not found a solution to this one yet.

Thanks in advance.

Yank a region in VIM without the cursor moving to the top of the block?

I use TinyMCE as editor on a website. Problem is, when I insert images from the same site, TinyMCE will use relative url to the image instead of the fixed url I entered when including the image.

The resulting html is used elsewhere, for example in emails. Problem is, relative urls will not show up properly anywhere but in the original location.

How do I get TinyMCE to use full absolute urls instead of shortened relative ones?

Get TinyMCE to use full image url instead of relative one

I have been stuck on this one for a while - I couldn&#39;t figure out why a website renders differently in two identical versions of Internet Explorer. Half an hour ago I came across a compatibility mode button in IE which made me really angry. 

Disabling compatibility mode has fixed my problem.

Is there a way to disable it programmatically, i.e. from a web page?

**Edit:**

Just came across this blog https://blogs.msdn.com/b/askie/archive/2009/03/23/understanding-compatibility-modes-in-internet-explorer-8.aspx 

I&#39;ll post an example code after reading the article

How can I programmatically disable IE compatibility mode?

I have been stuck on this one for a while - I couldn't figure out why a website renders differently in two identical versions of Internet Explorer. Half an hour ago I came across a compatibility mode button in IE which made me really angry.
Disabling compatibility mode has fixed my problem.
Is there a way to disable it programmatically, i.e. from a web page?
Edit:
Just came across this blog <a href="https://blogs.msdn.com/b/askie/archive/2009/03/23/understanding-compatibility-modes-in-internet-explorer-8.aspx" target="_blank" rel="noopener noreferrer">https://blogs.msdn.com/b/askie/archive/2009/03/23/understanding-compatibility-modes-in-internet-explorer-8.aspx</a>
I'll post an example code after reading the article

I have recently developed an HTML5 jQuery plugin and I&#39;m having trouble removing the red border on required fields in FF4 beta.

I noticed that FF applies this border/outline in required fields and removes it when value is set. The problem is that I am using the value attribute to emulate the placeholder attr in older browsers. Therefore I need all inputs with this feature to not show the red line.


You can see the problem in the demo page of the [plugin here][1] 


  [1]: http://www.matiasmancini.com.ar/demo_html5form_en.php

Firefox 4 Required input form RED border/outline

I had to split up a long css file. I put the smaller css files within a `styles` directory.

Now I have to update the the urls to go up one level with the `../` notation.

Is there anyway to specify the base URL from which to load assets like with the base tag in HTML, but with CSS?

Specifying base url for css

I&#39;m trying to load an image selected by the user through an &lt;input type=&quot;file&quot;&gt; element.

I added a onchange event handler to the input element like this:

    &lt;input type=&quot;file&quot; name=&quot;picField&quot; id=&quot;picField&quot; size=&quot;24&quot; onchange=&quot;preview_2(this);&quot; alt=&quot;&quot;/&gt;

and the preview_2 function is:

    var outImage =&quot;imagenFondo&quot;;
    function preview_2(what){
    	globalPic = new Image();
    	globalPic.onload = function() {
    		document.getElementById(outImage).src = globalPic.src;
    	}
    	globalPic.src=what.value;
    }

where outImage has the id value of the &lt;img&gt; tag where I want the new picture to be loaded.

However, it appears that the onload never happens and it does not load anything to the html.

What should I do?

Loading an image to a &lt;img&gt; from &lt;input file&gt;

I&#39;m piecing together a cheapo app that amongst other things &quot;frames&quot; some of our websites...  Pretty simple with the `WebViewClient`. until I hit the video.

The video is done as `HTML5` &lt;video&gt; elements, and these work fine and dandy on Chrome, iPhones, and now that we fixed the encoding issues it works great on `Android` in the native browser.

Now the rub: `WebView` doesn&#39;t like it.  At all.  I can click on the poster image, and nothing happens.

Googling, I found [this][1] which is close, but seems to be based on a &#39;link&#39; (as in a href...) instead of a video element.  (onDownloadListener does not appear to get invoked on video elements...)

I also see references to overriding onShowCustomView, but that seems to not get called on video elements... nor does shouldOverrideUrlLoading.. 

I would rather not get into &quot;pull xml from the server, reformat it in the app&quot;.. by keeping the story layout on the server, I can control the content a bit better without forcing people to keep updating an app.  So if I can convince WebView to handle &lt;video&gt; tags like the native browser, that would be best.

I&#39;m clearly missing something obvious.. but I have no clue what.


  [1]: http://www.codelark.com/2010/05/12/android-viewing-video-from-embedded-webview/

WebView and HTML5 &lt;video&gt;

How can I overlay a div with semi-transparent opacity over a youtube iframe embedded video?

    &lt;iframe class=&quot;youtube-player&quot; type=&quot;text/html&quot; width=&quot;520&quot; height=&quot;330&quot; src=&quot;http://www.youtube.com/embed/NWHfY_lvKIQ&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;
    &lt;div id=&quot;overlay&quot;&gt;&lt;/div&gt;

CSS

    #overlay {
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:#000;
        opacity:0.8;
        /*background:rgba(255,255,255,0.8); or just this*/
        z-index:50;
        color:#fff;
    }





**edit (added more clarification):**
HTML5 is approaching us, with more and more devices that use it instead of flash, which complicates the embedding of youtube videos, thankfully youtube provides a special embeddable iFrame with handles all of the video embedding compatibility issues, but now the previously working method of overlaying a video object with a semi-transparent div is no longer valid, I am now unable to add a `&lt;param name=&quot;wmode&quot; value=&quot;transparent&quot;&gt;` to the object, because it is now a iFrame, so how do I add a opaque div on top of the iframe embedded video?


overlay opaque div over youtube iframe

I have a drop down on a web page which is breaking when the value string contains a quote.

The value is `&quot;asd`, but in the DOM it always appears as an empty string.

I have tried every way I know to escape the string properly, but to no avail.

    &lt;option value=&quot;&quot;asd&quot;&gt;test&lt;/option&gt;
    &lt;option value=&quot;\&quot;asd&quot;&gt;test&lt;/option&gt;
    &lt;option value=&quot;&amp;quot;asd&quot;&gt;test&lt;/option&gt;
    &lt;option value=&quot;&amp;#34;asd&quot;&gt;test&lt;/option&gt;

How do I render this on the page so the postback message contains the correct value?


How do I properly escape quotes inside HTML attributes?

How can the cursor be focus on a specific input box on page load?

Is it posible to retain initial text value as well and place cursor at end of input?

    &lt;input type=&quot;text&quot;  size=&quot;25&quot; id=&quot;myinputbox&quot; class=&quot;input-text&quot; name=&quot;input2&quot; value = &quot;initial text&quot; /&gt;

Focus Input Box On Load

I had this code in my website

    &lt;script type=&quot;text/javascript&quot; src=&quot;http://code.jquery.com/jquery-1.4.4.min.js&quot;/&gt;
    &lt;script type=&#39;text/javascript&#39; src=&#39;/lib/player/swfobject.js&#39;&gt;&lt;/script&gt;

swfobject was not working (not loaded).

After altering the code to:

    &lt;script type=&quot;text/javascript&quot; src=&quot;http://code.jquery.com/jquery-1.4.4.min.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&#39;text/javascript&#39; src=&#39;/lib/player/swfobject.js&#39;&gt;&lt;/script&gt;

It worked fine.

The document was parsed as HTML5.

I think it’s funny. Okay, granted a tag that is closed and a self-closing tag are not the same. So I would understand if jQuery couldn’t load (although I find it ridiciulous).

But what I do not understand is that jQuery loads but the following, correctly written tag, doesn’t?

Can the &lt;script&gt; tag not be self closed?

Is there a method I can use for a div to extend to full height? I&#39;ve got a sticky footer in it as well.

Here&#39;s the web page: **Website removed**. The middle bit I&#39;m talking about is the white div, midcontent which has CSS values:

    .midcontent{
         width:85%;
         margin:0 auto;
         padding:10px 20px;
         padding-top:0;
         background-color:#FFF;
         overflow:hidden;
         min-height:100%;
         max-width:968px; 
         height:100%;
    }

So yes, obviously `height:100%` didn&#39;t work. Additionally, ALL parent containers have height set.

Here&#39;s the general structure


    &lt;body&gt;
        &lt;div id=&quot;wrap&quot;&gt;
            &lt;div id=&quot;main&quot;&gt;
                &lt;div class=&quot;headout&quot;&gt;
                    &lt;div class=&quot;headimg&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;midcontainer&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id=&quot;footer&quot;&gt;
            &lt;div class=&quot;footer&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;


For div to extend full height

Given the following how do i make my last column auto size to its content?
(The last column should autosize-width to the content. Suppose i have only 1 li element it should shrink vs. having 3 li elements etc):

      			&lt;table cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot;&gt;
                &lt;thead&gt;&lt;!-- universal table heading --&gt;
	                &lt;tr&gt;
		                &lt;td class=&quot;tc first&quot;&gt;&lt;input type=&quot;checkbox&quot; value=&quot;true&quot; name=&quot;data-1-check-all&quot; id=&quot;data-1-check-all&quot;&gt;&lt;/td&gt;
		                &lt;td class=&quot;tc&quot;&gt;Type&lt;/td&gt;
		                &lt;th&gt;File&lt;/th&gt;
                        &lt;th&gt;Sample&lt;/th&gt;
                        &lt;th&gt;Action&lt;/th&gt;
	                &lt;/tr&gt;
                &lt;/thead&gt;
	  			&lt;tbody&gt;
		  			&lt;tr&gt;
			  			&lt;td&gt;Division 1&lt;/td&gt;
			  			&lt;td&gt;Division 2&lt;/td&gt;
			  			&lt;td&gt;Division 3&lt;/td&gt;
			  			&lt;td&gt;Division 4&lt;/td&gt;
			  			&lt;td&gt;Division 5&lt;/td&gt;
		  			&lt;/tr&gt;
		  			&lt;tr&gt;
			  			&lt;td&gt;Division 1&lt;/td&gt;
			  			&lt;td&gt;Division 2&lt;/td&gt;
			  			&lt;td&gt;Division 3&lt;/td&gt;
			  			&lt;td&gt;Division 4&lt;/td&gt;
			  			&lt;td class=&quot;last&quot;&gt;
                            &lt;ul class=&quot;actions&quot;&gt;
                                &lt;li&gt;&lt;a class=&quot;iconStats&quot; href=&quot;#&quot;&gt;Statystyki&lt;/a&gt;&lt;/li&gt;
								&lt;li&gt;&lt;a class=&quot;iconEdit&quot; href=&quot;#&quot;&gt;Edytuj&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a class=&quot;iconDelete&quot; href=&quot;#&quot;&gt;Usuń&lt;/a&gt;&lt;/li&gt;

                            &lt;/ul&gt;
                        &lt;/td&gt;
		  			&lt;/tr&gt;
	  			&lt;/tbody&gt;
  			&lt;/table&gt;


Css:

    table { table-layout: fixed; width: 100%; }
    table tr { border-bottom:1px solid #e9e9e9; }
    table thead td, th {border-left: 1px solid #f2f2f2; border-right: 1px solid #d5d5d5; background: #ddd url(&quot;../images/sprites4.png&quot;) repeat-x scroll 0 100% ; font-weight: bold; text-align:left;}
    table tr td, th { border:1px solid #D5D5D5; padding:15px;}
    table tr:hover { background:#fcfcfc;}
    table tr ul.actions {margin: 0;}
    table tr ul.actions li {display: inline; margin-right: 5px;}




CSS table column autowidth

I am using this CSS for background opacity of a `&lt;div&gt;`:

    background: rgba(255, 255, 255, 0.3);

It’s working fine in Firefox, but not in IE 8. How do I make it work?


CSS background opacity with rgba not working in IE 8

Can anyone please tell me why `word-wrap: break-word` will not work in IE8?

I have this working in other browsers but IE8 refuses to listen despite reading this post on their site?

http://msdn.microsoft.com/en-us/library/ms531186(VS.85).aspx

Thanks



word-wrap:break-word not working in IE8

Currently I&#39;m writing a JavaScript file and have the following line:

    var res = &quot;JSON=&quot; + JSON.stringify(result);

result is being set just above this line. The issue I&#39;m having is that IE8 (IE8 only, that is) is reporting to me that JSON is undefined somehow. I&#39;m not sure what to make of this since, as I understood it, IE8 is a browser that implemented JSON support. Does anyone have any idea what might be going on?

JSON object undefined in Internet Explorer 8

I am eager to start using Html5 in particular the `&lt;header&gt;/&lt;footer&gt;/&lt;article&gt;/&lt;nav&gt;` tags.

What happens if the browser doesn&#39;t support these?

Also I need to style these so: For Example: The `nav` has borders and margins etc. You know standard CSS stuff.

So if I style them using the `nav` tag then IE7 &amp; IE8 etc are going to ignore this?


header/footer/nav tags - what happens to these in IE7, IE8 and browsers than don&#39;t support HTML5?

I am coding a Frontend which works well in IE7 Standards Mode and IE8 Standards Mode.

When I start up Internet Explorer and load the page both IE7 and IE8 go to Quirks Mode directly. How can I force both IE7 and IE8 to always load the page in Standards Mode?

I have no special meta tags added so far.

Thanks for helping me out

Edit: My doctype and head looks as follows at the moment:

    &lt;!DOCTYPE html&gt; 
    &lt;html lang=&quot;de&quot;&gt; 
    &lt;head&gt; 
    	&lt;title&gt;...&lt;/title&gt; 
    	&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
    	&lt;meta charset=&quot;utf-8&quot; /&gt;
    	&lt;script src=&quot;js/html5.js&quot;&gt;&lt;/script&gt; 
    
    	(...)
    &lt;/head&gt;

How do I force Internet Explorer to render in Standards Mode and NOT in Quirks?

I am using `:after` and `:before` CSS pseudo elements and it is working fine in **Internet Explorer 8**, and all modern browsers but it is not working fine in **Internet Explorer 7**. Are there known hacks to work around this in **Internet Explorer 7**?

:after and :before CSS pseudo elements hack for Internet Explorer 7

I have this CSS code with an `inline-block`. Can anyone tell me how to make it work in Internet Explorer 6 and 7. Any ideas? Maybe I&#39;m doing something wrong? Thank you!

    #signup {
       color:#FFF;
       border-bottom:solid 1px #444;
       text-transform:uppercase;
       text-align:center;
    }
    #signup #left {
       display: inline-block
    }
    #signup #right {
       background-image:url(images/signup.jpg);
       border-left: solid 1px #000;
       border-right: solid 1px #000;
       display: inline-block; 
       padding:1% 2%
       width:16%;
    }
    #signup #right a { font-size:100%; font-weight:bold } 
    #signup #right p { font-size:90%; font-weight:bold }
    #signup a:hover  { color:#FFF; text-decoration:underline }

Inline block doesn&#39;t work in internet explorer 7, 6

Works fine in IE8, IE9, and latest Chrome and Firefox, but can&#39;t seem to get it to show up in IE7. This is even with the most basic example of using the script.

Anyone had similar issues? Thanks!

Google +1 Button not working in IE7?

Can someone please help me get my head around this bug? With Firefox its working fine but with Internet Explorer 7 its not. It seems not to understand the `display: inline-block;`.


**html:**

    &lt;div class=&quot;frame-header&quot;&gt;
    	&lt;h2&gt;...&lt;/h2&gt;
    &lt;/div&gt;

**css:**

    .frame-header {
    	height:25px;
    	display:inline-block;	
    }



Content Type	Original Author	Original Content on Stackoverflow
Question	user338195	View Question on Stackoverflow
Solution 1 - Html	scunliffe	View Answer on Stackoverflow
Solution 2 - Html	Donut	View Answer on Stackoverflow
Solution 3 - Html	Deckard	View Answer on Stackoverflow
Solution 4 - Html	The Anh Nguyen	View Answer on Stackoverflow
Solution 5 - Html	Julian Moreno	View Answer on Stackoverflow

How can I programmatically disable IE compatibility mode?

Html Problem Overview

Html Solutions

Solution 1 - Html

Solution 2 - Html

Solution 3 - Html

Solution 4 - Html

Solution 5 - Html

Get TinyMCE to use full image url instead of relative one

Yank a region in VIM without the cursor moving to the top of the block?

Attributions