I am using the Bootstrap Carousel on my site - everything is working as expected - only Firefox is making trouble.
The .carousel-inner is only shown when I set:
.carousel-inner{
overflow:visible;
width:auto;
}
But now the scrollbars are showing up in every other browser, when the animation is running.
Keeping it like
.carousel-inner{
overflow:hidden;
width:auto;
}
will hide the scrollbars, but the whole div gets positioned to the right somehow in FF.
Where is my error, where did I mess up, or is this a FF positioning bug?
The cause of the problem in Firefox is this:
.carousel {
margin: -1px 0 0 -1px;
}
Specifically, the negative margin-top.
Related
I am setting my div's margin and width, all margin and width are showing properly in Firefox and Internet Explorer. However, Google Chrome it's not working.
If I INSPECT the page in Chrome and adjusting my margin, then it shows effect but if I update my CSS then it does not work.
I am also using -webkit-margin-start: 44px; but nothing is working .
my CSS is as follows : -
#main {
position:relative;
width:1200px !important;
min-height:800px;
margin:44px auto;
top: 7px;
left: 2px;
-webkit-margin-start: 44px;
}
any suggestions, also it is not working in this #media screen and (-webkit-min-device-pixel-ratio:0) { if i declare margin ...
screen shots as follows :-
for chrome
for Firefox
Thanks in advance.
chrome version : 62.0.3202.62
As i said in my comment, you use margin:44px auto which means margin-top:44px margin-right:auto margin-bottom:44px margin-left:auto . But -webkit-margin-start:44px is refering to margin-left
margin-top is -webkit-margin-before. BUT this refers mostly to text margin and it's depending on the writing-mode,direction and text-orientation, as you can see here margin dev moz or you can search SO for similar questions
Your code seems to work ( see snippet below ). The only problem i see there is that you use position and margin. ( top,left + margin ) . I suggest you either use position either margin. For example, don't use top:7px but instead use margin:51px auto 44px ( if you want to keep the bottom margin as 44px ).
Without anymore code from you, there is nothing else we can do. If the problem persists, please add a working snippet that replicates your problem
I changed in the code below the webkit-margin-start with webkit-margin-before as explained before
#main {
position:relative;
width:1200px !important;
min-height:800px;
margin:44px auto;
top: 7px;
left: 2px;
-webkit-margin-before: 44px;
background:red;
}
body { margin:0}
<div id="main">
</div>
I'm using an accordion slide in my site and I've noticed that on IE and Firefox I get a weird gap of 20 pixels at the top of the slider.
I've checked the CSS back to back for some padding to the UL or the LI or even the slider itself but couldn't find any. It works perfectly on Chrome.
Read many post suggesting this to adjust the line-height but it didn't work for me.
How can I resolve this issue?
http://www.rom.guywalderonline.com
TRY THIS>>>
#slider {
height: 0px; /*IMPORTANT*/
background: url('../images/romold.jpg') top right no-repeat;
background-color: #434749;
}
This 100% works, if you have any problems please comment back....
If you add the following code to your template css file, it willl remove the gap:
#slider .row-fluid [class*="span"] {
min-height: 0px !important;
}
This footer stays put in Chrome, how can I rewrite the HTML or CSS to make it stay the same in Firefox?
http://goo.gl/rAbH6
Like, when I visit the page in Chrome and then zoom out, the footer stays at the bottom of the screen, but when I visit the same page in Firefox and try zooming out the footer won't stay in the right place.
You'll see what I mean if you try visiting the page.
Anyone knows?
Kind regards
Pongy
You're problem is right here with your code.
#footer {
height:40px;
position:absolute;
overflow:hidden;
background:url(images/bottombar.png) repeat-x 0 0;
position:relative;
margin-top:400px;
}
As you can see, you've told it to be absolute and relative, so you're duplicating code for no reason and margin-top with 400px; so no matter how much you zoom in or out, you've told it to remain explicitly in that position. Whereas you should have the following code:
#footer {
height:40px;
position:absolute;
overflow:hidden;
background:url(images/bottombar.png) repeat-x 0 0;
top:100%;
margin-top:-40px;
}
So now we're telling it to go from the top, down to the bottom of the page, with a height of 40px, so we're now displaying it outside of the document itself, so then we margin-top it back in to place, which is the 40px of height we assigned.#
Very strange behavior that I haven't seen before.
I have a fixed position div that has a transparent png background image. The z-index is set to -1 so that content can scroll over the fixed image with the scrollbars.
I have it positioned with the bottom and right at 0px, but the image overlaps the scrollbars (on FF and Safari, anyway.)
Here's the link:
http://adamjcas.www59.a2hosting.com/pg/show/id/4
CSS:
#plants /*for the cut paper plants in the background*/
{
background: transparent url(../background_images/plants.png) no-repeat;
bottom:0px;
right:0px;
z-index: -1;
position:fixed;
height:691px;
width:475px;
}
One hack I used was to use
right: 16px;
Which worked fine, as there is always (probably) a right scrollbar. But the bottom scroll is only sometimes there. Is this a simple CSS issue?
That was a strange issue. But I figured out that the scroll bar was not from the browser but instead from the parent div which had overflow: auto.
This is how I fixed that. Change the style for div id="rightpanel" to remove the overflow: auto;.
Then update the #rightcontent styles as follows:
#rightcontent {
left: 445px;
padding-top: 127px;
position: relative;
width: 650px;
}
Hopefully that should fix the issue for all browsers. Besides that I also found the browsers complaining about not finding Cufon.js. You might want to look into that as well.
Right now, the portfolio section of my website has the top three images showing properly. But in the Opera browser, it "crops" the top and bottom of the rest of the images, leaving only the very middle of each of the images to show. All of the other browsers show every picture in the portfolio section properly. I've tried messing with the margin and padding on the pictures with no luck. If anyone can help me figure out what is going on, I would surely appreciate it! =] Click here to get to the website.
#portfolio {
overflow: auto;
display: block !important; /* aren't we kind… */
display: inline-block; /* …to IE6 :p */
}
#portfolio a {
float: left;
margin: 3px;
}
Try:
#portfolio a.cboxElement{
display:block;
float:left;
border:3px solid #fff;
}
To answer the "Why?" part of your question, it looks like there's a bug in the browser that's triggered by opacity on some inline elements. Setting the display mode to block will work around it.
Also: which version of Opera are you using?