[ungaro]

Ruthsarian Skidoo CSS template'tindeki "Two Columns Left - Left Column Tallest" örneğiyle alakalı problemim var.

http://webhost.bridgew.edu/etribou/l...left_left.html

burdaki sol menüyü kendi menümle değiştirince sağdaki "Two Columns Left - Left Column Tallest" yazısı da en aşağıya kayıyor.

http://www.alpalp.com/css/two_left_left.html

burda Firefox düzgün gösterirken, Explorer'da yazı aşağıya doğru kayıyor.

sebebi ne olabilir acaba?

[cgencer]

Explorer padding ve margin'leri garip yorumlar; bu yüzden sağ taraftaki alan belirli bir genişliği geçerse ve toplam alanın da fix bir genişlikteyse, otomatik olarka aşağıya atar... Firefox temiz yorumlarken, ie kendince bir yorum katar margin olayına ve böylece bizleri ifrit eder.

[ungaro]

en son geldigim nokta şöyle:

hersey cok esasli calisiyor, hatta tüm problemleri çözdüm diyebilirim. fakat internet Explorer'da esrarengiz bir probleme takıldım.
sadece horizontal menüde imagelarin bulunması gerekiyor. oraya da elle imajları koydum. sonuç şu şekilde oldu:

http://www.alpalp.com/ifrit.gif

<div class="hnav"><ul id="topnav"><li><a href="#">Home</a></li>
<li><a href="#"><img src="images/menu_bullet.gif" border=0/>About Us</a></li><li><a href="#"><img src="images/menu_bullet.gif" border=0/>Publishers</a></li><li><a href="#"><img src="images/menu_bullet.gif" border=0/>Free Magazine</a></li><li><a href="#"><img src="images/menu_bullet.gif" border=0/>Gift Certificates</a></li><li><a href="#"><img src="images/menu_bullet.gif" border=0/>Shopping Cart</a></li></ul>
</div>

* HTML .hnav ul li, * HTML .hnav ul li a
{
	width: 1%; /* IE/Mac needs this */
	display: inline-block;	/* IE/Mac needs this */
	/* \*/
		width: auto;
		display: inline; 
		position: relative;
	/* reset above hack */

}
* HTML .hnav, * HTML .hnav ul a
{
	/* \*/ height: 0.01%; /* hasLayout hack to fix render bugs in IE/Win. 
				 IE/Mac will ignore this rule. */
}
* HTML .HNAV
{
	padding: 0;	/* IE5/Win will resize #hnav to fit the heights of its
			   inline children that have vertical padding. So this
			   incorrect case selector hack will be applied only by
			   IE 5.x/Win */
}
.hnav
{

	border-bottom: solid 0px #fff;
	text-align: center;
	height:24px;
	line-height:24px;

}



.hnav, .hnav ul li a
{
	/* need to middor veritcal padding on .hnav and child anchor elements
	 * because the anchors are _not_ block elements. since they are not
	 * block elements web browsers will not expand .hnav to contain them
	 * even with the extra padding. by applying the same padding to both
	 * the parent .hnav _looks_ like its containing the child anchor
	 * elements. 
	 */
	padding-top: 3px;
	padding-bottom: 4px;
	font-size:9px;
}


.hnav ul, .hnav ul li
{
	display: inline;
list-style-type: none;


}

.hnav ul li a
{
	margin: 0 -1px 0 0;
	padding-left: 4px;
	padding-right: 4px;	/* short-hand padding attribute would overwrite
				   top/bottom padding set in a previous rule */
/*
	border-left: solid 1px #000;
	border-right: solid 1px #000;
*/
	white-space: nowrap;
	
}


ul#topnav, ul#topnav li{
margin:3px;
padding:4px;
line-height:24px;
height:24px;
}


.hnav ul li a:link, .hnav ul li a:visited, .hnav ul li a:active, .hnav ul li a:hover
{
	text-decoration: none;
}
.hnav ul li span.divider
{
	display: none;
}

[Lautreamont]

navigasyonda ikonları CSS ile yerleştirmek için;

ul#topnav li	{
	background: url(../images/menu_bullet.gif) 0 50% no-repeat;
	padding-right: 15px;
	}