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.
Related
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!
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.
I have a container with two basic elements. A header and the body. In the header div I want a 50px by 50px image and a user name next to it, but I can't seem to get the username to display inline. What am I doing wrong? http://jsfiddle.net/FqW9d/14/
Add a float: left to both elements. Like:
#story-teller-head-contain img{
float: left;
/* your other styling */
}
#story-teller-head-contain h1 {
float: left;
/* your other styling */
}
Add a float left to the image and the div containing the name, I have updated your jsFiddle here http://jsfiddle.net/FqW9d/15/
can you use inline-block instead inline for the div with username or float bot img and `div.
Demo with inline-block: http://jsfiddle.net/FqW9d/16/
Demo with float: http://jsfiddle.net/FqW9d/17/
Inline display can be a bit of a pain. The cross browser way to do it is like this..
/* Older version of FF */
display: -moz-inline-stack;
/* newer versions of FF and Webkit */
display: inline-block;
/* trigger the correct behaviour in IE */
zoom:1;
/* IE */
*display: inline;
You need to declare the style sin that order.
As everyone else is saying make the image and persons name float: left;
http://jsfiddle.net/FqW9d/20/
By the way, i really like the set up you did here. So i messed with your source some:
http://jsfiddle.net/FqW9d/22/
You've got the following structure (I've added an image url so we can see that element):
<div id="story-teller-head-contain">
<img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG"/>
<div id="client-name">
<h1> Matt Morris </h1>
</div>
</div>
The div elements and h1 are all block-level elements by default. However, all you need to do is float: left the img and #client-name elements, and they will flow left to their width (which you declare), without forcing the next element to flow beneath.
#story-teller-head-contain img {
float: left;
height: 50px;
width: 50px;
}
#client-name {
float: left;
height: 50px;
width: 200px;
}
#story-teller-head-contain h1 {
margin: 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: 'helvetica neue', arial, sans-serif;
font-size: 12px;
color: #3B5998;
}
http://jsfiddle.net/FqW9d/21/
So you're not really looking for display: inline, which will attempt to display the element's as "inline text" is displayed (such as this paragraph text); what you want is for the img and #client-name elements to not "force clear after". Your display: inline is what is allowing the h1, which is a block-level element, to disrupt your display, since it is overriding the display: inline of the parent element.
In fact, if you inspect with Firebug or Chrome Console, you'll see the above computes as float: left and display: block, even though display: block has not been explicitly declared.
See:
http://www.w3.org/TR/CSS2/visuren.html#floats
http://www.alistapart.com/articles/css-floats-101/
http://www.quirksmode.org/css/clearing.html
http://css-tricks.com/all-about-floats/
I feel its better to use -
img{
float:left;
}
#client-name{
display: table-cell;
zoom:1;/*For IE only*/
}
You don't have to specify widths like in float method. It will automatically accommodate text with varying length.
I have updated your code - http://jsfiddle.net/FqW9d/27/
But I think your structure & css could be much more simpler. Since I don't know about the purpose, left it untouched.
I am having a difficult time with how ie and firefox are displaying inline-block. I should probably point out that Google chrome displays it as intended..
<div class="cell">
<div><img src="images/dftg.jpg" /></div>
<p>Sean val</p>
</div>
The problem occurs in firefox and ie when i write a longer name in the paragraph above, in the parapgrah above. in firefox and ie, the cell div moves up thereby making the layout look weird and inconsistent.
.cell {
display: inline-block;
display:-moz-inline-stack;
border: 3px solid #ff0000;
padding: 7px;
height: 170px;
zoom: 1;
*display: inline;
_height: 170px;
}
.cell p {
padding: 10px 25px;
width: 150px;
}
You're probably having this problem because you haven't specified any vertical-align.
Try using this:
.cell {
display: inline-block;
vertical-align: top;
border: 3px solid #ff0000;
padding: 7px;
height: 170px;
zoom: 1;
*display: inline;
_height: 170px;
}
You can forget about display: -moz-inline-stack - that's only for Firefox 2, which has very, very low usage.
The article you probably read while "doing research" was this:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
You should probably read it again, as it does mention using vertical-align.
You should check dates on articles you read. Inline-block has been supported since FF3.
Another obscure-but-useful new feature making its way into Firefox 3 after all the other major browsers support it (mostly) is the inline block. When assigned to an element, a display type of inline-block causes the element to be positioned inline (like a span), but the element's contents are laid out as if the element were a block.
http://ajaxian.com/archives/soft-hyphens-and-inline-block-subtleties-in-firefox-3-rc-1
Anyway, looks like you solved it.
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 }