The tab content displays well in all browser except IE. Is there away to correct that size issue with the IE browswer?
LIVE EXAMPLE
Here is the CSS to control width
div.st_horizontal { /* The main container */
position:relative;
float:left;
/*clear:both; */
width:655px; /*Set the full width */
color:#616161;
}
You could set up a conditional CSS that targets only IE.
<!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie.css" /><![endif]-->
and write the width in there.
But I'm looking at the link on chrome and it seems like its also not align to the edge of the tab as well.
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 am wondering how I could set the background image to keep its position on this site: http://www.jylkkari.fi/wordpress/
When you drag the browser under 960 px wide, the background of sidebar starts to move towards center.
I found out this Javascript which could solve this problem.
I am still searching if there is a easy way in CSS to keep the image centered while browser width is more than 960 px and on fixed while it is under this size?
.......................... Define your body
min-width:980px;
body{
min-width:980px;
}
--------------for ie
used to ie condition css as like this
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
create a css file
body{width:980px;}
more info about ie css click here
Do this by adding width: 960px; to the element the background statement is on (in your case this would be body).
You can use a media query, to change the CSS of the body when it reaches a certain width:
#media all and (max-width: 960px) {
body {
background-position: left center;
}
}
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*/;
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'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.