how can i set minimal height for div? But it have to resize with new data.
min-height works fine... except in IE.
The way to fix it and therefore use it everywhere is importing ie7.js
div#name
{
height: 60px;
height: auto !important;
min-height: 60px;
}
This should work across browsers including IE
You want the CSS property min-height. You'll need to be careful of not great browser support (particularly older versions of IE, shockingly enough).
div#foo {
min-height:10em;
}
in ie6.css or prepend with * html selector ( hack warning )
div#foo { height:10em; }
Since MSIE6 doesn't support min-height.
Related
Take this code and open it in Firefox and in Chrome:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.container {
background: #EEE;
width: 100%;
height: 300px;
;
}
img {
display: block;
max-width: 100%;
height: auto;
max-height: 300px;
}
<div class="container">
<img src="http://curiosidades.batanga.com/sites/curiosidades.batanga.com/files/Los-gatos-nos-ignoran-1.jpg" alt="" />
</div>
You have to reescale the width of the container by (for example) reescaling the frame or the browser window (this may help: http://codepen.io/vandervals/pen/NqvYQZ)
You'll see the difference inmediatly: Chrome uses the max-height and the max-width at the same time for limiting the scale of the picture, while firefox, only uses the max-height.
Does anyone know how to make firefox behave like chrome? Which of the behaviours is the correct one, according to the spec?
Use firefox specific CSS, witht he code -moz
Another solution would be to use hacks
Browser Hack
Hope this helps :)
I've ran this with and without the "!important" CSS declaration and saw a minor improvement for Firefox (and I mean very minor); I did make sure I cleared my history before each run but there could be a few reasons for that. They use different engines so they're going to decide how they should load things differently and when (http://www.quora.com/What-makes-one-web-browser-faster-than-another - an old article but gets the point across).
The link Arjun for Browser Hacks is a good one to help optimize your CSS specific to the browser.
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;
}
In all versions of Internet Explorer (including version 11 beta), the element textarea is 1px or 2px lower than a textarea with the same width in any other browser. How to solve?
To solve the layout issue of IE 11 (and makes the layout appearance of all browsers look 99% alike), it is suggested to use CSS Reset.
Copy and paste the CSS Reset script at http://cssreset.com
Just looking at Chrome and IE, they set slightly different default height and margin properties for an otherwise unstyled textarea. To get cross-browser consistency, your best bet is to be explicit about all the box model properties like so (values selected at random but you get the idea):
texarea {
width: 400px;
height: 100px;
padding: 0;
border: 1px solid #999;
margin: 0;
}
Hope this helps.
Set height on the textarea element, and set display: block on it (to make height applicable). Example (you should of course use an external style sheet in real life):
<textarea rows=10 style=
"display: block; height: 12em; line-height: 1.2; font-size: 90%; margin: 0">
Using a height value that equals 1.2em times the number of rows seems to work OK. It should be enough for fonts that you normally want to use in a textarea. The rest is there to deal with differences in browser defaults.
Explananation: If you look at a textarea element in browser’s developer tools, you can see that the padding and border values are the same but content height differs. The reason is that textarea formatting is browser-specific and the height calculation is based not only on font size but also on browser-dependent rules. Browsers let you override this.
You could additionally set these, as they correspond to common browser defaults, but some browsers might deviate a bit (which is normally not relevant, but may matter if you aim at pixel-exactness):
textarea { padding: 2px; border-width: 1px; }
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.