CSS - Styling For My Site Is Gone In Ie6 (most Of The Time), And Ie6 Probl. With Pdf, Help?

Hi,

Here is the problem I'm having:
This:
see attached cssprobl.jpg
should become:
http://www.thephotofactory.nl/csstest/cssprobl-goal.jpg

Here's the CSS code I have:
Code:

body{
	background-color:	#FFFFCC;
	margin:		0px;
	padding:		0px;
}

.holder{
	background-color:	red;
	width:			250px;
	height:		400px;
	float:			left;
	margin:		10px 10px;
	}

.img{
	padding:		0px;
	width:			200px;
	height:		200px;	
	margin:		20px 10% 0px 10% ;
	border:		2px white solid;
	}
	
h1{
	font:			35px Arial, Helvetia, sans-serif;
	color:			white;
	text-align:		center;
	margin-top:		10px;
	}

.omschrijving{
	background-color:	grey;
	font:			15px Arial, Helvetia, sans-serif;
	text-align:		left;
	margin-top:		10px;
	padding:		5px;
	}

.prijs{
	font:			25px Arial, Helvetia, sans-serif;
	color:			white;	
	text-align:		center;
	margin-top:		10px;	
	}

.dec{
	vertical-align:	super;
	font:			14px Arial, Helvetia, sans-serif;
	color:			white;	
	}
	
.euro{
	font:			14px Arial, Helvetia, sans-serif;
	color:			white;	
	}	

.omschrijvingholder{
	background-color:	black;
	width:			250px;
	height:		100px;	
	margin-top:		0px;
	}

.prijsholder{
	background-color:	green;
	width:			80px;
	height:		40px;	
	vertical-align:	bottom;
	float:			right;
	}

and this is one of the sections:
Code:

<div class="holder">
	<h1>Theeglas
	</h1>
	<div class="img">
		<img src="theeglas.jpg" alt="theeglas met bedrukking" title="theeglas met bedrukking" width=200 height=200></img>
	</div>
	<div class="omschrijvingholder">
		<div class="omschrijving">
			Een mooi theeglas met een doorzichtige bedrukking.
		</div>
		<div class="prijsholder">
			<div class="prijs">
				<span class="euro">&euro;</span> 9,<span class="dec">95</span>
			</div>
		</div>		
	</div>
</div>

SO: how do I get that green part exactly there (and without going outside the red box), and how do I wrap the text in the grey part around it? After 2 hours of trying all kinds of options I give up and call for help

Here is the full link:
http://www.thephotofactory.nl/csstest/valentijn.htm

Second problem: in IE the white border around the img is too low, leaving a red space. How to avoid that?

Thanks in advance,

Papermouse

PS How do I put an uploaded image in this message?

I am styling my <pre> on my template document and have some questions. First, I tend to gravitate to semantic correct CSS and xHTML. Thus chose xHTML strict for my template document and have been extensively styling the CSS style sheet.

The <pre> tag presents the latest dilemma. Basically, I came across this link where the developer presented CODE in a <textarea> tag. The code did not require entities, < or &rt; in the markup. These styling attributes appealed to me; inset design and overflow with scrollbars for extending text beyond the page.

Bottom of the Page
http://www.evolt.org/article/HTML_is_not_an_acronym/17/35750/

The developer also used presentational styling in the markup. HTML strict does not allow one to use style attributes in the HMTL; besides the style sheet. But my sensibilities gravitate toward using semantically correct markup. Most people, including myself, use div containers with classes or ID for presentational styling. But for this exercise, the <pre> or <code> tag are preferable since these classes serve to present (you guess it) code.

One annoyance about the <pre> relates to indenting the markup (the actual text file). By default (and by design), <pre> tag incorporates any indents or white space in the browser. My thoughts revolved around changing the wrapping property to account for line breaks and disregard white space. Then, in theory, one could indent the markup for readability. This document is for personal use and semantically organized and indented for readability. The correct markup will help me understand or edit the document two years from now. In addition, it forms my quick reference to copy & paste tags.

The following class style did not produce the <textarea> desired attributes.

Code:

pre.CodeExample {
	/*background-color: transparent;*/
	border: medium inset #CCCCCC;
	font-family: "Courier New", Courier, monospace;
	margin: 1em 2em 1em 2em;
	overflow: auto;
	padding: .5em .5em .5em .5em;
	white-space: nowrap;
}

Please let me know what are the default CSS attributes for the <pre> and <textarea> tags.
Please let me know if you have any suggestions about styling the <pre> tag or links to cool implementations. You may review my markup at the following link.

http://www.geocities.com/robert_neville310/Template_Sample.html#blockquote

The Blockquote section has several methods for displaying code. I am looking to consolidate and standardize my classes. Suggestions are welcomed.

div.ExampleOutput
pre.CodeExample

I see that layout on my site is completely broken in IE7...
funnyfurniture.net

Could anybody help me to fix my css...

Hi, my xml code is:

<room>
<features>
<pool/>
<Aircon/>
<Radio/>
<DVD/>
<beds double="2"/>
</features>
</room>

<room>
<features>
<pool/>
<TV/>
<VCR/>
<beds twin="1" double="2"/>
</features>
</room>

i want to Display the word "Features" in bold, then under the word features i want the list of features to be displayed with bullet points. I want beds to appear in bold in the list.

This is the code i have so far:

features{
}

features:before {
content:"Features";
font-weight:bold;
}

beds:before{
content:"Beds: ";
}

beds[sofa-bed]:after{
content:attr(sofa-bed)" x Sofa-bed ";
}

beds[double]:after{
content:attr(double)" x Double ";
}

beds[twin]:after{
content:attr(twin)" x Twin ";
}


The problem is, i can't get in to display anything except, the beds entry. But when it displays the beds entry, it only gives the last one in the list. So the one with a twin and a double, only the twin is displayed.

Any idea's?

I have a menu constructed <div><ul><li><a><img><p>.

The li is margined as 16% to space a given number of links across the page in the 100% div.

I am trying to put a border around the <a> but the browser only shows the border as a sort of collapsed div and does not surround the child elements. I try giving height to the <a> but that does not work.

Any ideas how I can get the <a> border to surround the <img><p> tags?