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?
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
How can I apply various effects, like increasing its size etc., using CSS to this arrow
https://jsfiddle.net/tnfLc58h/
So far I've been able to change its color.
HTML
<div class="down-arrow">
</div>
CSS
.down-arrow:after {
content:'\2193';
color: red;
}
edit: I want to make it responsive.
Since a pseudo element is an inline element, you need for example to give it display: inline-block (or block) for it to respond to width/height settings (though not if only to change font properties of course, as some comments assumed I meant).
.down-arrow:after {
content:'\2193';
display: inline-block; /* or block */
background: lightgray;
color: red;
height: 32px;
width: 40px;
font-size: 24px;
text-align: center;
}
<div class="down-arrow">
</div>
To increase the size of the content, you should set the font-size
Like so :
.down-arrow:after {
content:'\2193';
color: red;
font-size: 20px; // change to whatever
}
See updated EXAMPLE
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.
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 is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
I am not familiar with html.I want to show formulas in my blogs.But there is blank between my two lines if I put a picture in one line.Please look at my page my_web_page.There is so big blank between the 3 lines than others.I try to change the height of the picture but it was useless.Please tell me where I was wrong or tell me how to show formulas easily in my web pages.Thanks very much!
use this style for your img tags
padding: 0px;
border: none;
margin: 0px;
vertical-align: bottom;
Ex:
<img src="your img source here" style="padding:0px;border: none; margin: 0px; vertical-align: bottom;">
It is blogspot adding padding around your images.
The default style of an image within an article seems to have 8 pixels padding.
If you can edit the html you could try overriding this inline, i.e adding padding:0px; to the style part of the img tag. Please note you will probably also need to remove the margin-bottom: -12px too.
i.e. rather than
<img src="http://chart.googleapis.com/chart?cht=tx&chl=p%5Ei*q" style="border: none; margin-bottom: -12px;">
try:
<img src="http://chart.googleapis.com/chart?cht=tx&chl=p%5Ei*q" style="border: none; padding:0px">
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
My page here on the left hand nav is showing the categories (div.cat) spaced out at 48px height and I can't work out why.
There's no padding or margins or height specified. If someone could have a look on an inspector to see what could be causing it that'd be great.
The clearfix is causing issues within the child. The whole structure is a tangle of block and inline elements that should be cleaned up in one way or another. Any block elements within each category seem unnecessary. You probably also want to use a ul for greater semantic meaning.
There is class .cat declared in the css file.
.cat, .cat a {
padding: 0 5px;
color: #444066;
}
remove the padding from there or reduce the padding from 5px to 0px
and another thing is found is in the body class
body {
line-height: 1.6;
font-size: 15px;
}
which increses line-height of all divs and elements