CSS Gurus Help Here!
April 21, 2006 - 6:29pm
April 22, 2006 - 8:20am
Here is a solution that is
Here is a solution that is working for me in IE6 and Firefox 1.0:
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>span and div test with display:-moz-inline-box, inline-block</title>
</head>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>span and div test with display:-moz-inline-box, inline-block</title>
</head>
<style type="text/css">
* { padding:0; margin:0; font-family:verdana; font-size:12px; }
span.td
{
display: -moz-inline-box; /* For FireFox */
display: inline-block; /* For IE */
vertical-align: top; /* For IE */
}
div.td
{
display: -moz-inline-box; /* For FireFox */
display: inline-block; /* For IE */
vertical-align: top; /* For IE */
}
SELECT { font-size:10px; }
P.italic { font-size:11px; font-style: italic; }
</style>
<body>
<br>
<p><strong>Test 1:</strong> Use 3 span elements with display:-moz-inline-box, inline-block;</p>
<p class="italic">(works properly in IE 6.0 and Firefox 1.0)</p>
<span class="td" style="width:100px; height:100px; background-color:#0033FF;"></span><span class="td" style="width:200px; height:200px; background-color:#FF0033;"></span><span class="td" style="width:300px; height:300px; background-color:#330F0F;"></span>
<br>
<br>
<br>
<p><strong>Test 2:</strong> Use 3 div elements with display:-moz-inline-box, inline-block;</p>
<p class="italic">(works properly in Firefox 1.0, IE 6.0 still allows DIVs to carriage return to the next line)</p>
<div class="td" style="width:100px; height:100px; background-color:#0033FF;"></div><div class="td" style="width:200px; height:200px; background-color:#FF0033;"></div><div class="td" style="width:300px; height:300px; background-color:#330F0F;"></div>
<br>
<br>
<br>
<p><strong>Test 3:</strong> Use 3 span elements with display:-moz-inline-box, inline-block; middle element having a [select] inside</p>
<p class="italic">(works properly in IE 6.0, Firefox 1.0 expands the [select] the full height of the [span])</p>
<span class="td" style="width:100px; height:100px; background-color:#0033FF;"></span><span class="td" style="width:200px; height:200px; background-color:#FF0033;"><select name="test"><option value="15">15</option><option value="20">20</option></select></span><span class="td" style="width:300px; height:300px; background-color:#330F0F;"></span>
<br>
<br>
<br>
<p><strong>Test 4:</strong> Use 3 span elements with display:-moz-inline-box, inline-block; middle element having a [select] inside, which is wrapped in a [p][/p]</p>
<p class="italic">(works properly in IE 6.0 and Firefox 1.0)</p>
<span class="td" style="width:100px; height:100px; background-color:#0033FF;"></span><span class="td" style="width:200px; height:200px; background-color:#FF0033;"><p><select name="test"><option value="15">15</option><option value="20">20</option></select></p></span><span class="td" style="width:300px; height:300px; background-color:#330F0F;"></span>
<br>
<br>
<br>
<p><strong>Test 5:</strong> Use 3 div elements with float:left, middle element having a [select] inside</p>
<p class="italic">(works properly in IE 6.0 and Firefox 1.0)</p>
<div style="float:left; width:100px; height:100px; background-color:#0033FF;"></div>
<div style="float:left; width:200px; height:200px; background-color:#FF0033;"><select name="test"><option value="15">15</option><option value="20">20</option></select></div>
<div style="float:left; width:300px; height:300px; background-color:#330F0F;"></div>
</body>
</html>
April 23, 2006 - 2:57am
April 23, 2006 - 12:20pm
April 24, 2006 - 9:27am
bobbymac - My reason for
bobbymac - My reason for using a <select> in a span is this...
I want to use a tag that allows the use of display:inline-block. DIV won't work, but SPAN will in both IE 6.0 and FF 1.0. Using display:inline-block I can specify the width of an element that will flow inline and not include a carriage return. By definition, an inline element cannot have a specified width, and a block element can have a specified width, but then cannot reside beside another block element. I want the best of both worlds.
(Yes, I realize that "floats" will allow me to do the same thing, but then they do weird things when you have to clear them to enable the "container" div with background to stretch to the full dimensions of the floated divs inside of it) I'm trying not to use any floats, but still achieve a layout where I can specify widths of inline page elements. Thus my desire to try using display:inline-block and display:-moz-inline-box;
Polvero - Yeah I know, it is just a cross-browser test, I won't use any inline CSS in the final product. I wanted to show several tests between browsers on a single page so I could compare between them and in how they handle various "display" CSS attributes.
Can anyone tell me why Firefox acts really crazy and IE6 works properly when using span tags set with display:inline-block?
Only in Firefox, I get weird carriage return when I put a [select] inside a [span] that has display:inline-block set on it. Cannot for the life of me figure out why.
Can any of you help?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>span and div test with display:inline-block</title>
</head>
<style type="text/css">
* { padding:0; margin:0; font-family:verdana; font-size:12px; }
span.td
{
display: table-cell; /* For FireFox and Opera */
display: inline-block; /* For Opera and IE */
vertical-align: top; /* For IE */
}
div.td
{
display: table-cell; /* For FireFox and Opera */
display: inline-block; /* For Opera and IE */
vertical-align: top; /* For IE */
}
div.container { width:600px; background-color:#FFFF66; }
</style>
<body>
<br>
<p><strong>Test 1:</strong> Use 3 span elements with display:inline-block</p>
<span class="td" style="width:100px; height:100px; background-color:#0033FF;"></span>
<span class="td" style="width:200px; height:200px; background-color:#FF0033;"></span>
<span class="td" style="width:300px; height:300px; background-color:#330F0F;"></span>
<br>
<br>
<br>
<p><strong>Test 2:</strong> Use 3 div elements with display:inline-block</p>
<div class="td" style="width:100px; height:100px; background-color:#0033FF;"></div>
<div class="td" style="width:200px; height:200px; background-color:#FF0033;"></div>
<div class="td" style="width:300px; height:300px; background-color:#330F0F;"></div>
<br>
<br>
<br>
<p><strong>Test 3:</strong> Use 3 span elements with display:inline-block, middle element having a [select] inside</p>
<span class="td" style="width:100px; height:100px; background-color:#0033FF;"></span>
<span class="td" style="width:200px; height:200px; background-color:#FF0033;"><select name="test"><option value="15">15</option></select></span>
<span class="td" style="width:300px; height:300px; background-color:#330F0F;"></span>
<br>
<br>
<br>
<p><strong>Test 4:</strong> Use 3 div elements with float:left, middle element having a [select] inside</p>
<div style="float:left; width:100px; height:100px; background-color:#0033FF;"></div>
<div style="float:left; width:200px; height:200px; background-color:#FF0033;"><select name="test"><option value="15">15</option></select></div>
<div style="float:left; width:300px; height:300px; background-color:#330F0F;"></div>
</body>
</html>
RubberPhotos - PHP/MySQL Custom Photo Album Software
Christian T-shirts, Clothing, and Apparel