I have made a pricing table not using <table> tags but with <div> tags.Its is working perfectly in Firefox but not working properly in chrome.When you hover a div in chrome some how the z-index property don't work.Here's the fiddle for it
http://jsfiddle.net/JmLRe/
Here is the image when not hovered or in normal state.
Here when it is hovered in Firefox.
But here where the problem lies in chrome.
Please tell me what i am doing wrong in css.
The solution by James isn't really working well for me. It only fixes the premium section.
Adding a position: relative; to .table-item:hover seems to work for all sections:
.table-item:hover{
position:relative; /* Added this */
transform:scale(1.08);
-webkit-transform:scale(1.08);
z-index: 1;
}
Try this
#premium:hover{
position:relative;
z-index: 1;
}
Related
This problem is only with chrome.
http://jsfiddle.net/3ew5o6as/
Basically, when you hover the .tile, it should show the .caption below. It works out fine, but it wont return to its original state as it should. If you look closely, it shows about 1-2 pixels after mouseout.
What I seemed to have noticed is that the problem disappears whenever I remove the translate:transform on the .wrap or whenever I remove the line-height:50px on .caption
Any suggestions?
For different zoom levels, sometimes the values of transform and absolute positioning don't quite match up. To fix this, you can just add a 1px 'margin of error' to the bottom:
.tile .caption {
...
bottom: -51px;
....
}
See fiddle:
http://jsfiddle.net/jeremyblalock/3ew5o6as/1/
I've spent a few good hours debugging myself, and a few good hours researching but nothing seems to be solving my problem. I have a caption in my header that is supposed to be cut-off at the bottom, which looks fine in Safari and Chrome, but in Firefox it is positioned much higher:
First window: Firefox
Second window: Safari (chrome renders the same)
I spent about an hour and a half changing everything around in my CSS thinking it had to do with other elements around it, but made no progress. Finally I decided to make an extremely simplified version to see what the problem is:
First window: Firefox
Second window: Safari (chrome renders the same)
Same exact thing. I have a CSS reset applied so that is not the problem. I've tried setting the line-height, but that didn't fix it. I've tried every value for the CSS display property. Nothing is fixing this.
HTML/CSS for test example above:
<div class="test">
<h1>Test</h1>
</div>
.test {
margin: 0;
padding: 0;
width: 100%;
height: 185px;
line-height: 185px;
border: 1px solid red;
}
.test h1 {
font-size: 12em;
}
My website can be viewed at samrapdev.com.
Quick link to CSS stylesheet
In short, I need to figure out how to get both browsers to display the text at exactly the same height
Try and specify a font-family in your stylesheet though it's not pixel perfect
#header .youAreHere h1
{
...
line-height:1;
}
line-height must be set on h1, unless you have something like
* {line-height:inherit;}
Even if you take a webfont and define the line-height of your element you can have variations due to the line-heights of the other elements.
What works for me is to define the line-height of the body on the top of using a webfont.
Also do not forget to reset margins and paddings for all elements you're using. A good trick is to use a reset.css before your actual style sheet (you can find some at http://www.cssreset.com/)
body{
line-height: 1;
}
I'm designing a clickable panel for an html app which contains multiple text elements and images.
From what I understand this is generally done with a div. Something like this:
<div class="myButton">
<h2>Text</h2>
<h3>Some more text</h3>
<img ...>
</div>
With a bit of styling and hooking up the click event this works fine but I am having problem with styling the active state:
.myButton {
cursor:pointer;
}
.myButton:active{
-ms-transition-duration: 0.2s;
-ms-transform: scale(0.95);
}
In this example I'm trying to do a css animation (IE only) but this could really be anything.
The problem is that the active state only works when I click on the div but doesn't work when I click on any of the children of the div.
Here is a JS Fiddle to show the scenario:
http://jsfiddle.net/S9JrH/13/
UPDATE: Thanks to David Thomas for pointing out a typo in the code and confirming that this works in Chrome.
Unfortunately, in IE10 this only works when you click on the lower part of the div, away from the text.
Does anyone know how to get this working properly in IE10?
Currently not possible (I think)
From what I can gather, this is currently not possible as the :active state of a child is not propagated up to the parent div. Both Internet Explorer 10 and Opera 11.64 failed to propagate the :active state up to the parent when testing with div elements.
Fiddle: http://jsfiddle.net/jonathansampson/UrN39/
Workaround
The only other solution that comes to mind would be to use event propagation in JavaScript. Fortunately the events of a mousedown will propagate up on the DOM, and onto the parent div. The following example utilizes jQuery:
$(".myButton").on("mousedown mouseup mouseleave", function(e){
$(this).toggleClass( "active", e.type === "mousedown" );
});
Note here that I have modified the :active pseudo-class to be an actual class .active. This has been tested in IE10 and works. Given the approach, it should work without any problem in just about every major browser.
Fiddle: http://jsfiddle.net/jonathansampson/S9JrH/8/
Why don't you use HTML <button> element. It's created for your case. Div doesn't take focus, while button gets.
You can use the CSS pointer-events: none; on a child element that you would like to disregard mouse events and it will bubble up appropriately to its parent.
I overlay the the element using :after so that children are not clickable.
.myButton:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
opacity: 0;
filter: alpha(opacity=0);
}
.myButton:active, .myButton *:active{
-ms-transition-duration: 0.2s;
-ms-transform: scale(0.95);
}
I will be honest I have no idea if you can use *:pseudo-selector in IE but chrome you can so it's worth a shot.
I have made 3 screenshots to explain it, please see all 3 and then click on my last link:
As you can see, Chrome is pushing element #4 (class=".newsline2") down.
Firefox & IE9 display this flawlessly.
How can I fix this issue?
Try adding this:
.newsline2 { position: absolute; right:0; top:0; }
instead of float:right that you're currently using.
When the element is absolute it needs proper width and height along with top-bottom-left-right positions. Add height: 16px instead of auto. It will work in Chrome too.
Add height to CSS rule ".contentContainer h2" as follows
.contentContainer h2 {
height: 16px;
...
...
}
I just noticed that in IE9 and IE8 (not in IE7) the padding around my links is not being considered part of the link (it's not clickable and my hover effects aren't being applied when it's hovered over). Only the text part of the link is working.
I tried giving the element a background color but that didn't fix it.
Has anyone seen this before?
SOLVED: Wrote a huge edit to my question and in the process figured it out myself.
I had a negative z-index on the body, which I definitely didn't know would cause this but apparently it does. Here's the jsfiddle: http://jsfiddle.net/CEbMe/ which shows the problem in IE9 and IE8
Try adding:
<style>
a { display: inline-block; padding: 0 50px; background: yellow; }
</style>
<p>This is a link with some text around it</p>
None of the suggested answers fixed it for me, and I spent a few hours finding the answer:
http://haslayout.net/css/Partial-Click-Bug-v2
background-image: url(#);
fixes it. I imagine this would probably do the job too:
background-color: transparent;