I have a textbox. When i hover upon it, using chrome, it works fine. However, none of the IE versions are seems to recognize the hozer effect. Here is my css file.
.myOnlyTextbox
{
background-color:White;
}
.myOnlyTextbox:focus
{
background-color: #FFDFBF;
font-weight: bold;
}
.myOnlyTextbox:disabled
{
border-width: 0px;
background-color: transparent;
font-size: 14px;
}
.myOnlyTextbox:hover:enabled
{
background-color: #FFB66C;
}
and here is my master file
<!DOCTYPE xhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server" >
<title></title>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
and in the child pages, I am using this header:
asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<link href="../Styles/myTextbox.css" rel="stylesheet" type="text/css" />
</asp:Content>
and in the body tag, i define textbox like this.
<asp:TextBox ID="txtSearchByBowzerNo" runat="server" ValidationGroup="ByNo"
CssClass="myOnlyTextbox"></asp:TextBox>
How can I use this css in almost all browsers? any idea?
:enabled and :disabled aren't supported in IE < 9; so a fall-back might be required... Try to use selectivizr.js.... CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest. http://selectivizr.com/
maybe try without multiple pseudo-elements :
.myOnlyTextbox:hover
{
background-color: #FFB66C;
}
Try changing your rules to the following
[disabled].myOnlyTextbox, [readonly].myOnlyTextbox
{
border-width: 0px;
background-color: transparent;
font-size: 14px;
}
.myOnlyTextbox:hover
{
background-color: #FFB66C;
}
Related
guys i have a css file "menu.css" i called it in the head of my master page but it does not seem to work.
<link href="CSS/menu.css" rel="stylesheet" type="text/css" />
i tried many alternatives such as
<link id="Link1" href='<%= ResolveUrl("~/CSS/menu.css") %>' rel="stylesheet" media="screen" type="text/css"/>
But all to no avail. However when i paste the content of the css in the master page head there by eliminating the css file, it then works. I really don't understand what the error is. All seem ok but it is not doing as expecteed. Below is my Master page. Any help would be appreciated.
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Debt.master.cs" Inherits="Debt.Debt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<link id="Link2" href='<%= ResolveUrl("~/CSS/menu.css") %>' rel="stylesheet" media="screen" type="text/css"/>
<title>Members Page</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
* { margin:0;
padding:0;
}
body { background:#555 url(images/back.jpg); }
#menu { top:30px; }
#copyright {
margin:100px auto;
width:80%;
font:12px 'Trebuchet MS';
color:#bbb;
text-indent:20px;
padding:40px 0 0 0;
}
#copyright a { color:#bbb; }
#copyright a:hover { color:#fff; }
.style1
{
}
.ModalBackground
{
background-color:Gray;
filter: alpha(opacity=60);
opacity: 0.6;
z-index: 10000;
}
.ModalPopup
{
background-color:White;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:5px;
width: 350px;
height:210px;
}
</style>
<link id="Link1" href='<%= ResolveUrl("~/CSS/menu.css") %>' rel="stylesheet" media="screen" type="text/css"/>
<link href="CSS/menu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/menu.js"></script>
</head>
<body runat="server">
Thanks guys for all the help. I figured what the error was. It was the images path form the CSS. i called the images as follows
background:url(images/columns.png) no-repeat;
background:url(images/subitem.png) no-repeat;
For some reason, it does not recognizes the above images path. However when i changed to
background:url(/images/columns.png) no-repeat;
background:url(/images/subitem.png) no-repeat;
That is adding a slash before the folder name. It works fine now. Thanks for your time.
If you are using Visual Studio 2012 you can simply drag any CSS or JS file from the solution browser into your HTML document, and the editor creates the link statement for you. I personally prefer this approach as it eliminates the chance of path errors.
Hope that helps!
Here's the code
select
{
font-size: 9px;
color: Blue;
font-weight: bold;
height: 30px;
}
Is there any reason it's not working with IE9.
Thanks for helping.
Depends on what kind of html-element you do this, but add display:block ; to it.
That will do the trick for IE
Richard, when you tested your own code, was the render-mode quirks ?
I tested your code and the ONLY thing i added was the doctype and html tag like this example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
SELECT {
font-size: 9px;
color: Blue;
font-weight: bold;
height: 30px;
}
</style>
</head>
<body>
<select name="">
<option>Test data 1</option>
</select>
</body>
</html>
I'm somewhat new to html and css and I am having a really strange issue with this ASP.NET page. The following code draws the div (should be 50x50) as 50x100 in IE9. It may be drawing twice. In Compatibility mode it works just fine. As you can see it's a super-simple piece of code.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DivAlignmentTest.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
html, body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#Div1
{
width: 50px;
height: 50px;
background-color: Red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="Div1" />
</form>
</body>
</html>
Any help would be appreciated,
Jason
Change
<div id="Div1" />
to
<div id="Div1"></div>
should make it work properly.
You cant self close a div tag
Try:
<div id="Div1"></div>
I have the following html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<span class="print">Print only</span> - <span class="noprint">Display Only</span>
</body>
</html>
main.css
#import url("screen.css") screen;
#import url("print.css") print;
screen.css
.print
{
display:none;
}
print.css
.noprint
{
display: none;
}
span.print
{
display: inline !important;
}
div.print
{
display: block !important;
}
When I view the page in the browser then as expected the "Display Only" span displays and the "Print Only" one doesn't.
However, when I go to print preview, or print the page, it doesn't appear to be using print.css?
I'm using IE8, which I thought supported #import?
Apparently IE doesn't support the "print" on the end of the #import line.
Use this instead:
#import url("screen.css");
#import url("print.css");
then add the "#media" rule into the stylesheet itself.
#media print
{
.noprint
{
display: none !important;
}
span.print
{
display: inline !important;
}
div.print
{
display: block !important;
}
}
Im getting a really weird problem which im pretty sure is due to 'positioning'.
Basically i've got a master page, which contains a container div, and has its position set to absolute, and using this it fills in margins along the side of the page. I'm then trying to use jQuery AutoComplete on a page, which itself has the position set to absolute, but when I select an item from the list, it reduces the margins, and its as though the absolute position on the page is removed/overriden, until typing something in the input box.
Using Firefox and Chrome there is no issue, and they work as expected.
I've managed to replicate my problem a bit simpler:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="CssProblem.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js"></script>
<script>
$(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp"
];
$("#tags").autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div id="container-content" style="width: 98%; position: absolute; min-height: 100%; border-left: solid 1px #ccc; border-right: solid 1px #ccc;">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
<br />
Some Text
</div>
</body>
</html>
Any help/tips/suggestions would be greatly appreciated
Edit:
Found this issue does not apply to IE8, but does apply against IE7 & IE8 Compat mode, still having no joy
For
position:absolute
probably you can change it to
position:absolute !important
which will not allow any external CSS to override the position attribute try this which may help you out