I tested on Chrome, Opera, even Internet Explorer, my below css works as expected.
.carousel
{
position:relative;
overflow:hidden;
width:100%;
margin-bottom:0px;
}
.carousel-inner
{
font-size:0;
position:absolute;
width:6882px;
}
.carousel-item
{
background-repeat:no-repeat;
background-position:0px 0px;
display:inline-block;
cursor:pointer;
margin:0px 16px;
}
But when I tested on Firefox, .carousel-inner is not hiding overflowing element.
In order to add the same effect, I need to add float:left to .carousel-inner, which renders width:100% to be ignored.
Is there another work around specific to Firefox?
I tried clear:both with no luck.
Here is jsfiddle example
And image (Chrome, IE, Opera) :
Firefox :
Cheers !
Related
I'm displaying a star after input box using :after. The styles are being rendered differently by different browsers. How can i make this appear similar in all the browsers. Please see this Fiddle in different browsers where in you can see the difference.
You can set width and height for a:after and give custom style to input (to avoid differences in padding, border, etc)
http://jsfiddle.net/omLc9nfe/7/
.a:after{
content:'*';
display:inline-block;
position:absolute;
top:-8px;
right:-8px;
width:8px;
height:8px;
text-align:center;
}
.a{
position: relative;
display:inline-block;
}
input {
border:1px solid #ccc;
margin:0;
padding:2px;
}
i've checked with safari, firefox and chrome.
I am trying to create a semi-responsive header for a website i am building, however i am running into an overflow issue with IE and Firefox. Chrome, however works perfectly.
I have created a JSFIDDLE to demonstrate what i mean.
In chrome, you should see something like this:
However in the same Jsfiddle on Firefox and Chrome, there is no red border on the bottom like this:
One way i tried to fix this was to change my css to this:
.header .header-image {
position: absolute;
overflow: hidden;
top:0;
bottom:1px;
left:0;
right:0;
}
This worked perfectly, BUT left a white space on Google Chrome (above the border and below the image)
What is causing this and how can I fix it and still get my desired effect?
In order to show the red border, just change your header declaration for the .header to be like this one:
.header {
min-width: 1100px;
position:relative;
overflow:hidden;
width: 100%;
height:350px;
border-bottom: 1px solid #FF0000;
}
As you can see I've deleted the "display: table;" declaration and it works fine.
I think it may have something to do with prefixes for Chrome and Firefox.
an example of a prefix is:
Android: -webkit-
Chrome: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
iOS: -webkit-
Opera: -o-
Safari: -webkit-
Yet again Internet Explorer is costing me time and money.
I'm making a responsive site and I'm needing my images to be no more than 100% width of their containing elements, but also no more than a certain percentage height in case they fall off the page.
Some CSS:
#content{
margin:0 auto;
min-width:320px;
max-width:800px;
width:80%;
background-color:green;
}
#featured{
position:relative;
width:100%;
}
#featured-images{
text-align:center;
}
#featured-images img{
max-height:80%;
height:auto !important; /* IE fix */
height:80%; /* IE fix */
max-width:100%;
width:auto !important; /* IE fix */
width:100%; /* IE fix *
}
Some Markup:
<div id="content">
<div id="featured">
<div id="featured-images">
<img src="lib/imgs/fi-1.jpg"/>
</div>
</div>
</div>
Currently, this page works on Chrome. It even works in IE6, and IE8+. I haven't tested it in Firefox or Opera. But IE 7 definitely doesn't play ball. It seems to shrink the image to quite a small degree, as if the browser has been resized to a stump.
I know it's not ideal, but I've been using IE NetRenderer to test.
Its fixed, you can check it here:
<style type="text/css">
#content {
margin:0 auto;
min-width:320px;
max-width:800px;
width:80%;
background-color:green;
}
#featured {
position:relative;
width:100%;
}
#featured-images {
text-align:center;
}
#featured-images img {
max-height:100%;
max-width:100%;
height:auto;
width:auto;
}
</style>
<div id="content">
<div id="featured">
<div id="featured-images">
<img src="https://www.google.co.in/images/srpr/logo4w.png" />
</div>
</div>
</div>
Or here Fiddle http://jsfiddle.net/Fqebe/1/
Cheers!
Internet Explorer Conditional Comment Style Sheet...
http://www.jabcreations.com/web/css/ieccss
Works without JavaScript enabled.
No need for hacks, if IE requires the wrong values (e.g. height/width) instead of what you use then only the versions of IE you need to apply those pseudo-right values to will work.
That will let you keep all the IE-related nastiness out of your main style sheet and you can use a specific IECCSS per version of IE.
I've installed the newest version of Nivo Slider, 3.2, on my website and it works fine in Firefox and Chrome, but in IE8 the slide links do not work. I have searched and tried a bunch of solutions, such as adding to my CSS:
.nivoSlider a, .nivoSlider img {
display: block !important;
}
But that only works on the first image of the slider, the rest of the images do not link to their assigned pages.
My site is here, click "Truck Sales" up top
CSS is here
Thanks for any help!
This is a known issue with nivo slider, add the following css:
.nivoSlider a.nivo-imageLink{
display:none;
filter: alpha(opacity=0);
opacity: 0;
-webkit-opacity:0;
-moz-opacity:0;
-khtml-opacity:0;
opacity: 0;
background-color:#fff;
}
.nivoSlider a.nivo-imageLink img{
display:block!important;
}
It happens because IE has problem rendering an empty <a> without a background.. I've ran into this when a long time ago I wanted to place a link over a flash element. giving it a background and setting opacity to 0 will make it work correctly without harming the design.
This didn't work for me, but I found another solution:
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
background:white;
filter: alpha(opacity=0);
/other than IE/
-moz-opacity:0;
-khtml-opacity:0;
opacity: 0;
line-height: 375px; /*Change this to the height of your image*/
font-size: 0px;
}
.nivoSlider a.nivo-imageLink img{
display:block!important;
}
Now add some text in front of each image link:
TEXT GOES HERE<img src="yourimage.jpg" alt="image" />
It's a little hacky but it does the trick. -Cheers
body
{
padding:0px;
background:#2786f4;
position:relative;
margin:0;
color:#818181;
text-align:center;
}
<!--[if IE]>
<style>
#Right
{
width:202px;
background:#f1f1f1;
padding:8px;
position:absolute;
top:130px;
left:945px;
float:right;
text-align:left;
}
</style>
<![endif]-->
<div id="Right" >
sadlf ljas dfjlsdjflsfjsl a;sldjf ;slfj
</div>
I am facing a positioning problem while creating a HTML. It looks okay in all browsers except Opera.
How it will okay in Opera too ?
You have a conditional comment that only works in IE. In IE, I see a light grey box on the right with the text in it.
All other browsers (Opera, Firefox Chrome) don't see the style for #Right and thus don't apply it. So they just show the grey text at the top.
It's not clear what you want to do, but if you want to hide that text completely from non-IE browsers, move the <div> inside the conditional comment, i.e. before <![endif]-->.