I have a problem with CSS float handling in IE9.Look at partycypacjaobywatelska.pl. In Firefox, Chrome, Opera etc. main page is displayed correctly whereas IE9 shows a white space between the header and the rest of content.
This space is triggered by two elements of classes left and right (their place in DOM: body -> #wrapper -> #container -> .left, .right). They have float: left and float: right set, respectively but, nonetheless, in IE9 they push the .middle div down. Setting display: none on them helps but I don't fully control when those divs gain content so it's not a feasible solution to me.
I tried to create a minimal example but this jsFiddle works fine in IE9. Any idea what might trigger the bug?
Thanks for help in advance.
Using IE's dev tools, .middle actually isn't being pushed, it's the .jimgMenu inside of it. If you remove the overflow: hidden on that, then you can see IE9 and Firefox behave the same. It's definitely the floats shifting the content area. Have you tried a clearfix instead of using the overflow?
Honestly, those .left and .right should probably be positioned absolutely if they are stuck to the sides like that though. What do they even contain? Why are they suppose to be floating behind the content? It's probably not the best way to structure the HTML.
Related
Some strange is happening in applying the styling of css code in some browsers...
Please take a look in the example...
http://jsfiddle.net/3FepW/3/
In Chrome the green div is bigger, than in Firefox, I really don't know what is the problem, I think in Firefox it displays as it should but in Chrome and IE9 it displays different.
I tried a lot of changes, can't resolve this for days.., I can use height: 100% or overflow hidden but I can't use one of them because: overflow hidden hide everything inside, but I have some draggable/sortable elements and height: 100% because I have a resizable function that will enlarge the yellow div...
The problem comes from something known as margin collapsing. Chrome and IE are rendering it correctly. Not sure what Firefox is doing.
There are many questions in here regarding the same problem. I've answered one of them here - Adding CSS border changes positioning in HTML5 webpage
Basically top and bottom margins between siblings, and children and parents collapse to highest of them. The float: left you put on .c1 prevents that from happening . The margin-bottom on .c3 gets stuck inside .c1 and that's why it gets bigger (that is, 'that's why .c1 gets bigger').
Try adding overflow: auto; to .c2- another way of preventing margins from collapsing - so c1's margin gets 'stuck in' .c2 instead - I'm assuming that's probably what you're looking for.
Here's a fiddle -> http://jsfiddle.net/joplomacedo/3FepW/5/ .
Remove the margin-bottom: 10px; from .c3 - this is what causes such behavior. As far as I know such issue is often referred to as 'collapsible margins', please, somebody correct me if I'm wrong.
Ok, I'm stumped!
If anyone has a suggestion or two on a CSS / JavaScript fix for an IE7 z-index issue on this page without changing the DOM structure much (it's set up for easy tab usage) I'd be incredibly happy to try it out.
On this page, IE7 renders the bar that spans 100% of the width of the page above everything else, while I actually need to cram it very specifically between the text and the hero image (as seen when viewed on any modern browser).
Here's the link.
Thanks.
IE7 has known bugs with z-index, see: IE7 Z-Index issue - Context Menu
In this specific instance, you can fix it by changing a few parts of your CSS. Complete each step and check the progress as you go:
On #container remove position:relative .
The z-index issue is now fixed, but everything is in the wrong position!
On #thumbnails and .pane_img remove these properties: position, top, left, z-index.
On .pane_content, set left:50%; margin-left:-480px; bottom:90px.
On #learn_more_btn and .renova_logo, repeat the left: 50%; margin-left: ??px method to place the elements back where they should be.
let's say I have a div with right-aligned text and a fixed with:
div{
width: 30px;
text-align: right;
}
is it ok if I increase the width of this div to 35px trough padding, to move the text away from the edge and avoid adding another element inside of it?
div{
padding-right: 5px;
}
I mean would any browsers behave weirdly about it?
The result would be exacly what you said: a div of total width 35px. It seems to me you understand what you are doing, but there is never a substitute for actually testing in all your target browsers.
While this small piece of CSS looks innocent, it can change the elements around them in a way you didn't expect.
No It'll be ok, in every major browser.
Internet Explorer in Quirks Mode would have a problem with it due to it's box model.
If this is a problem, I would use a nested div that uses margins instead.
Your other option could be including an IE specific CSS file.
This is an area that we are getting a lot more control over with css3. Have a look at
http://www.quirksmode.org/css/box.html.
Look here (http://www.makeofficebetter.com/comments.htm) for a link to an example of my problem.
If you look at that link you'll see that I have a IMG floated left, and a DIV overlaying it. within that div I have 2 more divs. Both should overlay the IMG, but for some reason only the first DIV overlays correctly...and the 2nd does not. It refuses to overlay my IMG. Both are children of a DIV that is overlaying the IMG.
This seems to be only a problem in IE8 Compatibility Mode...so I guess that means it also looks bad in IE7. You can toggle Compatibilty mode off and on to see the problem and I've added color to my DIV backgrounds so you can see the issue better.
Safari and Firefox work fine.
Use DRY concepts with your CSS, this might help weed out the problem.
For example instead of having two classes .comment and .mod-comment (both with identical subclasses), only use .comment and when a moderator posts, add a second .mod class.
Example:
current
<div class="comment">...</div>
<div class="mod-comment">...</div>
DRY
<div class="comment">...</div>
<div class="comment mod">...</div>
This way, you can style comment, and stick the differences for mod comment in .mod
The problem is that the avatar is taking up space that the bubble wants. IE7 won't let them overlap. I tried adding this CSS - as far as I can tell that will solve it for IE7 without breaking in Firefox. I suggest more testing or making this CSS conditional for IE7 only.
.comment .avatar {
margin-right: -22px;
}
.mod-comment .avatar {
margin-left: -22px;
}
Hope this helps!
I have a site I made really fast that uses floats to display different sections of content. The floated content and the content that has an additional margin both appear fine in FF/IE, but on safari one of the divs is completely hidden. I've tried switching to padding and position:relative, but nothing has worked for me. If I take out the code to display it to the right it shows up again but under the floated content.
The main section of css that seems to be causing the problem is:
#settings{
float:left;
}
#right_content{
margin-top:20px;
margin-left:440px;
width:400px;
}
This gives me the same result whether I specify a size to the #settings div or not. Any ideas would be appreciated.
The site is available at: http://frickinsweet.com/tools/Theme.mvc.aspx to see the source code.
I believe the error lies in the mark up that the color picker is generating. I saved the page and removed that code for the color picker and it renders fine in IE/FF/SF.
Have you tried floating the #right_content div to the right?
#right_content{
float: right;
margin-top: 20px;
width: 400px;
}
Sorry I should have mentioned that as well. I tried floating that content right and additionally tried floating it left and setting the position with the thinking that both divs would start out at left:0 where setting the margin of the right would move it over.
Thanks
A few things you should fix beforehand:
Your <style> tag is in <body>, when it belongs in <head>
You have a typo "realtive" in one of your inline styles:
<a href="http://feeds.feedburner.com/ryanlanciaux" style="position:realtive; top:-6px;">
Try to get your page to validate; this should make debugging the actual problems far easier.