i am a newbie C# Programmer. I have a problem in xhtml. I want to check that if browser is IE6 or not. For example if ie6 then div id="div1" style="display:block;" else div id="div1" style="display:none;">
How can i control my browser and use if clause in xhtml?
Assign to your div one permanent style:
<div id="div1" class="jumping-div"></div>
Define the default style:
style1.css:
div.jumping-div
{
display:none;
}
Then create another stylesheet which will redefine the class:
style2.css:
div.jumping-div
{
display:block;
}
Then using conditional checks you can include another stylesheet:
<link href="style1.css" rel="Stylesheet" type="text/css" />
<!--[if IE 6]>
<link href="style1.css" rel="Stylesheet" type="text/css" />
<![endif]-->
conditional comments are easiest, you can also do it server side...
<% if (HttpContext.Request.UserAgent.Contains("internet explorer 6")) //Not sure what the exact name is, need to look it up.
{%>
//HTML
<%}%>
Related
I'm hoping someone can explain how I can make a button inherit all of a button's properties from bootstrap but override its colour and explain how it works in layman's terms.
I have a button with the following class:
class="btn action-braintree-paypal-logo"
Obviously, btn has its properties taken from bootstrap (as I am using it) and then I've defined my own action-braintree-paypal-logo.
I then have this in my own stylesheet:
.action-braintree-paypal-logo {
background-color:#019cde;
}
But the colour keeps defaulting back to bootstraps own colour and I'm failing to understand why.
The stylesheet I'm using is after bootstraps in my head as well.
Any help is greatly appreciated.
Please make sure that the link tag for the style sheet you are referring to has rel="stylesheet" attribute, otherwise the styles are not imported.
Example:
The below CSS will work:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
But this one doesn't:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.action-braintree-paypal-logo {
background-color:#019cde;
}
</style>
<button class = "btn action-braintree-paypal-logo">Test Button</button>
You can use inline css for this..
class="btn" style="background-color: #019cde; in your button tag
Simple solution CSS specificity:
.btn.action-braintree-paypal-logo {
background-color:#019cde;
}
Try this one,
.btn.action-braintree-paypal-logo { background: red; color: #fff; }
I need html5 scripts to be opened by IE7.
I did input a script to call html5shiv.js on <head> script in the HTML file.
Here's my HTML code:
<head>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/style_ie.css" />
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->
</head>
and I trying to styling a button on tag <header> like this:
HTML:
<header>
<input type='submit' value='LOGIN'>
</header>
CSS:
header input[type=submit]{
background:url('../images/btn_login.png')repeat-x;
color:white;
}
and that's still not working, I don't know where the error is? are the error on the caller of html5shiv or in some of the syntax?
NOTE: no CSS class like .Something Allowed
Include html5shiv.js before style_ie.css:
<head>
<!--[if IE]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<link rel="stylesheet" type="text/css" href="css/style_ie.css" />
<![endif]-->
</head>
Use it as a class example
.btn
{
background:url('../images/btn_login.png')repeat-x;
color:white;
}
and use it in html as
<header>
<input type='submit' value='LOGIN' class='btn'>
</header>
The Internet Explorer 7 have a buggy support for the attribute selector. to prevent this issue it would be goo if you can make a class and then apply it on input tag. I hope it will work on IE7 or even IE6.
NEW SOLUTION
you have to call the html5shiv.js and CSS file separately like this way.
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script><![endif]
-->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/style_ie.css" />
<![endif]-->
OLDER SOLUTION
<input type='submit' value='LOGIN' class='myClass'>
CSS would be
.myClass{border:1px solid red;}
IE7 not supported this attribute of HTML file so you can not use header input[type=submit]{ }
i need create class for ie7 and check browser if it is less than IE8 then you call that class.
I have my angular application set up and everything is working. I am trying to add some custom css to input so I made a new file my.css
.myInvalid {
border: 5px solid red;
}
I have added that file to my index.html and the file gets loaded but when I write
<input type="text" class="myInvalid"/> there isn't any border around my input.
<!DOCTYPE html>
<html data-ng-app="MainApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="Scripts/angular.js"></script>
<script src="Scripts/ui-bootstrap-0.4.0.js"></script>
<script src="Scripts/ui-bootstrap-tpls-0.4.0.js"></script>
<link href="Content/css/my.css" type="text/css" rel="stylesheet" />
<link href="Content/assets/bootmetro/css/bootmetro.css" rel="stylesheet" />
<link href="Content/assets/bootmetro/css/bootmetro-responsive.css" rel="stylesheet" />
<link href="Content/assets/bootmetro/css/bootmetro-icons.css" rel="stylesheet" />
<link href="Content/assets/bootmetro/css/bootmetro-ui-light.css" rel="stylesheet" />
<script src="Scripts/jquery-1.9.1.js"></script>
</head>
<body>
<div class="container-fluid">
<div data-ng-view=""></div>
</div>
<input type="text" class="myInvalid"/>
</body>
</html>
If I write my css inline <input type="text" style="border: 5px solid red" /> everything works. The behavior is the same in all browsers. Any ideas?
You have to make sure that your selector is more specific than the bootstrap one,
Instead of .myInvalid use input[type='text'].myInvalid
Check out this answer for more about selector priority.
This sounds like a specificity problem. Do the other stylesheets you're including define styles for <input type="text">? If you define your style block as follows, I bet you see your red border:
.myInvalid {
border: 5px solid red !important;
}
I'm not saying adding !important is the solution, but if it works you know your selector (.myInvalid) isn't specific enough to override other styles defined for this element.
You'll need to inspect your <input> from the browser and see what style declarations are matching it and overriding the properties you're trying to set. Then you can adjust your selector accordingly.
I don't know how to use CSS. So I am asking here.
I am creating a JSP page. I have added two tables in my JSP page using Twitter Bootstrap. I need to add different alignment for both tables. Since I am using bootsrap both tables having same alignment.
This is my code
<div>
<table class="table table-bordered source">
//table 1 contents
</table>
</div>
<div>
<table class="table table-hover target">
//table 2 contents
</table>
</div>
I want to align the text to center for table 1 and left for table 2. Table 2 header should be alinged to center and table 2 boreder should be blue.
So I tried this CSS
.table.table-hover.target td {
text-align: left !important;
}
.table.table-hover.target th {
text-align: right !important;
}
.table.table-bordered.source td
{
text-align: center !important;
}
.table.target
{
border-color:blue;
}
It is not working.
When I give
.table td
{
text-align:left !important;
}
it aligns both table contents to left.
I dont now CSS. How can I write the CSS rule?
you probably have something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Your page</title>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
</body>
</html>
right below the bootstrap-responsive.css (or if you are not using responsive layout, you will not even use this file, witch would then be below the bootstrap.css call).
add a new file like:
<link href="/assets/css/application.css" rel="stylesheet" type="text/css" />
and add all your override rules to that file, the code above will look like:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Your page</title>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<link href="/assets/css/application.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
</body>
</html>
the line "/assets/css/application.css" will say that your code will be in that specific path, change it for your needs
Comments:
Remember to comment your CSS rules so others (and even you in 6 month time for example) will understand why did you wrote that... in CSS you can add comments wrap it with /* ... */
for example:
/* TABLES OVERRIDE: so they look like the main theme */
.table td
{
text-align:left !important;
}
I used typical way to create tabs using jQuery UI, by wrapping up asp.net usercontrols as below -
<div id="tabs">
<ul>
<li>Schools</li>
<li>Colleges</li>
</ul>
<div id="tab1">
<uc:schools id="ucSchools" runat="server" />
</div>
<div id="tab2">
<uc:colleges id="ucColleges" runat="server" />
</div>
</div>
Tabs work awesome, but including jQueyui.css. Made all the contents of the my user control larger, than usual.
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
I do not see any name collision in jqueryui.css with our stylesheet.
If you've encountered this issue, please suggest how to tweak the css to keep containing div size intact.
Which ever class you want to have first priority or override then you should use !important
Example:
div {
color: #ff0000 !important;
}
UPDATE:
Apart from !important, the other way is "Render your link tag after jquery-ui stylesheet link on the page. So your file takes priority and applies to the page".
Example:
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="custom.css" rel="stylesheet" type="text/css" />