Thema: rounded-corner script überdeckt Inhalt

Hallo,

ich habe unter dieser Seite ein Script gefunden mit dem man beim Internet Explorer "runde Ecken" erzeugen kann. Damit möchte ich meine Artikel(den Content) auf der Homepage formatieren. Ich habe entsprechend der Seite das Script folgendermaßen eingebaut:

In der Index.php

Code:

                        <div id="content" class="curved">
                                         <?php if($this->countModules('content-top')) : ?>
                            <div id="content-top" >
                                <jdoc:include type="modules" name="content-top" style="xhtml" />
                            </div>
                   <?php endif; ?>

in der Template.css

Code:

.curved {
-moz-border-radius:15px;
-webkit-border-radius:15px;
behavior:url(/template/businessblue/css/border-radius.htc);
	width:525px;
	float:left;
background-color:#eeefff;
border:3px solid #000073;
text-align:justify;
padding:10px;
	margin:-15px -10px 0px -35px;
}

hier der Link zur Test-Seite(hier Probiere ich Dinge aus bevor ich sie Online stelle - also nicht über Farbkombinationen ect. wundern). Unter Firefox sieht man den Den Artikel wie er seien Soll: mit einem blauen Rahmen umzogen der abgerundete Ecken hat. Unter IE7 sieht man zwar den abrerundeten Rahmen , aber den Inhalt nicht. Die Rahmenfröße wird richtig skaliert, aber der Inhalt wird ebend nicht angezeigt.
Firefox läd das Script nicht sondern bekommt die Information über die

Code:

-moz-border-radius:15px;

Anweisung. Daraus schließe ich dass das Problem am Script liegt.
Hier der das Script:

Code:

--Do not remove this if you are using--
Original Author: Remiz Rahnas
Original Author URL: http://www.htmlremix.com
Published date: 2008/09/24

Changes by Nick Fetchak:
- IE8 standards mode compatibility
- VML elements now positioned behind original box rather than inside of it - should be less prone to breakage
Published date : 2009/11/18


<public:attach event="oncontentready" onevent="oncontentready('v08vnSVo78t4JfjH')" />
<script type="text/javascript">

// findPos() borrowed from http://www.quirksmode.org/js/findpos.html
function findPos(obj) {
	var curleft = curtop = 0;

	if (obj.offsetParent) {
		do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		} while (obj = obj.offsetParent);
	}

	return({
		'x': curleft,
		'y': curtop
	});
}

function oncontentready(classID) {
  if (this.className.match(classID)) { return(false); }

	if (!document.namespaces.v) { document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); }

	this.className = this.className.concat(' ', classID);
	var arcSize = Math.min(parseInt(this.currentStyle['-moz-border-radius'] ||
	                                this.currentStyle['-webkit-border-radius'] ||
	                                this.currentStyle['border-radius'] ||
	                                this.currentStyle['-khtml-border-radius']) /
	                       Math.min(this.offsetWidth, this.offsetHeight), 1);
	var fillColor = this.currentStyle.backgroundColor;
	var fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1');
	var strokeColor = this.currentStyle.borderColor;
	var strokeWeight = parseInt(this.currentStyle.borderWidth);
	var stroked = 'true';
	if (isNaN(strokeWeight)) {
		strokeWeight = 0;
		strokeColor = fillColor;
		stroked = 'false';
	}

	this.style.background = 'transparent';
	this.style.borderColor = 'transparent';

	// Find which element provides position:relative for the target element (default to BODY)
	var el = this;
	var limit = 100, i = 0;
	while ((typeof(el) != 'unknown') && (el.currentStyle.position != 'relative') && (el.tagName != 'BODY')) {
		el = el.parentElement;
		i++;
		if (i >= limit) { return(false); }
	}
	var el_zindex = parseInt(el.currentStyle.zIndex);
	if (isNaN(el_zindex)) { el_zindex = 0; }
	//alert('got tag '+ el.tagName +' with pos '+ el.currentStyle.position);

	var rect_size = {
		'width': this.offsetWidth - strokeWeight,
		'height': this.offsetHeight - strokeWeight
	};
	var el_pos = findPos(el);
	var this_pos = findPos(this);
	this_pos.y = this_pos.y + (0.5 * strokeWeight) - el_pos.y;
	this_pos.x = this_pos.x + (0.5 * strokeWeight) - el_pos.x;

	var rect = document.createElement('v:roundrect');
	rect.arcsize = arcSize +'px';
	rect.strokecolor = strokeColor;
	rect.strokeWeight = strokeWeight +'px';
	rect.stroked = stroked;
	rect.style.display = 'block';
	rect.style.position = 'absolute';
	rect.style.top = this_pos.y +'px';
	rect.style.left = this_pos.x +'px';
	rect.style.width = rect_size.width +'px';
	rect.style.height = rect_size.height +'px';
	rect.style.antialias = true;
	rect.style.zIndex = el_zindex - 1;

	var fill = document.createElement('v:fill');
	fill.color = fillColor;
	fill.src = fillSrc;
	fill.type = 'tile';

	rect.appendChild(fill);
	el.appendChild(rect);

	var css = el.document.createStyleSheet();
	css.addRule("v\\:roundrect", "behavior: url(#default#VML)");
	css.addRule("v\\:fill", "behavior: url(#default#VML)");

	isIE6 = /msie|MSIE 6/.test(navigator.userAgent);
	// IE6 doesn't support transparent borders, use padding to offset original element
	if (isIE6 && (strokeWeight > 0)) {
		this.style.borderStyle = 'none';
		this.style.paddingTop = parseInt(this.currentStyle.paddingTop || 0) + strokeWeight;
		this.style.paddingBottom = parseInt(this.currentStyle.paddingBottom || 0) + strokeWeight;
	}

	if (typeof(window.rounded_elements) == 'undefined') {
		window.rounded_elements = new Array();

		if (typeof(window.onresize) == 'function') { window.previous_onresize = window.onresize; }
		window.onresize = window_resize;
	}
	this.element.vml = rect;
	window.rounded_elements.push(this.element);
}

function window_resize() {
	if (typeof(window.rounded_elements) == 'undefined') { return(false); }

	for (var i in window.rounded_elements) {
		var el = window.rounded_elements[i];

		var strokeWeight = parseInt(el.currentStyle.borderWidth);
		if (isNaN(strokeWeight)) { strokeWeight = 0; }

		var parent_pos = findPos(el.vml.parentNode);
		var pos = findPos(el);
		pos.y = pos.y + (0.5 * strokeWeight) - parent_pos.y;
		pos.x = pos.x + (0.5 * strokeWeight) - parent_pos.x;

		el.vml.style.top = pos.y +'px';
		el.vml.style.left = pos.x +'px';
	}

	if (typeof(window.previous_onresize) == 'function') { window.previous_onresize(); }
}
</script>

Kann mir jemand sagen woran es liegen könnte?

Und hier gibts eine deutsche Einbauanleitung zu PIE in Joomla:
http://www.bloggerschmidt.de/blog/it...-template.html

Ich selber nutze das auch auf meinen Seiten...


Axel

Ich habe es bei mir ausschließlich in der CSS gelöst, weil der Code in der index.php nie funktionierte bei mir. Warum auch immer.
Also dieses "...if lte IE 8" komplett löschen und statt dessen die CSS etwas umbauen:

Code:

#oben_beispiel
{
  ...
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
behavior: url("http://www.DeineDomain.de/templates/grundtemplate/css/PIE.htc");
...
}

Ich musste stets alle vier "Ecken" angeben und den absoluten Pfad zu PIE angeben. Mit dem relativen Pfad hat es auch nicht funktioniert.
Den Konqueror habe ich nie ausprobiert bei mir. Vielelicht liest das hier ja jemand und kann mal auf meine Tutorialseite gehen und nachschauen, ob alles schön rund ist...



Axel

Bau mal in der CSS ein "position:relative" mit ein. Und der PIE-Aufruf muss die letzte Zeile in der CSS-Datei innerhalb der Klasse/ID sein.


Axel