Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I have a div that refuses to change background colors when I hover over it. It stays the same. Here's the code.
HTML:
<div id="login"></div>
CSS:
#login {
position: fixed;
float: left;
background-color: none;
margin-left: 1.5%;
top: 1em;
height: 1.25em;
width: 7em;
text-align: center;
border-radius: .3em;
opacity: .5;
padding-top: 1em;
border: .18em solid gray;
}
#login:hover {
background-color: gray;
}
I had a similar problem. What I suggest is making sure there are no invisible objects over the div. This tells the program that your cursor is hovering the invisible object rather than the div with the hover element.
Works fine for me - http://jsfiddle.net/Q8A6d/
Which browser are you using? You cannot apply a
:hover
pseudo class to any elements other than <a> in older versions of IE (6 and below).
Your code appears to work properly here, so a few things could be wrong:
You might have linked your stylesheet to your HTML file improperly.
Some other CSS in the context of your project may be overriding the piece that you've given here.
You might be running into browser compatibility issues with the :hover selector or something else in your code that is breaking the styling.
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed last year.
Improve this question
This is an example of what my problem is. When I type for example the
section on html then go to CSS to style it, it does work fine, but
then when I add another style in the CSS file it doesn't seem to work
and only styles the first part so in this case the .header img and the
h1 part doesn't get styled at all. When I put the h1 part in front of
the .header only h1 gets styled and not the .header img. Inline CSS
works but its very inconvenient to use. This happens even when I try
using the inside the html document. I have tried it on
other text editors and it's the same problem. When I try someone
else's code it works fine, it's only when I do it on a project that
does this.
.header {
min-height: 100vh;
width: 100%;
background-position: center;
background-size: cover;
position: relative;
}
;
h1 {
color: aqua;
}
;
<section class="header">
<img src="/download.png">
</section>
<h1>asdad</h1>
Syntax of your css code is wrong. There cannot be semicolons outside .class{}
You should remove semicolons before and after your h1{} style.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Can anyone explain me, why <input> and <a> have different heights (while having same font, padding, margin and border settings) in Internet Explorer 9-11? Firefox and Chrome render them with the same height.
Here is example:
HTML
<input class="text" value="input"/>
<a class="text">button</a>
CSS
.text {
font-family: 'Arial';
padding: 7px;
font-size: 12px;
line-height: 1.4em;
border: 1px solid black;
display: block;
float: left;
width: 100px;
margin: 0;
}
And fiddle
Is there any way to prevent such behavior in IE? Thank you in advance.
There is a Question similar to this one which already got many answers and 18000 views.
I think you will find a solution to yours there too
CSS - Exact same height and alignment of button and input text box
Also you could just try to give both of them a height: XYpx so you can make sure they will always have the same heights. I guess giving them a height will also be better for your styling later on
I also found this Question on how to control the heights in different browsers
How can I control the height of text inputs and submit input buttons in different browsers?
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I can't figure out what I am doing wrong here! probably something really obvious. I am trying to change the background colour and font colour of a div on mouse hover using purely CSS/HTML
HTML:
<div id="cta">
Learn More >
</div>
CSS:
#cta {
width: 65px;
border: 1px solid #183073;
border-radius: 5px;
background-color: white;
color: #183073;
font-family: Arial;
font-size: 10px;
padding: 5px;
}
#cta:hover {
background-color: #183073;
color: white;
}
Thanks in advance!
Try to set the z-index of #cta to something large like 99999. If it works like that it means that you have another element covering your div and preventing the hover.
:hover will work for element of type A across Browsers.
Some browsers do not allow :hover to any DOM object and restricted only to Anchor.
Similar isssue is solved in
Hover effects not working with IE8
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
Can anyone help to check on this site?
http://chanbaneng.com/demo/
When in Firefox, all the content gets pushed to the right. In all the other browsers I tried (Chrome, Safari, and IE), it works just fine.
Is there anything wrong with the code?
Used to this way
ul.bjqs{
overflow: hidden; // remove this line in your css
}
==========================
your second problem solution is this
now define this css in your style sheet
#container{clear:both;}
Just change this class and set it again because its slider
ul.bjqs {
position: absolute;
list-style: none outside none;
margin: 0px;
overflow: hidden;
display: none;
}
I am sure there will be some calculations will be done on bases of resolutions so it will better to put in absolute position and then do other stuffs this will result in to same for all browsers
Please modify this
<ul class="bjqs" style="height: 380px; width: 100%; display: block;">
to
<ul class="bjqs" style="height: 380px; width: 100%; display: block; overflow: -moz-hidden-unscrollable;">
The simplest way I found to solve this without rewriting your code is:
Go to your li a selector (line 73) and remove height: 28px;
You a tags already get their correct height and setting it manually messes up with the flow of the display.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
So I have a border that wont appear. It's supposed to create a dashed block, but it doesn't.
Heres what I have set up in the CSS:
#coupon {
border: 5px dashed black;
float: left;
width: 170px;
height: 150px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 10px;
margin-right: 10px;
background-image: url('slice.png');
background-position: center;
background-repeat: none;
background-color: white;
}
Heres the div for it.
<div class="coupon">
<h1>Classic Combo</h1>
<p>16" 1-Topping Pizza
& a 2-Liter of Your Choice
For Only $14.99
</p>
<p>Expires 3/14</p>
</div>
Yet the border is simply not appearing on my page. I tried looking it up, but the resolves for those problems havent worked for my problem.
Use .coupon, not #coupon
# matches an id
. matches a class.
Check you're classes and ID's
In CSS a class is defined with (.name)
an ID (#name)
Should clear up the problem.
A CSS ID selector contains a "#" immediately followed by the ID value, which must be an identifier
he following ID selector matches the H1 element whose ID attribute has the value "chapter1":
HTML
<h1 id="chapter1">Selector ID</h1>
CSS
h1#chapter1 { text-align: center }
A CSS Class selector contains a "." immediately followed by the Class value, which must be an identifier
he following Class selector matches the H1 element whose Class attribute has the value "chapter2":
HTML
<h1 class="chapter2">Selector Class</h1>
CSS
h1.chapter2 { text-align: center; color: red }