I facing problem using marquee tag, when opening in the chrome browser looks perfectly but when we open in firefox there are totally black shows.
Do not use <marquee>
According to Wikipedia
The marquee tag is a non-standard HTML element which causes text to
scroll up, down, left or right automatically. The tag was first
introduced in early versions of Microsoft's Internet Explorer, and was
compared to Netscape's blink element, as a proprietary non-standard
extension to the HTML standard with usability problems. It is
deprecated by the W3C and not advised by them for use in any HTML
documents.
if you still want marquee to work as expected see this
http://remysharp.com/demo/marquee.html
Using just CSS, as your tags say, a solution would be to use keyframe animations. However, keyframe animations are not supported in IE9 or older (IE10 supports them and so do all current versions of Chrome, Firefox, Safari and Opera).
Example using keyframe animations: http://dabblet.com/gist/3155878
HTML
<div class="carousel-wrapper">
<ul class="logo-list">
<li><img src="logo-img1.jpg">
</li><li><img src="logo-img2.jpg">
</li><!--many more list items just like this-->
</ul>
</div>
Basic CSS
.carousel-wrapper {
width: 32em;
height: 9em;
margin: 10em auto;
padding: 0;
border: solid 1px #ccc;
overflow: hidden;
}
.logo-list {
margin: 0 0 0 16em;
padding: .5em 0;
white-space: nowrap;
animation: scrollme 35s infinite linear alternate;
}
.logo-list li {
padding: .25em;
display: inline-block;
}
.logo-list a {
width: 10em;
height: 7.5em;
border: solid 1px #ccc;
display: block;
}
#keyframes scrollme {
to {margin-left: -173em;}
/* 173em = 18 list items * 10.5em - 16em
(10.5em = 10em width + 2*.25em paddings left and right)
(16em = half the width of the wrapper) */
}
Solutions for IE9 and older:
1. Use JavaScript. With jQuery, it's as easy as:
$('.logo-list').animate({ marginLeft: '-173em'}, 35000, 'linear');
Demo here http://jsfiddle.net/thebabydino/gTRXQ/1/
However, if JavaScript is disabled, the user will only see the first images (unless he selects and drags... which most users don't).
2. Just CSS. Well, the exact same effect (auto-scrolling) cannot be achieved, but there are a few options.
Fist of all, add .lt-ie9 and .ie9 classes on the <html> element:
<!--[if lt IE 9]><html class="lt-ie9"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if gt IE 9]><!--><html><!--<![endif]-->
so that you could do something different.
a) First option: the ugly option. No auto-scrolling, just leave a horizontal scrollbar on the wrapper (and of course increase its height) so that the user can scoll to see all images.
.ie9 .carousel-wrapper, .lt-ie9 .carousel-wrapper {
height: 10em;
overflow-x: scroll;
}
b) Second option: works only when there aren't that many images. Stack them up and reveal them on hover - something like I did in this gallery: http://jsfiddle.net/thebabydino/F7MKy/6/
c) Option that will only work in IE9, but you could use option a) or b) as fallback for older versions. Add some kind of navigation, like this http://dabblet.com/gist/3156683 (view it in IE9).
d) Ugly option #2. Go back to marquee just for IE9 and older (using conditional comments).
What I would do:
To begin with, add a class .no-js to the <html>
Use Modernizr to remove it if JavaScript is not disabled. In this case, use the JavaScript version of the auto-scrolling.
If JavaScript is disabled, but animations are supported, use keyframe animations. In this case, the .no-js class was not removed, so:
.no-js .logo-list { animation: scrollme 35s infinite linear alternate; }
If neither JavaScript nor animations are supported, try another one of the options I've listed at point 2.
You should correct the structural errors in your site.
For instance, the marquee is inside an <ul> element, but outside of any <li> elements. I'm sure browsers will have a problem with this!
So make sure the site validates on http://validator.w3.org/ before continuing.
Related
/*CSS for line*/
#line{
position: absolute;
top: 181px;
height: 1px;
width: 100%;
background-color: #E2E2E2;
}
HTML:
<div id="line"> </div>
I made a 100% width 1px line element using   to run through the bottom of my horizontal navigation menu - it was all fine until I tried it out in Safari and saw that it was off by 5 pixels, when I adjusted accordingly, it became off in Chrome and IE by 5 pixels - is there a way to mediate the problem to satisfy all three browsers?
You could determine your browser, and depending on your browser you can add a class to your <body>. Then you can define separate css rules for the different browsers. For instance, if your browser is safari and safari is the class, then:
body.safari #line {
/*...*/
}
and so on with the other browsers as well.
EDIT:
In php you can use get_browser() in a function to determine the browser.
In Javascript the value you are looking after is navigator.appName.
I am working website designing as well as developing I have facing following problem please help me...!!!
I have three tabs Its woking perfectly on IE9, Firefox, Chrome, Safari and Opera.
I use CSS3 only & I dont want any scripting language & want to work perfectly on all browser help me...
u can see here also
My Html Code :
<article class="tabs">
<section id="tab1">
<h2>Tab 1</h2>
<p>This content appears on tab 1.</p>
</section>
<section id="tab2">
<h2>Tab 2</h2>
<p>This content appears on tab 2.</p>
</section>
<section id="tab3">
<h2>Tab 3</h2>
<p>This content appears on tab 3.</p>
</section>
</article>
& my css code is :
article.tabs
{
position: relative;
display: block;
width: 40em;
height: 15em;
margin: 2em auto;
}
article.tabs section
{
position: absolute;
display: block;
top: 1.8em;
left: 0;
height: 12em;
padding: 10px 20px;
background-color: #ddd;
border-radius: 5px;
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
z-index: 0;
}
article.tabs section:first-child
{
z-index: 1;
}
article.tabs section h2
{
position: absolute;
font-size: 1em;
font-weight: normal;
width: 120px;
height: 1.8em;
top: -1.8em;
left: 10px;
padding: 0;
margin: 0;
color: #999;
background-color: #ddd;
border-radius: 5px 5px 0 0;
}
article.tabs section:nth-child(2) h2
{
left: 132px;
}
article.tabs section:nth-child(3) h2
{
left: 254px;
}
article.tabs section h2 a
{
display: block;
width: 100%;
line-height: 1.8em;
text-align: center;
text-decoration: none;
color: inherit;
outline: 0 none;
}
article.tabs section:target,
article.tabs section:target h2
{
color: #333;
background-color: #fff;
z-index: 2;
}
article.tabs section,
article.tabs section h2
{
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
thanks in advance...!!
The problem here is that you're using browser features that aren't supported in IE7/8.
:first-child is not available in IE7.
:nth-child() is not available in either IE7 or IE8.
:target is not available in IE7 or IE8.
transition is not available until IE10.
box-shadow, border-radius and rgba() colors are not supported in IE8 or earlier.
And most importantly of all, you're using HTML5 tags like section and article, which are not supported in IE8 and earlier.
Most of these points can be resolved with polyfill scripts, but since you stated that you don't want to use any scripts, then unfortunately you're a bit stuck.
Some things you can get around by simply using an older-style alternative if you really really don't want to use any scripts (eg use div tags instead of section and article), but the main point of your code is to provide a tabbing interface using CSS :target to switch tabs, and the short answer is that this is not going to work in IE8 or earlier, and I don't know of any non-scripting alternative.
So I think the real point here is that if you want to support IE7/8, you have to use some javascript code.
You can use polyfill scripts to back-port the CSS/HTML5 features you're using, which will mean that newer browsers that do support those features won't have to use the scripts, but older browsers will need them. Sorry about that.
More about Polyfills:
"Polyfill script" is a generic term for a wide range of javascript libraries that have been written specifically to give older browsers support for newer features (mostly they're aiming at old IE versions).
Each polyfill script is written to support specific browser features, so for code like yours, you may need several polyfills in order to get complete feature parity. However, in some cases, for the less important features, you may just want to leave it so that old IE versions don't get all the features -- eg border-radius is nice, but it won't break the site if it isn't support.
Some polyfills that will definitely help you:
Selectivizr -- adds support for CSS3 selectors like :nth-child(), :target, etc.
Modernizr -- adds support for HTML5 elements, and provides a feature detection framework for using other polyfills.
CSS3Pie -- adds support for border-radius, box-shadow and more.
There is also a big list of polyfill scripts listed here. Feel free to browse through the list and pick the ones you feel are most useful.
The one important thing to remember about all polyfills is that they are not official parts of the browser; they're just little JS libraries that someone has written. This means that they are not guaranteed to work 100%. They may solve the problem for the author, but may also have missing features or gaps in their functionality compared with the real feature in a modern browser. They may also slow things down and clash with each other (especially if you use several of them).
Again, you're going to have to live with this, because that's the nature of how things are when you want to support modern browser features in old browsers. There are limits to what can be done to add features to old browsers.
Ultimately, if you really need to work with modern features, you may need to stop supporting some older browsers entirely -- particularly IE7.
In my page layout I have two <div> tags. One, with id #image-panel and the other with #image-content-panel.
The two <div>s are stacked on top of each other using position: absolute. #image-content-panel (has higher z-index) is on top of #image-panel.
Both <div>s have background: transparent.
The page renders fine in Chrome, Safari, and Firefox i.e. I can see the image through the text (heading and paragraph etc.). But in IE (version 8) #image-content-panel is being redered with a white background.
You can see screenshots below:
Rendering in Crome, Safari, Mozilla
Rendering in IE 8
Relevant CSS and HTML code :
HTML Code
CSS Code
I'd like the page to render same in IE too.
Any help is appreciated.
Please propose an Alternative solution too if this can't be fixed.
UPDATE
The Jquery Cycle Plugin will add a background colour to elements in older versions of IE.
You need to set the cleartypeNoBg option to true in your Cycle initialisation.
$("#image-content-panel").cycle({
fx : 'scrollRight',
speed : 2700,
cleartypeNoBg: true
});
EDIT The below is not relevent
IE8 doesn't support rgba values and will fallback to a solid colour. If you don't define a fallback it will default to white which is what you are seeing.
There's a couple of ways to handle this.
1. Accept IE8's limitations.
#header {
z-index: 100 !important;
width: 100%;
height: 50px;
background: rgb(0,0,0);
background: rgba(0,0,0,0.6);
margin: 10px 0 0 0;
}
#header will have a solid black background in browsers that don;t support rgba. Semi opaque in browsers that do.
2.Use a filter
#header {
z-index: 100 !important;
width: 100%;
height: 50px;
background: rgba(0,0,0,0.6);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"
margin: 10px 0 0 0;
}
#header will have 60% transparent black background in IE8 and proper browsers. Personally, I hate using filters. They make your markup hideous and are difficult to maintain unless you are excellent at converting rgb to hex codes in your head (which I'm not). Also, this particular filter is IE8+. It will not work in IE7, though there are other filters that will work in IE6-7. You should also probably separate this out in to an IE8 specific stylesheet or use some other method to prevent IE9 from using the filter as IE9 supports rgba.
3.Use a 1px x 1px black, semi-transparent .png
#header {
z-index: 100 !important;
width: 100%;
height: 50px;
background: url(background.png) repeat;
margin: 10px 0 0 0;
}
This is the route I usually go down simply because it's simple. It takes seconds to create a .png if you need to change the alpha and you don't need to worry about browser inconsistencies.
As others have said, IE8 doesn't support RGBA colour values.
There is a hack you can use to work around this though: I recommend trying out CSS3Pie on your site; it implements a number of modern CSS features into old versions of IE, including RGBA colours in backgrounds.
Hope that helps.
For some reason I cannot display the dropdown menu on IE when I add a z-index in the header of any number. When I remove it, it works. However the dropdown then appears behind the container and content in Firefox and Chrome. So either I take it out or leave it in, I cant seem to satisfy all browsers. So i tried making a separate IE stylesheet without the z-index but that doesnt work either. I know the separate IE CSS is working because I changed the backgrounds but it uses the dropdown menu in the master stylesheet.
Website is www.stingrayimages.ca
Thank you for your help
Edit: So lets just say i got it all to work on IE since its always IE that gives the problems. But now the dropdown menu appears behind the content on other browsers like firefox and chrome. All i did was remove the z-index in the #head div. Anyway to fix the dropdown menu without adding z-index to the head div?
Edit: I got the dropdown to work on IE9 firefox and chrome. Not IE 6, it just blew up.
#head {
position:relative;
height: 140px;
width: 100%;
background: #FFF;
filter:alpha(opacity=93);
padding-top:20px;
/* CSS3 standard */
opacity:0.93;
-moz-box-shadow: 0 0 5px black;
-webkit-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
z-index:1;
}
OK so I had a look and there's good news and bad ;)
the opacity filter in the #head div means that overflow: hidden is being triggered, which is why no menus (it's the unfortunate side effect of filters and overflow I'm afraid).. remove that and you can have your z-index which you need anyway
next to get the transparency (opacity) for your dropdowns you can just use rgba(255,255,255,0.9) on the #nav ul li ul rule instead of #fff; (though leave #fff before that rule for fallback for browsers that can't do rgba() yet.. read more!)
That's nearly everyone happy - now you can also do rgba() transparency for IE using the gradient filter..
so the rule I landed up with looked like this (in an IE conditional comment):
#nav ul li ul {
zoom: 1;
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF); /* IE6 & 7 */
/* behavior: url(PIE.htc);*/ /* yuk filter */
}
and I thought it would be good to go..
BUT the Bad News
the behavior is commented out because you can only have one or the other, transparency or rounded corners, :( apparently
I didn't do too much research though so YMMV
I also noticed a problem or three in IE7, not sure if you want to support that but in case you do.. or want to check my final code which got it to this stage I pasted it in PasteBin
that code replaces your main CSS - the #head rule and whole /*navigation*/ section
Update: more good news and a little bad!
you can have the transparency and the rounded corners thanks to CSS3 PIE's own -pie-background property, but not the box shadow as well, the way PIE deals with box shadow means it fills the div instead of just drawing on the outside so the -pie-background reading of the rgba background is transparent but shows the grey color used for the shadow!
My solution:
I added a border to make up for loss of box-shadow, it's not looking too bad, and it's working across IE's ;)
here's an update to the I conditional comment above:
<!--[if lte IE 9]>
<style type="text/css" media="screen">
#nav ul li ul {
box-shadow: none;
-pie-background: rgba(255,255,255,0.9);
border: 3px double #eee;
border-width: 0 3px 3px 3px;
behavior: url(PIE.htc); /* yuk filter */
}
</style>
<![endif]-->
I am not sure which version of IE you are having a problem with but I tried in IE6 and IE7 and the menu system is completely broken. I don't have IE8, 9 or 10 here to test but I'll take a guess at a solution nonetheless!
If you add a z-index and position to the #container as well, it should solve your problem. z-index only applies to positioned elements.
#container {
position:relative;
z-index:0;
}
It is also worth reading Overlapping and z-index, which summarises the properties and also describes the problems when using z-index and IE.
Edit: Wow, I did not realise what was wrong until I found a machine with IE8 on it. I think you have misunderstood the standard CSS and IE specific CSS principle slightly. The IE specific CSS file(s) should only contain the properties that are different to the standard ones. Your ie-style.css file contains duplicates of all the rules and is being included for all versions of IE. IE8 is much more standards compliant than IE6/7 and you should rarely have to override CSS for that version.
So IE will have multiple copies of the same style being applied. Under normal circumstances most browsers can cope with this duplication, however one of the duplicates is the IE specific filter property.
You have filter:alpha(opacity=93); in both style.css and ie-style.css even though it should really only belong in an IE6/7 CSS file as IE8 filters work differently. If you remove the filter from both stylesheets then the menu correctly displays in IE8.
If you need the opacity to work in IE6 or IE7, I suggest creating a specific CSS file for those browsers and using conditional comments to include it just for those versions.
Have a look at this solution : http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/
Another solution that I used already is quite easy, but a pain in the *. You must all the parent container a specific lower z-index value than the one you want to show on top of the others.
Like so :
<parent>//z-index 1
<child>//zindex 2
<yourdropdown>//z-index3
Update 1
The menu didn't show correctly in my chrome so I fixed the #head z-index to 80 and it did way better. Do the following to get the layout the same in IE and Chrome and Firefox. Watch out though, I only tested those change on the homepage.
Add this to the .conbox class :
.conbox {
position:relative;
}
Place the logo correctly
#logo {
position:absolute;
left:0px;
top:0px;
}
Remove the #nav positioning
#nav {
margin-top:80px;
z-index:3;
}
The problem is, I can't even see any effect on the menu mouseover in IE!!
Setting z-index: -1 for elements that menu overlays and z index of men div resolved this problem for me.
#bodyWrapper
{
background: none repeat scroll 0 0 #E4F7FE;
overflow: hidden;
position: relative;
width: 100%;
padding: 0 0 60px;
z-index: -1;
}
Ok so heres the deal. I have a page I'm creating in html and css. I've got a div whose background needs to be transparent.
However when I use opacity: .6; Everything in the div goes see through.
Is there any way to fix this so it works in safari, IE, and firefox?
No, there's no real way to fix this problem (though you can in CSS3). There are two possible approaches:
1) Use a transparent png background rather than doing it with CSS (with hacks for IE6 which doesn't allow transparent pngs)
2) Use two separate divs, and use absolute positioning to position one over the top of the other. This requires knowing certain dimensions, so may not always apply, but may work in your situation.
.outer {
position: relative
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000; /* Or whatever */
opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=60);
}
<div class="outer">
<div class="background"></div>
Content
</div>
Note that sometimes the height: 100% rule for .background doesn't work in IE 6, in which case you should try applying hasLayout to first .outer, and if that fails to .background as well (you can add hasLayout with the CSS rule zoom: 1 without side-effect). If neither of those works, you'll likely need an expression value for IE 6. If you need further help leave a comment.
As smerriman said, it's much simpler in browsers which support CSS3 (more specifically, rgba or hsla color values). It would be as simple as background-color: rgba(0, 0, 0, 0.6).
Just use transparent image as a background for that element. When you use opacity in css for a given element, everything in that element and including that element receives that styling. Look here:
http://jsfiddle.net/zV4BR/
you should use both
opacity in css and
filter:alpha(opacity=60);
for ie and stuff
use this method
How to give cross browser transparency to element's background only?
use Rgba instead opacity. see example here: http://jsfiddle.net/ypaTH/
you will have to set background on inner elements also.
Edit: to make rgab code for IE use this http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/
it should be
opacity:0.6
beside that opacity works differently depending which web browser you use