I want to open a modalpopup in frame.I pasted here my frame's htlm code and css style and This code works well with IE 7.0 but not with IE 6.0.In IE 6.0 i see scrollbars in my panel.What can cause this problem?How can i solve it?
I open frame in my main page by these width and height.
<cc1:modalpopupextender ID="mdlDelete" runat="server" PopupControlID="PnlFrameDelete" BackgroundCssClass="modalBackground" OkControlID="btnDeleteOk" CancelControlID="btnDeleteCancel" TargetControlID="btnDelete" >
</cc1:modalpopupextender><asp:Panel ID="PnlFrameDelete" runat="server" style="display:none">
<iframe id="deletefrm" frameborder="0" src="../Frame/deletefrm.aspx" height="98px" width="342px" > </iframe> <div> <asp:Button ID="btnDeleteOk" runat="server" Text="Yes" Width="40px" style="display:none" /> <input id="btnDeleteCancel" type="button" value="No" style="width:20px;display:none" /> </div> </asp:Panel>
<body style="margin: 0px;">
This is the frame's aspx:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:Panel ID="pnlDelete" runat="server" CssClass="modal-dialog"> <div class="container"> <div class="header">
<div class="msg">Warning</div> <asp:LinkButton ID="LinkButton1" runat="server" CssClass="close" OnClientClick="$find('mdlDelete').hide(); return false;" /> </div><div class="body"> <h2><asp:Label ID="lblMsg" runat="server" Text="Are u sure?"></asp:Label></h2> </div> <div class="footer"> <div class="right">
<asp:Button ID="btnDeleteOk" runat="server" Text="Yes" Width="40px" OnClientClick="okay();" /> <input id="btnDeleteCancel" type="button" value="No" onclick="cancel();" style="width:40px" /> </div> </div> </div> </asp:Panel> </form>
And this is the CSS:
/* dialog frame */
.modal-dialog
{
position:absolute;
margin:auto;
height:98px;
}
/* dialog contents container */
.modal-dialog .container
{
font-family:tahoma,helvetica,arial,sans-serif;
font-size:11px;
width:340px;
border:solid 1px #99aabd;
background-color:#F2F9FF;
padding: 0px 0px 0px 0px;
}
/* dialog header */
.modal-dialog .header
{
background:url(../images/sprite.gif) repeat-x 0px -1100px;
height:20px;
padding-top:5px;
}
/* dialog header message */
.modal-dialog .header .msg
{
vertical-align:middle;
padding-left:6px;
color:#fff;
font-size:12px;
font-weight:bold;
}
/* dialog body */
.modal-dialog .body
{
height:40px;
background-color:#F2F9FF;
}
/* dialog body message */
.modal-dialog .body h2
{
padding-top:10px;
background-color: #F2F9FF;
font-size:14px;
text-align:center;
font-weight:normal;
}
/* dialog footer */
.modal-dialog .footer
{
height:30px;
background-color: #F2F9FF;
}
/* dialog footer buttons */
.modal-dialog .footer .right
{
background-color: #F2F9FF;
float:none;
text-align:center;
}
/* dialog footer checkbox */
.modal-dialog .footer .left
{
background-color: #F2F9FF;
float:left;
text-align:left;
}
/* dialog close */
.modal-dialog .close
{
right:4px;
background: url(../images/icons.gif) no-repeat -732px 0px;
width:16px;
cursor:hand;
position:absolute;
top:5px;
height:16px;
}
/* dialog close hover */
.modal-dialog .close:hover { background: url(../images/icons.gif) no-repeat -749px 0px; }
/* modal overlay */
.modalBackground
{
background-color:Gray;
filter:alpha(opacity=50);
opacity:0.5;
}
I guess this is due to the well known "Border Bug" in the box model of IE6.
Please, have a look to:
http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
or:
http://www.simple-site.eu/test-lab/ie-bugs/ie6-border-bug.html
Well from a quick look I already see that your frame is set to a width of 342px while your container is set to 340 in the CSS. You also set padding on some of the elements within the container. You'll have to include that in the width and height of your container in order to avoid the scrollbars.
Related
I had this CSS written for me as I'm still learning. It is used to place a price over thumbnails which are displayed using a complicated 'Literal'. It's the end of this long line of code which displays the price using filenameAndPrice(4).....
Dim liByLiteral As New LiteralControl("<img class='lazy" & opacity & "' data-src='https://example.com/catalog/images/thumbnails/" & filenameAndPrice(0) & "' src='./files/images/loader.png' /><p><span>£" & filenameAndPrice(4) & "</span></p>")
I now need to alter the code to display the price underneath the photo instead of over it. However, everything I've tried has resulted in the text being hidden behind the images below.
Here's the front end..
<div runat="server" id="usersStall">
<div>
<div>
<ul class="stallRow1" id="stallRow1UL" runat="server"></ul>
</div>
<div id="stallRow2nd" runat="server">
<ul id="stallRow2UL" runat="server"></ul>
</div>
</div>
<br>
<asp:Panel ID="pnlLoggedIn" runat="server">
<asp:TextBox ID="txtItem" runat="server" placeholder="Select Item Then Message Seller" visible="false" height="22px" style="font-size: 1.8em; text-align: center;" Columns="28" MaxLength="255"></asp:TextBox>
</div>
CSS...
.imageThumbnail {
width:300px;
position:relative;
}
.imageThumbnail img {
min-width:90px;
max-width: 150px;
min-height: 200px;
}
.imageThumbnail p {
position:absolute;
top:-20px;
left:0;
width:100%;
text-align:center;
transform:translateY(-50%); /* doesn't work in IE9 and older I'm affraid */
margin:0px;
}
.imageThumbnail P span {
color: white;
margin-left:10px;
font: bold 18px/36px Helvetica,
Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0);
border: 1px solid black;
border-radius: 4px;
background: rgba(115, 160, 77, 0.7);
padding: 5px 10px;
}
I have a login page and I want to add a sidebar div to the left side. Currently when I write something in the lefthand side, it is flowing across the page? How do I fix this
Here is my code
<div align="left">
sdfsdfsdfsdfsfsdfsdf
</div>
<div align ="center" style="border: thick none #008080; height: 479px; width: 595px; color: #000000; font-size: medium; font-weight: bold;"><br /><br />
Not a User?
<asp:LinkButton ID="LinkButton1" runat="server" Font-Bold="True"
ForeColor="Blue" CausesValidation="false" onclick="LinkButton1_Click">Sign Up</asp:LinkButton><br /><br />
<center><div class="mainbars"> <div class="vpb_main_wrapper1" top=20 align="center"><br clear="all"></br>
<div><h1 align="center"
style="color: #000000; font-weight: bold; font-size: xx-large; font-family: Calibri;">
LOG IN</h1></div><hr /><br />
<div align="left" style="width:115px; padding-top:10px;float:left; color: #000000; font-size: medium; font-weight: bold; font-family: Calibri;">
UserName</div>
<div align="left" style="width:300px;float:left;">
<input id="txt_username" class="vpb_textAreaBoxInputs" type="text" value="" name="username" runat="server" onclick="return username_onclick()" placeholder="Username"/>
<asp:Label ID="LbelUser" runat="server"></asp:Label>
<asp:RequiredFieldValidator ID="txt_userna" runat="server"
ControlToValidate="txt_username" ErrorMessage="* Enter UserName"></asp:RequiredFieldValidator>
</div><br />................. etc etc
</center>
</div>
Something like this. You'll also need to use a clearfix hack for clearing the floats.
HTML
<div class="container">
<div class="cf">
<div class="sidebar">sidebar</div>
<div class="login">login</div>
</div>
hhjhj
</div>
CSS
.sidebar { float:left; width:300px; background:#eee;}
.login { float:right; width:400px; background:#ccc; }
/**
/* http://nicolasgallagher.com/micro-clearfix-hack/
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after { content: " "; /* 1 */ display: table; /* 2 */ }
.cf:after { clear: both; }
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf { *zoom: 1; }
JSFiddle Demo
Add this line of CSS in each Div
style="float:left;"
I'm trying to get the shoutbox on www.talkjesus.com (vBulletin forum) to float left while the verse of the day (orange) to float on the very right side of the shoutbox. I've tried so many variations but it's not working, I'm stuck. Your help appreciated.
The forumhome template code I'm using now is:
<div class="blockbody formcontrols floatcontainer">
<div id="wgo_onlineusers" class="wgo_subblock">
<h3 class="blocksubhead" style="background-color:#82BA1B; color: #fff !important; font-size: 22px; font-weight: 300">shoutbox</h3>
<div style="text-align: center; line-height: 0" class="blockrow">
<div><iframe frameborder="0" width="100%" height="200" src="http://www.cbox.ws/box/?boxid=439&boxtag=7868&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain1-439"" id="cboxmain1-439" style="border-bottom: 1px solid #e4e4e4;"></iframe></div>
<div style="position:relative"><iframe frameborder="0" width="350" height="70" src="http://www.cbox.ws/box/?boxid=439&boxtag=7868&sec=form&nme={vb:raw cboxnme}&nmekey={vb:raw cboxkey}&pic={vb:raw cboxav}&lnk={vb:raw cboxav}" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform1-439" id="cboxform1-439"></iframe></div>
</div>
</div>
</div>
<br />
<div class="blockbody formcontrols floatcontainer">
<div id="wgo_onlineusers" class="wgo_subblock">
<h3 class="blocksubhead" style="background-color:#E66B1B; color: #fff !important; font-size: 22px; font-weight: 300">verse of the day</h3>
<div>
<div style="font-size:16px; line-height:28px; padding:10px; color: #797979">
<script type="text/javascript" src="http://www.christnotes.org/syndicate.php?content=dbv&type=js2&tw=auto&tbg=ffffff&bw=0&bc=000000&ta=L&tc=43A6DF&tf=Open Sans&ts=14&ty=B&va=L&vc=43A6DF&vf=Open Sans&vs=12&tt=3&trn=NASB"></script>
</div>
</div>
</div>
</div>
relevant CSS code...
/* Auto-clearing of floats */
.floatcontainer:after,
.formcontrols .blockrow:after,
dl.stats:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.floatcontainer,
.formcontrols .blockrow,
dl.stats {
display:inline-block;
font-weight:normal;
}
/* IE-Mac hide \*/
* html .floatcontainer,
.formcontrols .blockrow,
dl.stats {
height:1%;
}
.floatcontainer,
.formcontrols .blockrow,
dl.stats {
display:block;
}
.blockrow {
padding:12px;
}
.blocksubhead {
padding:12px;
}
.blockhead_info, .blocksubhead_info {
float:right;
font-weight:normal;
}
Have you tried applying the float property to the .floatcontainer element?
.floatcontainer {
width: 50%;
float: left;
}
Setting the width property will be necessary here because the output of the script in the second .floatcontainer block adds a div element to the document which has a width of 100%. Take a look at the output here: http://goo.gl/Bw7iaD (see inline styles of first element). This makes the verse box span full-width unless it's parent container has a specified width.
Here is an example of the working code: http://cdpn.io/0dfce502ffdc99f54a159f7a563ed4fe
i am struggling to place input check-box in same line x-horizontal as in label. My check-box is placing in 2nd line. I have a div with background to image then label and then check-box. The margin between image and label div and margin between label and check need to be same. Many thanks in advance.
<div id="map_Marker_Check_Block">
<div class="markerDiv" id="maker_school"><div class="marker_label">School</div> <input class="marker_ckeckbox" name="markerType" value="school" type="checkbox" /> </div> <br />
<div class="markerDiv" id="maker_gym"> <div class="marker_label">Gym</div> <input class="marker_ckeckbox" name="markerType" value="gym" type="checkbox" /> </div><br />
</div>
css
#map_Marker_Check_Block {
background-color:yellow;
display:block;
position:absolute;
width:20em;
height:400px;
top:0;
right:0;
z-index:10;
overflow-y:auto;
}
.marker_label {
margin-left:50px;
line-height:48px;
width:130px;
background-color:green;
}
.marker_ckeckbox {
float:right;
}
.markerDiv {
width:19em;
height:48px;
margin-left:5px;
}
#maker_school { background: url("img1.png") no-repeat; }
#maker_gym{ background: url("img2.png") no-repeat; }
http://jsfiddle.net/XUErp/
.marker_label {
float:left;
margin-left:50px;
line-height:48px;
width:130px;
background-color:green;
}
.marker_ckeckbox {
margin-top:15px;
float:right;
}
Use TOP and POSITION styles for checkbox:
.marker_ckeckbox {
float: right;
position: relative;
top: -35px;
}
But, I think the elements must be structured in a different way.
Or as Musa said use label instead of div:
Sample: http://jsfiddle.net/qaprB/1/
try this
<div class="markerDiv" id="maker_school"><label class="marker_label">School</label> <input class="marker_ckeckbox" name="markerType" value="school" type="checkbox" /> </div> <br />
<div class="markerDiv" id="maker_gym"> <label class="marker_label">Gym</label> <input class="marker_ckeckbox" name="markerType" value="gym" type="checkbox" /> </div><br />
css
.marker_ckeckbox {
float:right;
position: relative;
top: -35px;
}
.marker_label {
display:block;
}
I have two div's one has textbox in it and other just plain text. This is how it looks:
. I want to move text div which has language in it to the next line where arrow is showing in the pic. I searched every where cant find any solution the wordwrap is not working. Also i have to do this within css.
Here is the aspx code for both:
<asp:Panel ID="search" runat="server" EnableViewState="False" Wrap="False">
<div id="txtBox">
<asp:textbox id="box" runat="server"></asp:textbox>
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
css:
#search
{
position:absolute;
top:100px;
height:50px;
left:100px;
width:1000px;
}
#txtBox
{
float: left;
}
Here is the solution for anyone who is stuck in same situation:
#text
{
clear: left;
}
clear:left moves the text to next line to the bottom of the textbox. Then you can use margin-left to set the text at any position you want.
You don't want to use float:left in this situation. float:left is for stacking block level HTML elements horizontally.
block level elements automatically stack vertically, which seems to be what you want.
However, the <asp:TextBox> is an inline level element, so you can put a <br /> after it, or wrap it in a <div>.
Solution:
HTML
<asp:Panel ID="search" class="search-class" runat="server" EnableViewState="False" Wrap="False">
<div id="txtBox">
<asp:textbox id="box" runat="server"></asp:textbox>
<br />
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
OR
<asp:Panel ID="search" class="search-class" runat="server" EnableViewState="False" Wrap="False">
<div id="txtBox">
<div>
<asp:textbox id="box" runat="server"></asp:textbox>
</div>
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
CSS
.search-class
{ /* Curt is right, the ID="search" is in a naming container, */
/* so use class selector */
position:absolute;
top:100px;
height:50px;
left:100px;
width:1000px;
}
have you tryed doing:
clear:both on the div with the language?
and maybe you should contain the textbox
/* Containing floats */
.contain:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* IE6 */
* html .contain {
height: 1%;
}
/* IE7 */
*:first-child+html .contain {
min-height: 1px;
}
When ASP.NET controls are rendered to the client, they sometimes produce different IDs (unless specified otherwise in ASP.NET 4).
Looking at your code, I don't see any control with an ID of txtBox, so these styles aren't being applied.
When working with ASP.NET, I find its best to use classes for styling, as these will stay the same after rendering.
<asp:Panel ID="search" runat="server" EnableViewState="False" Wrap="False" CssClass="search">
<div id="txtBox">
<asp:textbox id="box" runat="server" CssClass="txtBox"></asp:textbox>
<div id="text" runat="server">Language</div>
</div>
</asp:Panel>
.search
{
position:absolute;
top:100px;
height:50px;
left:100px;
width:1000px;
}
.txtBox
{
float: left;
}
I haven't tested this code, but you should now see these styles applying correctly, and therefore you can amend them as you wish.