I have this problem:
As you can see that my popup is not hiding the two buttons which are displayed on the page on IE9 but works fine on Mozilla. I have this on my CSS styles on that toggle button:
.Test.toggle-button {
background-image: url("../../../images/expand16.gif");
background-position: left top;
background-repeat: no-repeat;
float: left;
height: 30px;
margin-left: 10px;
padding-left: 18px;
white-space: nowrap;
width: 20%;
}
This is how my HTML looks like:
<div class="pay-instruction-labels">
<div class="pay-instruction-title">
Payment Instructions:
</div>
<span class="current-details toggle-button">Current</span>
<span class="prior-years-details toggle-button">Prior Years</span>
<div class="pay-instruction-fields">
What is going wrong here?
Could be a z-index issue. Can you try giving your popup container element position:relative and a z-index:9999 ?
This might be a native rendering issue: IE9 uses Windows buttons; these are rendered by Windows outside of the normal HTML renderer.
Try to replace the buttons with something that just looks like a button (for example a link that is styled with an image).
It was a position: relative fault. Fixed it, it worked. Thanks everyone :)
Related
When you scroll with the mouse wheel in Windows 8 the fixed background image bounces around like crazy. This only affects IE 10 and IE 11. This affects elements with position:fixed as well.
Here is an example with a fixed background-image:
http://www.catcubed.com/test/bg-img-fixed.html
Here is example code:
#section{
position: fixed;
top:0;
left:0;
background-color:#eee;
background-position: top left;
background-image: url("images/7.png");
background-size: auto;
background-repeat: no-repeat;
z-index: 10;
}
Is there a solution to keep the background still in IE 10 and 11?
I know it is a bit late for an answer but I've had the same problem and was able to fix it by adding these attributes to my css file
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
}
From the comments:
This solution stops scroll events from firing on the window, so do be careful if you're using anything that relies on such events firing. codepen.io/anon/pen/VawZEV?editors=1111 ( overflow: hidden, scroll events don't work) codepen.io/anon/pen/PNoYXY?editors=1111 ( overflow: auto, scroll events fire) - Dan Abrey
So this might cause some problems in your projects. But I don't see another way to workaround this bug in IE.
This looks like a z-index bug, try adding z-index: 1.
Looking into this, I've found the best way to debug is to:
Create a simple element at the top of the page, e.g.
<style>#test {position: fixed; background: red; top: 0; left: 0; width: 4em}</style>
<div id="test">Test</div>
In all the above cases, this works correctly, and the scroll is smooth. So this proves it can be done! Now slowly add your properties back in, until you are able to get the element with position fixed to work in the context of your site.
I then found that adding a z-index to the fixed items resolved the issue. (e.g. z-index: 1)
I also discovered that once a position is set on a child element, the bug presents it's self from that point down/onwards.
So you need to ensure none of the child elements have a position set,
or if they do, you explicitly set a position on each child.
E.g.
<!-- Works -->
<div style="position: fixed;">
<div>Nice</div>
<div>Wicked</div>
<div>Cool</div>
</div>
<!-- Element with position: relative, experiences the bug -->
<div style="position: fixed;">
<div style="position: relative;">sad</div>
<div>sad</div>
<div style="position: fixed;">happy</div>
</div>
It's fixable, but will require some tweaking!
Here is a workaround (tested on Windows 8.1):
Move the "background" CSS property to the BODY element. Currently it is on the DIV element with id="filler". Here is the resulting CSS:
body {
font-family: Helvetica, Arial, sans-serif;
background: #fff url(blue-kitty.jpg) no-repeat fixed center 100px;
}
#filler {
text-align: center;
}
.big-margin {
margin-top: 500px;
}
try to turn off smooth scrolling option.
Internet Options - Advenced Tab - Use Smooth Scrolling
it's like rendering bug.... MS IE team is investigating....
just simply define body container to relative.
<style>
body
{
position: relative;
}
</style>
The fix in my case was to simply remove the z-index property from the element that has position:fixed, IE then stopped the strange flickering.
(disabling smooth scrolling on IE options worked while having he z-index property but that's not a solution since users would most likely have it on by default).
I have been trying to center a Navigation bar on my Vbulletin website for a few days now. I've tried changing the parent class, the child class, manually inserting CSS in the html element, but it seems that something is overriding the style somewhere. Firebug does not seem to identify the problem for me.
Link to the forum: http://www.mobileassaultgroup.co.uk/forum/
The navbar is just underneath the banner image.
I have tried
display: block-inline
margin-left: 50%;
margin-right: 50%;
horizontal-position: middle;
On both the <ul> and <div> to no avail; it just sticks there slightly off to the left.
It is not the search bar on the right hand side either as I deleted that from the page and it still stays on that position.
Any ideas?
Thanks
Something like this will work if you remove the search box.
CSS:
#navtabs_container {
display: block;
width: 600px;
margin: auto;
}
#vbtab_forum ul {
left: 50%;
margin-left: -260px;
}
This css of yours won't work. This this instead.
http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
I'm trying to show an image when another image is hovered on. All works fine with Safari, but with Chrome and Firefox, the effect works and the image placeholder can be seen, but they fail to load the image. I have searched elsewhere and found topics to do with visibility:hidden etc, but none that deal with this issue cross-browser.
Here's the HTML:
<div class="profile-picture-wrap">
<a class="propic">
<img src="../images/propicsmall.jpg" width="142" height="194">
<span><img src="../images/profilepic.jpg" width="290" height="186" /></span></a>
</div>
And here's the CSS:
.propic span{
position:absolute;
padding: 5px;
top: 10px;
left: 10px;
display: none;
color: black;
text-decoration: none;
}
.profile-picture-wrap:hover .propic span{
display: block;
position:absolute;
top: -3px;
right: 900px;
left: 640px;
}
Really appreciate any help, thanks.
I tried out your sample code ... and it appears to work fine in Chrome, after one small edit.
I had to change your paths from ../images/image.jpg to images/image.jpg
Have you used the developer tools in Chrome to see if the resource (image) was loading properly?
I added z-index to .propic span css & change the left & right of span after hover to see it properly in jsfiddle window.
Check it here: http://jsfiddle.net/UH54X/1/
I am not sure that it will help you. I think you want like this only.
Turns out the images were .tiff files that had been renamed to .jpg. Chrome & Firefox don't seem to like this, and refused to recognise them as retrievable files.
I have got some markup that looks like this:
<div class="button">
<span class="image"></span>
<input type="submit" value="Test button">
</div>
The CSS:
.button{
background: url('http://img33.imageshack.us/img33/4108/leftd.png');
width: 10px;
display: inline-block;
height: 15px;
}
.image{
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
background: url('http://img339.imageshack.us/img339/3112/arrow090.png');
margin-left: 13px;
}
.button input{
background: url('http://img853.imageshack.us/img853/7212/righthw.png');
border: 0;
display: block;
font: 11px sans-serif;
margin-left: 10px;
padding-left: 23px;
padding-right: 10px;
color: #FFFFFF;
width: auto;
height: 15px;
}
The code for the submit button is generated by the backend which I cannot change, but the spans and divs are editable as they are part of the template. I have made a simple example using simple graphics to show the issue better: http://jsfiddle.net/UBS3z/
The div holds the left part of the sliding door and is about 10 px wide. The span holds an icon to be placed to the left of the text. Finally we have the submit button itself.
The problem is that while visually, it looks fine, the button does not register any clicks when the user clicks on the left sliding door or the area where the image is over. This is extremely bad as a huge chunk of the button is unclickable! This is demonstrated by clicking on the button. The script will log to the console if a click has been registered.
Is there anyway to make those areas clickable using CSS? I think this might be possible to solve using Javascript, but I would prefer a CSS solution.
See fiddle for code and demo
Fiddle: http://jsfiddle.net/UBS3z/6/
Demo: http://jsfiddle.net/UBS3z/6/embedded/result/
Yes you are correct it is possible using css only see the demo for your requirement.
I ended up using a javascript solution. While Dinesh's solution would work too, but background image is very complicated, so I need to use an image instead of a background color. This is the root cause of the issue.
Essentially, I just wrote a simple script to hook onto the button div and make any clicks on that submit the form.
I've got a div called titlebar. This titlebar has a width of 100%. Inside my titlebar I want to center a title and next to my title I want to display an icon. So the title + icon combo should lay next to each other AND be centered.
This should not be that difficult, but the problem is that I'm using image-sprites, so I can't use the <img>-tag (I need the icon to be the background of some element).
Anyone got an idea of how to solve this?
This is about as far as I've come (no real success):
http://jsfiddle.net/Tw33Y/2/
This is fairly easy to achieve in modern browsers. If this is your HTML:
<div class="titlebar">
<div class="title-sprite"></div>
Title Text
</div>
Then use this CSS to style it:
.titlebar {
text-align: center;
}
.title-sprite {
display: inline-block;
width: 16px;
height: 16px;
background: url(http://www.alistapart.com/d/sprites/sprites.gif) -36px -24px no-repeat;
}
This will not work in IE7 or earlier, you will need to add some hacks if you need them to work.