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.
Related
I want to hide the border of a recaptcha v2.0 widget so that I can better visually integrate it into my site's look and feel.
NOTE: I'm posting this as a question, and providing a solution, because most of the StackOverflow questions I've found on the topic center around removing the frameborder attribute of the recaptcha's iframe, which isn't technically what I'm after. I'm after the result of that -- an edgeless recaptcha widget that I can position within a larger visual context.
I hope this is helpful!
I wanted to hide the borders of a v2.0 ReCaptcha (the one with the "I'm not a robot" checkbox), and solved it as follows:
Wrap the recaptcha div (the one that is marked with the class "g-recaptcha") with another div, and size it a bit smaller than the iframe comes in at, and shift the iframe using position: relative and left: -10px, to hide the borders.
If you're using the "compact" version, you'll need to adjust the sizing... the css I provide works for the "normal" version.
NOTE: Tested on Safari 9.1.2 (OSX) only, but I'd guess the technique will translate to other browsers too.
Hope this helps!
html:
<div class="my-div"><div class="g-recaptcha" data-size="normal" data-sitekey="<your site key>"></div><div>
css:
.my-div {
display: inline-block;
overflow: hidden;
width: 290px; /* note the embedded iframe is 302x76 */
height: 74px;
text-align: left;
}
.my-div iframe {
position: relative;
left: -10px;
}
NOTE: for people brought here by google but with different problem
If you want to hide just borders not making it edge less keeping original design just do following:
HTML:
<div class="captcha"><div class="g-recaptcha" data-size="normal" data-sitekey="<your site key>"></div><div></div>
CSS:
.captcha iframe {
position: relative;
box-shadow: none !important;
}
i'm creating a responsive layout but i'm noticing a centering problem. I have three div (three boxes, each one next to the other) and i put them into a parent div to make the alignment. The strange thing is that on dreamweaver all works perfectly, but when i open the HTML file to test the page locally the centering is not correct. Here's the images so that you can understand better.
On Dreamweaver
click
When i open the HTML page locally
click
In the first screen as you can see, right and left spaces are perfectly equal, in the second screen left space is more narrow. I'd love to know why on dreamweaver is ok. Here's the code i used.
#infoInner {
margin-left: 0.5%;
margin-right: -0.5%;
}
.boxInfo {
padding: 2% 2%;
margin: 0 1.5%;
width: 26%;
border: 1px dashed white;
float: left;
}
Browsers by default tend to add styles to the document. This is why projects such as normalize.css exist to remove them, however, this is not the solution to your problem.
When a web browser displays code, it's the rendering engine that interprets the code to then lays it out to the screen. Chrome uses Blink, Safari uses Webkit, Internet Explorer uses Trident, and so on. After a bit of research, I see that Dreamweaver used the Presto rendering engine until version 3, and then moved to Webkit on version 4 / 5. I am not sure about the version DW6, I am also going to assume it is Webkit (EDIT WELCOMED). You should receive a similar result if you open your code up in Safari.
I recommend you open a new question with your code represented in a jsfiddle for members of SO to help you out and get it the way you want to look. However, from the description and the code posted it seems to be a rendering issue.
Further Reading:
http://en.wikipedia.org/wiki/Web_browser_engine
http://mashable.com/2014/02/26/browser-testing-tools/
https://www.youtube.com/watch?v=7bs9RGolIyI (More for the comedy)
Can you do that on this way:
<div class="wrapper">
<div class="item"></div>
<div class="item center"></div>
<div class="item"></div>
</div>
.wrapper {
text-align: center;
width: 100%;
}
.wrapper .item {
float: none;
display: inline;
width: 32%;
margin: 0px;
}
.wrapper .item.center{
margin-left: 1%;
margin-right: 1%;
}
I hope this help! :)
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 a gallery with a frame around the thumbnails, I have used max-width to shrink the thumbnail images so they all line up nicely, but in IE althought the image shrinks to the max width the frame still expands as if the image was larger. I have tried adding a max-width to the li but to no avail.
Here is a link to the page that looks nice and uniformed in Chrome and FF bt all over the shop in IE! http://wedding-photography-gloucestershire.co.uk/wedding-photography-gallery.php?gallery=Getting%20Ready
Wedding Photography Gallery
thanks in advance of any help.
This is the frame style..
.highslide-gallery ul li {
display: block;
position: relative;
float: left;
width: 106px;
height: 106px;
border: 1px solid silver;
margin: 2px;
line-height: 0;
overflow: hidden;
background-color: #000;
max-width: 106px;
}
I tried adding this which I found on another website as a solution to IE max width problems, but i don't really understand it ;
width:expression(document.body.clientWidth > 106? "106px": "auto" );
but it still didn't work.
Thank you.
IE treats padding/margin differently than the other browsers. I looked at your stylesheet (highside) and you need to have a stylesheet for ie specifically and then you can target IE specifically without worrying about how the changes you make effect the other browsers. I personally wouldn't do that but I used to do it when I was experimenting in web development.
The easiest way for you to figure out what's going wrong and where it is going wrong is to use firebug. Safari and IE have similar debug environments as well. There are some really good tutorials on using firebug out on http://net.tutsplus.com
Good luck.
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.