I have a Div tag in aspx page
<div id="mainDiv">
...........
</div>
Following style is working for it all right except background-color. Any changes made in following class also work. background-coloris also applied at design time in visual-studio but does not work at run-time. Any reasons?
#mainDiv
{
width:95%;
background-color:Silver;
font-weight:bold;
color:Maroon;
}
Update Instead of background-color:Silver;, I have tried background-color:Silver !important;but no difference. However changing color:Maroon; to color:Blue; affects
Edit I have no other css files for this page only one css file is linked to it
Edit I had two divs inside the mainDiv there style was float:left when I removed float:left I was able to see the changes in background-color of mainDiv. Still do not know the reason
Instead of Silver try using Hexadecimal Color Codes
background-color:#C0C0C0;
There may be some conflict wiith other CSS on that page as this works fine:
<div id="mainDiv">
content here
</div>
CSS
#mainDiv {
width:95%;
background-color:Silver;
font-weight:bold;
color:Maroon;
}
See here: JS Fiddle
Related
This is my block of code in the HTML part
<header>
<div class="top_line"></div><br/>
<div class="container">
<div class="abcd">Über<span style="color:#2773AE">Tech</span></div>
<div class="top_line"></div>
</div>
</header>
I am using Twitter Bootstrap and I have a custom CSS file linked after the Bootstrap CSS files to apply specific styles to certain parts of my page. Here is my custom css file code:
.top_line {
background-color: #2773AE;
height: 5px;
}
.abcd {
font-size:50px;
line-height:25px;
}
Whenever I try applying style to the abcd class inside the container, the default size of 14px and line-height of 20px mentioned in the bootstrap body tag only comes up. However, the top_line class works fine. I tried .container .abcd, .container>.abcd and many other things, but still I didn't get the font-size and line-height I wanted to achieve as I have given in my CSS code. Inline stylings work though. Can anyone please tell me where I am going wrong?
Thank You
You should verify the depth of the declaration made in the boostrap css file to be sure to write a stronger rule for your abcd class.
Another way is to use not recommended hacks such as : !important , to make sure your declaration is stronger.
for example :
.abcd {
font-size:50px !important;
line-height:25px !important;
}
Twitter bootsrap put a particular class at the label span, you should be put the class abcd inside the label span
Live site.
I'm trying to style the content currently in black under the Upcoming Events heading. I've tried every combination of .vevent-item odd event-1 .description .event-time .event-label I thought might work to no avail. Any ideas?
It should match my other <p> content.
If you are looking to style the following parts: http://i.imgur.com/BW4NR.png
Why not add a new class to those div's? For example:
<div class="event-time foo">...</div>
<div class="foo">...</div>
And in your .css file:
.foo {
background-color: red;
}
For me, just adding the following code into the <head> style tag does the job.
#main div.content div.event-item {
color: #fff;
}
I have a row of divs with :hover and it is working when I hover over the images within the divs. However, it doesn't want to work for the text. I am on the newer side of html and css, so help appreciated. I must be missing something obvious?
The first one with the div.topIconsHover:hover CSS works. The other does not. I have tried applying the topIconsHover class to the div as well and it still doesn't work. So, I must be doing something wrong with the HTML? But I'm just not sure what. Help appreciated! Thanks.
Note: I have the CSS in an external sheet.
div.topIconsHover:hover {
background-color:#555555;
}
<div class="topIcons topIconsHover">
<img src="tools16lg.png" />
</div>
div.topTextHover:hover {
background-color:#555555;
color:#ffffff
}
<div id="topBrowse" class="topTextHover">
Browse
</div>
The color attribute is working only with text elements, not divs. So you should apply the class tag to your href tag like this :
<style type="text/css">
.topTextHover:hover {
background-color:#555555;
color:#ffffff
}
</style>
<div id="topBrowse">
Browse
</div>
EDIT :
If you're looking to define a base class for the link itself, and a HOVER state, do it like this :
<style type="text/css">
.topTextHover {
background-color: transparent;
color: #0000ff;
}
.topTextHover:hover {
background-color: #555555;
color: #ffffff;
}
</style>
<div id="topBrowse">
Browse
</div>
Good luck
You applied style to the ":hover text" but not for links. This should do the trick (not tested):
div.topIconsHover:hover {
background-color:#555555;
}
<div class="topIcons topIconsHover">
<img src="tools16lg.png" />
</div>
div.topTextHover:hover, div.topTextHover:hover a {
background-color:#555555;
color:#ffffff
}
<div id="topBrowse" class="topTextHover">
Browse
</div>
Anchor tags have a default text colour which gets priority (usually blue). What you need is to define this explicitly:
div.topIconsHover:hover {
background-color: #555555;
}
div.topTextHover:hover {
background-color: #555555;
}
div.topTextHover:hover a {
color: #ffffff
}
There are two really simple ways to resolve this issue.
First if you don't have any height/width requirements on the anchor tag (<a href=''></a>) being inside the div do the following:
.topTextHover a:hover{
background-color:#555555;
color:#ffffff
}
<div id="topBrowse" class="topTextHover">
Browse
</div>
If you do have spacial requirements for the text inside the div (i.e. you want the text to be vertically-aligned to the center and horizontally centered) then I would do the following note* this is backwards compatible but is really only compliant with CSS3
#BrowseLink:hover {
background-color:#555555;
color:#ffffff
}
<a id="BrowseLink" href="browse.html">
<div id="topBrowse" class="topTextHover">
Browse
</div>
</a>
Also of note IE6 doesn't like the pseudo-class hover on anything other than an anchor tag and therefor will not work properly. This may be applicable in other browsers as well but the main one that I know that has issues is IE6 of the browsers that are typically seen on a website.
I got one strange problem which I never got before. Please see this code:
The css:
#btn{
margin-left:150px;
padding:10px;
display:block;
}
#btn a{
padding:5px 20px;
background:green;
color:#FFF;
text-decoration:none;
outline:none;
}
#btn a:hover{
background:#933;
}
#btn a:focus, #btn a:active{
background:#CF0;
color:#000;
}
Here the HTML
<div id="btn">
Click here
</div>
The focus and active css working well in firefox, but not in the chrome and safari.
Yeah seems like little problem with focus in webkit. Not really a bug. Easily fixable in html. Just use tabindex.
[hide]
[show]
ta da ...
This is also the case for Webkit based 'focus' events, it doesn't take. The fix is to put a tabindex="0" attribute on the A and then it receives the focus event. You might also want to have at least a "#" as the href just in case.
It's fixable, some additional code needed though...
<div id="btn">
Click here
</div>
jsfiddle
I know it's ridiculous... You can read more here
Hope this helps
The solution posted by user1040252 did the trick for me.
I have a div with images that sets an image in a span tag to visible on a click.
Firefox ignores the classname:focus in my CSS file.
<div class="thumbnail_frame">
<img src="pictures\\figures\\thumbs\\image_1.JPG"/>
<span>
<img src="pictures\\figures\\image_1.JPG"/>
</span>
</div>
My CSS (part of it):
.thumbnail_frame:focus span{visibility: visible;}
//...
.thumbnail_frame span
{
visibility: hidden;
position: fixed;
top: 20px;
left: 20px
}
But this only worked in Internet Exporer 9. Firefox 12 kept ignoring the focus also in other simple examples like found here:
explanation:
http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm
try it:
http://de.selfhtml.org/css/eigenschaften/anzeige/pseudo_links.htm
But adding tabindex="0", as in
<div tabindex="0" class="thumbnail_frame">
<img src="pictures\\figures\\thumbs\\image_1.JPG"/>
<span>
<img src="pictures\\figures\\image_1.JPG"/>
</span>
</div>
works like a charm. One click opens the hidden span, and the second one closes it very neatly.
Use tabindex="0" to make an element focusable if it is not already. See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex for more information about tabindex.
Setting tabindex to -1 makes it unfocusable. Setting tabindex to a positive integer is not recommended unless you're trying to explicitly set the tab order, as it can create accessibility issues.
For more information about tabindex and accessibility, see https://webaim.org/techniques/keyboard/tabindex.
You should know that the pseudo class :focus doesn't go with A. The A tag has 4 pseudo classes : :link, :hover, :active, :visited
currently i'm having 2 issues. first of all, in chrome and safari there is a gray border around an image link. the border isn't there in firefox. here's the code:
Link title <img class="leaving" />
and css:
.leaving {
background-image: url("images/leaving.png");
height:10px; width:10px;
display:inline-block;
background-repeat:no-repeat;
border:none;
}
how do i get rid of the border?
also, certain heading links are being underlined in chrome and safari even though i set text-decoration to none. i would like to know how to get rid of the underline and also how to change it's color.
<a href="link">
<h3>Title</h3>
</a>
a h2,h3{
color:#00264B;
text-decoration:none;
}
"a" is set to underline in other places, but shouldn't "a h3" override anything else? what's going on here?
thanks.
you have a possible bug in your code :)
Here's what you have so far:
a h2,h3{
color:#00264B;
text-decoration:none;
}
The code above say's all H2's which are contained with "a" tags, and all h3's (which are NOT contained within "a" tags)
Firstly if you want all H3's which are contained inside "a" tags, then you need to do this:
a h2, a h3{
color:#00264B;
text-decoration:none;
}
Notice that I've added another "a" to the CSS
Secondly, and perhaps more importantly, I think it's better form to enclose "a" tags inside "h" tags as opposed to the way you are doing it:
h2 a, h3 a{
color:#00264B;
text-decoration:none;
}
But that might not work with your existing code:
Hope this helps
It is famous cross browser issue across Firefox and Safari. How ever the workaround for this problem is replace the img tag with span tag and every thing works as expected. I have changed the code as below
<body>
Link title <span class="leaving"/>
</body>
</html>
or if you want to continue with the img tag itself you need to remove width attribute from css definition. Please find the modified css below
.leaving {
background-image: url("images/leaving.png");
height:10px;
display:inline-block;
background-repeat:no-repeat;
border:none;
}