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;
...
...
}
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 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;
}
I have a control that I am trying to highlight when it is selected. I'm achieving this using padding on a div and some positioning so that it surrounds the control. The problem I'm encountering is that the padding on the highlighter div renders differently in chrome and in firefox. Everything I've read says that they render the same so this shouldn't be a problem.
Chrome:
Firefox:
Here's a fiddle that has the problem on it:
http://jsfiddle.net/5fuGB/1/
.control{
position: absolute;
width: 100px;
height: 20px;
top: 30px;
left: 300px;
z-index: 1;
}
.highlighter{
background-color: orange;
position: absolute;
width: 100%;
height:100%;
left: -2px;
top: -2px;
padding-right: 8px;
padding-bottom: 10px;
z-index: -1;
}
input{
width: 100%;
height: 100%;
}
My Chrome Version:
Version 31.0.1650.63 m on Windows 7
My Firefox Version:
25.0 on Windows 7
Thanks for any help you guys can offer.
I believe the difference you are seeing is a difference which comes from the user agent stylesheet, browsers have their own default stylesheets which they use to render things like input elements. In your case it is probably a difference in the padding applied to the input element. You should specifically set eg: padding: 0px; or padding: 1px; on the input element, and then work out how to get it to look right for an input with the specified fixed padding. This will then override the styles set by the user agent style sheet.
Update
I moved to my Windows PC to have a go at fixing it. One way to fix this using one of the vendor specific prefixes from the answer linked in the comments is to add -moz-padding-end: 6px; to .highlighter to compensate for the differences in padding between browsers.
Here's a jsFiddle which fixes your issue, a footnote tho, I can already tell you that this probably won't fix it on Chrome for OSX, which was also rendering things the Firefox way.
Another way to fix this is by adding -moz-padding-start: 1px; -moz-padding-end: 1px; to input, but doing so somehow changes the bottom padding as well, which makes things look not as pretty in Firefox as with the other fix.
I'd go about it differently. Instead of using an extra div, I'd recommend using a combination of border-color and box-shadow on the input's :focus state to achieve the effect you're going for.
Check out this modified fiddle: http://jsfiddle.net/5fuGB/2/
Just experienced the same issue with my code, and fixed it too. The trick is if you use display: inline-block then line-height makes sense. Try it when debugging your code.
You're doing a little more than what's necessary. To get a highlight around that input you can use :focus
So it would be something like this:
CSS
input {
border: 1px solid white;
}
input:focus {
border: 1px solid orange;
}
That will give the input a white "invisible" border so it doesn't move the input when you click into it. It will simply change the border color to orange to get that highlight effect you're looking for.
EDIT
Just saw your comment. I dont have the rep to comment so I'll just add on to this.
If you aren't using the inputs as actual inputs, then I would just make them divs. Inputs render differently by default so that would mess with consistency across browsers.
I'd also recommend experimenting with those divs within one another and making the most outside div relative.
Outside Div <------ position:relative;
Middle Div <------- position: absolute;
Inner div <-------- position: absolute;
Also, if you need a selected state but don't want or are hindered by inputs then I'd recommend jQuery for modifying the css based on user interaction.
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;
}
http://dl.dropbox.com/u/18795563/BLOGDESIGNNEW/index.html
In FireFox, Why is there no margin on the left of the hgroup in the header? It works fine in Chrome and Safari. How do i make it work in FireFox?
I believe the problem is that the hgroup's default display setting is inline. Setting it to block will fix your problem with the margin.
#topheader hgroup {
display:block;
}
This looks like a margin to me.
after inspecting the html code of your page, I figured out the following issue in #topheader hgroup css:
overflow: visible:; Remove the column from the end of visible. i.e. overflow: visible;
Which version of Firefox? Firefox4 DOES show the margin but FF3.x may not because it does not have built-in styles for the new HTML5 elements. You must add 'display:block' for proper rendering.
Margin does not work in most case. and that is becaus it should calculate distance with elements outside. and this is dificult.
you should try padding instead of margin:
#topheader hgroup {
padding: 1em;
overflow: visible;
}
also change : to ; ;)
this will work in every browsers.