[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

CSS commmands that grow with additional input

Posted on 2006-04-08
22
Medium Priority
?
517 Views
Last Modified: 2008-03-10
The css command "min-height" has been very good at producing containers that grow with input. What are some other ways to let a div grow as things are added?
0
Comment
Question by:weikelbob
  • 10
  • 5
  • 4
  • +1
22 Comments
 
LVL 49

Accepted Solution

by:
Roonaan earned 668 total points
ID: 16406853
min-width :-P

To get min-height and min-width work somewhat crossbrowser you can use:
height: auto !important;
min-height:500px;
height:500px;

As IE doesn't support min-height and only height, you can still benefit from the min-height behaviour in FF.

-r-
0
 
LVL 7

Author Comment

by:weikelbob
ID: 16406896
Looks good, Is that W3 compliant?
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 16406967
Yes and no.  I think w3c doesn't allow two of the same css tags in the same rule.

-r-
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 7

Expert Comment

by:JeffHowden
ID: 16409990
Perhaps I'm misunderstanding, but pretty much every element grows to accomodate its contents unless specifically instructed via CSS or scripting not to.  Apply a border or background-color to an element and watch what happens as you change its content.
0
 
LVL 7

Author Comment

by:weikelbob
ID: 16414509
Hmm... Found another instance where I need a container div that grows vertically when more content or divs are added. And it would be nice if they were W3 compliant.
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 16414572
Is your content floating possibly? Then you would have to add a clearing div.

And W3C is a guideline, not a rulebook. I don't think any client is willing to pay x hours of additional work for getting things w3c if the output is the same. So having two height: attributes is something you and I know is not going to validate, but we all know is working crossbrowser and displays nicely.

-r-
0
 
LVL 7

Author Comment

by:weikelbob
ID: 16414582
I'll give the double height a shot, then. I'm mainly worried about future employers looking at my portfolio and saying, "That page doesn't validate!". I will give your way a shot, Roonan, thanks.
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 16414593
As long as it is a design choice which you can defend, then it should be fine. But then again I am not your employer :-D

-r-
0
 
LVL 15

Assisted Solution

by:Daydreams
Daydreams earned 664 total points
ID: 16414833
What about using conditional comments.. you page will validate:

http://virtuelvis.com/archives/2004/02/css-ie-only

Not sure this is right, but it validated at:

http://jigsaw.w3.org/css-validator/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.mydiv {height: auto !important;
min-height:500px;height:500px;
border:1px red solid;}
</style>
<!--[if IE]>
<style>
.mydiv {height:500px;
}
</style>
<![endif]-->
</head>
<body>
<div class="mydiv"></div>
</body>
</html>
0
 
LVL 15

Expert Comment

by:Daydreams
ID: 16419026
Please ignore the post above.. not well thought out.
0
 
LVL 7

Author Comment

by:weikelbob
ID: 16422563
Do conditional comments,

<!--[if IE]>

...

validate?
0
 
LVL 15

Expert Comment

by:Daydreams
ID: 16423754
Hi Bob, yes they do. Please see my link above:

http://virtuelvis.com/archives/2004/02/css-ie-only

From that site:

"The perhaps most reassuring part of this technique is that your main CSS and your carefully authored HTML/XHTML documents will remain valid"

My code above though, is not good, as I said. I thought that using conditional comments to add validation in this case may be useful, if done right. Perhaps another expert will add something. Conditional comments won't be useful in all cases, and this may be one of them.

I agree with Roonaan, that if the site works well, and you can explain to your employers why you used a particular hack (if you can't use conditional comments), then it should not matter.
0
 
LVL 7

Expert Comment

by:JeffHowden
ID: 16424416
Conditional comments are a double-edged sword.  If you're not inclusive enough, a future version of IE which may fix a bug you're attempting to counter with your conditional comment(s) may actually make the problem worse in a now fixed browser.  If you're too inclusive, you may only end up fixing the bug for a smaller portion of your audience than you originally intended.
0
 
LVL 7

Author Comment

by:weikelbob
ID: 16431372
Will the double hieght strategy:

height: 550px !important;
height:500px;

work with IE7?
0
 
LVL 7

Author Comment

by:weikelbob
ID: 16493141
I need to know if conditional comments will work with future versions of IE. I don't want possible employers to check my portfolio and see that some of the sites don't validate and move on without asking why they don't validate.

Bob
0
 
LVL 7

Assisted Solution

by:JeffHowden
JeffHowden earned 668 total points
ID: 16493300
Bob, I don't think that a few little bits that don't validate are going to cost you a job.  In the unlikely event that they do, I think you're probably better off as you don't want to be working for a company that doesn't  understand that writing 100% valid code in the real world isn't really a reality right now and that a few, carefully selected, compromises will have to be made to drastically increase the support for your work.
0
 
LVL 7

Author Comment

by:weikelbob
ID: 16493832
OK. That sounds about right Jeff, good point.

To tie this up, what should I keep in mind as far as IE7?
0
 
LVL 7

Author Comment

by:weikelbob
ID: 16530524
How is IE7 going to change things?
0
 
LVL 7

Expert Comment

by:JeffHowden
ID: 16530538
Honestly, that's an almost impossible question to answer until it's finally released.
0
 
LVL 7

Author Comment

by:weikelbob
ID: 16530556
What do you personally do when making sites to be ready for it?
0
 
LVL 7

Expert Comment

by:JeffHowden
ID: 16530574
I used to try to take beta browsers into consideration, but got burned pretty badly everytime.  So, the only thing I do is let the client know that there's a new browser that's a beta, that we don't design for it or test in it at all (and why) and that we'd be happy to revisit the design when it's released.
0
 
LVL 7

Author Comment

by:weikelbob
ID: 16530583
Thanks Jeff
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Suggested Courses
Course of the Month18 days, 2 hours left to enroll

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question