I want to display a box around a div, and I want it's size to adjust to the text width.
In Firefox, this code works as I want. In IE6/IE7, the box is as big as possible. I want to make this work for IE6 and IE7 (I actually care less about FF, because it's for an intranet).
I tried different values for display and width (which only has one value anyway), but none does what I need.
Here's the relevant CSS code:
/* Div acting like a box */
div.box {
border: solid 1px #CCCCCC;
background-color: #f9f9f9;
display: table;
padding: 4px;
margin: 4px 4px 0px 4px;
}
My DOCTYPE is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
==============================================
<STYLE TYPE="text/css">
IMG { border-color: red green blue purple; border: 20px inset; }
</STYLE>
***double
<STYLE TYPE="text/css">
IMG, P {border: 20px double #990000;}
</STYLE>
****
Box properties treat all block-level formatting elements like a virtual 'box'. The height and width of the box is determined by (going from inner-most dimension outward) the height and width of the contained elements (text and/or images) plus heights and widths for space around the element ('padding'), plus the height and widths created by added borders ('border'), along with exterior margin values ('margin') relative to elements exterior to the virtual box.
The border properties allow borders to be defined (of course) for any element. These properties give a much wider array of display options for creating line effects around elements than has previously been possible in HTML. If a border is rendered for an element with an inherent or assigned 'inline' 'display' property status, the browser may render a border for each line if the element spans more than one line.
Selector { border: [width] [line-style] [color] }
Example
Ext/Doc: blockquote { border: medium dashed #ff0000 }
In-Line: <blockquote STYLE="border: medium dashed #ff0000">this is a beautiful blockquote test</blockquote>
——————————————————————————–
[border-width] [width] IE | N4B4 Please see the description of allowed values in the 'border-width' property.
[border-style] [line-style] IE | N4B4 Please see the explanations of these values in the 'border-style' property.
[border-color] [color] IE | N4B4 Please see the explanations of these values in the 'border-color' property.
——————————————————————————–
border-top [IE | N]
Applicable Tags: ALL
HTML Equivalent: <img BORDER> | <table BORDER>
Inherit From Parent: No
Default Values: NA
What Is It?
This property controls the properties of the top border of an element. The border is drawn using the included color value. If no color is specified, the value will be taken from the 'color' property. If the property is used on an element with an inherent or assigned 'inline' 'display' property status, the browser may render a border for each line if the element spans more than one line.
Usage:
Selector { border-top: [width] [line-style] [color] }
Example
Ext/Doc: div.out { border-top: 10px outset #ffffff }
In-Line: <div STYLE="border-top: 10px outset #ffffff">this is a beautiful test</div>
——————————————————————————–
[border-width] [width] IE | N Please see the description of allowed values in the 'border-width' property.
[border-style] [line-style] IE | N Please see the explanations of these values in the 'border-style' property.
[border-color] [color] IE | N Please see the explanations of these values in the 'border-color' property.
——————————————————————————–
border-right [IE | N]
Applicable Tags: ALL
HTML Equivalent: <img BORDER> | <table BORDER>
Inherit From Parent: No
Default Values: NA
What Is It?
This property controls the properties of the right border of an element. The border is drawn using the included color value. If no color is specified, the value will be taken from the 'color' property. If the property is used on an element with an inherent or assigned 'inline' 'display' property status, the browser may render a border for each line if the element spans more than one line.
Usage:
Selector { border-right: [width] [line-style] [color] }
Example
Ext/Doc: em { border-right: thick double yellow }
In-Line: <em STYLE="border-right: thick double yellow">this is a beautiful test</em>
——————————————————————————–
[border-width] [width] IE | N Please see the description of allowed values in the 'border-width' property.
[border-style] [line-style] IE | N Please see the explanations of these values in the 'border-style' property.
[border-color] [color] IE | N Please see the explanations of these values in the 'border-color' property.
——————————————————————————–
border-bottom [IE | N]
Applicable Tags: ALL
HTML Equivalent: <img BORDER> | <table BORDER>
Inherit From Parent: No
Default Values: NA
What Is It?
This property controls the properties of the bottom border of an element. The border is drawn using the included color value. If no color is specified, the value will be taken from the 'color' property. If the property is used on an element with an inherent or assigned 'inline' 'display' property status, the browser may render a border for each line if the element spans more than one line.
Usage:
Selector { border-bottom: [width] [line-style] [color] }
Example
Ext/Doc: span { border-bottom: solid green }
In-Line: <span STYLE="border-bottom: solid green">this is a beautiful test</span>
——————————————————————————–
[border-width] [width] IE | N Please see the description of allowed values in the 'border-width' property.
[border-style] [line-style] IE | N Please see the explanations of these values in the 'border-style' property.
[border-color] [color] IE | N Please see the explanations of these values in the 'border-color' property.
——————————————————————————–
border-left [IE | N]
Applicable Tags: ALL
HTML Equivalent: <img BORDER> | <table BORDER>
Inherit From Parent: No
Default Values: NA
What Is It?
This property controls the properties of the left border of an element. The border is drawn using the included color value. If no color is specified, the value will be taken from the 'color' property. If the property is used on an element with an inherent or assigned 'inline' 'display' property status, the browser may render a border for each line if the element spans more than one line.
Usage:
Selector { border-left: [width] [line-style] [color] }
Example
Ext/Doc: strong { border-left: thin groove blue }
In-Line: <strong STYLE="border-left: thin groove blue">this is a beautiful test</strong>
——————————————————————————–
[border-width] [width] IE | N Please see the description of allowed values in the 'border-width' property.
[border-style] [line-style] IE | N Please see the explanations of these values in the 'border-style' property.
[border-color] [color] IE | N Please see the explanations of these values in the 'border-color' property.
——————————————————————————–
border-width [IE | N4B3]
Applicable Tags: ALL
HTML Equivalent: <img BORDER> | <table BORDER>
Inherit From Parent: No
Default Value: medium
What Is It?
This property controls the thickness for one to four border sides. If multiple borders are specified, they are given as a space separated list of width values.
Value assignments:
1 value present: All four borders are set to that value.
2 values present: Top and bottom borders receive first value while right and left borders are set to the second value.
3 values present: Top – first value, right&left – second value, bottom – third value.
4 values present: Top, right, bottom and left respectively.
Usage:
Selector { border-width: [width] }
Example
Ext/Doc: strong { border-width: thick }
In-Line: <strong STYLE="border-width: thick">this is a beautiful test</strong>
——————————————————————————–
thin | medium | thick explicit IE | N4B3 These values set the weight (thickness) of the line used to draw the borders. The browser will determine what thicknesses these keywords shall hold. 'medium' is the default value.
[length] calculated IE | N4B3 This is an explicit or relative size measurement of the thickness of the border. Consult the Units Page for acceptable length unit systems.
——————————————————————————–
border-top-width [IE | N4B3]
Applicable Tags: ALL
HTML Equivalent: <img BORDER> | <table BORDER>
Inherit From Parent: No
Default Value: medium
What Is It?
This controls the thickness of the top border.
Usage:
Selector { border-top-width: [width] }
Example
Ext/Doc: strong { border-top-width: thin }
In-Line: <strong STYLE="border-top-width: thin">this is a beautiful test</strong>
——————————————————————————–
[border-width] [width] IE | N4B3 Please see the description of allowed values in the 'border-width' property.
——————————————————————————–
border-right-width [IE | N4B3]
Applicable Tags: ALL
HTML Equivalent: <img BORDER> | <table BORDER>
Inherit From Parent: No
Default Value: medium
What Is It?
This controls the thickness of the right border.
Usage:
Selector { border-right-width: [width] }
Example
Ext/Doc: strong { border-right-width: 10px }
In-Line: <strong STYLE="border-right-width: 10px">this is a beautiful test</strong>
——————————————————————————–
[border-width] [width] IE | N4B3 Please see the description of allowed values in the 'border-width' property.
——————————————————————————–
border-bottom-width [IE | N4B3]
Applicable Tags: ALL
HTML Equivalent: <img BORDER> | <table BORDER>
Inherit From Parent: No
Default Value: medium
What Is It?
This controls the thickness of the bottom border.
Usage:
Selector { border-bottom-width: [width] }
Example
Ext/Doc: strong { border-bottom-width: medium }
In-Line: <strong STYLE="border-bottom-width: medium">this is a beautiful test</strong>
Browser Notes
– Netscape 4 Beta 3 Rendering of border properties on single sides (in contrast to using the shorthand 'border-width' property) cuts in to the rendering of adjacent elements.
——————————————————————————–
[border-width] [width] IE | N4B3 Please see the description of allowed values in the 'border-width' property.
——————————————————————————–
border-style [IE | N4B3]
Applicable Tags: ALL
HTML Equivalent: <img BORDER> | <table BORDER>
Inherit From Parent: No
Default Value: none
What Is It?
This property controls the type of line used for the border of the current element. It uses from one to four space separated values which are bound to the four borders as illustrated in the "What Is It?" section of the 'border-width' attribute.
Usage:
Selector { border-style: [line-style] }
Example
Ext/Doc: strong { border-style: groove }
In-Line: <strong STYLE="border-style: groove">this is a beautiful test</strong>
none explicit IE | N4B3 Default value. No border is rendered, regardless of any 'border-width' present.
dotted explicit IE | N A dotted line drawn on top of the background of the element.
dashed explicit IE | N A dashed line drawn on top of the background of the element.
solid explicit IE | N4B3 A solid line.
groove explicit IE | N4B3 A 3-D groove is drawn based upon the [color] value.
ridge explicit IE | N4B3 A 3-D ridge is rendered based upon the [color] value.
inset explicit IE | N4B3 A 3-D inset is rendered based upon the [color] value.
outset explicit IE | N4B3 A 3-D outset is rendered based upon the [color] value.
double explicit IE | N4B3 A double line drawn on top of the background of the element. The two lines with the space between adds up to the 'border-width' properties.
——————————————————————————–
border-color [IE | N4B3]
Applicable Tags: ALL
HTML Equivalent: <img BORDER> | <table BORDER>
Inherit From Parent: No
Default Value: The value of the 'color' property.
What Is It?
This property controls the color for one to four border sides. It uses from one to four space separated values which are bound to the four borders as illustrated in the "What Is It?" section of the 'border-width' attribute. If no color is specified, this value will be taken from the 'color' property.
Usage:
Selector { border-color: [color] }
Example
Ext/Doc: strong { border-color: blue }
In-Line: <strong STYLE="border-color: blue">this is a beautiful test</strong>
[color] explicit IE | N4B3 This value specifies the color to use in creating the border. Please see the section on Color Units for more details.
——————————————————————————–
Value Description
none No border.
dotted Dotted line drawn over the top of the element.
dashed Dashed line drawn over the top of the element.
solid Solid line.
double Double line drawn over the top of the element; the width of the two lines and the space between them equals the border-width value.
groove 3-D groove drawn in colors based upon color.
ridge 3-D ridge drawn in colors based upon color.
inset 3-D inset drawn in colors based upon color.
outset 3-D outset drawn in colors based upon color.
border-top-width