min-width property having issue in IE8 Compatibility mode - html

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,

Related

Right-aligning text under images (without javascript)

I need some advice in creating a caption underneath an image, that is aligned to the right hand side. The image will change, so I can't use fixed value margins or anything like that - is this possible without javascript?
This is the basic layout, 'text-align: right' would work if I could somehow force the wrapper div to constrain to the image width, but currently it breaks past this. Any advice?
<style>
#section{height: 74%; padding-left:5%;}
#photowrapper{position:relative;}
#photo{height:100%; width:auto;}
#detailsdiv{position:relative; text-align:right;}
</style>
<div id='section'>
<div id='photowrapper'>
<img id='photo' src=../imgs/banan.jpg></img>
<div id= 'detailsdiv'>banan</div>
</div>
</div>
Maybe an obvious question but it hasn't been asked that I can see.
Just add display: inline-block; to the #photowrapper CSS
#photowrapper{
position:relative;
display:inline-block;
}
Fiddle: http://jsfiddle.net/DyrS9/
You can add display:table-cell (or table,inline-block) to #photowrapper :
#photowrapper{
position:relative;
display:table;
}
Example

My columns are going to a new line in Firefox/Safari but it works in Chrome

Here is my fiddle:
http://jsfiddle.net/w3VCe/6/
Here is my code
HTML:
<div class='container'>
<div class='column first'>Column 1</div>
<div class='column second'>Column 2</div>
</div>
CSS:
.container{
background:red;
font-size:0px;/*so that blocks will be on the same line without automatically going to a new line*/
width:200px
}
.column{
box-sizing:border-box;
moz-box-sizing:border-box;
display:inline-block;
font-size:14px;
width:50%;
}
.column.first{padding-left:10px;padding-right:5px;}
.column.second{padding-left:5px;padding-right:10px;}
I have no idea why this wouldn't work in firefox/safari. All I am doing is putting two columns in a fixed width container. So the container is a certain width, and the columns are each 50% of that width. I had to make the font-size 0px for the container, then redefine it to 14px in the columns because I guess by default they put a space between two inline-blocks or something. Once I set the font-size to 0px it worked (on Chrome). But now I am seeing that it doesn't work on other browsers.
The problem lies in the fact that box-sizing:border-box is not working on Safari and Firefox... Why not? I thought Safari and Chrome both used "webkit" so should work the same or whatever. And why isn't moz-box-sizing working?
Note: I am using Safari 5 because I am using an old Mac.
Thanks!
Should the box-sizing for moz be a '-moz' prefix? Looks like you're just missing the dash.
Modified fiddle:
http://jsfiddle.net/realchaseadams/NbJ5j/
-moz-box-sizing:border-box;
It is taking 139px for column1 and 2 because there is padding-left and padding-right. If you remove those properties, they will get aligned in one line.
Try below CSS:
.column.first{}
.column.second{text-align:right}

CSS clearfix how to over come the inability to center an element using it

Ok I am remastering a site for one of my clients and for years I have been doing things a little old fashion as far as CSS goes. Ive read up on some things and found the method referred to as clearfix, and I have been wanting to give it a shot since I read about it.
Now that I am giving it a shot I am finding out my method of centering an element is not working
typically I would center it margin:0 auto; but implementing the clearfix this no longer works. So now I am looking for a means of applying the same logic but keeping clearfix in the equation. I found a couple things that would work on newer browsers but not sure if they would work on older ones and I am trying to keep this as cross browser compliant as possible without hacking things to do things to do other things. Thats one of the many reasons I am remastering the site(s) I want a nice new clean code base for them from the ground up, that is compliant.
for reference this is the method of clearfix I am using
http://www.webtoolkit.info/css-clearfix.html
*EDITED TO SHOW CODE*
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[title here]</title>
<style type="text/css" media="all">
*{margin:0;padding:0;}
body{background-color:#3F3965;font-family:Verdana, Geneva, sans-serif;color:#000;}
#content_wrap{margin:0 auto;padding:0;width:800px;background-color:#FFF;}
#content_left{width:180px;float:left;}
#content_right{width:620px;float:left;}
.rounded{
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
border-radius: 10px; /* CSS3 */
behavior: url(border-radius.htc);
}
.border{border:solid 2px;}
.light{border-color:#999;}
.dark{border-color:#666;}
.clr{clear:both;} /*standard clear*/
/*start clearfix*/
.clearfix:after {content: ".";display: block;clear:both;visibility:hidden;line-height:0;height:0;}
.clearfix {display:inline-block;}
html[xmlns] .clearfix {display:block;}
* html .clearfix{height:1%;}
/*end clearfix*/
</style>
</head>
<body>
<div id="content_wrap" class="clearfix rounded border dark">
<div id="content_left">left</div>
<div id="content_right">right</div>
</div>
</body>
</html>
as previously mentioned the main containing element loses its "centered" position upon applying the clearfix class to it. The whole point of the clearfix from my understanding it to take parent elements that have floating elements within it is to have the element adjust itself to the height of the largest floating element within it. Now where this works like I believe it should the margin:0 auto; on the same element via a class provided otherwise gets ignored
One method to solve the miscalculation of container height of elements having floating children is to put overflow:hidden on them. The miscalculation occurs because at the time of calculating the height of container DIV the inside layout is not ready. overflow:hidden on container DIV forces recalculation of the height after all children are rendered.
<div class="container">
<div class="child">
Lorem ipsum
</div>
<div class="child">
Lorem ipsum
</div>
<div class="child">
Lorem ipsum
</div>
.container{
overflow:hidden;
}
.child{
float:left;
width:20px;
}
This will cause problem only in palces where you have some elements absolutely or relatively positioned that is actually placed outside container, like some banners and ribbons. Otherwise this is a clean solution.
PPK has one article on it http://www.quirksmode.org/css/clearing.html
Ok, Ill answer my own question. Seeing as no one here could provide anything better or in a sense specific to the question.
What I ended up doing is taking another div placing it inside the content_wrap div, and removed the clearfix class from this element. This this new div was given the class of clearfix and wrapped around the rest of the content divs so it would apply the clearfix the way intended.
This allowed for the content_wrap div to center the way I wanted it to.
Expanding on chris's answer, you want two wrappers in this scenario.
The outside wrapper should set the width of the container, and apply your margin: 0 auto; styling:
.content_center {
width: 800px;
margin: 0 auto;
}
Then, we can apply the clearfix class and styles to your content wrapper, and set it's width to 100% (of its parent):
.content_wrap {
width: 100%;
}
Here's a fiddle.

CSS DIV not expanding when more text is added

I have a quick CSS question, i'm hoping that somebody can help me out!
I have a DIV called #ContentPanel and I want it to be able to expand so that it can cater for more text if needed. At the moment if the text is longer than 500px (as specified in the CSS) it flows out the bottom and over the content in the div below. How can I set it up to auto expand and push all divs after downwards.
If anybody has any ideas, please let me know
Here's the HTML
<div id="MainContent">
<div id="MainImage"></div>
<div id="ContentPanel">Text content goes here.</div>
</div>
...and here's the CSS
#MainContent {
position:relative;
height:500px;
width:800px;
margin:0 auto;
background-color: #000;
}
#MainImage {
position:absolute;
top:0;
left:0;
width:350px;
height:500px;
background-color:#000;
}
#ContentPanel {
position:absolute;
height:500px;
top:0;
left:350px;
width:450px;
background-color:#000;
}
Thanks in advance!
Kind regards,
Decbrad
Use min-height instead of height.
Except for IE 6: It has a bug, so that it interprets height like min-height.
As mentioned the problem is that you define a fixed height .. and so the browser adheres to it..
You need to make it more flexible by using the min-height property. However IE does not support it, but due to another bug on how it handles the height (which it expands to cater for the content if more than the defined height) it can be worked around..
A complete solution is
height:auto!important; /*this set the height to auto for those supporting it (not IE)*/
height:500px; /*for IE, all others override it by the previous rule*/
min-height:500px; /*for the ones that support it (all but IE)*/
This, in general, is the solution to such problems.. in your case i see that you use absolute positioning.. if you really need this, and it is not just an attempt to solve your problem, then unfortunately there is no way for an element to adjust its size to cater for absolute positioned elements..
Try setting a minimum height (min-height:) as opposed to a specific, fixed height.
The property you're after is min-height, rather than height.
http://www.w3schools.com/CSS/pr_dim_min-height.asp
This means your element will be at least that high. If the content warrants it, the height will grow past the specified value.
As a second option, you might want to try overflow: scroll; or overflow-x and overflow-y to have a scrollbar appear on the div in case the content doesn't fit.
Personal opinion: to get around IE6's issues with min-height, it's really better to use an IE6-specific conditional comment in your targeting it rather than adding hacks into your CSS.
This is if having standards-compliant CSS matters to you, although tbh that's getting more and more difficult these days thanks to wonky browser support.
<!--[if IE 6]>
#MainContent, #MainImage, #ContentPanel { height:500px; }
<![endif]-->
you need to use min-height css attribute

div background color cuts off

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;
}