I have the following html which is display correctly in IE8. Below is the html and the css for grey_btn_75. Any idea why this would be happening?
<div style="float: left; width: 70px; margin-right: 25px; padding-top: 60px;
margin-left: 25px">
<asp:Button ID="btnAddAll" runat="server" Text="Add All"
OnClick="btnAddAll_Click"
CssClass="grey_btn_75" />
<div class="spacer"></div>
<asp:Button ID="btnAdd" runat="server" Text="Add"
OnClick="btnAdd_Click"
CssClass="grey_btn_75" />
<div class="spacer"></div>
<asp:Button ID="btnRemove" runat="server" Text="Remove"
OnClick="btnRemove_Click"
CssClass="grey_btn_75" />
<div class="spacer"></div>
<asp:Button ID="btnRemoveAll" runat="server" Text="Remove All"
CssClass="grey_btn_75"
OnClick="btnRemoveAll_Click" /><br />
</div>
CSS:
.grey_btn_75
{
background: url(../images/grey-75px.png);
background-repeat: no-repeat;
border-style: none;
font-family: Arial,Helvetica,Sans-Serif;
font-size: 12px;
font-weight: bold;
width: 75px;
height: 23px;
color: #000000;
cursor: pointer;
}
Things I have tried so far:
I removed the CssClass and the buttons still did not show up.
I modifed the CssClass and the buttons still did not show up.
I put other controls such as an asp:Label and and asp:ImageButton and they showed up fine.
I tried putting a new button and it did not show up.
Your div width is 70px, your button is 75px. You need to clean that up.
The problem is with the styles. Try commenting them out to see which one (or the combination) is responsible for the buttons to disappear.
Don't forget about the inline style of the top DIV as well.
This is a nice guide for button styles:
http://particletree.com/features/rediscovering-the-button-element/
People recommend
width:auto;
overflow:visible;
specifically for IE
I think it is the color value you have set in your CSS. I got the same problem previously and what I did was change the color value to something else.
Related
I am trying to display an address which includes the following information: Title, division, address1, address2, town/state/zip, and country (5 seperate lines worth of data). The problem is sometimes the company may only have the title, address1, and town/state/zip yet other times it may be all but address2. This is determined upon a db record request server side. Therefore how can I make my output look proper when some of my labels will be blank? I would like div's that contain an empty span to be essentially collapsed/removed. My only idea of how was to use jquery and a selector to find all divs with blank spans (since thats all an asp.net label really is) and then remove those divs however this seems like such bad form. Is there any way to do this with css? Possible Code would be something like: $('span:empty:only-child').parent('div').remove();
Picture Examples (Ignore spacing/indentation issues which I will fix)
Missing Division, Address2, and Country
All Possible Fields
The Html
<asp:Label runat="server" ID="lblBillingAddressHeader" CssClass="lblBillingAddressHeader" Text="Billing Address:" />
<div style="position:relative; top:150px; left: 113px;">
<div class="test">
<asp:Label runat="server" ID="lblBillingDivision" CssClass="lblBillingShippingDivisionFont" />
</div>
<div class="test">
<asp:Label runat="server" ID="lblBillingAddress" CssClass="lblBillingShippingFont" />
</div>
<div class="test">
<asp:Label runat="server" ID="lblBillingAddress2" CssClass="lblBillingShippingFont" />
</div>
<div class="test">
<asp:Label runat="server" ID="lblBillingAddress3" CssClass="lblBillingShippingFont" />
</div>
<div class="test">
<asp:Label runat="server" ID="lblBillingAddress4" CssClass="lblBillingShippingFont" />
</div>
</div>
The CSS
.test {
position: relative;
top: 0px;
left: 0px;
height: 12px;
width: 300px;
}
.lblBillingShippingDivisionFont {
font-size: small;
font-weight: bold;
}
.lblBillingShippingFont {
font-size: 10.6px;
}
Could you restruture your HTML?
HTML
<div style="position:relative; top:150px; left: 113px;">
<asp:Label runat="server" ID="lblBillingDivision" CssClass="lblBillingShippingDivisionFont" />
<asp:Label runat="server" ID="lblBillingAddress" CssClass="lblBillingShippingFont" />
<asp:Label runat="server" ID="lblBillingAddress2" CssClass="lblBillingShippingFont" />
<asp:Label runat="server" ID="lblBillingAddress3" CssClass="lblBillingShippingFont" />
<asp:Label runat="server" ID="lblBillingAddress4" CssClass="lblBillingShippingFont" />
</div>
CSS
.lblBillingShippingDivisionFont,
.lblBillingShippingFont {
position: relative;
top: 0px;
left: 0px;
width: 300px;
display: block;
}
.lblBillingShippingDivisionFont {
font-size: small;
font-weight: bold;
}
.lblBillingShippingFont {
font-size: 10.6px;
}
jsFiddle http://jsfiddle.net/LkFSV/
jQuery code:
$(document).ready(function(){
$('div').each(function() {
if ($(this).find('span').text() == '') {
$(this).hide();
}
});
});
http://jsbin.com/axaxut/1/edit
Unfortunately, there are no parent selectors in CSS. If there was, you could do something like:
span:empty:parent { display: none; }
Your best bets are the jQuery that you already have or to do it server side, I would personally say that server side is your best option.
Since this is asp.net code, you can check from server side code if the address2 is empty and simply hide the control.
if(string.IsNullOrEmpty(lblBillingAddress2.Text))
lblBillingAddress2.Visible = false;
It's an asp project with javascript and css. I have taken the java from this site JonDesign's SmoothGallery demo.
Now I want to put the tag p which has the summary inside, out of the div,
by the way here is the code:
<div id="myGallery">
<asp:Repeater ID="HeadLinesRepeater" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<div class="imageElement">
<h3><%# Eval("Title") %></h3>
<div>
<p><%# Eval("Summary") %></p>
</div>
<img class="full" src='<%# "/Img/news/" + Eval("ID") + ".jpg" %>' />
<img class="thumbnail" src='<%# "/Img/news/" + Eval("ID") + ".jpg" %>' style="width: 100px; height: 75px" />
</div>
</ItemTemplate>
</asp:Repeater>
</div>
CSS:
.jdGallery .slideInfoZone p {
float: right;
margin-bottom: 10px;
z-index: 1000000;
position: absolute;
margin-left: 92px;
width: 300px;
right: 670px;
top: 220px;
font-family: Tahoma;
font-size: 10pt !important;
text-align: justify;
color: white !important;
padding: 0;
font-size: 60%;
margin: 2px 5px;
color: #eee;
}
If I change position to the fixed it will be solved but ahen the I open the site in other resolution it would be unscrambled and goes to inside other divs.
It's my project for university please help me.
Just phisycally cut the <p><%# Eval("Summary") %></p> and paste it outside the div.
EDIT
What about styling the inner p with display:none, then create your own javascript (Do you have JQuery referenced in this page?) to grab all the paragraphs and append them elsewhere in the DOM.
But really it seams (from your comment) you need to change the javascript that manipulates the parent div to not depend on the inner paragraph, or change it to work with the paragraph in a different position in the DOM.
I'm trying to do what I thought is going to be the simples thing on earth. I'm having some png box with graphic element that suppose to cover part of an image I was intending to disply inside this box (this is a product box and the graphic element is supposed to simulate price tag).
So I need to have the box and I wanted to display the image underneath it using asp:ImageButton.
I've been struggling with this for hours, trying to put divs and images etc. Tried all sort of things with z-order, with no success, the product image is still being displayed above the graphic box. Fot the price it has been working fine, though.
I thought this should work:
<div id="HPItemBox">
<div id="HPItemPriceBox">
<asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label>
</div>
<div id="imgBox" runat="server" class="HPimgBox">
<asp:Image ID="ibImage" runat="server" Width="140" Height="140" style="position: relative; z-index: 10;" />
<div id="HPItemLink">
<asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';">Buy it</asp:LinkButton>
</div>
</div>
</div>
Also tried:
<div id="HPItemBox">
<div id="HPItemPriceBox">
<asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label>
</div>
<div id="imgBox" runat="server" class="HPimgBox">
<div id="divImage" runat="server" style="position: relative; width: 140px; height: 140px;
z-index: 10;">
</div>
<div id="HPItemLink">
<asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';">Buy it</asp:LinkButton>
</div>
</div>
</div>
There is the css:
#HPItemBox
{
position: relative;
width: 190px;
height: 190px;
background-image: url('../images/home-product-box.png');
background-repeat: no-repeat;
background-color: #ffffff;
float: left;
z-index: 50;
}
.HPItemPrice
{
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #4d4d4d;
}
.HPimgBox
{
position: relative;
top: -10px;
right: 20px;
width: 170px;
z-index: 10;
}
Any ideas? Thanks in advanced.
Hey i think your code is some mistake please manage your code according to you and some change to your css file as like this
HTML
<div id="HPItemBox">
<div id="HPItemPriceBox">
<asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label>
</div>
<div id="imgBox" runat="server" class="HPimgBox">
<div id="divImage" runat="server" style="position: relative; width: 140px; height: 140px;background:green;
z-index: 10;">
Hello
<div id="HPItemLink">
<asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';">Buy it</asp:LinkButton>
</div>
</div>
</div>
</div>
Css
#HPItemBox
{
position: relative;
width: 190px;
height: 190px;
background-image: url('../images/home-product-box.png');
background-repeat: no-repeat;
background-color:red;
float: left;
z-index: 50;
}
.HPItemPrice
{
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #4d4d4d;
position: relative;
}
#HPItemLink
{
position: absolute;
bottom: 10px;
left: 10px;
z-index: 10;
border:solid 2px yellow;
}
Live demo check here http://jsfiddle.net/8yg49/1/
I came up with a somewhat crooked idea, but i'm short in time so if it works for now it's fine with me.
I'll sketch the idea. basically, I think that an imagebutton gets the highest z-order, so there is no point of putting it above any div hoping that it will reside behind it.
so my solution was to take out the imagebutton and just put the image using some div, and then put a fully TRANSPARENT imagebutton above.
it goes something like this:
<div id="HPItemBox">
<div id="HPItemPriceBox">
<asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label>
</div>
<div id="imgBox" runat="server" class="HPimgBox">
<div id="HPItemLink">
<asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';" ImageURL="FULLY_TRANSPARENT_RECTANGLE!!!">Buy it</asp:LinkButton>
</div>
</div>
</div>
<div id="THE ACTUAL IMAGE!!!"> .... in this DIV I put the image using image control (NOT imagebutton!) and then relatively place it under HPItemBox div </div>
This way the actual image is presented under the frame div and the button is actually a rectangular transparent image so the image i wanted to display appears as the button (but without the 'click' affect.
This is driving me mental!!!
Ok, I have the following scenario - ModalPopupExtender used to display an UpdateProgress panel when AJAX is running. So I have the following:
<asp:Panel ID="panelUpdateProgress" runat="server" CssClass="updateProgress" >
<asp:UpdateProgress ID="UpdateProg1" DisplayAfter="2" runat="server" ClientIDMode="Static">
<ProgressTemplate>
<div style="position: relative; top: 40%; text-align: center;">
<asp:Image ID="Image1" runat="server" Style="border: 0px; vertical-align: middle;
padding-bottom: 4px;" ImageUrl="~/Images/Refresh.gif" />
<asp:Label ID="Label2" runat="server" Style="border: 0px; vertical-align: middle;
margin-left: 7px" Text="Refreshing data, please wait..."></asp:Label>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalProgress" runat="server" TargetControlID="panelUpdateProgress"
BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress">
</ajaxToolkit:ModalPopupExtender>
Javascript to fire the thing when AJAX kicks ins:
<script type="text/javascript" language="javascript">
var ModalProgress = '<%= ModalProgress.ClientID %>';
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);
function beginReq(sender, args) {
// shows the Popup
$find(ModalProgress).show();
}
function endReq(sender, args) {
// Hides the Popup
$find(ModalProgress).hide();
}
</script>
With the styling of :
<style type="text/css">
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=50);
opacity: 0.50;
}
.updateProgress
{
float: right;
border-width: 1px;
border-style: solid;
background-color: #FAFAD2;
width: 250px;
height: 100px;
}
</style>
However, I cannot for the life of me get the updateProgress to float right or adjust position (just as an example).
Using the developer tools, I can see that some sort of inline style overides the CSS style.
How on earth can I get, for example, my updateprogress to float right?
If you're fighting against inline styles that you have no control over, this is one of those rare cases where the use of !important is actually justified:
Give this a try:
.updateProgress
{
float: right !important;
/* etc. */
}
If this doesn't work, try adding a clear:right, or using a more specific selector like:
#someElement .updateProgress {}
EDIT: Specificity in CSS selectors won't help against inline styles, so ignore that as a possible solution.
well I've ditch the style sheet and run with this:
<asp:UpdateProgress ID="UpdateProg1" DisplayAfter="2" runat="server" ClientIDMode="Static">
<ProgressTemplate>
<div style="float: right; border-width: 1px; border-style: solid; background-color: #FAFAD2;
width: 250px; height: 100px;">
<div style="position: relative; top: 40%; text-align: center;">
<asp:Image ID="Image1" runat="server" Style="border: 0px; vertical-align: middle;
padding-bottom: 4px;" ImageUrl="~/Images/Refresh.gif" />
<asp:Label ID="Label2" runat="server" Style="border: 0px; vertical-align: middle;
margin-left: 7px" Text="Refreshing data, please wait..."></asp:Label>
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
It does the business so I'm happy for now :D
is it possible to change the button text on the Ajax control toolkit's AsyncFileUpload control from "Select File" (modern style) to something else? it should be a simple thing like Text property on Button, but I can't find any property for this. also is it possible to apply any other custom styles for the button?
Download the Ajax Toolkit source code and make the styling adjustments there. Recompile the project and use the new DLL. The controls tend to have styling embedded as web resources, which override the CSS you may try to apply.
there is another one way
<div class="inputblock" style="width: 350px;">
<ajaxToolkit:AsyncFileUpload runat="server" ID="FileUP" ClientIDMode="AutoID" UploaderStyle="Modern" OnUploadedComplete="FileUP_UploadedComplete" Width="100%" />
</div>
these renders something like this
<div id="ctl00_PopUpPlaceHolder_FileUP">
<input name="ctl00$PopUpPlaceHolder$FileUP$ctl00" id="ctl00_PopUpPlaceHolder_FileUP_ctl00" type="hidden">
<div id="ctl00_PopUpPlaceHolder_FileUP_ctl01" style='background: url("/WebResource.axd?d=some&pars") no-repeat 100% 1px; margin: 0px; width: 100% !important; height: 24px; text-align: right; min-width: 100%;'>
<input name="ctl00$PopUpPlaceHolder$FileUP$ctl02" id="ctl00_PopUpPlaceHolder_FileUP_ctl02" style="width: 100%; font-size: 14px; opacity: 0; -moz-opacity: 0.0;" type="file">
<div style="text-align: left; margin-top: -23px;" type="text">
<input name="ctl00$PopUpPlaceHolder$FileUP$ctl04" id="ctl00_PopUpPlaceHolder_FileUP_ctl04" style="width: 248px; height: 17px; font-family: Tahoma; font-size: 12px;" type="text" readonly="readonly">
</div>
</div>
and you always may change th css to change any syling like this:
#ctl00_PopUpPlaceHolder_FileUP_ctl01 {
background: url("/img/input_file.png") no-repeat right top !important;
//some othe stylings, but "!important" is strongly necessarily
}
this works.