div background color cuts off - html

Here is a screen shot of the what it looks like in IE6, works fine in everything else: http://i39.tinypic.com/2lcr4uw.png
It is within div class="article odd", which has overflow:auto; set.
Then it has a ul list (w/ clear:both; set), float to the left, w/ the li's split by 50%
Any suggestions would be appreciated.

Yup, this is a bug with using overflow:auto to contain floats. If you add a width/height you'll fix that up. For instance, width: 100%.
Here's a great page for information about this.
http://www.quirksmode.org/css/clearing.html
Definately, don't use a "clearing div". It adds unwanted markup and also has quirks with browser printing.
Edit: If that doesn't help, I think you'll need to give us some example code instead of a picture.

I agree with Hexxagonal, don't insert extra clearing div's. Better fixing it with CSS only.
I prefer giving IE6 height: 1%; or zoom: 1; which will trigger IE's hasLayout. This does the same for floats in IE as overflow: hidden; or overflow: auto; does for Firefox, Opera, Safari etc.

<div class="article odd">
<ul>
</ul>
<div class="clear"></div>
</div>
css
---
.clear
{
clear: both;
}

Related

Margin not working only in Safari (element is at the bottom of the page)

Please check the following link in the latest safari:
http://www.grupoguion.com/
The footer is fixed at the bottom and supossed to revealed with the scrolling, so the previous section has a margin-bottom but it doesn't work, only in Safari.
Everywhere else is ok, even in I.E.
I tried to add overflow: auto in the page-wrapper, but everything gets weird in all browsers with elements dissapear and appear.
I also have read that removing height: 100% in the body and html may fix that, but that is not an option for me, because i need the images to fix the browser height.
Does anybody have another possible solution please?
Thank in advance.
You can add a div with the size of your bottom and make it transparent.
html:
<div id='tr-footer'>
</div>
css :
#tr-footer{
height: ?px;
width:100%;
background:transparent;
}
Try making the element
display:inline-block
and Safari should respect its dimensions and margin.
The accepted answer is way too complicated. Consider this approach (taken from another thread):
It's a normal weird behaviour calling margin collapse.
To simply avoid it add overflow: auto; on the [footer] container.
Your footer container could look something like this:
.footer-container {
overflow: auto;
}

IE9 negative top margin - floated and cleared child makes the element stuck

I've run into a strange problem in IE9, spent a lot of time tracking and reproducing it.
So we have the following markup:
<div class="container">
<div class="movable">
<div class="stuff">Stuff</div>
<div class="stuff special">Stuff Special</div>
<div class="stuff">Stuff</div>
<div class="stuff">Stuff</div>
</div>
</div>
This results in something like this:
We would like to move the yellow box up (out of the container) and make the .stuff elements clearing. We would like to float at least one .stuff element, let's choose .special, so we do this:
.movable { margin-top: -70px; }
.stuff { clear: both; }
.special { float: left; }
On the left, the results we get in Chrome and Firefox, on the right IE9:
As you can see, IE9 is somehow stuck applying the negative margin-top, and it will always get stuck at the element which has right or left float and clear: both; applied on it at the same time. The combination of these two properties is needed, only one of them will not trigger this behavior.
A jsFiddle that demonstrates the problem and can be played with
This problem has come up in a quite large application, for certain reasons I cannot use top instead of margin-top, positioning would break other stuff.
Anybody has any idea how to help IE9 correctly display this?
Clear the .movable element. I don't know how you're normally doing it, adding a clearfix class etc. If not, just add overflow:hidden to it for example. Floating it also fixes it, but that might not work for your real page.
.movable { margin-top: -70px; overflow:hidden; }
jsFiddle

min-width property having issue in IE8 Compatibility mode

Have a parent DIV with a class .list attached. Paretnt DIV consist of 8 floated divs with position:relative property.
Parent Div has min-width property, when i open the page in IE8 compatibility mode its considering the min-width property as width property and shows all the 8 DIVS in a row. Where in it should show only 3 divs.
Here is the HTML code
<div id="list-container">
<div class='list'>
<div class='item'><h1>1</h1></div>
<div class='item'><h1>2</h1></div>
<div class='item'><h1>3</h1>
</div>
<div class="item"><h1>4</h1>
</div>
<div class='item'><h1>5</h1>
</div>
<div class='item'><h1>6</h1>
</div>
<div class='item'><h1>7</h1>
</div>
<div class="item"><h1>8</h1>
</div>
</div>
</div>
CSS Code
.list{
background:grey;
min-width:1400px;
float:left;
}
.item{
background:green;
width:140px;
height:80px;
margin:5px;
float:left;
position:relative;
}
#list-container {
float: left;
overflow: hidden;
width: 450px;
}
It works perfect in Firefox.
UPDATE: I see the same issue in IE7 as well (using IE8 brower and switching the browser mode to IE7 from Developer tool)
EDIT :For more Clarity am adding images
IE7 and IE8 compatibility mode
FF
Thanks in advance
You can't set the parent container with a lower amount of width with its child elements. It will always show quirky in some ways. Also ie8 doesn't support min-width. Try removing the min-width.
We could be much more of help if you show us what you really wanted to do.
For IE you should add * html .yourclass{height: 1%;} to fix. Did you tried it?
You are inheriting the wrong class, make parent and child in difference, that will help for sure :)
have look at fiddle
link: http://jsfiddle.net/MarmeeK/gu3Us/1/
thank you,

overflow:auto adding scrollbars in Chrome, IE

I used to add a <div style='clear:both'></div> to clear floats from previous segments, but someone suggested I should use overflow:auto on the <div> with floats instead as it's simpler and more clean.
Problem is, I got reports that there were some strange 'shades' in my website. After investigating, it turns out it happens in Chrome, not in Firefox, and those 'shades' are actually very small scrollbars.
I tried to reduce the parts to a minimum in this jsfiddle http://jsfiddle.net/57HM3/4/ . note they are far to the right (by where it says 'Result'). It seems to have to do with the line-height, if I set it to 1.2 instead of 1.1 it disappears. Is this some sort of known issue (that I don't know about)?
I know there are other ways to clear them but they involve IE specific codes and what not. I'd like to keep it as it is, just making the div with the floats as overflow:auto (and if this doesn't work, I'd rather go back to my adding the extra <div>
add overflow:hidden instead of. This will clear your both and will not add any scroll
Don't monkey with overflow. I'd recommend a "clearfix" solution. Here's what I use, I put it at the top of all my style-sheets from the beginning of each project:
/* CLEAR-FIX */
.clearfix:after {
visibility: hidden; display: block; font-size: 0;
content: " "; clear: both; height: 0;
}
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
...got that off a blog so long ago I can't remember where.
Any container that needs to grow with floats just needs the "clearfix" class added:
<div class="test" class="clearfix">
<div style="float:left">Hello</div>
<div style="float:left">World</div>
</div>
BTW, if you're wondering why CSS is such that floats aren't normally counted as part of a parent's height, see: Why do non-floating parents of floating elements collapse?
If you want to keep the overflow:auto rule for the container div, you can try removing the line-height rule from the .test class.

CSS Floats - content falling down in IE6

I have a layout with a menu DIV on the left. This is floated left with a fixed EM width. I then have a content DIV which has a left margin of more than the menu's width. So it sits nicely to the right of the menu and fills up the remaining space with both menu and content lined up perfectly.
However, in Internet Explorer 6, if the content gets too wide it falls down below the menu. which means you have loads of whitespace and can't actually see any of the content at all without scrolling.
Unfortunately I am not able to make changes to the content - this is a redesign of a site hosting 3rd party content, and changing that content is outside the scope of what I can do.
Also, there is a footer bar that must be underneath both the menu and the content.
I managed to almost get it to work by providing IE6 with a different layout using absolute positioning - unfortunately the footer looks rubbish and as IE6 is the 2nd most used browser on our site I can't really go with that.
I also tried messing around with overflows but ended up causing problems with random scrollbars appearing all over the place which wasn't any good either.
Does anyone know if there is a simple non-Javascript way of doing this that will work in IE6 as well as "proper" browsers? I'm currently thinking that it will have to be a table based layout.
Here's an example of the problem:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.menu {
width: 14em;
float: left;
}
.content {
margin-left: 15em;
zoom: 1;
}
.footer {
clear: both;
}
/* styling to make the demo more obvious */
.menu {
background-color: #f99;
}
.content {
background-color: #9f9;
}
.footer {
background-color: #99f;
}
td {
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="container">
<div class="menu">
<ul>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</div>
<div class="content">
<h1>Main Content</h1>
<table>
<tr>
<td>this is a really</td>
<td>wide table which</td>
<td>I am using to push</td>
<td>the content down</td>
<td>need to keep going</td>
<td>so that it breaks</td>
<td>in ie6</td>
<td>but naturally</td>
<td>nothing else</td>
<td>sghskdhksdhfsdhffs</td>
<td>sghskdhksdhfsdhffs</td>
<td>sghskdhksdhfsdhffs</td>
<td>sghskdhksdhfsdhffs</td>
</tr>
</table>
</div>
</div>
<div class="footer">
<p>Copyright blah blah blah</p>
</div>
</body>
</html>
As you mentioned you already tried position absolute. But I'll tried the following and it might work for you. Here is the CSS:
.container {
position:relative;
}
.menu {
width: 14em;
position:absolute;
top: 0;
left: 0 !important;
left: -15em;
}
.content {
margin-left: 15em;
}
.footer {
}
Some explanation: The menu is positioned absolute, independent of the other content. However, IE puts the menu relative to the "content" div, and hides it behind the "content" div. The work around is to position it negatively, just as many em's to the left as the content div has "margin-left". But this should only done for IE, so therefor the "left 0 !important" is added (but before the negative left), which works because IE ignores "!important" while the other browers do acknowledge it and will use "left 0".
Update:
As Alohci notes a better way would be to use the "* html" hack, in that case the CSS for "menu" becomes:
.menu {
width: 14em;
position:absolute;
top: 0;
left: 0;
}
* html .menu {
left: -15em;
}
Why not use an established layout for eg http://layouts.ironmyers.com/
or you might want to investigate this css overflow
Have a look at this, does it help?
EDIT:
Try one of these fixes:
(you could use some conditional code like #Blake suggested)
overflow:scroll -- this makes sure your content can be seen at the cost of design (scrollbars are ugly)
overflow:hidden -- just cuts off any overflow. It means people can't read the content though.
.content {
margin-left: 15em;
zoom: 1;
overflow:scroll
/* overflow:hidden */ /* probably second best */
}
Try looking at this one How to prevent long words from breaking my div? is this your problem?
Use some conditional comments for IE6 to read and place in the necessary CSS to fix the width of the problematic divs like so:
<!--[if IE 6]>
IE 6 specific stuff goes here. You can load a specific stylesheet here, or just have inline css
<![endif]-->
You can read more on the conditional comments here.
Removing the zoom: 1;
makes it work just fine for me in IE6.
Too late, but usually i get flots fixed by adding or an absolute width (a number in pixels, points or any hard measure system instead on em, % and so) or sometimes to put a min-width property solves it, also, beware of padding and borders because of the boxmodel sum.
I have run into this so many times that I just try to stay away from floats entirely. That said, there are some things you can do to make them work, but you might have to settle for a fixed with layout and/or some IE6 specific fixes. Here are some things you can try:
This may sound like heresy but
tables are not wrong for layout,
they're just not cool.
Try setting the 'container' div with
a fixed width and auto margins.
If that doesn't work, try a fixed
width 'content' div with your fixed
width 'container' div.
THanks for the position:absolute idea. This is similar to one solution I almost went with.
The problem here is that the menu will overlay the footer if the menu is longer than the content (and it quite often is). I could try to add an arbitrary height to the content to try to force a minimum height, but I won't really know how big the menu will be. There's the potential for quite a lot going down the side panel in that area.
I presume there's no way to force the relative positioned container to grow in response to the absolute positioned content, is there? Even if it's an IE6 hack, as I can use the float method for other browsers.
(Again, sorry for not posting this as a comment but I don't get that as an option)