I thought this would proably be one of the 'standard' IE6 layout bugs, but after some searching, I can't see an obvious solution to it. Here's my test case:
http://game-point.net/misc/ie6Test/
The way I want it to look is how it looks in Firefox3, Safari, Opera, and IE8. The red rectangle overlaps the green one to the top right.
In IE6, however, 2 strange things happen. First, in the top box (where I don't specify the unfloated DIVs' widths), the green DIV doesn't clear, but its width does stop short of the floated DIV. This doesn't seem right; the floated DIV should surely be out of flow. There is also a curious 3-pixel gap between the green DIV and the floated DIV.
In the 2nd box, where I do specify the unfloated DIVs' widths, the unfloated DIVs clear the floated DIV even though I haven't set the 'clear' CSS attribute. Surely they shouldn't clear at all.
IE7 is very similar, except it doesn't have that curious 3px gap to the left of the floated DIV.
1) Is this my misusing CSS somehow, and what am I doing wrong?
2) If this is an IE6/IE7 bug, is it well-known, and is there a workaround?
3 pix gap is the peek a boo bug. either put a -3px margin on that element or display inline or both.
pie.net has all your answers
OK, the problem seems to be explained rather expertly on this PositionIsEverything page. Looks like people just need to use a standards-compliant browser like IE8, Firefox, Opera, Safari, etc. if you want to use float layouts and get them to look right.
Related
I have set up some divs for my layout, a main div and a menu div.
They look perfect in Firefox, but for some reason, Chrome and Safari get messed up.
For some reason the width of the div gets smaller when overflow:hidden; is added to the CSS. I need overflow:hidden; though, because I have other floats inside the main div. You can see the example here:
http://jsfiddle.net/kR7rs/2/
It shows up fine in Firefox, but in Safari and Chrome, there's a margin on the right side of the div as well.
Removing the margin from main seems to fix it:
http://jsfiddle.net/kR7rs/3/
What I think it happening is that when overflow:hidden is set, the entire element wraps around the floats instead of the text within the div. So this gives the result in the fiddle. Then if you set a margin on it also, the width is decreased further by the left padding.
Kind of seems like a bug.
(Don't have FF right now to test it and see if it breaks it for FF.)
Move overflow:hidden to #wrapper. That fixes it, but doesn't explain why.
I'm having issues in Chrome where paragraph text is overlapping floating elements. The floating elements are pushed down to force an image in the lower left-hand corner of a container. I've setup http://jsfiddle.net/VMJGX/ which recreates the issue. The text overlaps the .indenter elements in Chrome but not in Firefox or IE. Is this a Chrome bug or is there a better way to accomplish this?
Chrome Version 21.0.1180.82
Firefox Version 15.0
The problem looks to be that the top of your indenters are getting caught in the middle of lines because of the varying heights compared to the linehieght in the paragraph. I'm guessing FF and Chrome render the heights slightly differently. If you want continue to use the same method you are using, I would recommend getting rid of the height class styles and instead just use nbsp; to fill the indenter divs so you get height that is consistent with the line height of the paragraph.
Here's a fiddle with an example.
UPDATE:
I updated the fiddle to use spans as the indenters inside the paragraph (instead of divs) and put the width properties back in. Because of the margin-bottom on the paragraphs and the clear on the indenters, you need a matching margin-bottom on the intenders so they will stay aligned.
This needs to be compatible with all modern browsers and IE7 and IE8.
What I'm trying to do is have a repeated background image for the page with a linear fade that makes the bottom darker. http://i.imgur.com/rrzyw.jpg
Here's my example code: http://jsfiddle.net/hxk2d/2/
As you can see, I have two floated divs in the example above. The body linear gradients do not show up for some reason. I figured out it was because of the left div being floated.
As soon as I delete the float for the left div, you start to see a gradient but it only appears within the container.
Obviously, I'd prefer this to work whether there's a floated div or not. My test browsers were both Chrome and Firefox, both of which performed the same behavior.
What am I missing?
Please look at my example, I'm not 100% sure but I think the parent div of your two floats didn't had a height calculating as a result of the 2 floating div's, the parent tag of that div is the body that doesn't have any height because nothing inside has, as a quick fix i added some the clearfix class to the parent of the floating div's
Here is the example link:
http://jsfiddle.net/sHXf2/
I modified your gradients to make them more visible, Hope this helped
I have an IE7 CSS issue. I have setup a demo in jsfiddle, but basically I have a tabbed menu setup with rounded corners on the tabs (no rounded corners shown in jsfiddle). The rounded corners are floated left and right.
Everything works great in FF and Chrome, but in IE7 the floated elements are causing the tabs to consume the entire width. I have tried numerous things, overflow: hidden, position, display, etc... but I just can't work it out!
Any help appreciated.
http://jsfiddle.net/EszSr/1/
I would just set the corner elements to display: absolute; and the containers to position: relative if needed. That should work.
Simple demo on jsFiddle: http://jsfiddle.net/ZSpjk/1/
Something that I'd try (don't have access to IE7 atm.) is, to give the tabs a width (only for IE, e.g. through a conditional comment). It could be a smaller width than you actually need, IE will "widen" it as needed for the content.
I essentially have two div tags I'm dealing with. On this page - www.employeratlas.com/search.html - when you click on any of the four tabs that tab has a border around it. The idea is that the border is black on the left, right, and top, and is white on the bottom to cover up the border of the div below it. This works fine in everything but IE6 and IE7 (IE6 example here http://www.employeratlas.com/images/ie_tabs.png). I've tried setting the z-index to make the top tab above the other, but it doesn't work.
IE has a different interpretation of z-index, taking into consideration parent elements' z-indexes. In essence, it's not possible to elevate an element above its parent's z-index.
Background info on quirksmode.org
An example of working around it