The textboxes in my HTML forms have a height of 30px, and the entered text appears in the vertical center of the textboxes, just as I want in every browser - except IE.
I've checked it in Chrome, FF and Opera. IE8 shows the entered text higher than the center which looks really bad. I tried playing around with the padding, margin and line-height, but cannot get the text to budge from the top edge.
Any suggestions on what CSS property do I need to edit to center the text? I could add it as a IE specific style, if needed.
The website in question is lazydragonbooks.com. Two forms immediately visible are the 'Register' and 'Login' forms.
Chrome
IE 8
Well, messing with IE8 developer tools I found that setting padding-bottom: 0; and padding-top: 10px; aligned the text correctly.
You would have to use a conditional statement to avoid messing up proper browsers. I would recommend using a separate stylesheet:
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css">
<![endif]-->
Within ie8.css..
input[type="text"] {
padding-top: 10px;
padding-bottom: 0;
}
This is of course specific to an input with the set height that you are using.
you can use margin or padding like this for IE
*padding-top:/*px*/;
*margin:/*px*/;
Related
I am making myself a little portfolio. On chrome, firefox and opera there is no problem with the footer and making it sticky to the bottom using
footer {
position: absolute;
left: 0;
bottom: 0;
}
However, IE is special and it doesn't work. The easiest fix I could think of was implying position: relative only to IE.
So I tried using:
<!--[if IE]>
<style type="text/css">
footer { position: relative; }
</style>
<![endif]-->
But my IE doesn't recognize it (also tried to link to iefooter.css, no result). However, if I remove the <!--[if IE]> all the browsers get the relative position so that must be a problem of IE? My version is the latest I believe - 11.0.9600.16521
The website is here: www.hrusov.eu.
The bugged footer on IE happens on "big" pages such as About me or Projects
From IE 10 and up IE conditional comments were dropped by Microsoft.
I suggest you rework your CSS that it will work with IE 10 and up.
Position absolute works fine in IE 11. I just tried it. Your code is position:relative, which causes it to display above the bottom. I changed it to position:absolute in the F12 tools, just right click on the target element and select Inspect Element. You can adjust the CSS from there.
I use position:absolute all the time to create fluid, responsive designs and it works great.
I have a CSS for body tag but it doesn't contain any margin property. but IE 9 shows margin-bottom ad left,right, top as 0 and due to bottom margin my layout is broken. If i take developer tool and uncheck that property the my layout is fine . any suggestions?
Set your body margin property to:
margin: 0px auto;
And check, if thats helps.
If this really is the only browser you're having trouble with, use an IE 9 Conditional Comment after your style tag and above the head tag, for example on specific element or html document as whole:
<!--[if IE 9]>
<style>
#someElementId {margin-top: -33px}
html {margin-top: -33px}
</style>
<![endif]-->
The body element typically has default margins of 8px on each side. This is even mentioned in the default style sheet for HTML in the CSS spec.
Should you wish to remove that, you can set
body { margin: 0; }
in your own style sheet.
I think most of us know about this annoying bug in IE7 where the background image of a text input will scroll if the text entered is longer than the width of the text input.
Numerous questions have been asked and blogged.
Those questions and post all require one to wrap a div around the text input. This is something that I cannot do as I am working with markup generated by a CMS.
However, I would like to gracefully degrade the experience. For IE7 and below, I am happy with not displaying the background image and just displaying a color.
This is the css being used:
form input[type="text"], form input[type="password"]{
background-image: url('bg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
padding-left: 4px;
padding-right: 4px;
width: 100%;
height: 30px;
border: #008296 1px solid;
}
I have tried adding background-attachment: fixed but the background-image ceases to be shown in all versions of IE, firefox and chrome! Since I only want this behaviour for IE7 and below, how can I go about doing this besides creating an IE7 only stylesheet?
You could always use an IE7 specific CSS selector filter to override your desired styles for IE7.
To make a class that applies only to IE7, simply put *:first-child+html in front of your classname.
Another option is to declare CSS rules that are specific to IE (aka IE CSS hacks). This would involve putting an asterisk (*) before the attribute that is only to apply for IE7 and below. This isn't as highly regarded though since it is not valid CSS syntax.
You may find this site interesting for dealing with IE and CSS hacks: http://www.javascriptkit.com/dhtmltutors/csshacks2.shtml
I'm attempting to fix my CSS to allow older IE's to view my web site as best as possible.
I'm using 'border-radius' to style form fields giving them rounded corners. For the older IE's I'm using the background image below--
http://studio.allanbendy.com/sites/all/themes/studio_allanbendy_7/i/form-textfield-bg.gif
.form-textfield {
background: url("/i/form-textfield-bg.gif") no-repeat bottom right;
background-attachment: fixed;
height: 15px;
width: 362px;
}
Unfortunately the CSS above does not seem to style the text field on IE 7 and 8. It works just fine on IE 6.
Any suggestions?
Remove the background-attachment: fixed;. Because IE6 ignores this for non scrollable elements it's displayed there. But at all the attachment definition makes no sense, if you want to style a single element.
Instead of an IE-specific graphic, I'd recommend using CSS3Pie to do rounded corners in IE.
It's a great solution to get IE to support standard CSS border-radius style.
I'm working on a Wordpress site that is not showing quite right in IE7. All other browsers, including IE8 are OK.
First bug is in the top menu. IE7 is showing it to be a bit taller than it should be, and the hover images and search box are not aligned properly.
2nd is at the end of the post where additional page numbers are shown. The top border of the number boxes is being cut off.
Last is also at the end of the post. The text in the yellow bubble box is being pushed down into the bottom of the box.
http://www.archaeologyrevealed.com/another-test-post
Any ideas?
You have to add some IE7 specific styles
Embed style inside HEAD element
<!--[if IE 7]>
<style>
// your styles...
</style>
<![endif]-->
or link to external css file
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="css/ie7.css"/><![endif]-->
For first bug try this:
#s {
position: relative;
top: -5px;
}
Other bugs can be fixed by adding some margin or padding properties.
EDIT
Create ie7.css stylesheet and put this code inside. Then link to it with code posted above. It fixes all bugs you have mention in your post.
#s {
position: relative;
top: -5px;
}
div.pagenumbers p {
margin-top: 4px;
}
div.bubble_bottom {
position: relative;
top: 15px;
}
I suggest trying a CSS reset stylesheet first, which will put different browsers on the same playing field.
That's helped me many times with padding/margin/alignment inconsistencies.