Kindly visit the following website:
property.consultfinman.com
You must have seen the problem, if you are using IE 7 or IE 6. My page is loading fine in FF, IE8, Safari and Google Chrome. But in IE7 floats are not positioned where they are intended to be positioned. and in IE6 everything is shuffled.
Any solution for this problem (keeping in mind that i am not a css guru).
Thanks
Many of your IE6 bugs are caused by double margin bug which is when you use float and margin in same direction, ex { float: left; margin-left: 10px; }, IE6 magically double the value.
So you need to add *display: inline; where you need to use float and margin in same direction.
As for bottom of your design, I have no idea why you specify background-color: #000000; at .featured-content
This is the reason why you have black background on IE6 and IE7, I can't tell which bug but I'm pretty sure it's something to do with float.
Hope this helps.
You can check the browser using this
<!--[if lt IE 6]>
<style>
//your style
</style>
<![endif]-->
<!--[if lt IE 7]>
<style>
//your style
</style>
<![endif]-->
see http://www.quirksmode.org/css/condcom.html
http://www.maratz.com/blog/archives/2005/06/16/essentials-of-css-hacking-for-internet-explorer/
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.
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.
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>opera border radius</title>
<style type="text/css">
img{
border-radius:10px;
-o-border-radius:10px;
}
</style>
</head>
<body>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Bonsai_IMG_6426.jpg/450px-Bonsai_IMG_6426.jpg" width="337" height="450" alt="my think">
</body>
Opera doesn't like adding border-radius to images directly -- Opera is stubborn like that.
For a solution that works in Opera, check out http://www.komodomedia.com/blog/2010/10/border-radius-rounded-images-and-avatars/
Also, put the real CSS rule border-radius after the vendor-prefixed rule -o-border-radius.
Take a look at http://dev.opera.com/articles/view/css3-border-background-boxshadow/#border-radius
Border-radius has had issues in opera, since quite some time. In latest versions, if supported
can be used directly using border-radius property.
Officially, Border radius property is supported by all Opera versions > 10.5, but NOT on Opera Mini, and Opera Mobile < 11, but seems to give problems.
(Also, tag this question under css3)
[EDIT]
I just checked your code again. You wanted to appy border-radius to an image. This is not possible in Opera, unless you put it as a background-image using css instead of foreground one.
So to get this done, make a div and apply the rounded corners to the div instead of the img.
then set the background-image as the image, you should get the rounded corners. In case the image doesn't come centered, just change position property. That should do the trick.
Here, try this : http://jsfiddle.net/c8nmZ/5/
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.