Has anyone been able to succesfully use the IE CSS hack #IEroot? I stumbled upon it from this article but it doesn't seem to work for me.
I'm trying to fix/hack the inline styling bug to produce li inline blocks
#featured li {
margin:0px;
padding:0px;
width:317px;
height:310px;
display:inline-block;
border-left:1px #bdbdbd solid;
}
#IEroot #featured li {
display:inline;
}
Any help would be greatly apperciated, thanks.
IT DOES WORK, exactly as described, EVEN in IE8, and is actually a pretty smart CSS hack to get around IE specific bugs.
You MUST swap out the DOCTYPE line for a REAL DOCTYPE though first.
Here is the code from the link, tweaked to be a working sample.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
/* all browsers make border red */
#IE { border : 2px solid red; }
/* all browsers see this, but only IE thinks #IEroot exists as an element and makes border blue */
#IEroot #IE { border-color : blue; }
</style>
</head>
<body>
<!--[if IE]>
<div id="IEroot">
<![endif]-->
<p id="IE">This browser is IE. (red in all, blue in IE)</p>
<p id="notIE">This browser is not IE.</p>
<!--[if IE]>
</div>
<![endif]-->
</body>
</html>
I'm using a beta of IE8, and the example on the page that you are referring to does not work. The live demo also doesn't seem to take IE8 in count.
These kinds of hacks are clever, but I'd advice you to stay away from it.
Whenever you encounter differences between browsers, there are always alternative ways to do the same thing in such a way that it works for all browsers.
I've made more websites full of CSS than I can count, and I never ever resort to browser-specific code, especially not the kind that exploits bugs in specific versions of browsers. They solve a tiny problem today, but give you twice the headaches tomorrow, and are a bitch to maintain.
If you insist on using such a hack, make sure to add a comment like this:
/* >>>>>>> BUTT-UGLY BROWSER HACK! FIX ME!!!!! <<<<<<<< */
#IEroot #featured li {
display:inline;
}
:-)
Related
My intro photo slightly covers the breadcrumbs panel on IE and Chrome, see here https://www.hawaiidiscount.com/luaus.htm
It looks fine on Safari and Firefox.
I have been reading on the Internet about css specific code for IE and tried different methods to fix that, but it doesn't work. What am I doing wrong? Thanks!
<!--[if IE]>
<style>
.breadcrumbs {
margin-top: -22px;
}
</style>
<![endif]-->
<style>
.ie .breadcrumbs {
margin-top: -22px;
}
</style>
<style>
#breadcrumbs {
margin-top: -22px;
}
</style>
It's possible that the different heights are due to the different font rendering engines on the different browsers, as this element is being positioned by <br /> elements.
You're able to use conditional statements, such as
<!--[if IE]>
.element{
margin-top: 10px;
}
<![endif]-->
.. to add code that only IE6 - 9 will render, however this will not work in IE10 and above.
You could also browser sniff, but this is really not a good solution as it's better to have one codebase that works across browsers. You also won't be able to anticipate all browsers that your users will use.
The website you've shared is also using quite a few negative margins and absolute positions, which can also cause inconsistent layout issues.
My suggestion would be to remove all <br /> elements, remove as many of the negative margins and absolute positions as possible and lay the page out using a simpler system. For instance, you've split out the background of the breadcrumbs from the text of the breadcrumbs - these should really be together so that you can easily style them together.
Hope that helps
Say I have the following code
<style type="text/css" media="all">
span, ul, ul li {
display: inline-block;
vertical-align: top;
margin: 0;
padding: 0;
list-style: none;
}
</style>
<span>i would want</span>
<ul>
<li>this</li>
<li>on</li>
<li>one line.</li>
</ul>
I want this to display inline in IE8. Everywhere I have read everything says this should work, IE8 supports inline-block. However after a morning of trying I cant get the above to line up. I know I could float it, but with the other elements on my page (not shown here) I would need to use a 'clearfix' which is more mark up. I only need to target IE8 and would love to know why inline block doesn't work for me when apparently its supported. The above code does what I want when viewed in Google Chrome.
I'm guessing you haven't declared a doctype. Try placing this on the first line, before the html tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The code you pasted works in IE8 with that doctype.
Not all IE8 versions seem to work equally. I found that the given code, even with a DOCTYPE, does not work in IE 8.0.6001.18702, which is an early version.
However, the workaround for lower IE versions did its job on that particular IE 8 as well:
<!--[if lt IE 8]>
<style type="text/css">
li { display: inline; }
</style>
<![endif]-->
You can set margin-right:1px
worked for me pretty well.
In my experience it is always a better idea to use the universal way (IE6+) of declaring an inline block. Even if you are targeting newer browsers every time I've tried to say that it's only supported by newer browsers some client still messes with their document type, and then the sales say, it needs to be fixed, because clients can still see it and does not get it, that it's down to their IE settings and not our fault. More over when you are using inline-blocks for structural stuff, it keeps the site from completely disintegrating if the user is viewing the site on an older IE for what ever reason.
display: inline-block;
*zoom: 1;
*display: inline;
IE8 will treat it as a block level element unless you use float.
.divInlineBlock
{
display: inline-block;
float: left;
}
Note that IE8 will act like IE7 if you are viewing an intranet site, which can happen as you develop! See this StackOverflow question:
IE8 Rendering as IE7 By Default?
For IE8 - you can add a specific declaration:
display: inline-table;
which works great.
I have a problem with displaying a set height in ie.
In my css I have set a height for my sidebar div as 2150px; which it displays fine in firefox but does not display the full height in ie.
How can I get ie to display the height I have set in ie?
Thanks in advance
The source code is below
#sidebar_newspr{
width:160px;
min-height:2150px;
margin-top:1px; margin-right:2px;
border-right-style:solid; border-right-color:#900; border-right-width:1px;
float:left;
}
#sidebar_newspr a{
text-decoration:none;
color:#FFF;
font-size:12px; font-family:Verdana,Arial,Helvetica,sans-serif;
}
#sidebar_newspr a:hover{
color:#900;
}
This is a bit of a shot in the dark because you didn't really specify which versions of IE you're testing it in. Nevertheless, min-height requires IE7 and IE8 to be operating in Standards Mode. To enable Standards Mode, you need to use a strict !DOCTYPE.
From the documentation:
In Internet Explorer 7, the min-height/max-height attributes apply to floating and absolutely positioned block, inline-block elements, and some intrinsic controls. They do not apply to non-replaced inline elements, such as table columns and row/column groups. (A "replaced" element has intrinsic dimensions, such as an img or textArea.)
In Internet Explorer 7, this property is enabled only under the strict !DOCTYPE.
min-height in IE6 applies only to th, td and tr elements.
Try to use conditional comments:
<!--[if lt IE 9]> //will target IE less than version 9
<link href="/directroy/IE.css" rel="Stylesheet" type="text/css"/>
<![endif]-->
To your head tag and use this new stylesheet to define what you want IE to do.
#sidebar_newspr{
width:160px;
height:2150px; /*change to just height*/
margin-top:1px; margin-right:2px;
border-right-style:solid; border-right-color:#900; border-right-width:1px;
float:left;
}
You can also use more than one Conditional comments to target different versions of IE.
Like so:
<!--[if IE 8]> //will target only IE 8
<link href="/directroy/IE.css" rel="Stylesheet" type="text/css"/>
<![endif]-->
Then try to set your doctype to strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Might work, if not then I'm sure someone else has another idea :)
Some versions of IE dislike min-height, I try to tend to avoid it if possible.
As a quick solution that wont weigh your page down like an IE only style, simply state height:2150px; min-height:2150px; Browsers that support min-height will take that, while the ones that don't support it will simply ignore it.
I'm using .class1.class2 .class3 selector, where .class1.class is a combination selector and .class3 belongs to a descendant. works fine in FF, but on IE7, it doesn't work.
In the css below, the second style is always shown in IE. any solution?
<STYLE type="text/css">
.test1.test2 .test3{
width:90px;
height:100px;
}
.test4.test2 .test3{
width:900px;
height:100px;
}
</style>
<div class="test1 test2">
<button value="test" class="test3"/>
</div>
just for let you know, what you are using is called Multiple Classes method! IE7 need to use this form:
div.class1.class2 div.class3 {}
IE6 don't suppurt this you can hack it, read the solution
http://www.quirksmode.org/css/multipleclasses.html
hope this help!
That style should work perfectly on IE7+. As Pekka said in the comments there is a small problem with IE6. I'm guessing that you're not using the strict doctype perhaps?
In which case, you deserve everything you get :-o
Just add <!doctype html> to the start of the HTML file and everything should be fine.
Use Conditional Comments , this issue has been raised too many times here is an example :
<!--[if lte IE 9>
<style type="text/css">
.test1,.test2,.test3{
width:90px;
height:100px;
}
.test4,.test2,.test3{
width:900px;
height:100px;
}
</style>
<![endif]-->
This means all IE family browser less than version 9 are going to read in this style, or you can use style with # to be read by IE like this :
<STYLE type="text/css">
.test1,.test2,.test3{
#width:90px;
#height:100px;
}
.test4,.test2,.test3{
#width:900px;
#height:100px;
}
</style>
I want my submit buttons + links to look as buttons and the same in all browsers.
Firefox 3.5 plays nice. But IE6,7,8 have all different looks. Can you help me with that (apparently) simple task?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Crossbrowser css submit button, links</title>
<style type="text/css">
button {
background:#FFE900;
color:#000;
padding:3px 5px 3px 5px;
border:1px solid #000;
}
input {
background:#FFE900;
color:#000;
padding:3px 5px 3px 5px;
border:1px solid #000;
}
a {
background:#FFE900;
color:#000;
padding:3px 5px 3px 5px;
border:1px solid #000;
text-decoration:none;
}
</style>
</head>
<body>
Buy now
<input type="submit" value="Buy now" />
<button type="submit">Buy now</button>
</body>
</html>
You can replace the Submit button with an image the same way you do it with a background-image for a link. Simply get rid of the background and border, put the background-url in the input selector, and give it the right width and height.
input{
background-color: white;
border: 0;
background-image: url('blah.png');
}
For the button instead of type="submit" use type="image".
For instance:
<button type="image" src="path_to_your_image.png">Buy now</button>
For link you can use css to set the background of your link:
background-image: url('path_to_your_image.png');
I take it you do understand that you'll never get them to look exactly the same, since even in Firefox 3.5 they don't look exactly the same for me.
And apart from purely the style, they'll always have different behavior. For example, buttons will respond differently to tabbing or clicking (some browsers "depress" the text), buttons won't show the URL they point to in contrast with links, and you can select the text of a link, but not that of a button.
You can fix the most glaring differences on IE6 and 7 quite easily, though.
Add this to the CSS for your buttons (<button> and <input>):
overflow: visible;
You can put it inside a stylesheet for IE6/7 only, though this shouldn't affect any other browser, since visible is actually the default value. But for some reason this fixes the inconsistencies with the padding, compared to that for the link, on IE6 and IE7.
And add the following to the CSS for the link. All browsers need this, to make the link behave more like a block element, just like the buttons:
display: inline-block;
I know this is an old question, but I recently ran into this issue and didn't want to use any images in my layout. The solution I came up with (after making the links blocks, as others suggested) was to explicitly setup the borders, fonts, and background colors. To get the borders to match, set them individually. Originally I was trying to use outset borders, but I had better success using solid borders with specific colors for top, left, bottom, and right. (I chose the colors based on what firefox was using for its outset borders.) Hope this helps someone. Also, adding a border-radius to the links and buttons makes them a bit cleaner.
If you want a uniform appearance, you'll need to use an image submit button.
You could always use a JavaScript framework to replace the element with one that is more stylable or use MSIE's conditional comments for browser-specific styling.
Sad truth is cross-browser pixel perfection seems impossible with pure CSS and buttons.