I have some task to make a carousel, that would holds several elements with not defined width. So, the easiest way — to make all elements in row by CSS and then do all JS calculations and so on. All was going well before testing it in (bug producer) IE6.
Here the sample what is going on in browsers:
Safari (5.1.2), Firefox (10.0.2), Opera (11.62)
Internet Explorer (9.1)
Internet Explorer (6) (Text in span bump li box)
DebugBar about LI, it's ignoring preset rule white-space: normal — Internet Explorer 6
DebugBar about SPAN, it's ignoring inheritance preset rule white-space: normal — Internet Explorer 6
Here sample of HTML:
<div class="carousel">
<div class="box">
<ul>
<li>
<span>Some text</span>
</li>
<li>
<span>Some longer text</span>
</li>
<li>
…
</li>
</ul>
</div>
</div>
Here part of CSS that manage it:
div.carousel {
width: 700px; height:200px;
}
div.carousel div.box {
width: 100%; height: 100%;
overflow: hidden;
}
div.carousel div.box ul {
display: block;
white-space: nowrap; /* to make all inside elements lay in row */
}
div.carousel div.box ul li {
margin-left: 23px;
width: 130px; height: 150px;
display: inline-block;
vertical-align: bottom;
white-space: normal;
}
box correction for IE6 and earlier:
div.carousel div.box ul li {
display: inline;
zoom: 1;
}
Live example in jsFiddle
See this url: http://cos.livejournal.com/36490.html
The answer, it seems it our old favourite, Quirks Mode. In Quirks Mode, IE does not recognise the white-space:normal style, but does recognise the other white-space styles, hence your cascading problem.
The solution is to stop IE going into quirks mode. This is as simple as adding a valid Doctype to the start of your page.
Quirks mode will likely introduce other layout glitches to your page as well, so this one fix should solve others problems you may have too.
Related
Context
In my header, I want to place my little login menu "LOGIN" and "Help" to the right of the page at the same height as the logo (red rectangle) on the left.
Problem
The layout is not working on IE8.
It works as intended on Chrome :
But it gives this on IE8 :
or this :
Code
HTML
<header class="header">
<div class="Login">
<a id="LB_GotoLogin" tabindex="30" href="javascript:__doPostBack('ctl00$MainContent$LB_GotoLogin','')">LOGIN</a>
<br><br>
<a id="LB_Help" tabindex="30" href="javascript:__doPostBack('ctl00$MainContent$LB_Help','')">Help</a>
</div>
<a href="/Default.aspx" style="text-decoration: none; display: inline-block; *display: inline; *zoom: 1;">
<img src="Logo.jpg" style="height:64px;border: 0;">
</a>
</header>
CSS
.header
{
padding: 18px 50px;
margin: 0px auto;
text-align: left;
line-height: normal;
height: 64px;
}
.login
{
float: right;
vertical-align: top;
display: inline-block;
*display: inline;
*zoom: 1;
width: 100px;
}
What I tried
I tried placing the floated-right element (login) before the logo, it gave the first IE8 image I included instead of the second. (As stated Here)
I placed a width to the floated element as stated at multiple places.
Every container are <div>s. As stated Here, IE8 doesn't recognise other tags.
Tried making everything inline-blocks with the IE8 hack (`*dispay: inline; *zoom: 1;)
Nothing worked.
Question
How can I make my layout to work for IE8? (What have I missed?)
As Niet the Dark Absol noted,
Class "login" and class "Login" are two different classes. Some browsers may be tolerant of this (but they shouldn't be), IE8 is not.
Internet Explorer 8 is case sensitive, while the other browsers are not.
Having the same exact class names fixed the problem.
I am designing a website using the MVC-3 framework. While IE compatibility mode is not being used, it appears correctly and looks like this:
The code for this I am using is this:
<div id="header">
<div id="title"> /* NUMBER 1 */
<img src="#Url.Content("~/Content/A_picture.png")" />
</div>
<div id="menucontainer"> /* NUMBER 2 */
<ul id="menu">
/* some menu items*/
</ul>
</div>
</div>
<div id="main"> /* NUMBER 3 */
#RenderBody()
</div>
One day, I had the need to force my code to believe it was running IE7 for other formatting consistency issues.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
But now, forcing this breaks my initial website layout. While using the forcing of IE7, it looks like this:
Thank you for staying with me through the explanation. Now my question - how can I manipulate my div sections that are now broken to appear as they did in my first picture, while still forcing the emulation of IE7?
Any thoughts, ideas, and suggestions are much appreciated.
Edit: CSS
Some pieces of CSS I believe could be helpful to solve this problem are as follows. Sorry, I obviously should have included this initially.
header,
footer,
nav,
section {
display: block;
}
header, #header {
position: relative;
margin-bottom: 0px;
padding: 0;
}
nav,
#menucontainer {
margin-top: 40px;
}
div#title {
display: block;
float: left;
text-align: left;
}
maybe you need to use vertical-align, for ie you sholud set smth like this:
#id_top_elements {
display: table-cell;
vertical-align: bottom;
}
but if you can show your css it may be heplfull ;)
or try smth like this:
<!--[if lt IE 8]>
<style>
#id_top_elements {
position: relative;
top: -50%
}
</style>
<![endif]–>
but now you need to add some wrapper for top elements, and it must have position: absolute;
instead of using the floats you could also use
display: inline-block; /*which works for most browsers including newer versions of ie, the following two lines are the fix for older versions of ie.*/
*display: inline;
zoom: 1;
Do this on any object/element that needs to 'sit' next to another object/element
Amazingly enough, the solution is simply to add one line to the #menucontainer css like this:
nav,
#menucontainer {
margin-top: 40px;
display: inline;
}
The line added is "display: inline", and I added it to the number 2 div in my diagram.
Thank you for everyone who weighed in on this topic!
A few months ago, I made a site for a small company. They were very pleased about it, and so on. Now, I will do a small ecommerce for the same company, and integrate it to the site base. But, I was looking it with ie7, and noticed something terrible. The navbar, isn't displaying correctly. The links, normally listed on horizontal line, are on vertical line. How to fix this, this is urgent?
Here's the CSS of the nav:
.nav-ul {
margin: 0;
padding: 0;
position: absolute;
left: -14px;
top: 120px;
background: #000;
height: 31px;
z-index: 2;
width: 104%;
background-image: nappulat/tyhja.png;
background-repeat: repeat;
text-align: center;
}
.nav-ul li {
display: inline-block;
padding: 0;
margin: 0;
width: 128px;
height: 31px;
}
.nav-ul li:hover {
background-color: #b2080b;
}
.nav-ul li a {
text-decoration: none;
color: #fff;
font-size: 14px;
font-family: Verdana, Geneva, sans-serif;
display: inline-block;
padding: 0;
margin: 0;
width: 128px;
height: 31px;
}
I know the conditional comments, would they give me an answer?
IE7 (and IE6) has some serious bugs with inline-block.
The main bug is that it only works at all for elements that have a default display style of inline.
<li> tags have a default style of list-item, and therefore display:inline-block; won't work for them in IE7.
There are two solutions:
Add a <span> or similar inline tag inside the <li> (or instead of your <li>) and style that as inline-block instead. This may or may not have the desired effect for you, depending on what you're trying to achieve.
Use an IE CSS hack. You can make IE7 do what you want if you set display:inline; and zoom:1;. This combination will work in IE6 and IE7 in the way inline-block is supposed to work. You'll need to work out a way to make this only happen in IE6/7, though, because obviously you'll want it to use inline-block in other browsers. There are various CSS hacks that can target these browsers, or you could use conditional comments. Either way, it's messy, but the only real solution if you want to support IE7.
(which brings up the third option, of dropping support for IE7 in your site...)
Not fully supported in IE 7 according to http://caniuse.com/inline-block (only for elements that are inline by default). It mentions alternatives here ... http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/
Conditional comments would help you if you have a version that looks ok in IE7 and have something else that looks better in newer browsers, so you would use different code for different browser versions
display: inline-block;
zoom:1;
*display: inline;
Should work. Make sure you have a valid DOCTYPE set. You can remove "zoom:1" if there is something else that triggers hasLayout.
I'm trying to find a good why to display my Icons.
I want to use a CSS and not an img tab.
My code:
<span id="Span1" class="iconPrinter"></span>
.iconPrinter{background:url(../images/BWIcons.gif) no-repeat 0 0; padding:0 8px;}
or
.iconPrinter{background:url(../images/BWIcons.gif) no-repeat 0 0; width:16px;}
It works fine on FF but on IE6 I can't see the Icons, only if I insert a span in the span.
When I use a div or display:block; it work fine, but I need it to be inline.
Thanks
The simplest way I found to insert an inline tag like span what will work with IE6 is:
(for 16px icon)
<span id="Span1" class="iconPrinter"> </span>
.iconPrinter{background:url(../images/BWIcons.gif) no-repeat 0 0; padding:0 7px; font-size:16px;}
IE6 probably won't show the inline element with padding if it has no content. Try adding into the span;
<span id="Span1" class="iconPrinter">& nbsp;</span>
(Note that there is an extra space in the as the code coloring mangles it otherwise)
On the other hand, in order to give the span a width, you could also try using
.iconPrinter { display: inline-block; }
In order to get around FF2 issues with inline-block I found a suggestion online which worked for my setup. Now for my setup I have a text which also has padding-left and a background-image set to the left side of the text. I needed the whole span to fire an event when clicked, which just wasn't happening when I used display block in IE6 or IE7.
I came here and it was suggested to use inline-block which fixed my issues, but left me with FF2 compatibility issues. I then found this solution.
display: -moz-inline-box;
display: inline-block;
Having both display calls doesn't seem to have any adverse effects in any of the browsers I tested IE6,7,8, FF2, 3.
What is your purpose with the icons? Do you just want to show the icons, why not use the "img"-tagg. If you should be able to click them wrap them in an "a"-tagg.
ie6 has a bug with vertical-padding on inline elements. You could also use divs and float them.
What is inside of the span? Anything?
Try adding:
#iconPrinter{
background:url(../images/BWIcons.gif) no-repeat 0 0;
padding: 8px;
text-indent: -100000px;
overflow: hidden;
}
And if the span is just there for the icon, add some kind of html special character. This may force IE to acknowledge that something is there, and it's more accessible for those without CSS or with screen readers, something like:
<span id="iconPrinter">⎙</span>
Try to give css height to the span class. Something like
.iconPrinter{
background:url(../images/BWIcons.gif)
no-repeat 0 0;
width:16px;
height: 16px;
}
I realize this is an older post, but I came across this question while searching and thought that this might help others. I was using CSS background images for links and also had trouble with IE6 and IE7.
Here's the HTML:
Edit Admin
Delete Admin
Here's my css for browsers other than IE6 and IE7.
.icon-edit, .icon-delete, .icon-error, .icon-success, .icon-notice, .icon-email
{
height: 16px;
width: 16px;
text-decoration: none;
margin: 0px 5px 0px 0px;
padding: 0px;
float: none;
display: -moz-inline-box; /* For FF 2 */
display: inline-block;
text-indent: -9999px;
overflow: hidden;
}
Here's the additional css that I conditionally add only for IE6 and IE7:
.icon-edit, .icon-delete, .icon-error, .icon-success, .icon-notice, .icon-email
{
display: block;
float: left;
}
Use padding and add a zoom: 1 in your css class
<span id="Span1" class="iconPrinter"></span>
.iconPrinter {background:url(../images/BWIcons.gif) no-repeat 0 0; padding:0 7px; height: 15px; zoom: 1 }
I've created a template for WebSVN (see it in action here) and have worked hard to make it use web standards and validate. It looks great in most browsers, but as I feared, IE 6 and IE 7 can't quite hack it. In my case, the problem is that they refuse to render the unordered list for my navigation horizontally — they both display each <li> on a separate line and overflow the allotted vertical space. (IE 8 behaves correctly, and looks very close to Firefox and Safari, which was a pleasant surprise.)
I haven't been able to find a suitable solution on Google or SO. I would prefer a CSS fix, rather than JavaScript or something similar, although that's not entirely off the table. (Also, I don't care about the PNG transparency issue in IE 6 — it doesn't hurt readability at all, and IE 7 and 8 both handle it perfectly.)
Edit: Here are relevant snippets of HTML and CSS:
HTML
<ul id="links">
<li class="diff">Compare with Previous</li>
<li class="rev">Changes</li>
<li class="log">View Log</li>
<li class="download">Download</li>
<li class="svn">SVN</li>
<li class="rss">RSS feed</li>
</ul>
CSS
#links {
padding: 0;
margin: 0;
text-align: center;
background: url(images/bg-gray-light.png) repeat-x 0 top;
border-bottom: solid 1px #a1a5a9;
}
#links li {
font-size: 110%;
display: inline-block;
padding: 5px 5px 4px;
white-space: nowrap;
}
Edit: Now that I've found a solution, the linked page won't (shouldn't?) misbehave any more in this situation, but will continue to be publicly available.
It turns out that IE 6 and 7 don't implement inline-block as expected. Looks like I found a good solution, though... Using the following CSS works for those browsers, and preserves the correct formatting in newer browsers:
#links {
padding: 0 0 4px;
margin: 0;
text-align: center;
background: url(images/bg-gray-light.png) repeat-x 0 top;
border-bottom: solid 1px #a1a5a9;
}
#links li {
font-size: 110%;
display: inline-block;
padding: 5px 5px 0;
white-space: nowrap;
}
* html #links li {
display: inline;
}
I despise IE hacks.... I'm strongly considering including Pushup in my template.
It works fine for me in IE8 with compatability mode.
The only potential problem I can see is you don't specify margins on the list items. Try setting margin:0 and see if that helps.
Assigning float:left to the li elements should work, IIRC.