http://jsfiddle.net/m7t9b/
<div style="width:625px;height:220px;overflow-y:hidden;overflow-x:scroll;z-index:10;">
<table width="1000" height="114" border="1">
<tr>
<td width="126"><blockquote>
<blockquote>
<blockquote>
<p> <img border="0" width="100" height="111" src="images/ahmed.png" alt="Mr. Ahmed" /> <br />
Mr. Ahmed <br />
Ext. 13417<br />
Room 417/323<br />
Ahmed#wcskids.net</p>
</blockquote>
</blockquote>
</blockquote></td>
<td width="126"><p><img width="100" height="111" src="images/teachers_clip_image002.jpg" alt="Mrs. Bageris " /><br />
Mrs. Bageris<br />
Ext. 13226<br />
Room 226<br />
EBageris#wcskids.net</p></td>
<td width="126"><p><img border="0" width="100" height="111" src="images/cetkovic.png" alt="Ms. Kudra" /><br />
Mr. Cetkovic<br />
Ext. 13305<br />
Room 305<br />
RCetkovic#wcskids.net</p></td>
<td width="126"><p><img border="0" width="100" height="111" src="images/teachers_clip_image002_0004.jpg" alt="Mrs. Kudra" /><br />
Mrs. Kudra<br />
Ext. 13225<br />
Room 225<br />
Dkudra#wcskids.net</p></td>
<td width="126"><p><img width="100" height="111" src="images/teachers_clip_image002_0006.jpg" alt="Mr. Sagman" /><br />
Mr. Sagman<br />
Ext. 13420<br />
Room 420<br />
SAGMANW#wcskids.net</p></td>
<td width="126"><p><img width="100" height="111" src="images/yasso.jpg" alt="Mr. Yasso" /><br />
Mr. Yasso<br />
Ext. 13418<br />
Room 418<br />
SAGMANW#wcskids.net</p></td>
</tr>
</table>
</div>
Instead of scrolling when I drag the scrollbar, the text below it gets highlighted. How do i fix this in IE 8?
Use the fiddle to see the whole code.
Use this code in your stylesheet,
-ms-overflow:auto;
May it will be help you...
Good Luck!
Related
I'm working on a project and whenever I try to load this page it gives me the same error everytime. Project is being worked on in Visual Studio 2015. What the goal is that users can fill in their name, email and a message they want to send to the owner of the site. Whenever the user is done with the message they click on the button, the button with the text verzenden, and a message is shown below if it is sent correctly or not. The problem is not the code however, I can manage that on myself.
Html code , this is all wrapped in a contentplaceholder because I have made a masterpage for the project :
<form id="Form1" runat="server">
<table>
<tr>
<td>
<br />
<br />
<h1> Stuur ons een berichtje</h1>
<br />
<br />
<p>Alle berichtjes worden ook verstuurd naar info#waasseschrijnwerken.be. Als het correct is verstuurd ontvangt u een bevestigingsmail.</p>
<br />
<br />
<asp:Label ID="lblnaam" runat="server" Text="Naam: "></asp:Label>
<asp:TextBox ID="txtnaam" runat="server"></asp:TextBox>
<asp:Label ID="lblmail" runat="server" Text="Emailadres: "></asp:Label>
<asp:TextBox ID="txtmail" runat="server"></asp:TextBox>
<br />
<br />
<asp:Label ID="lblbericht" runat="server" Text="Bericht: "></asp:Label>
<br />
<br />
<asp:TextBox ID="txtbericht" runat="server" Height="200px" Width="750px"></asp:TextBox>
<br />
<br />
<br />
<asp:Button ID="btnVerzend" runat="server" Text="Verzenden" />
<br />
<br />
<br />
<asp:Label ID="lblres" runat="server" Text="Label" Visible="False"></asp:Label>
<br />
<br />
<br />
</td>
</tr>
</table>
</form>
Translation: One page can only have one form-label with runat server
Check the masterpage for a <form> tag with runat="server". ASP.NET only allows one of these per page.
You can just remove it from your code above;
<table>
<tr>
<td>
<br />
<br />
<h1> Stuur ons een berichtje</h1>
<br />
<br />
<p>Alle berichtjes worden ook verstuurd naar info#waasseschrijnwerken.be. Als het correct is verstuurd ontvangt u een bevestigingsmail.</p>
<br />
<br />
<asp:Label ID="lblnaam" runat="server" Text="Naam: "></asp:Label>
<asp:TextBox ID="txtnaam" runat="server"></asp:TextBox>
<asp:Label ID="lblmail" runat="server" Text="Emailadres: "></asp:Label>
<asp:TextBox ID="txtmail" runat="server"></asp:TextBox>
<br />
<br />
<asp:Label ID="lblbericht" runat="server" Text="Bericht: "></asp:Label>
<br />
<br />
<asp:TextBox ID="txtbericht" runat="server" Height="200px" Width="750px"></asp:TextBox>
<br />
<br />
<br />
<asp:Button ID="btnVerzend" runat="server" Text="Verzenden" />
<br />
<br />
<br />
<asp:Label ID="lblres" runat="server" Text="Label" Visible="False"></asp:Label>
<br />
<br />
<br />
</td>
</tr>
</table>
I try to create this type of sign in page in bootstrap
http://v4-alpha.getbootstrap.com/examples/signin/
but before this i already create page but this is not bootstrap
code
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Mainpage.aspx.cs" Inherits="project.Mainpage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>System</title>
<link href="Styles/login.css" rel="stylesheet" />
<link href="Styles/main.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<!-- Google Web fonts -->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,800,700,600' rel='stylesheet' type='text/css'/>
</head>
<body style="background-image:url(images/slide07.jpg);background-repeat:no-repeat">
<img class="logo" alt="LOGO" src="images/logomain.png" />
<br /><br />
<form id="form1" runat="server" class="fordiv">
<div id="box">
<span>
<img src="images/none.png" id="avtar" />
</span>
<div style="margin-left: 190px;margin-top: -170px";>
<span>
<asp:TextBox CssClass="textbx" ID="txt_us" runat="server" placeholder="Enter UserName"></asp:TextBox><br /><br />
</span>
<span>
<asp:TextBox CssClass="textbx" ID="txt_pwd" runat="server" placeholder="Enter Password" TextMode="Password"></asp:TextBox><br /><br />
</span>
<span>
<asp:Button ID="Button1" CssClass="button" runat="server" Text="LOGIN" OnClick="Button1_Click" />
</span>
</div>
</div><br /><br />
<asp:Label ID="Label1" CssClass="info" visible="false" runat ="server" Text="" BorderColor="Black"></asp:Label>
</form>
<table class="table" style="border: medium groove #FFFFFF; width: 100%; margin-top: 200px; ">
<tr>
<td>
<img style="margin-left: 10px;" src="images/passd.jpg" />
</td>
<td>
<img src="images/1.jpg" />
</td>
<td>
<img src="images/2.jpg" />
</td>
<td>
<img src="images/3.jpg" />
</td>
<td>
<img src="images/4.jpg" />
</td>
</tr>
</table>
<br /><br /><br />
</body>
</html>
now i try to create bootstrap responsive and i tried this
<div class="container">
<img class="logo" alt="LOGO" src="images/logomain.png" /><br /><br />
<form class="form-signin" runat="server" >
<h2 class="form-signin-heading">Please sign in</h2><br /><br />
<label for="inputEmail" class="sr-only">Email address</label>
<asp:TextBox CssClass="textbx" ID="txt_us" runat="server" placeholder="Enter UserName"></asp:TextBox><br /><br />
<label for="inputPassword" class="sr-only">Password</label>
<asp:TextBox CssClass="textbx" ID="txt_pwd" runat="server" placeholder="Enter Password" TextMode="Password"></asp:TextBox>
<br /><br />
<asp:Button ID="Button1" CssClass="button" runat="server" Text="LOGIN" OnClick="Button1_Click" />
<asp:Label ID="Label1" CssClass="info" visible="false" runat ="server" Text="" BorderColor="Black"></asp:Label>
</form>
</div>
but this shows awkward display
any solution?
Well, for responsive design you should be using using bootstraps's grid system.
I think you should read a bit about about responsive design here and the bootstrap grid system here.
When my page loads, after about 5 seconds, the window scrolls to an html video which is a significant ways down the page (which is on autoplay). This has been an issue following the Safari 10 release. Anyone know why this may be the case?
I'm having the same issue - if I remove the autoplay attribute it doesn't happen.
Initiating autoplay via JS (ou even starting the video from the console) makes the page jump as well.
it's the "controls" attribute on the HTML, i've found that the new update on Safari is giving few issues, have a look at this: https://stackoverflow.com/questions/42692679/video-tag-on-safari-10-goes-up-after-few-seconds
i did reproduce your issue (mixing it with mine on that question) on Jsfiddle:
https://jsfiddle.net/antonino_R/d9tf0va3/15/
(scroll down and run again to reproduce the issue, you may need to run and scroll quickly down again)
and removing "controls" does fix the issue https://jsfiddle.net/antonino_R/d9tf0va3/16/
<div class="wrapper">
<div class="wrapper-inner">
<div class="wrapper-video">
<video autoplay loop muted >
<source src="http://techslides.com/demos/sample-videos/small.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
</video>
</div>
<div class="site-centered clearfix">
<header class="entry-header">
<h1 class="entry-title">this is a title</h1>
<h2 class="entry-subtitle">this is some text</h2>
</header>
</div>
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h4>this is to scroll down the page and test that it goes up after few seconds</h4>
obviously if the controls are needed this fix isn't good enough
At first, you have to add this piece of code in footer:
<script>
var myVideo = document.getElementsByTagName("video")[0];
myVideo.controls = "";
</script>
This worked for me. Before i had problem that after 5 sec when website loaded, just jumped to section with video background. I had there overlay image and without value min-height: ___px; overlay was shorter than video height.
In design page,i am loading HtmlEditorExtender in ajax popup. There i want to load an image. but the image is not loading completely.
i guess: OnImageUploadComplete is not firing.
what could be the problem? and please suggest me the solution??
<ajax:HtmlEditorExtender ID="htmEdtior" DisplaySourceTab="true" OnImageUploadComplete="htmEdtior_OnUploadComplete"
TargetControlID="txtWelcomenotes" runat="server">
<Toolbar>
<ajax:Undo />
<ajax:Redo />
<ajax:Bold />
<ajax:Italic />
<ajax:Underline />
<ajax:StrikeThrough />
<ajax:Subscript />
<ajax:Superscript />
<ajax:JustifyLeft />
<ajax:JustifyCenter />
<ajax:JustifyRight />
<ajax:JustifyFull />
<ajax:InsertOrderedList />
<ajax:InsertUnorderedList />
<ajax:CreateLink />
<ajax:UnLink />
<ajax:RemoveFormat />
<ajax:SelectAll />
<ajax:UnSelect />
<ajax:Delete />
<ajax:Cut />
<ajax:Copy />
<ajax:Paste />
<ajax:BackgroundColorSelector />
<ajax:ForeColorSelector />
<ajax:FontNameSelector />
<ajax:FontSizeSelector />
<ajax:Indent />
<ajax:Outdent />
<ajax:InsertHorizontalRule />
<ajax:HorizontalSeparator />
<ajax:InsertImage />
</Toolbar>
</ajax:HtmlEditorExtender>
Have changed every query string which comes from another page to session..... then it worked..... Problemo solved...
I know that the :before, and :after pseudo elements are not supported in empty elements, but what about these:
<select>
<option>
<textarea>
<button>
A list would be nice! Thanks guys!
I put together a list of every HTML element. Some aren't even legal where they're used... but it still seems to work.
If it says "it works" in green letters, that element is supported.
*:not(br):after {
content: 'it works';
font-weight: bold;
padding: 5px;
color: green;
}
<a>Name: a</a> <br />
<abbr>Name: abbr</abbr> <br />
<address>Name: address</address> <br />
<area>Name: area</area> <br />
<article>Name: article</article> <br />
<aside>Name: aside</aside> <br />
<audio>Name: audio</audio> <br />
<b>Name: b</b> <br />
<base>Name: base</base> <br />
<bdo>Name: bdo</bdo> <br />
<blockquote>Name: blockquote</blockquote> <br />
<body>Name: body</body> <br />
<br>Name: br</br> <br />
<button>Name: button</button> <br />
<canvas>Name: canvas</canvas> <br />
<caption>Name: caption</caption> <br />
<cite>Name: cite</cite> <br />
<code>Name: code</code> <br />
<col>Name: col</col> <br />
<colgroup>Name: colgroup</colgroup> <br />
<command>Name: command</command> <br />
<datalist>Name: datalist</datalist> <br />
<dd>Name: dd</dd> <br />
<del>Name: del</del> <br />
<details>Name: details</details> <br />
<dfn>Name: dfn</dfn> <br />
<div>Name: div</div> <br />
<dl>Name: dl</dl> <br />
<dt>Name: dt</dt> <br />
<em>Name: em</em> <br />
<embed>Name: embed</embed> <br />
<eventsource>Name: eventsource</eventsource> <br />
<fieldset>Name: fieldset</fieldset> <br />
<figcaption>Name: figcaption</figcaption> <br />
<figure>Name: figure</figure> <br />
<footer>Name: footer</footer> <br />
<form>Name: form</form> <br />
<h1>Name: h1</h1> <br />
<h2>Name: h2</h2> <br />
<h3>Name: h3</h3> <br />
<h4>Name: h4</h4> <br />
<h5>Name: h5</h5> <br />
<h6>Name: h6</h6> <br />
<head>Name: head</head> <br />
<header>Name: header</header> <br />
<hgroup>Name: hgroup</hgroup> <br />
<hr>Name: hr</hr> <br />
<html>Name: html</html> <br />
<i>Name: i</i> <br />
<iframe>Name: iframe</iframe> <br />
<img>Name: img</img> <br />
<input>Name: input</input> <br />
<ins>Name: ins</ins> <br />
<kbd>Name: kbd</kbd> <br />
<keygen>Name: keygen</keygen> <br />
<label>Name: label</label> <br />
<legend>Name: legend</legend> <br />
<li>Name: li</li> <br />
<link>Name: link</link> <br />
<mark>Name: mark</mark> <br />
<map>Name: map</map> <br />
<menu>Name: menu</menu> <br />
<meta>Name: meta</meta> <br />
<meter>Name: meter</meter> <br />
<nav>Name: nav</nav> <br />
<noscript>Name: noscript</noscript> <br />
<object>Name: object</object> <br />
<ol>Name: ol</ol> <br />
<optgroup>Name: optgroup</optgroup> <br />
<option>Name: option</option> <br />
<output>Name: output</output> <br />
<p>Name: p</p> <br />
<param>Name: param</param> <br />
<pre>Name: pre</pre> <br />
<progress>Name: progress</progress> <br />
<q>Name: q</q> <br />
<ruby>Name: ruby</ruby> <br />
<rp>Name: rp</rp> <br />
<rt>Name: rt</rt> <br />
<samp>Name: samp</samp> <br />
<script type="application/json">Name: script</script> <br />
<section>Name: section</section> <br />
<select>Name: select</select> <br />
<small>Name: small</small> <br />
<source>Name: source</source> <br />
<span>Name: span</span> <br />
<strong>Name: strong</strong> <br />
<style>Name: style</style> <br />
<sub>Name: sub</sub> <br />
<summary>Name: summary</summary> <br />
<details>Name: details</details> <br />
<sup>Name: sup</sup> <br />
<table>Name: table</table> <br />
<tbody>Name: tbody</tbody> <br />
<td>Name: td</td> <br />
<textarea>Name: textarea</textarea> <br />
<tfoot>Name: tfoot</tfoot> <br />
<th>Name: th</th> <br />
<thead>Name: thead</thead> <br />
<time>Name: time</time> <br />
<title>Name: title</title> <br />
<tr>Name: tr</tr> <br />
<ul>Name: ul</ul> <br />
<var>Name: var</var> <br />
<video>Name: video</video> <br />
<wbr>Name: wbr</wbr> <br />