basically im in a little dilemma... As usual, IE6 is messing up some tiny line of CSS.
All i need to fix everything is:
overflow:hidden;
Thats it. But, heres the problem. This is for a uni assigned piece of coursework and they say only 1 css file which must be valid. And no conditional comments :S so there goes my plan. Is there any way to target IE6 ONLY (not 7+ etc.) and still maintain a valid CSS file?
PS: before any of you say, well you should rethink your CSS etc, I have, its for a CSS dropdown menu and a nested element is stretching my link container so i need overflow set to hidden. Only IE6 needs this :S
EDIT MY SOLUTION:
html>body .allbrowsersceptIE6 {
overflow:visible;
}
.onlyIE6 {
overflow:hidden;
}
It works because all other browsers use the first value and ignore the second one unless the second has !important on it :D
If it comes down to using hacks as your only option: http://www.javascriptkit.com/dhtmltutors/csshacks2.shtml
So, you want to apply that rule to #menu or whatever:
* html #menu { overflow: hidden; }
Related
I'm having trouble employing page-break-inside:avoid for my print CSS.
Searching around for solutions, I've read it's good practice to set float:none, display:block, and position:relative for the target and parent elements, but I haven't had any luck getting it to work in Safari or Chrome, which supposedly no longer have support issues.
In this case, I want to avoid images spanning a page break. They are each contained in div.scrollingSSImage
All of my CSS validates fine. What else am I screwing up?!
Thank you
––Michael Femia
#media print{
div.nav{display:none;}
div.scrollingSSImage,div.scrollingSSImage > img{
position:relative;
float:none;
page-break-before:auto;
page-break-after:auto;
page-break-inside:avoid;
}
}
Ok, this might look like another stupid question, but I cant find answer.
See this fiddle:
Remove #Navigation in CSS declaration here:
#Navigation .stretch {
...
}
so it becomes:
.stretch {
...
}
Why browser (chrome Version 26.0.1410.64 m) ignore this rule?
I have tested also on firefox.
Probably it is not CSS priorities issue, because DevTools neither FireBug doesn't show it entirely. Not even overlined.
Thanks
EDIT: Many thanks guys! I couldn't see those crossed rules before, I was scrolling trough several times, in devTools and in fireBug and solving such a misserable "simple" problem for more than hour.
the rule defined only with .stretch selector is less specific than #navigator li, and it's not applied even if defined later on cascade. Thus display will be ever inline
It isn't ignored, it is overruled by #Navigation li because that selector is more specific. It sets display to inline (instead of your intended inline block).
You can easily spot this when you 'inspect element' in Chrome. It shows the styles of the element, and crosses out the overruled styles.
The issue is the #Navigation li has higher specificity than .stretch since it contains an id selector.
The reason you do not see it is because it is empty and you most likely select the previous element (on jsfiddle code).
If you select the empty li from firebug it shows it is overriden.
I have a problem with my css.
I tested it with both latest FF and IE without problem but Chrome does not render it properly.
I want to display all childs elements of a tag as blocks i use
Tag > * {
display:block;
}
it works fine in both IE and FF but not chrome.
I tried forcing it using the console and put display:block but it failed.
It seems as if chrome ignores display:block ?
EDIT: Tag is a custom Tag actually CurrentWeather
full Css :
CurrentWeather > * {
display:block;
}
body {
text-align:center;
}
div#result{
text-align:left;
margin: 0 auto;
width:50%;
}
EDIT2:
I think it is an ajax problem as when i harcode the added html it works fine.
Does chrome not apply css on dynamic content ?
thanks
The selector tag > * doesn't target all children of a tag, only the immedate children.
You would use tag * if you want to target all children.
Chrome doesn't have such a serious bug as ignoring display:block, so there has to be something that is specific to your case.
It's hard to tell exactly what it is without seeing the code, but some possible reasons:
The tag is an inline tag, and you are not using a HTML5 doctype.
The markup is broken, so the child elements are not the elements that you think they are. (Especially as different behaviour between browsers is typical for broken markup.)
works fine for me:
http://jsfiddle.net/DigitalBiscuits/nkymw/1/
There may be an error somewhere in your css that's causing Chrome to stop processing the CSS.
If you have a missing ; or } chrome doesn't like this.
You'll need to show us all your code or else use the CSS validator to look over your code
http://jigsaw.w3.org/css-validator/
In my site I need to give support for IE7. Now everybody knows that styling things in IE7 is not an easy task. People uses conditional statement in HTML to load specific stylesheet for specific version of IE. But in my case I cannot use such conditional statement, since I am in WebCenter Portal application. Here I need to use skin. It is also a CSS file.
So I want to know is there any formula exists by which I can specify a particular css attribute's value for IE7.
Say I have a class:
.filterbox{
padding:12px 0;
margin:12px 0
}
Now this margin is okay for every browser except IE7 (I didn't test it in IE<7). In IE7 if I use margin:0; then the style would be perfect, but it then breaks in other browser.
How can I specify this margin in a same css class for both in IE7 and non-IE7?
Regards.
Only use this hack if you really can't use conditional comments! They are the best solution for solving IE problems. Hacks like this will quickly mess up your CSS and also make it invalid.
So, here is a hack that targets IE7 (of course this comes after your normal definition):
html>body #filterbox {
*margin: 0;
}
from CSS hacks – Targetting IE7 on Thought-After
you can solve it if you seperate the style sheets for IE7 and other browser:
/* other browsers */
.filterbox{
padding:12px 0;
margin:12px 0
}
/* IE 7 */
*:first-child+html .filterbox
{
padding:12px 0;
margin:0;
}
Attention! You have to define the styles for Ie 7 at last, because the browser will overwrite the first definitions. The others will ignore the last ones.
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".