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.
Related
I have been searching the web for a solution for 3 hours without success. I want to set overflow: auto to tag as follows:
td {
overflow:auto!important;
}
It works fine in chrome but not in Firefox. I checked my entire css file by w3c css validator.
There is no error too. Any idea please? I am sorry if it is very silly question but everyone have to learn this first to be expert.
Try wrapping it in a <div>. The overflow attribute is not defined for a <td> element.
See here
Try to put your overflow:auto to the wrapper like this,
pre, div {
width:100%;
overflow: auto !important;
}
See demo
Try this
td {
height: 20px; // mention a height
overflow:auto!important;
}
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 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 have a simple <input type="text"/> styled with the following:
font-size:1.5em;line-height:1.5em;padding:.6em .4em;
It displays perfectly normally in Chrome, Safari (i.e. Webkit browsers).
However, we arrive at Firefox, and this happens:
As you can see, Firefox decides to cut off the size of the font at a certain height. Why is this happening? This problem occurs even if I remove the padding from the <input>.
Note:
It might help to know that the additional styles applied to this input are the default styles used in Twitter Bootstrap v.2.0.
Here's a JSFiddle, with the exact problem I'm describing:
http://jsfiddle.net/xxepX/
Try increasing your line height property. That would be restricting the viewable area for the letters causing them to be cut off. Firefox's rendering engine renders line height slightly different.
This helped me in a similar case:
input.with-fancy-styling {
box-sizing: content-box;
}
I had this problem also, and wanted to share my fix.
First, be sure you have the proper doctype declaration, like so:
<!DOCTYPE html>
<html lang="en">
Even with that, I was getting minor trimming of the lower-case j, g, and y.
I inspected and found this style on the .form-control class:
.form-control {
/* other styles omitted for brevity */
height: 30px;
padding: 6px 12px;
}
Because it is using border-box box sizing, and I didn't want a taller box, I simply overwrote the style in my own stylesheet and reduced the padding:
.form-control {
padding: 5px 12px;
}
And it solved the issue.
Hi you don't need to define the height of your input tag class or give the height:auto; in your input tag class
or see the live demo:-
http://jsfiddle.net/xxepX/2/
UPDATED
please check your updated css i have added line-height & height in your css and removed the padding.
.huge-form input, .huge-form button{
font-size:1.5em;padding:0;
line-height:31px;
height:31px;
}
or you can see the live demo:- http://jsfiddle.net/xxepX/5/
I too tried the technique of increasing 'line-height'. But it makes the text too long in height. Replacing 'line-height' with 'height' solved my issue in FF and chrome, without making it too long in height.
With css you should not use padding for an input box, for indentation use text-indent instead.
First the result in Firefox 4 Beta 8:
Button vs Div http://b.imagehost.org/0419/buttonSpace.png
The former element shown is a button with an img the latter is a div with an img. As you can see in the former case there is some strange space between the border of the img and the border of the button. I wonder how I can remove it.
Here the CSS file:
* {
margin: 0;
padding: 0;
}
button, img, div {
border: 1px solid black;
}
img {
display: block;
}
Testing the above testcase in other browsers has shown that this probably isn't a CSS issue but a bug in Firefox. After a little bit of research I found this bug report: Bug 140563 - <button> ignores CSS style padding:0
In that bug report there is a fix for the problem:
button::-moz-focus-inner {padding:0; border:0}
I think you have to set a width for the div
It looks like the padding you're asking for is not being applied. Have you tried setting it explicitly on the button?