Imagine I'm having a DIV. I want to display it in a row with other divs, so I'm giving it display: inline-block along with other style definitions in a CSS sheet.
Now Internet Explorer wants to have display: inline; for the behavior I want.
How do I give Internet Explorer a seperate styling command to overwrite the definition for good browsers, so only IE will have display: inline;. Due to technical limitations I cannot use <![If IE] -->-stuff in HTML, I need to stay within the CSS file.
You can use selectors like so:
\9 – IE8 and below, * – IE7 and below, _ – IE6
So in your case:
*display: inline;
You can simply add this to the rest of the css:
div{
display: inline-block;
// some;
// other;
// css;
*display: inline;
}
Read my blog post on this.
Update
IE version 5 till 8. (They are all
affected) – Cobra_Fast 1 min ago
So in this case, you'd use
div{display\9:inline;}
A horrible way to do it is: http://www.webdevout.net/css-hacks
Even though you cannot change the HTML I'd read up on http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
IE actually has quite good support for inline-block - if the element is originally an inline element. So try using a span instead of the div.
To make inline-block work on block-level elements in IE7, I frequently add this to my answers:
Overlapping inline div
One list, simple float left, different cell sizes
How do I center a list as shown here?
multi-line tabs
Remove margin between rows of overflowing inline elements
How can I wrap content around a UL CSS Menu so content is seamless?
I sure hope what I'm suggesting everywhere actually works :D
See: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
selector {
display: inline-block;
*display: inline;
zoom: 1;
}
Related
The webpage is http://www.parentcenterhub.org/region6-aboutus/ It is displaying correctly on all browsers except IE9. The CSS is:
#primary { display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; }
The conditional css for ie 7 and ie 8 is:
.ie8 .content-area1{
width: 70%;
display: inline-block; }
.ie7 .content-area1{
width: 70%;
display: inline-block; }
There is no conditional css file for IE9. So, please suggest the code which I can put in style.css so that the page also displays correctly for IE9. Please help.
IE9 and doesn't support flexbox (see here for full browser support details), so you'll need to use something like your IE7/8 alternative layout for IE9.
You can work without having a conditional CSS for IE9 in one of several ways:
Use CSS's override mechanisms. Simply specify display:inline-block above display:flex (etc) inside the same selector, and every browser will pick the last defined option that they support. So if flex is below inline-block, IE9 will use inline-block because it doesn't understand flex, and others will use flex because they do know it and it's below inline-block. Sure, this doesn't deal with setting the width, but we've got half the problem solved without any browser-specific code at all (in fact, this would work for IE7/8 too, so you can reduce your specific code for them as well). width might be solvable with a similar trick by specifying a default value using a measurement unit not support in older browsers like rem or vmin or something, and then overridding it with % for the older browsers, but whether that would work for you would depend on your actual layout.
Use a library such as Modernizr, which will add feature support flags that you can use in the form of class names on your <body> tag. For example, it will add a flexbox class for browsers that support it, and a no-flexblox class for those that don't. This means you can write CSS code that targets browsers that support the feature or not -- eg:
.flexbox #primary {
display:flex; //etc...
}
.no-flexbox #primary {
display:inline-block;
width:70%;
}
Use a browser hack. I really don't like suggesting this, but it is an option. There are CSS hacks that specifically target IE9 if you really want to use them. I won't repeat them here though as I don't think it's the best option. If you want to use them, Google will tell you what you need to know.
Use an IE9-specific class just as you are currently for IE7 and IE8. You're doing it already, so it doesn't seem like it should be too much of a stretch.
Just use inline-block across the board. If the inline-block layout works, why not just use that. Flexbox is great, but if you need IE7/8/9 support, you're not going to be able to use it consistently, so....?
Personally, I'd go with the Modernizr solution. It solves this problem very neatly, and can also deal with most other cases where you might consider having browser-specific styles due to missing features.
I have updated my code and made a fiddle which explains what I am trying to do. I had a similar question before but it did not reflect the fluidity of the template.
I have a totally fluid layout and I need to make a div display under another.
I want to do it with CSS and I'd prefer not to use javascript or jquery.
Here is the fiddle:
http://jsfiddle.net/sexywebteacher/7hCNC/20/
I was maybe unclear:
I am talking about the section1 and section2 divs in the fiddle
Do you think this can be done?
Thank you!
If both the height of the image and the text are variable, it's not particularly easy with pure CSS.
The height being variable rules out anything based on position: absolute, as in the answers you received to your previous similar question.
One option is to use the technique shown here: http://tanalin.com/en/articles/css-block-order/
It is possible to change vertical order of blocks on HTML page using
CSS table presentation using properties of display: table family.
Regardles of block order in HTML code, header (table-header-group) of
such table is displayed at the top of it, footer (display:
table-footer-group)—at the bottom, and table body
(table-row-group)—between header and footer.
This works in all modern browsers, and IE8 if you're careful. It does not work in IE6/7.
Here's your code using this technique: http://jsfiddle.net/thirtydot/7hCNC/35/
I have to admit that I've never used this technique on a production website, so please test thoroughly.
A different approach that will work in all browsers that support CSS3 2D transforms is to vertically flip the whole container, and then do the same to the "image" and the "text" elements. In browsers that do not support CSS3 transforms, everything will still work, but the "image" and "text" elements will be in their original order. In other words, it degrades nicely. It's probably possible to make this work in IE6-8 using filter, but that would make the text look horrible, so forget about it.
Here's your code using this technique: http://jsfiddle.net/thirtydot/7hCNC/36/
If none of these CSS methods are good enough, you'll have to use JavaScript.
However, I personally recommend that you just switch the order in the HTML. I doubt Google cares about it. In this case, I really doubt that bending over backwards to keep your HTML in the "optimum order" will have any meaningful SEO impact.
Add to floating div "clearfix" class where in CSS
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
For ex:
<div class="column clearfix">
...
</div>
You could either change the width to be exact width (or add it as min-width) and let them naturally fall under each other or simply clear which will force them under each other
eg
.clear {
clear:both;
}
your jsfiddle
Here is another example of clear. I like to use this in cases where the element after the clear is not always consistent. It uses the psuedo elements to place a space with the clear attribute.
.clear:after{
content:".";
line-height:0;
height:0;
display:block;
clear:both;
visibility:hidden;
}
After designing and coding a standards-compliant website, that works functionally in normal browsers (Firefox, Chrome, etc), I now need to make it look identical (or mostly so) in Internet Explorer, down to Internet Explorer 6.
The current version of the website can be found at http://www.adwas.org/test/redesign/, with a minimal version of the problem at http://jsfiddle.net/FdS6L/
The problem I'm having is that at and below the area with the logo, it absolutely breaks down in IE6 (and 7, I'm guessing, still). I've already attempted to fix some of the issues, using the star-hack selector, though it still looks heavily borked. My question is: how do I maintain the size of the header, and get the elements to be (somewhat, if not totally) visible, similar to how it looks in most browsers?
Note:
I'm not adverse to adding JavaScript for the layout to work as necessary in IE6. (applies mostly to the submenu navigation)
I was trying to work on your site, and got it to this point: http://jsfiddle.net/3m367/3/. I basically cleaned up some code and restructured the header, where the bars are full-width automatically rather than forcefully (overflow-x is a CSS3 property, so wouldn't work for older browsers). This displays fine in IE7 and up. However, I stumbled upon an issue with your navigation - IE6 supports :hover pseudo-class on a elements only, so selectors like li:hover wouldn't work. Yet, you cannot put your submenus inside parent menu item's a element because you cannot have links within links. I'm not sure if it's possible to do that drop-down menu in IE6 without using JavaScript. Other than that, the navigation seems to be the only thing messing up in IE6 right now.
Instead of using float: left on #sitenav li you could try:
#sitenav {
display: table;
}
#sitenav ul {
display: table-row;
}
#sitenav li {
display: table-cell;
}
You should also consider using conditional comments to hide a set of IE-only stylesheets from other browsers, especially a stylesheet targeting something as old and archane as IE6. If you don't get anything to work with bare CSS and conditional comments, you should consider trying HTML5 Shiv and do the markup with HTML5 (which I believe you should either way).
I am new to CSS and have coded my first site with CSS. I will admit to not fully understanding CSS yet but would like to learn. I have heard about special XHTML & CSS coding being needed for older IE browsers but really don't know what CSS code is causing the trouble.
The website is here. The problem is with the top and bottom navigation menus on all pages except Blog and Moodle (I haven't updated those yet). Can someone help me with what needs to be isolated for IE?
Thanks so much!
You need to do three things.
use a strict doctype at the top of your page. at the moment you have transitional. a strict doctype ensures that IE conforms to CSS standards the best it can.
Add the following bit of CSS for your top navigation list items
#topnavcontainer ul li { display:inline; }
Add the following bit of CSS for your bottom navigation list items
#bottomnavcontainer ul li { display:inline; }
Another solution (that should work regardless of doctype);
#topnavcontainer li {
display:inline-block;
zoom: 1;
*display: inline;
}
The short explanation is that inline-block allow you to style the list-items as if they were block level elements (ie, give them width, height, etc) while still laying them out inline. An advantage over float: left is that you can apply text-align to #topnavcontainer to align your navigation left/center/right. You can also set vertical alignment although that seems to be a bit finicky at times.
The other two lines, zoom and *display are a trick to make this work in older versions of IE. It's a long explanation but if you want to know more about it, search Google for "hasLayout" and "css star hack".
I have inserted content using the :before pseudo-element for a class. I was trying to position this content using margin-top but firefox is simply ignoring the property. The code follows:
.bef {
line-height: 2em;
white-space: nowrap;
font-size:24px;
display: block;
}
.bef:before {
display: block;
margin-top:2em;
padding: 0;
color: #666666;
content:"Hello";
}
Does anybody know why Firefox may be ignoring the margin-top property?
EDIT: Although margin-top is being totally ignored, margin-bottom:-Xem is working and I am able to move the :before element around
It appears that Darko Z is right.
http://jquery.nodnod.net/cases/577
Hypothetically, the first two test cases (separated by <hr>) should render identically, which they do in Gecko (via FF3.5/Mac), but Webkit (via Safari4/Mac) renders the :before and :after segments as inline. The third test case seems to imply that Webkit currently requires the triggering element to be block in order for the generated content to be block.
The spec isn't clear on what the correct behavior is. It may be worth raising a question on www-style to see which rendering engine's behavior is correct, then filing a bug with the incorrect rendering engine to get it fixed in future versions. Feel free to use my code as a test case.
try making .bef display block also? just a guess that the containing element of the :before needs to be block so it can listen to the margin-top...