I have one button , over that I am applying below style/class. but this class doesn't work properly in mozila browser. it works in IE. Button's starting point I have icon which renders at the middle of left side and text comes beside that.
IE renders in middle but mozila renders at top of ![enter image description here][1]button. please let me know what I m doing wrong here. also find attached screenshot of the issue
.class
{
padding: 0px;
margin: 0px;
border-collapse: collapse;
background:url(GB_Link.gif) no-repeat 0px -2px;
display:inline-block;
height:20px;
line-height:13px;
font-size: 11px;
font-family: Tahoma, Arial, Verdana, Sans-Serif;
text-decoration: none;
text-align:left;
text-indent:25px;
text-color:black;
vertical-align:middle;
width:180px;
cursor:hand;
border: 1px solid #77A2B5;
}
this is a general issues.
add the following code at the top of the layout or in your html page where you have defined the html tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
I hope so your problem will be short out.
I think you have understood very well.
Set the line-height to the same as the button height:
line-height: 20px;
Related
I'm working on a ASP.NET application that uses the in-built Treeview. For some reason, the vertical space between the nodes will not reduce no matter what I try in the CSS.
The nodes are dynamically generated, see the example bellow:
The tree is generated using:
<asp:TreeView ID="rcmTree" runat="server" CssClass="treeView" ShowLines="true"></asp:TreeView>
And then the CSS Code I have is:
.treeNode {
text-indent: 2px;
font-size: 13px;
}
.treeNode a {
text-decoration: none;
color: #000;
vertical-align: middle;
}
.treeView tr {
margin-top: -25px;
}
.treeView {
margin-top: 6px;
}
#rcmTree td div {
height: 20px !important;
}
Found the answer - I had to change the Doctype to:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Two same tags have different alignment in IE9. I've stored code in http://jsfiddle.net/9B2hK/, but when I see it in IE9 there both buttons have 5px intead on 6px. If I remove one line break tag, text alignment in second tag became OK.
Few words about my task. I need buttons styled by css. I've created .btn class which is used for anchor tag, for input tag with types "submit" and "button". I need button height be the same with text input field, so I've set it's height 20px. Also because I need it works in chrome and others I set line-height=14px and padding=3px for top and bottom to align text. I've tried to use vertical-align, but for some browsers it doesn't work good. But my styles works strange in IE9. I've removed unnecessary tags from my page and here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
body {
font-size: 11px;
font-family: Verdana, Tahoma, sans-serif
}
.btn {
display: inline-block;
line-height: 14px;
padding: 3px 10px 3px;
font-family: Verdana, Tahoma, sans-serif;
font-size: 11px;
text-align: center;
color: #FFFFFF;
background-color: #5675B5;
vertical-align: middle;
}
</style>
</head>
<body>
<span class="btn">Search</span>
<br/><br/><br/><br/><br/><br/><br/>
<span class="btn">Search</span>
</body>
</html>
Remove the line-height and use css transform property.
.btn {
position: relative;
top: 50%;
transform: translateY(-50%);
padding: 3px 10px 3px;
font-family: Verdana, Tahoma, sans-serif;
font-size: 11px;
text-align: center;
color: #FFFFFF;
background-color: #5675B5;
vertical-align: middle;
}
I have 2px difference between Chrome and Firefox in the height of input, why?
(I don't want to specify height to input element)
<html>
<head>
<title></title>
<style type="text/css">
p {
font-size: 11px;
font-family : Verdana;
}
input {
border: 1px solid #ccc;
font-size: 11px;
font-family : Verdana;
}
</style>
</head>
<body>
<p>
<label>Text</label>
<input type="text" />
</p>
</body>
</html>
By the way, If I put Arial font instead of Verdana, the sizes are correct. Why?
Thank you.
I was having a similar issue with Firefox not rendering a Search box same as Chrome. I used the following css line and it fixed it:
input::-moz-focus-inner {
border: 0;
padding: 0;
}
Let me know if it worked.
Adjust line-height
input { line-height:17px; }
Set line-height to 1em:
input {line-height: 1em;}
I have a problem with css and FF3 / IE7 and Opera 10.
I have one input[type="submit"] and one anchor and I want to style them the same. No matter what I try the only logical browser seems to be Opera 10 (it styles them the same with the same css).
FF seems to have different padding (I would need to have the submit box 1px smaller in padding to fit but that would throw Opera 10 off) and IE7 is just way off.
code for you code lovers:
<form action="/login" method="post" id="loginform">
<fieldset>
<input type="submit" value="Login" />
Register
Lost Password?
</fieldset>
</form>
css:
fieldset a {
color: #ffcc00;
border: 1px solid #707070;
background: #000000;
font-size: 10px;
font-weight: normal;
padding: 2px;
/*vertical-align: text-top;*/
}
fieldset a:hover {
color: #ffcc00;
border: 1px solid #707070;
background: #333333;
cursor: pointer;
font-size: 10px;
font-weight: normal;
text-decoration: none;
padding: 2px;
}
fieldset input[type="submit"] {
color: #ffcc00;
padding: 2px;
border: 1px solid #707070;
background: #000000;
font-size: 10px;
font-weight: normal;
}
fieldset input[type="submit"]:hover {
color: #ffcc00;
padding: 2px;
border: 1px solid #707070;
background: #333333;
cursor: pointer;
font-size: 10px;
font-weight: normal;
}
any help to solve the issue of alignment between browsers is desired as I need to support all three (safari too but I think if I get these 3 aligned it should work there too).
Many thanks in advance (p.s I'm going on lunch now and will check answers right after so sorry for the slow replies in advance)
The Firefox problem is solved like this
button::-moz-focus-inner {
border: 0;
padding: 0;
}
Try this in isolation. I recommend using a reset.css file to force all browsers to treat apples as apples, and then styling your INPUT and A elements accordingly.
It's possible that other CSS rules are coming into the mix.
See http://meyerweb.com/eric/tools/css/reset/ for a reset file.
I've had issues with the past with IE and styling certain elements (specifically disabled elements), and how IE differs in its handling of this styling between versions 6 and 7.
The following DOCTYPE seemed to help in those circumstances, but rendering in IE 6 may no longer work as expected:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
I am trying to create a rather simple effect on a set of images. When an image doesn't have the mouse over it, I'd like it to have a simple, gray border. When it does have an image over it, I'd like it to have a different, "selected", border.
The following CSS works great in Firefox:
.myImage a img
{
border: 1px solid grey;
padding: 3px;
}
.myImage a:hover img
{
border: 3px solid blue;
padding: 1px;
}
However, in IE, borders do not appear when the mouse isn't hovered over the image. My Google-fu tells me there is a bug in IE that is causing this problem. Unfortunately, I can't seem to locate a way to fix that bug.
Try using a different colour. I'm not sure IE understands 'grey' (instead, use 'gray').
The following works in IE7, IE6, and FF3. The key was to use a:link:hover. IE6 turned the A element into a block element which is why I added the float stuff to shrink-wrap the contents.
Note that it's in Standards mode. Dont' know what would happen in quirks mode.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
a, a:visited, a:link, a *, a:visited *, a:link * { border: 0; }
.myImage a
{
float: left;
clear: both;
border: 0;
margin: 3px;
padding: 1px;
}
.myImage a:link:hover
{
float: left;
clear: both;
border: 3px solid blue;
padding: 1px;
margin: 0;
display:block;
}
</style>
</head>
<body>
<div class="myImage"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"></div>
<div class="myImage"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"></div>
</body>
</html>
In my experience IE doesn't work well with pseudo-classes. I think the most universal way to handle this is to use Javascript to apply the CSS class to the element.
CSS:
.standard_border
{
border: 1px solid grey;
padding: 3px;
}
.hover_border
{
border: 3px solid blue;
padding: 1px;
}
Inline Javascript:
<img src="image.jpg" alt="" class="standard_border" onmouseover="this.className='hover_border'" onmouseout="this.className='standard_border'" />
Try using the background instead of the border.
It is not the same but it works in IE (take a look at the menu on my site: www.monex-finance.net).
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
put that in your header, should fix some of the ie bugs.
IE has problems with the :hover pseudo-class on anything other than anchor elements so you need to change the element the hover is affecting to the anchor itself. So, if you added a class like "image" to your anchor and altered your markup to something like this:
<div class="myImage"><img .../></div>
You could then alter your CSS to look like this:
.myImage a.image
{
border: 1px solid grey;
padding: 3px;
}
.myImage a.image:hover
{
border: 3px solid blue;
padding: 1px;
}
Which should mimic the desired effect by placing the border on the anchor instead of the image. Just as a note, you may need something like the following in your CSS to eliminate the image's default border:
.myImage a img {
border: none;
}