Double images in IE8 - internet-explorer-8

I have a rendering issue in IE8 where double images are being displayed. This is the page in question http://www.salterkitchenscales.co.uk/kitchen-scales/
I have read else where that it could be the closing of tags in the wrong order. I don't think that it's the case here.
Could anyone perhaps point me in the right direction?
Page renders OK in Firefox and Chrome.
Thanks in advance.
Simon

try changing your product_thumb_bg class in your css, remove the width and height :
.products_thumb_bg {
/* show product image as background */
float: left;
margin: 10px 0px;
}

Related

trying to center images in a sidebar

enter link description here
this is the site in question, the div that I am trying to target?
img.side-class is the selector , and ideas ?
Easiest way to get it in the middle of that div is
img.side-class {
margin-left: 12px;
}

Magento Homepage blank space under main slider

I cant find any related solution to my problem here on stack over flow but here we go. i have checked footer space and marked related module with zero spacing for slide but still it is not working.
Please see www.sateeni.com and under main homepage slider i have some unwanted space and don't know why its there. Please need help to find out why and where the problem is. sorry if its very basic thing but i am new to magento so cant figure out the reason. I have tried all options but no luck.
Thanks in advance.
Adam
Your main content container is showing and even though it is empty, the CSS has padding and a minimum height:
.main {
padding: 20px 0;
min-height: 370px;
}
You can either use CSS to overwrite this min-height on the homepage only
.container.full-width {
padding: 0;
min-height: 0;
}
or just hide this element on the homepage only.
.container.full-width {
display: none;
}

nivo slider image Link and IE not working

hi i have been trying for hours to get the image links inside the slider to work in IE 9 they work fine in Chrome can any one help
Yes, This is well-known and documented. I found your question with the same problem, this fixed it for me:
.nivoSlider a {
border:0;
display:block;
background-color: #fff;
filter:alpha(opacity=0);
opacity: 0;
-webkit-opacity:0;
-moz-opacity:0;
-khtml-opacity:0;
}

z-index issue with twitter bootstrap dropdown menu

I'm using twitter bootstrap dropdown menu in a fixed navbar at the top of my page.
It all works fine but am having issues with the drop down menu items showing behind other page elements rather than in front of them.
If I have anything on the page with position: relative (like jquery ui accordion, or a google chart) then the drop down menu shows behind it. Tried changing the z-index of the dd menu and of the nav-bar, but doesn't make any difference.
The only way I can get the menu to sit above the other content is to change the content to position: fixed; OR z-index: -1; -but both of these solutions cause other problems.
Appreciate any help you can give me.
I think this is probably some standard issue with CSS positioning that I've misunderstood, so haven't posted any code, but can do if needed.
Thanks.
Just realized what's going on.
I had the navbar inside a header which was position: fixed;
Changed the z-index on the header and it's working now - guess I didn't look high enough up the containers to set the z-index initially !##!?
Thanks.
IE 7 on windows8 with bootstrap 3.0.0.
.navbar {
position: static;
}
.navbar .nav > li {
z-index: 1001;
}
fixed
Ran into the same bug here. This worked for me.
.navbar {
position: static;
}
By setting the position to static, it means the navbar will fall into the flow of the document as it normally would.
This will fix it
.navbar .nav > li {
z-index: 10000;
}
In my case in addition to z-index I had to set overflow: visible in parents elements
I had the same problem and after reading this topic, I've solved adding this to my CSS:
.navbar-fixed-top {
z-index: 10000;
}
because in my case, I'm using the fixed top menu.
Still the issue with Bootstrap v3, navbar and dropdown have same z-index ;-( I just increased .dropdown-menu z-index to 1001.
Solved by removing the -webkit-transform from the navbar:
-webkit-transform: translate3d(0, 0, 0);
pillaged from https://stackoverflow.com/a/12653766/391925
Just give
position: relative;
z-index: 999;
to the navbar
This fixed it for me:
.navbar-wrapper {
z-index: 11;
}
Solved this issue by removing transform: translateY(50%); property.
This worked for me:
.dropdown, .dropdown-menu {
z-index:2;
}
.navbar {
position: static;
z-index: 1;
}
I had the same problem, in my case because i forgot this in my NavBar style:
overflow: hidden;
I ran into a situation where a button with a Bootstrap drop down was embedded in a DataTables row. In that instance, I had to remove fixedColumns: true in the settings because that was injecting a position: sticky into the element style.
Did not work:
$(document).ready(function () {
var table = $('#order').DataTable({
fixedColumns: true,
fixedHeader: true, ...
Did work:
$(document).ready(function () {
var table = $('#order').DataTable({
fixedHeader: true, ...
I'm late to the party here but for anyone using the bootstrap sticky-top class beware that it's z-index is higher than what is defined for the dropdown so anything within it will bleed through the dropdown's menu.
https://github.com/twbs/bootstrap/issues/31747
This was my scenario and the other answers here that referenced position: sticky put me onto it.
In my case, this was caused because I had a CSS animation with transform operations applied to a parent <div>. I worked around the problem by moving the animation to a different element.

css firebug where is this negative position coming from

i have an element with the following css attributes:
.myElem {
position:absolute;
width: 100%;
top: 25px;
height:6px;
padding: 1px 0px;
}
please see this screen shot i uploaded
when looking at the layout tab of the firebug inspection....i noticed the '-13' at the bottom...where is it from? what does it mean? i did not specify it...why is it showing there? what does it tell me about 'bottom'? or it means something else?
It's show position from bottom in minus if the position from top overlap or more than his parent.
Check this example http://jsfiddle.net/wqrh6/
in this when .myElem position top overlap his parent then the firebug show position from bottom

Resources