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.
Related
http://metagraf.github.io has been behaving well in all tested browser until IE10 came along. The top menu is overlaying the entire page when viewed in IE10.
A screenshot of how the page looks in IE10 can be seen here: https://dl.dropboxusercontent.com/u/2897577/ie10.png
Any ideas on how to fix this?
regards Oskar
So when I run the site in question in IE 10, yes indeed, the top menu does look buggy in IE 10.
The immediate source of the problem is the img in the navbar.
If you hit F12 and use IE's developer toolbar, and then if you set the width property of the img from auto to just being un-checked (so that auto is no longer the value, the site all of the sudden looks normal.
Digging deeper into the issue, here's the css setting for img in bootstrap:
img {
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Ok, so what in the world is width: auto\9?
Well, looks like it is an IE hack, but a hack that does not apply to IE 10.
CSS \9 in width property
http://www.paulirish.com/2009/browser-specific-css-hacks/
So as a quick fix, I suppose one thing you could do would be to set a custom css property
on the img in the navbar that is exact about the width of the img.
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
Amazing...something I have gotten to work in IE and NOT Firefox! Quite the turn of events, eh?
Anyway, here's the problem. Check out the following page in both IE and Firefox:
http://www.lolstrategies.com/test/button_sample.html
I'm using this file to put together the button.
(http://www.lolstrategies.com/test/composite__V153767378_.png)
Obviously this button is centered in only IE.. what gives?!
I'm using a span for the background that is under the text and another for the tip and then floating them together with float: left as you can see by viewing the source.
So, what can I do to get this span centered in Firefox?
Thanks in advance.. please let me know if there you have any questions about this that I can help answer!
Your span.buttonLarge contains two uncleared floated block-level elements, hence no centering. In order to fix this, you could apply display: inline-block and margin: 0 auto to it.
P.S. You don't have a DOCTYPE specified, that's why your current solution works in IE - it is rendering it in Quirks mode.
Remove float: left; from .primaryLargeButtonSpan and .primaryLargeButtonEnd
after that change display: block; to display: inline; from .spriteButton span.button_label
OR change it to display: inline-block; and then, set the background property to url("./composite__V153767378_.png") no-repeat scroll left -76px transparent;
You might notice some "defect" in the ending image though...
I've inserted a Google Custom Search Engine form inside of a navigation bar but I just can't get it to center align in Opera. All browsers are respecting the vertical alignment perfectly (yes! even IE.. wow!).
You can check it out at www.micod.cat (the site's not in English but you can easily view the Search box in the menu bar, right). Opera is pushing the form input field flush against the top and that's incorrect.
Here's the CSS for that element:
#menu li.find form div {
padding: 0;
margin: 0;
height: 50px;
line-height: 50px;
vertical-align: middle;
}
Any bright minds to offer some insight please? Thanks a lot!
The problem is the Doctype, changing it to a strict one or an HTML one fixes it e.g.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
The XHTML transitional Doctype means Opera renders in "Almost Standards" mode, though quite why that would affect this I don't know, - Opera Doctype Switches
I don't know why, or what's going on, but placing an before <input type="q" .. /> fixes it.
You should wait for a better answer, but if one doesn't arrive, at least this works.
It isn't the content you want to align, but the image inside the content.
#menu li.find form div img{ vertical-align: middle; }
and looking at your site you'll need:
#menu ul.nav li.find { padding-top: 10px; }
HTML:
<td align="center" width="100%">
<a class="Forum_ib_moderate" href="Default.aspx" title="Moderate"></a>
<a class="Forum_ib_admin" href="Default.aspx" title="Admin"></a>
...
CSS:
A.Forum_ib_moderate:link, A.Forum_ib_moderate:visited, A.Forum_ib_moderate:active, A.Forum_ib_moderate:hover
{
background-image: url(images/ib_moderate.png);
background-repeat: no-repeat;
background-position: center;
padding-left: 2px;
padding-right: 2px;
padding-top: 8px;
padding-bottom: 0px;
height: 35px;
width: 35px;
display:table-cell;
}
A.Forum_ib_admin:hover
{
background-image: url(images/ib_admin_hover.png);
}
the menu looks just fine in IE, shows up vertical in Firefox. If i turn off "display:table-cell;" style in Firebug and then turn it back on, it fixes that menu node.
any ideas?
p.s.: i don't want to mess with the menu itself, since it's a part of a DNN Forum 4.4.3. I'd rather fix the CSS to make it show correctly.
Actually I think you'll find that IE works because it ignores display: table-cell. Display: table-cell is actually you're problem.
What I'm guessing is happening is that IE is reverting those to be inline element, hence horizontal.
Change it to:
display: inline;
add some padding (left and right) as necessary and you'll get what you want.
Alternatively you can float them (left and/or right).
Besdies, they're already in a table cell. Table cell display inside that is a bit wrong.
We've run into this issue as well. Still looking for a solution. In our case, we need to keep display: table-cell layout.
It appears Firefox sometimes and seemingly randomly, will cause table-cell objects to wrap rather than act like an actual table. A REFRESH fixes it, which just makes it that more difficult to bug fix.
Seems to be a simple FireFox bug. I encountered the problem the other way around: The DIVs with table-cell arranged below each other after the refresh in FF 3.5.9 on Win XP.
I was not able to not find any solution (wrap the cells into a row, overflow hidden, etc) but to update FireFox to 3.6.3 and hope there are few users with that version.
This sounds similar to a firefox reflow bug that I'm trying to fix as well. Apparently tables are really bad for rendering, since they cause a reflow and it seems that Firefox sometimes misses the reflows.
I found the following pages to be helpful:
http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
http://www.mozilla.org/newlayout/doc/reflow.html