[thelist] DIVs / SPANs confusion for boxes

[Stefan Schwarzer]

I am aware of this, but I am not crack enough to know why it is or  
what to do. Can you give me a hint?

Thanks a lot!

Stef

> It works in Firefox and IE7 as well, but not in IE6.
> You know about conditional style sheets for IE, right?
> Nan
>
> -----Original Message-----
> From: thelist-bounces at lists.evolt.org
> [mailto:thelist-bounces at lists.evolt.org] On Behalf Of Stefan Schwarzer
> Sent: Friday, March 20, 2009 10:52 AM
> To: thelist at lists.evolt.org
> Subject: Re: [thelist] DIVs / SPANs confusion for boxes
>
> Seems to got it working (at least in Safari, Mac) like this:
>
>                 <div style="float: left; font-size: 150%; font-color:
> #efefef; background: #fff; font-family: arial-black, sans-serif;
> border: 1px solid #666; align: center; width: 100%">
>                 	<div style="margin: 4.8%; width: 40%; float: left">
> 	                	<div style="margin: 0.5em; border-bottom:
> 1px solid #aaa;">
>     	            		<div style="margin-bottom:
> -0.8em">{$min}</div>
>         	        		<div style="font-size: 60%;
> font-family: arial, sans-serif; margin-bottom: 0.4em">
>             	    			<br />minimum
>                 			</div>
>                 		</div>
>     	            	<div style="margin: 0.5em; margin-top: 0.8em;
> border-bottom: 1px solid #aaa">
>         	        		{$max}
>             	    		<span style="font-size: 60%; font-family:
> arial, sans-serif">
>                 				<br />maximum
>                 			</span>
> 	                	</div>
>     	            	<div style="margin: 0.5em; margin-top: 0.8em;
> border-bottom: 1px solid #aaa">
>         	        		{$no}
>             	    		<span style="font-size: 60%; font-family:
> arial, sans-serif">
>                 				<br />no countries
>                 			</span>
> 	                	</div>
> 	                </div>
>                 	<div style="margin: 4.8%; width: 40%; float: left">
> 	                	<div style="margin: 0.5em; border-bottom:
> 1px solid #aaa;">
>     	            		{$avg}
>         	        		<span style="font-size: 60%;
> font-family: arial, sans-serif">
>             	    			<br />average
>                 			</span>
>                 		</div>
>     	            	<div style="margin: 0.5em; margin-top: 0.8em;
> border-bottom: 1px solid #aaa">
>         	        		{$stdv}
>             	    		<span style="font-size: 60%; font-family:
> arial, sans-serif">
>                 				<br />st dev
>                 			</span>
> 	                	</div>
>     	            	<div style="margin: 0.5em; margin-top: 0.8em;
> border-bottom: 1px solid #aaa">
>         	        		{$sum}
>             	    		<span style="font-size: 60%; font-family:
> arial, sans-serif">
>                 				<br />sum
>                 			</span>
> 	                	</div>
> 	                </div>
>                 </div>
>
> Stef
>
> On Mar 20, 2009, at 3:38 PM, Nan Harbison wrote:
>
>> Is this design not working in ALL browsers, or is it browser  
>> specific?
>> Nan
>>
>> -----Original Message-----
>> From: thelist-bounces at lists.evolt.org
>> [mailto:thelist-bounces at lists.evolt.org] On Behalf Of Stefan  
>> Schwarzer
>> Sent: Friday, March 20, 2009 10:06 AM
>> To: thelist at lists.evolt.org
>> Subject: [thelist] DIVs / SPANs confusion for boxes
>>
>> Hi there,
>>
>> gush, shouldn't be that complicated,no? And surely isn't... but I  
>> just
>> don't get it.
>>
>> I would like to have this here:
>>
>>
>> ---------------------------------------
>> |    -------------     -------------     |
>> |    |              |     |              |     |
>> |    |   box     |     |   box     |     |
>> |    |      1      |     |      2      |     |
>> |    |              |     |              |     |
>> |    -------------     -------------     |
>> --------------------------------------
>>
>> In the boxes I have something like this:
>>
>> ---------------------
>> |   8475              |
>> |   minimum       |
>> |   ---------------   |
>> |                         |
>> |   194856          |
>> |   maximum       |
>> |   ---------------   |
>> ---------------------
>>
>> I've come up with something like this:
>>
>>                <div style="float: left; font-size: 150%; font-color:
>> #aaa; font-style: bold; background: #efefef; font-family: arial,  
>> sans-
>> serif; border: 1px solid #666; align: center">
>>                	<div style="margin: 0.5em; border: 1px solid #0a0">
>> 	                	<div style="margin: 0.5em; border-bottom:
>> 1px solid #aaa;">
>>    		            		{$min}
>>        	        		<span style="font-size: 60%">
>>            		    			<br />minimum
>>                			</span>
>>                		</div>
>>    	            		<div style="margin: 0.5em; margin-top:
>> 0.8em;
>> border-bottom: 1px solid #aaa">
>>        	        		{$max}
>>            	    			<span style="font-size: 60%">
>>                				<br />maximum
>> 	                		</span>
>> 	                	</div>
>> 	                </div>
>>                	<div style="margin: 0.5em; width: 40%; border: 1px
>> solid #a00">
>> 	                	<div style="margin: 0.5em; border-bottom:
>> 1px solid #aaa">
>>    	            			{$min}
>>        	        		<font style="font-size: 60%">
>>            	    				<br />average
>>                			</font>
>>                		</div>
>> 	                	<br />
>>    	            	<div style="margin: 0.5em; margin-top: 0.8em;
>> border-bottom: 1px solid #aaa">
>>        	        		{$max}
>> 	            	    		<span style="font-size: 60%">
>>                				<br />median
>>                			</span>
>> 	                	</div>
>> 	                </div>
>>                </div>
>>
>>
>> But it doesn't do what it should do....
>>
>> Can anyone point to me a better strategy?
>>
>> Thanks a lot!
>>
>> Stef
>>
>> ____________________________________________________________________
>>
>>  Lean Back and Relax - Enjoy some Nature Photography
>>  http://photoblog.la-famille-schwarzer.de
>>
>>  Appetite for Global Data? UNEP GEO Data Portal:
>>  http://geodata.grid.unep.ch
>>  ____________________________________________________________________
>>
>>
>>
>>
>>
>>
>> --
>>
>> * * Please support the community that supports you.  * *
>> http://evolt.org/help_support_evolt/
>>
>> For unsubscribe and other options, including the Tip Harvester and
>> archives of thelist go to: http://lists.evolt.org Workers of the Web,
>> evolt !
>>
>> --
>>
>> * * Please support the community that supports you.  * *
>> http://evolt.org/help_support_evolt/
>>
>> For unsubscribe and other options, including the Tip Harvester and
>> archives of thelist go to: http://lists.evolt.org Workers of the Web,
>> evolt !
>>
>
> -- 
>
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
>
> For unsubscribe and other options, including the Tip Harvester and  
> archives
> of thelist go to: http://lists.evolt.org Workers of the Web, evolt !
>
> -- 
>
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
>
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !
>