I currently have a search "button" that I made sit on the side of a textbox, as shown in the picture below, this renders fine in chrome and firefox.
In IE9 it renders like this.
Has anyone ran into a similar problem? How can I get around this?
The CSS for the search button is:
.txtSearchBtn
{
display: inline-block;
width: 16px;
height: 16px;
position: relative;
left: -20px;
top: 5px;
cursor: hand;
cursor: pointer;
background-image: url(../Images/magnifier.png);
}
EDIT: The error seems to have something to do with my page being rendered inside of a fancybox. IE9 is not treating inline-block the same way outside of the fancybox.
EDIT 2: Figured out the problem. My max-width setting doesn't have enough room for the textbox and the image, even though I'm moving the image -20px to the left, so IE renders it on the line above.
IE support for inline-block got a lot better in IE8+. This sounds like you are rendering in compatiblity mode, which basically means render this page like you are IE7 (or worse - Quirks mode).
Are you declaring DOCTYPE? try adding this to the top of your html file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
This should force it to use IE9 rendering which can do inline-block correctly.
This is a problem due to IE being unable to recognize the attribute
display: inline-block;
IE explorer will display it inline, and to achieve the desired effect you need to give the content 'Layout' using
zoom: 1;
display: inline;
or similar.
This article was helpful to me, check it out to fully understand what I'm trying to say!
http://flipc.blogspot.co.uk/2009/02/damn-ie7-and-inline-block.html
EDIT: If you are ONLY trying to cover your back as far as IE9 and no less, then #Porco has that covered with the correct DOCTYPE declaration.
i am working on my website http://bookmyshirt.co.cc/help/index.html but its background is not align in internet explorer but it is working fine in firefox.
Please help me out.
Try adding a DocType.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I also had a look at your styles. If you replace the styles on #maincontainer:
left: -480px;
margin-left: 50%;
position: relative
with
margin:0 auto;
width: 960px;
Everything should line up. If it doesn't, use IE's developer toolbar to trace the styles. Much like Firebug.
Edit:
Please note, you must set a width on the element, otherwise margin:0 auto won't have any effect.
I have a div with a pretty curve background image so it does rounded corners on all browsers.
The problem is that in Internet explorer, the background image is followed by a background-coloured line. If I set the div's height, Firefox and Chrome will both shrink the height of the div, however IE will not adjust anything.
Here's my CSS. Note that the rest of the CSS is applied in IE (and FF/Chrome) fine.
#MSBottomSlot .topCurve {
background:url("images/topCurve.jpg");
background-repeat:no-repeat;
height:10px; /* Changing this value does nothing in IE */
width:100%;
}
Is there some IE 'gotcha' regarding height that I'm missing?
Here are some additional details:
The line does not appear in FF or Chrome.
There's little javascript on the page, nothing that would impact how this renders.
Other changes to the css get applied to the div.
if i could understand right, the height is not effected becasue of the line-height and font-size. so you must add
line-height: 0;
font-size: 0;
Remember to set the doctype so the browser doesn't go into quirksmode
First line of your html document should be
<!DOCTYPE html>
You could also use a more traditional xhtml doctype like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
But i will recommend the first type which is html5 compliant and works fine in IE as well even tho they don't do html5, and it looks so much better than that awful xhtml doctype ;)
Also remember that you cannot apply height to inline elements, only block level elements, so your element needs to be display: block or display: inline-block or similar ;)
Try applying overflow:hidden to your CSS
#MSBottomSlot .topCurve {
background:url("images/topCurve.jpg");
background-repeat:no-repeat;
height:10px; /* Changing this value does nothing in IE */
width:100%;
overflow:hidden;
}
With css.
Please don't refer me to another link.
EDIT
Make something always at the bottom of viewport no matter how you scroll the bar.
If you're having problems specifically with IE6 - consider using a resets script. It will make your life much, much easier. There are lots of different flavours of reset script out there, so do a bit of research and to find one that you like. Personally, I find that yahoo produce one that's fit for purpose.
The thinking behind using a resets script is:
Each browser applies a set of
default styles and properties,
before any user style sheet is even
loaded.
A lot of the differences between the
way a page renders are due to the
inconsistencies between these
defaults.
If we could find a way to 'flatten
the ground' before we begin
building, life would be easier
A resets script performs that flattening - and IE6 can be dealt with in a much more logical way.
The obligatory link ;)
http://developer.yahoo.com/yui/reset/
Solution
Bearing in mind the use of this resets script, I offer you the following solution.
As you're probably aware, IE6 doesn't support position:fixed.
To solve the problem you can make use of the following snippet:
<style>
html, body {
height: 100%;
overflow: auto;
}
div#fixed-bottom {
position: fixed;
z-index: 2;
bottom: 0;
height: 20px;
width: 100%;
background-color: #eaeaea;
margin-top: -20px;
}
div#content {
position: relative;
width: 100%;
height: 100%;
overflow: auto;
}
* html div#fixed-bottom {
position: absolute;
}
</style>
Which should be applied to a document containing the following elements within it's <body></body>:
<div id="fixed-bottom">
<p>
I'm at the bottom
</p>
</div>
<div id="content">
<p>
Your content here.....
</p>
</div>
This should work because:
IE6 treats height in the same way that most browsers treat max-height. The overflow auto will allow content to flow (with scrollbars) if the content carries on past the height of the browser viewport.
The '*' hack is used for simplity - it makes sure that IE6 applies 'position:absolute;' rather than 'position:fixed'. You should use conditional comments to provide specific CSS for IE6.
Note that this solution will only work when IE6 is set to use 'strict mode'. This can be set explicitly by choosing an appropriate doctype; for example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Been working on this site for some time now, works perfectly on Mac and PC Firefox, as well as Safari. However, IE is making the site almost blank - any ideas on what is going on? Any workarounds?
Thank you in advance for your help!
http://www.alliedprintingsolutions.com
http://www.alliedprintingsolutions.com/style.css (Stylesheet)
Your html is invalid in many ways. Please fix that first.
Add a DOCTYPE!
Either HTML5 or HTML4 Strict (not Transitional) are recommended for best cross-browser support.
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
(As you can see, HTML5 is much simpler, and still usable even if you're not yet using HTML5 tags.)
Note: The DOCTYPE must be very first thing in the file, before all other tags, and with no blank lines, tabs, nor spaces before it.
You may want to try adding a doctype.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Edit: The doctype declaration should be the first thing in the html file. It goes even before the <html> tag.
The Quick Solution: Remove "overflow: auto;" from #wrapperbig and #wrapper.
This will get the content to be displayed.
However, be sure to look at the other answers. They have good points.
I too faced the same problem and found a solution after some research.
Do not code CSS on the HTML file
Make a separate CSfile and link to it using <link rel="stylesheet" href="css/style.css">
And always add <!DOCTYPE> tag to every HTML page //*This is the main solution
Had a quick look at the code in firebug. You seem to have a z-index of -1 on the content div (#wrapperbig), which browsers should ignore for non-absolute/relative content - this may be an odd implementation in IE.
Also, as mentioned before, add a doctype - IE will render the site in 'quirks mode' if there is no doctype.
I don't have FireBug on me right now (if you don't have this extension - get it!) But using images in the way you are right now is the problem.
Use CSS to apply a "background-image" attribute for your site's main content. For example:
<style>
.Page
{
background-image : url(../images/site_bg.png) no-repeat;
width : 600px; /* Image width here */
heigth : 500px; /* Image height here */
padding-top : 15px; /* top text offset here */
padding-left : 15px; /* left text offset here */
padding-right : 15px; /* right text offset here */
padding-bottom : 15px; /* bottom text offset here */
}
</style>
...
<div class = "Page">
<!-- Content -->
</div>
That will work much better, and will work in all browsers just fine :)
In response to comment
I don't want to say your wrong, but when I can click and drag the background images with my mouse cursor that means that you are using an IMG tag to show the background instead of (or in conjunction with) the background-image attribute. I can almost gurentee that that is your problem. Remove all of your img tags and replace them with divs and the background-image style and your problem will be resolved.
If I had firebug on me I could go into more detail.
Second edit with example code
Here is some rough code that may help you remove your unneccecary image use.
<style>
.Container { margin : auto; width : 600px; /* BG and Header Width here */ }
.Header
{
background-image : url(../images/site_header.png) no-repeat;
width : 600px; /* Image width here */
heigth : 500px; /* Image height here */
padding-top : 15px; /* top text offset here */
padding-left : 15px; /* left text offset here */
padding-right : 15px; /* right text offset here */
padding-bottom : 15px; /* bottom text offset here */
}
.Header .Link1:link, .Header .Link1:visited, .Header .Link2:link, .Header .Link2:visited
{
width : 60px;
heigth : 60px;
display : block;
float : left;
margin : 10 20px;
}
.Header .Link1:link, .Header .Link1:visited
{
background-image : url(../images/link1.jpg);
}
.Header .Link2:link, .Header .Link2:visited
{
background-image : url(../images/link2.jpg);
}
.Page
{
background-image : url(../images/site_bg.png) no-repeat;
width : 600px; /* Image width here */
heigth : 500px; /* Image height here */
padding-top : 15px; /* top text offset here */
padding-left : 15px; /* left text offset here */
padding-right : 15px; /* right text offset here */
padding-bottom : 15px; /* bottom text offset here */
}
</style>
...
<div class = "Container">
<div class = "Header">
</div>
<div class = "Page">
Content
</div>
</div>
:)
There are too much woo-doo stuff happening with absolute positioning of content_left and content_right. You will be fine by removing “position: absolute” and replace it with “float:left” in both content’s (set wrapper width to 100%).
Thank you for all your suggestions, everyone. The majority of the content is showing up (relatively as it should be) on IE now, other than the footer which is slicing up my page in a gross fashion (haha). I see what youre saying, Nelson LaQuet, about the header images, I will have to try and play around with them, I'm still new to CSS and figuring out to having them all properly placed with an image map was headache enough as is. As for the Doctype, I added it as you told me and it seemed to muck up some content even on Firefox, so I know I must have some more errors to go through. When I remove it, things looked normal again. The "woowoo's" with the absolute positioning were pretty much necessary, as the positioning method used was the ONLY way I could find to work with the background images and header images in tact, with the column divs in the correct place. At least I made some positive progress it, but I guess I have more work ahead of me :/ Just wish it was a bit easier to correct as it looks just fine in Firefox. Oh well, thanks again for all your help, guys!
Shannon
Sometimes even after adding
<!DOCTYPE html>
Css is not loaded.
It is because of white spaces before
<!DOCTYPE html>
Make sure it is not present.
Else in IE, page will terribly shown
Not just white space before:
<!DOCTYPE html>
but also remove spaces before the curly braces in your style sheet (CSS file).
Example of simple style sheet (imagine it at the left margin in your text editor):
h1{
font-family:Arial;
color:purple;
}