Why is is that Block 1 doesn't render the expected styling and Block 2 does?
CSS
.test
{
height:3.85in;
width: 2.625in;
border: 10px solid blue;
padding-right:.25in;
padding-left:.25in;
padding-top:.25in;
text-align:center;
overflow:hidden;
}
.test label
{
font-size:xx-large;
color:Red;
}
Block 1
<div class="test" runat="server"><asp:Label runat="server">Test</asp:Label></div>
Block 2
<div class="test" runat="server"><label runat="server">text</label></div>
The output for the HTML for the two divs is identical.
ASP.NET Label server controls render as SPANs in Internet Explorer and not as HTML label elements. This causes your CSS selector to not be matched for Block 1, but it does match for Block 2.
My recommendation is to add a CSS class name to the ASP.NET Label server control so that it will match the CSS style you want applied to the span/label element.
Try the following:
<asp:Label CssClass="test" runat="server">Test</asp:Label>
.test
{
height:3.85in;
width: 2.625in;
border: 10px solid blue;
padding-right:.25in;
padding-left:.25in;
padding-top:.25in;
text-align:center;
overflow:hidden;
font-size:xx-large;
color:Red;
}
Related
I want to use my custom style on input[type="submit"] button with jquerymobiles button but it is not working.
My html code is:
<input type="submit" value="Button name">
My css code is:
input[type="submit"]
{
border:1px solid red;
text-decoration:none;
font-family:helvetica;
color:red;
background:url(../images/btn_hover.png) repeat-x;
}
Same style applies when I use following html code:
Button name
jQuery Mobile >= 1.4
Create a custom class, e.g. .custom-btn. Note that to override jQM styles without using !important, CSS hierarchy should be respected. .ui-btn.custom-class or .ui-input-btn.custom-class.
.ui-input-btn.custom-btn {
border:1px solid red;
text-decoration:none;
font-family:helvetica;
color:red;
background:url(img.png) repeat-x;
}
Add a data-wrapper-class to input. The custom class will be added to input wrapping div.
<input type="button" data-wrapper-class="custom-btn">
Demo
jQuery Mobile <= 1.3
Input button is wrapped by a DIV with class ui-btn. You need to select that div and the input[type="submit"]. Using !important is essential to override Jquery Mobile styles.
Demo
div.ui-btn, input[type="submit"] {
border:1px solid red !important;
text-decoration:none !important;
font-family:helvetica !important;
color:red !important;
background:url(../images/btn_hover.png) repeat-x !important;
}
I'm assume you cannot get css working for your button using anchor tag. So you need to override the css styles which are being overwritten by other elements using !important property.
HTML
Button name
CSS
.selected_btn
{
border:1px solid red;
text-decoration:none;
font-family:helvetica;
color:red !important;
background:url('http://www.lessardstephens.com/layout/images/slideshow_big.png') repeat-x;
}
Here is the demo
I have the following CSS:
#form1,#form2,#form3,#form5,#form6,#form7,#form8 div{
padding:10px;
border:1px solid blue;
background-color: grey;
font-family:"lucida grande",tahoma,sans-serif;
}
For some reason, the last id does not get the style. (ie #form8 does not get the style).
If I switch the css like this (Without changing any html code):
#form1,#form2,#form3,#form5,#form8,#form6,#form7 div{
Now #form7 does not have the style.
Did I code the structure wrongly please? Its very strange
It's probably an HTML markup issue. Can you provide it?
A wild guess is that your code looks like:
<div id="form8">
...
</div>
And the last part of your CSS selector (#form8 div) actually targets a markup like:
<div id="form8">
<div>
...
</div>
</div>
Here's a meta advice: if your selectors list is so long and apparently targets the same type of element (a form), use a class!
.form{
padding:10px;
border:1px solid blue;
background-color: grey;
font-family:"lucida grande",tahoma,sans-serif;
}
Seems you are targeting div#form1, div#form2 ... and so on... You can skip writing div for the selector. Try this
#form1, #form2, #form3, #form5, #form6, #form7, #form8 {
padding:10px;
border:1px solid blue;
background-color: grey;
font-family:"lucida grande",tahoma,sans-serif;
}
Or even better ... give all of them a class name like <form class="myform" id="whatever"></form> and use:
.myform {
padding:10px;
border:1px solid blue;
background-color: grey;
font-family:"lucida grande",tahoma,sans-serif;
}
You should just use #form1,#form2,#form3,#form5,#form6,#form7,#form8
#foem8 div refers to the all child divs of the element with this is #foem8
What I mean to say with this is, if I have a page with two divs, and I want each div to have a separate style, what way would I go about this?
Example:
div{ background: red;} // apply this style to one div.
div{ background: blue;} //apply this style to another div.
I realize it would be possible to just add a class to each div, but what if I expand it? What if I want a whole section of my page with a lot of different attributes to use one part of the stylesheet, and another whole section to use another part?
You can simply prefix the CSS rules with the ID or class of the section. For example:
#section1 h1 {
color: red;
}
#section2 h1 {
color: blue;
}
and basically prefix every rule with either #section1 or #section2 depending on the containing section.
As far as I understand it you want for example every div in your header to be green while every div in your footer is supposed to be red.
#header div{ background-color: green; }
And than
<div id="header">
<div>I'm green</div>
</div>
You can also use more complex selectors to helpt you solve special cases, take this example:
#header div{ background-color: red; }
#header > div{ background-color: green; }
And than
<div id="header">
<div>
I'm green...
<div>...and I'm red</div>
</div>
</div>
Microsoft has a great overview of what selectors are available. There examples are sometimes a little weak but its something.
You can do this:
.firstSectionType div{ background: red;} // apply this style to one div.
.firstSectionType span { color: blue; }
.secondSectionType div{ background: blue;} //apply this style to another div.
.secondSectionType span {color: red; }
Then if your HTML looks like this:
<div class="firstSectionType">
<p><span>Hello</span></p>
<div>This has a red background and <span>this is blue text</span></div>
</div>
<div class="secondSectionType">
<p><span>Hello</span></p>
<div>This has a blue background and <span>this is red text</span></div>
</div>
the divs and spans in the corresponding secions will be formatted accordingly.
The CSS above requires you to repeat .firstSectionType or .secondSectionType in each rule, but a CSS preprocessor like LESS will allow you to rewrite it like:
.firstSectionType
{
div{ background: red;} // apply this style to one div.
span { color: blue; }
}
.secondSectionType
{
div{ background: blue;} //apply this style to another div.
span {color: red; }
}
I have a problem with margin-top/bottom on <a> elements - it doesn't seem to work.
This is the HTML code:
<div class="pages-link">
1
2
3
....
</div>
This is the CSS code:
.pages-link {
margin:2em 0;
word-spacing:.25em;
}
.pages-link a {
background:#d7d7d7;
border:1px solid #ccc;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-khtml-border-radius:3px;
border-radius:3px;
color:#333;
padding:.3em .5em;
text-decoration:none;
}
This is how the final result looks like. The problem is obvious, I want 5 or 10px of margin-bottom for the <a> elements, but the property doesn't get applied.
What am I missing?
You need to add display: inline-block; to your anchor selector. Anchors are by definition inline elements and do not accept width, height, margin etc until they are defined as block level or inline-block elements.
I think you're better of doing display:block; and float:left; because display:inline-block; is not supported in all browsers.
I need to remove the border-top: 1px solid #202020; from .contact on my contact page only, and leave as is in all other .contact instances. Is this possible? If so, how do I make these changes?
Thank you.
Give that page's body a special class like
<body class="contact-page">
Then in your css
body.contact-page .contact{
border-top:0;
}
You can add class to body or other wrapper tag like <body class="contacts-page">
Then use the following CSS .contacts-page .contact { border-top: none }
Add this lines to your http://frshstudio.com/wp-content/themes/frsh/style.css file:
.contact_contact{border-top: none;}
and your html:
<div class="contact contact_contact">
<p>
<span>Let's Chat</span>
</p>
</div>
You can always override stylesheet css with inline css. So like all the other people suggested, put .contact { border-top: none; } but do it like this
<head>
<style>
.contact { border-top: none; }
</style>
</head>
This will only disable the border on your page while all your other pages will obey the stylesheet.