I just realized that every browsers seem to have a curious render problem.
This is the test case: http://jsfiddle.net/cKNQD/
1. Please scale your browser until the bottom scrollbar appears.
2. Then scroll to the very right.
You will see, that the #header will not longer have a 100% width. The problem
seems to be the .wrapper inside. I need that wrapper to limit the dimension
of the #headers content.
Solution welcome.
Add min-width: 980px; to the header.
See updated fiddle demo.
Tested on Win7 in IE7, IE8, IE9, Opera 11.50, Safari 5.0.5, FF 6.0, Chrome 13.0.
Width of #header is not defined, so it is not 100%, it is "auto".
Maybe you should remove "width: 600px" from .foo class?
Related
I'm currently testing out css for img tag. On chrome it look good but when I viewed it in firefox, the last image is stretched out. I'm not sure what's wrong. Below is my jsfiddle in which you can see the difference when you view it in Chrome and Firefox.
.thumbContainer img{
margin: 0 auto;
max-width:100%;
max-height:100%;
object-position: 50% 50%;
object-fit: fill !important;
}
This happens, because you are using browser-specific CSS properties like -moz-box or -webkit-box, which are not officially supported. This can cause different behavior in different browsers, becauseit's up to the browser to decide how to display such elements, and for Firefox, the "correct" behavior is, to strech it, while for chrome its correct to fit in its parent. My general advice is: Avoid styling with prefixed CSS properties, unless it is absolutely necessary to enable standard CSS functionality in older browsers. Maybe there is another approach for your problem with flexbox.
Playground
In the demo above, there should be 2 .wrap boxes, one red and below it a blue one. That should be the correct behavior.
Head-to-wall banging bug in Chrome. in Firefox, as always, everything works as spec says, but in Chrome, the percentage of the text-indent are not relative to the .wrap containing element width (which is encapsulated by overflow:hidden) but it is relative to the clientWidth as it would seem. any suggestions?
I noticed in Chrome that its taking the width as 400px instead of 200px. So when text-indent of 100% its moving your child divs 200px too far. I added display: -webkit-box; to your .wrap class which seems to work though I don't know if that's what you had in mind as a solution.
My site design requires a background image running across the top of the page. You can see what it is supposed to look like in this screenshot. Link to my site.
Unfortunately, I used Firefox to check my work while putting this together. I used FireFox, because it has Firebug. The site looks right in Firefox, but wrong in Safari, Chrome, and IE. In Safari, Chrome, and IE, the background body wrapper background image is below the menu. Example screenshot where background at top is wrong.
Is there an easy fix to the background image, so it will work in all browsers, or do I have to take a few steps backward to fix some basic problems in my markup?
The margin on #nav is collapsing (https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing) because its parent (#wrapper) has no top margin, padding, or border to contain it. A quick-and-dirty fix for your problem would be to add padding-top: 1px; to your #wrapper CSS.
Change the margin property of #nav and add padding to #wrapper equal to the height of your background image.
#nav {
margin: 0 auto;
}
#wrapper {
padding-top: 85px;
}
I'm having an issue applying a CSS Width with a percentage and a decimal (e.g 33.33) to a div.
It seems to work fine in Chrome but plays up in Opera and Firefox.
http://jsfiddle.net/nhkz9/1/
Opera and Firefox both just round the percentage up, and because of insufficient width in the container, the third div moves to a new line. But when the percentages are not rounded up, there is enough space for all three to fit in one line.
any ideas on how i could fix this issue?
thanks
The demo you posted adds 1px border to two of the <div>s. By default this is not included in the 33.33% calculation, so your <div>s will never fit. To change this, use box-sizing: border-box;.
Try to use
{max-width: 33.334%; min-width: 33.333%;} instead of {width: 33.333%}
For all browsers it will be:
.class {max-width: 33.334%; min-width: 33.333%; *width: 33.333%;}
It's not ideal. +-1px still left in some browsers, but... that is better than 1%
Here is my test case : http://jsfiddle.net/bpw98/15/
I have a div with overflow:auto, and a div inside it with a margin and a border. The inner div doesn't have its bottom margin in IE8, while it's displayed properly in Webkit and Firefox.
Opera renders it in a wrong way too:
The solution is in that browser: use padding in the outside box instead of using margin on the inside.
Here is the code
Unfortunately , it does not resolve the IE8 problem, I know. But it's a known bug , CSS 2.1 spec does not cover precisely how this testcase should be rendered.
Check this
Ok, I have a horrible hack for you:
div.outer:after {
content:"";
background-color: inherit;
}
This works for me but leaves a larger than 5px margin at the bottom of div.outer:
JSFiddle: http://jsfiddle.net/wwTnS/
To get past this you could target IE8 only (so not IE8 and below as IE7 works correctly for once) and set margin-bottom to about 1px...but then that is getting even more hacky. The code I have added above should not have any noticeable effect on any other browsers.
Extra Note
If you remove the background-color and check the code in IE9's IE8 compatability mode then it renders fine and the margin-bottom is 5px. However, in my emulator (which is usually quite accurate), the margin-bottom is back to 0 if you do not add background-color.
As commented by tildy, the problem is already documented. I think I found a working solution, but it requires extra markup: I added a div between outer and inner, with a 5px transparent border. See http://jsfiddle.net/bpw98/19/.
I tried to add padding to outer instead, but it didn't work either. The rationale between that is: "the scrollbar lets the user scroll content, and only content". So the scrollbar stops where content stops, even if there's padding or margin after that.
Instead of margin on div.inner maybe you could try setting padding: 5px on div.outer
Ironically jsfiddle doesn't seem to work in IE8, which is quite funny.
Anyway, I had the same problem just now and went down the route of using :after on the inner element to inject content where the bottom margin should be:
div.inner {
margin: 5px 5px 0;
}
div.inner:after {
content: " ";
display: block;
height: 5px;
}
jsfiddle here: http://jsfiddle.net/bpw98/41/
However, this only works if you don't need that red border. I'm not sure if it was there just for the purpose of showing the issue or you actually need it? If it is needed, I'm afraid this answer won't work.
I removed the height of the .outer div and it worked for me !
Propably it doesn't work because your inner div is higher than 100px;