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;
Related
I'm trying to make the comments wider on Slashdot, especially on mobile (Firefox). There is a big gap on the left.
Example: https://tech.slashdot.org/story/21/08/12/2034218/google-launches-interactive-3d-periodic-table-to-teach-chemistry
(any Slashdot story will work)
The selector is div#comments.a2commentwrap. Examining it you can see that it has the property margin-right: 320px; and if you reduce it to 20px the big gap goes away.
I can't get the rule to work though. I have
slashdot.org##div#comments.a2commentwrap:style(margin-right: 20px; !important;)
but it has no effect. I tested background-color: #333!important; and that worked.
What am I doing wrong?
It's because you terminated your style with ; before !important flag
slashdot.org##div#comments.a2commentwrap:style(margin-right: 20px !important;)
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 working on a website for a friend of mine and I'm having a bit of a CSS nightmare. The URL is http://www.bike4haiti.com.
In Firefox and Chrome, there is a Haitian flag that appears in the top right corner of the top banner. In IE, however, it appears as a thin vertical line along the right edge, beginning at the top of the menu and descending past where the content section begins. The CSS class is quite simple code:
img.rightfloat
{
float:right;
padding-left:1px;
padding-bottom: 1px;
padding-right: 5px;
padding-top: 1px;
}
My guess is that it is one of the other CSS elements causing the problem, but I have no idea which one. I tried using the F12 tool, but I had no luck finding the problem.
Help please!
set your first anchor to float:left; you already have the image floating so then just clear them with #topmenu{float:none; clear:both}
that should do it. you'll probably want to tinker with margins for spacing.
You have a your width set to nothing (width="") in your <img> tag.
This site has an issue with the center content portion. For some reason in internet explorer just a couple of letters are being cut off by the sidebar. I have no idea why, or how to fix it. The div floats right, so I figured adding a few pixels of margin to the right would do the trick. It doesn't...
It's this way on IE8 and I'm actually running IE 7.4 through parallels on a Mac.
Any suggestions?
http://www.thesurgicalsolution.com/
In an ie.css you have:
#content, .sidebar { overflow: hidden; }
which is clipping the text in IE only. So if you remove this rule the text will no longer be clipped. It is possible that this rule exits for a reason though, so you might want to test the whole site before just deleting it.
Edit: I would also fix the validation errors as well as I have had unexplained rendering issues on different browsers in the past which were caused by invalid markup.
Edit 2: The #content parent <div> has a defined width (and is overflow:hidden) but a child <div> also has a defined width and its position makes it greater than the right edge of the parent and is therefore clipped by the parent's overflow rule. So as an alternative, you could make the .rightbox narrower to avoid the overflow hiding in IE.
.custom #content .box-wrapper .rightbox {
float: right;
width: 451px; /* <-- change this */
margin-right:5px;
}
I don't know why that happens, but adding a padding-left: 3px anywhere that applies to it fixes it.
This page I have is super simple, this should be a breeze but I'm stumped.
I have two DIVs, one inside the other. In the first DIV, I have the margins set so that it lays at the top of the page, centered. The second DIV should lay inside the first, centered, but with a 50px margin at top. However, the 50px margin is being applied to the parent DIV and not the child. If I add a border to the parent DIV, it behaves like I expect it to, but not without.
Can anyone offer me any insight to this? Thanks in advance.
<div id="pageWrapper">
<div id="mainWrapper">
<p>foo</p>
</div>
</div>
*{
margin:0px;
padding:0px;
}
body{
background-color:#034375;
}
#pageWrapper{
width:960px;
margin:0px auto 0px auto;
background:url('i/blue-gradient.jpg') top left no-repeat;
}
#mainWrapper{
width:500px;
margin:50px auto 0 auto;
border:1px solid #000000;
background-color:#eeeeee;
}
This issue has to do with the CSS spec on rendering adjacent margins. Essentially, because there's nothing "in between" the margins of the containing div and the margins on the inner div, the larger value is used for both.
You'll see this mainly in Firefox, and although the behavior seems to follow the letter of the law, I'm not sure this particular case behaves as intended by the spec writers.
Fortunately, it's easy to fix -- put something "between" the margins. You've already noticed that putting a border on the parent div works. You can make this border transparent, and reduce the inner margin by 1px, and it will appear functionally the same as your above case. Another option is to apply one pixel of padding-top to the parent div. A third option is to use padding-top: 50px on the parent div instead of applying a top margin to the child div.
More information on collapsing margins.
You don't say which browser you're seeing this in. For me it works as expected in Firefox. However, I suspect you're seeing the issue in Internet Explorer. This is probably because the inner div doesn't have hasLayout applied - this is usually the cause of IE styling bugs. Try adding zoom:1 to the mainWrapper CSS declaration and see if that works.
You probably want to set the padding of mainWrapper instead of margin.
padding:50px 0 0 0;
Check out this description of the box model to see how margins and padding differ.