I am using the library 'CSS3 Pie' to allow me to use border-radius with previous IE a treat, by having the CSS style for the element like this:
border: 1px solid #122541;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
behaviour: url('../Content/Scripts/PIE.htc');
It works a treat, however when the page is postback (I am using an UpdatePanel if that makes any difference), the JS in PIE.htc that allows border-radius to work, doesn't fire so in previous IE versions the corners go back to being square.
What can I put in my Page_Load to essentially 'refire' the CSS on postback? Or is there another fix?
You could possibly use the JS edition of PIE (link: http://css3pie.com/documentation/pie-js/) and call a script on postback with something like this:
Page.ClientScript.RegisterStartupScript(GetType(), "myScriptName", "<script>if (window.PIE) {$('.rounded').each(function() {PIE.attach(this);});}</script>");
Related
I've read through the links here I could find about these techs. No exact match I could see, so...
I have a custom CSS class, I'm trying to apply it using an HtmlAttributes containing #class, but it never overwrites the underlying CSS (in the same file) for an <a>. Even deleting the default CSS for a fails. By contrast, when I use #style in HtmlAttributes, it works.
I'm assuming there's a subtle but boneheaded mistake in my syntax.
NB: My goal is to make the links look like buttons. For now I'll settle for removing underlining as proof of concept.
Here is the Razor markup that works, where quote is an object that contains text in a property, and whose ID is used against the model / db:
#Html.ActionLink(quote.QuoteContent.SupplyBytesAsString(), "ReadQuote",
new {quoteContentID = quote.QuoteContentID },
new { #style = "text-decoration: none;" })
Fine. This dumps underlining. But the following doesn't work, and I can't tell why. The actual CSS comes last here. It dumps underlining among other things, none of which get applied.
#Html.ActionLink(quote.QuoteContent.SupplyBytesAsString(), "ReadQuote",
new { quoteContentID = quote.QuoteContentID },
new { #class = "quote" })
This is my CSS right now, just the relevant sections (?), Microsoft's default and mine. I've tried every single option that various sources recommended for my quotes class... .quote then a, a .quote, .quote by itself, colons, anything else I could find or dream up. Maybe I missed something, ugh.
Anyway, I'd love to know what I'm doing wrong before my head explodes. Thanks...
a
{
color: #333;
outline: none;
padding-left: 3px;
padding-right: 3px;
text-decoration: underline;
}
a:link, a:visited, a:active, a:hover
{
color: #333;
}
a:hover
{
background-color: #c7d1d6;
}
a.quote
{
border: 1px inset #808080;
color: #333;
outline: none;
padding-left: 3px;
padding-right: 3px;
text-decoration: none;
}
a.quote:active, a.quote:hover
{
background-color: #FFFF66;
}
a.quote:link, a.quote:visited
{
color: #333;
background-color: #00CC66;
}
< end of question >
Thanks to idlerboris for their comment. I checked out the issue they suggested (including viewing source markup from the browser) and the CSS was attaching.
So, it turns out I did make a boneheaded mistake as I feared, and long before the point where I posted here.
In short, the CSS doesn't work because I don't have .quote defined by itself in my CSS file. Naturally, I started with .quote defined standalone, but an error somewhere at that time (probably over in Razor) must have confused me and I got into hasty fixing instead of doing it right.
If there's a syntax lesson here, it's this obvious one: Don't try to use a style in combo-selector CSS syntax unless it's already defined by itself.
Another pointer: Don't forget to refresh in the browser when you debug and you haven't edited your page content. Caching will vex you. Not the root problem here, but forgetting caching didn't help.
The main lesson here is clearly: Code slowly, prefer looking things up over guessing, and no matter what, only change one variable in each experiment! sigh
We have created a dynamic JQUERY table with dynamic columns (Depending upon count value) and assigned it to DIV tag. However the thead and tbody is going outside DIV tag in IE7.
Looks like the width is automatically set dynamically by CSS, we are not able to override it.
Did anyone faced similar issues. Please help.
use important keyword like this.
width: 100px !important;
Added the following lines in DataTable.css file and it worked perfectly!!
table.display thead th div.DataTables_sort_wrapper
{
/*Fix for width issue*/
position: relative;
clear: both;
width:50px;
overflow:hidden;
word-wrap:break-word;
}
Maybe there is a CSS style for this, but, I want my TextBox to look like a label. When it is focused, I want it to look like whatever CSS style is applied. I am using bootstrap so that would be the style.
Is there some way to do this?
I have a grid view that I want to allow the user to rename without using the Edit Mode.
Thanks
(EDIT)
I mean an editable label:
see http://dotnetspeaks.net/post/exm/EditableLabel.aspx
Here's a wild guess (since the question itself is a bit vague):
input {
border: none;
padding: 2px;
}
input:focus {
border: 1px solid black;
}
And, voila! (and a version that more traditional)
You can use textbox by making it appear label and making it textbox on click or on focus. (just an approach, question is bit confusing.)
<script type="text/javascript">
function TextBox2Label()
{
var control=document.getElementById("<%=TextBox1.ClientID %>");
control.style.borderStyle="none";
control.style.backgroundColor="Transparent";
control.style.fontStyle.fontColor="Black";
control.readOnly=true;
}
</script>
I have just started ASP .NET recently, I already know C# HTML and CSS so it wasn't too difficult to get a simple site running. All the online tutorials and documentation I have found , is either completely visual using the vs2005 ~ 2010 designers (I hate the designers) or mostly designing and some parts in VB .NET (I am er... not too keen on VB .NET). Overall , most only cover the basic and simple parts of web development , so I am getting problems in mastering the api. Anyway the thing that is bothering me the most is that I can't change the appearance of the web controls, the css properties work in some cases but not in all. The Site.Master part is almost completely unchanged. Screenshot:
screenshot
How do I change the blue and light blue colors of Site.Master?
From the looks of things, you are using the basic Web Application website which Visual Studio produces for you when creating a new project.
Going on this assumption, you need to look for the Site.css file in the /Content/ folder.
Inside this, will be all the styles used for the various elements of the site.
I think the areas you are wanting to change are the #header, #header h1',#menucontainer,ul#menu`
Just change the background and color properties to the colour you want. Also change the color of the border
You can open up site.master just like you would any other html page. In visual studio designer, you can do code view (html). Once in there you can make changes to your stylesheet/html page (in this case your master file) according to whatever elements you need to change. Im assuming you know htm/ css as you stated in your question.
Another way to quickly check html elements is to open the page in safari/chrome/firefox/opera, right click on the element of interest and "inspect element". Itll tell you what you need to change.
Btw:
<asp:menu converts to a div. Set a class for this element then add it to your stylesheet.
Many of the elements I was looking for were in the bootstrap.css file.
However, I modified my site.css to overwrite elements of those style.
I'm using Visual Studio 2013 Professional.
This link was helpful.
http://forums.asp.net/t/2009287.aspx?Changing+bootstrap+css
Site.css
.navbar-inverse {
background-color: #FFF;
}
.navbar-inverse li {
font-weight:bold;
}
Please read and learn1.
ASP.NET Theme and Skin.
Walkthrough: Customizing a Web Site Using Themes in Visual Studio
How to: Apply ASP.NET Themes
How to: Disable ASP.NET Themes
How to: Apply ASP.NET Themes Programmatically
Walkthrough: Creating User-Selectable Themes
How to: Define ASP.NET Page Themes
Site.Master.cs:
protected void Page_Load(object sender, EventArgs e)
{
foreach (MenuItem m in NavigationMenu.Items)
{
if (m.NavigateUrl.ToString() == "~" + HttpContext.Current.Request.Url.LocalPath.ToString())
{
m.Selected = true;
}
else
{
m.Selected = false;
}
}
this.DataBind();
}
Site.css:
Besides these two, I removed the "div.menu ul li a:hover" selector, the "div.menu ul li a:visited" selector and the "div.menu ul li a:active" selector.
div.menu ul li a.selected
{
background-color: #867F27;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a
{
background-color: #7E5B33;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
I am trying to get the value of a "Background-image"-tag in a stylesheet which is used on my web-site. The style-sheets are referenced from the HTML file as follows:
<style media="all" type="text/css">
#import "master.css";
</style>
<style media="all" type="text/css">
#import "layout.css";
</style>
The layout.css file contains:
#frontpage-main-features {
background: url('../elms/frontpage-main-gradient.jpg') no-repeat left top;
margin-bottom: 10px;
}
#frontpage-main-features-inner {
width: 700px;
padding: 20px 20px 10px 20px;
background: url('../elms/frontpage-main-gradient-bottom.jpg') no-repeat left bottom;
}
In the master.css file a background image is referenced which is then overloaded in the layout.css file by the #frontpage-main-features-inner section. I would very much like to access the "background"-tag in order to see which background image is currently being shown in a specific part of the page. Any suggestions?
Best,
Michael
Why not just use FireBug / the IE8 dev console? load the page, open the console, find the piece of html you are looking for and inspect the css properties, it will give you all applied styles for that element, overridden properties will be striked through...
You're talking about looking at the markup of the page from C#, i.e. this is the markup that is not an ASP.Net server control and is not viewable by ASP.Net.
Sorry, that's not possible using ASP.Net. You can only view data that is marked for server to view.
Why do you need this? There could be another way to do whatever you are trying to do. Maybe you need to turn the problem around (get markup to get the class name from c#) which is easier.
The problem is that CSS rules are not applied or enforced on the server, they are applied by the client browser. You could perhaps create a parser that goes through the referenced CSS files and figures out what image should be displayed but you really can't know with certainty how the client browser will interpret and apply the CSS rules.