So this post can be broken down into two questions.
The first:
Is there a way to streamline my CSS code so that two elements can have exactly the same make up except for one? It seems like there must be a better way than having everything written out twice.
A simple example,
.shadow_left {
float: left;
height: 100%;
width: 10px;
background-color: #999999; }
.shadow_right {
float: right;
height: 100%;
width: 10px;
background-color: #999999; }
The second question:
I noticed that when I define a div to have a 100% height, in Firefox it limits the height to that of the browser and in IE, it extends it to match the content. Is there an easier way to define height so that it extends with content, while also having a minimum height?
height attributes & streamlining css
Moderator: General Moderators
Re: height attributes & streamlining css
Question 1:laurenash wrote:So this post can be broken down into two questions.
The first:
Is there a way to streamline my CSS code so that two elements can have exactly the same make up except for one? It seems like there must be a better way than having everything written out twice.
A simple example,
.shadow_left {
float: left;
height: 100%;
width: 10px;
background-color: #999999; }
.shadow_right {
float: right;
height: 100%;
width: 10px;
background-color: #999999; }
The second question:
I noticed that when I define a div to have a 100% height, in Firefox it limits the height to that of the browser and in IE, it extends it to match the content. Is there an easier way to define height so that it extends with content, while also having a minimum height?
if my memory don't fail.... you can write it in this way
.shadow_left, .shadow_right {
height: 100%;
width: 10px;
background-color: #999999; }
.shadow_left {
float: left;
}
.shadow_right {
float: right;
}
- social_experiment
- DevNet Master
- Posts: 2793
- Joined: Sun Feb 15, 2009 11:08 am
- Location: .za
Re: height attributes & streamlining css
Are you talking about heights in terms of floated elements, because with a normal (non-floated) div element in both FF and IE, the height (if set to 100%) expands the same in both cases. In fact, without the height property set, it still expands. Im not sure why a percentage value (ie 30%) doesn't affect height but a pixel value does. You could also set height to auto (height: auto;).The second question:
I noticed that when I define a div to have a 100% height, in Firefox it limits the height to that of the browser and in IE, it
extends it to match the content. Is there an easier way to define height so that it extends with content, while also having a minimum height?
Minimum heights are tricky, not from a code point of view but from a design point of view. Imho, if you want it a height, set it at a fixed height or don't set one at all.
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
Re: height attributes & streamlining css
Thanks for the help (: