CSS - dikey menü ekstra bosluk problemi

metsatöll · 08.01.2007

Son zamanlarda cok ilginc bir hata ile karsilasmaya basladim. Menü hazirlarken olusan bir problem (ekteki resimde ne anlatmak istedigim acik bir sekilde görülebilir)

Normalde kodlamayi elle yaptigim zaman, ilginctir <li><a href="link">Link </a><li> seklinde (</a> yazmadan önce bir bosluk) birakinca explorerda ekstra bosluk olusmuyor. Ama konu Wordpress olunca linkler databaseden otomatik olarak cekiliyor ve hic bir bosluk olmadigindan benim bunu düzenleme sansim yok.

Asagida kullandigim kodlar var, bu problemle daha önce karsilasmis ve ya cözüm yolunu bilen biri var midir?

CSS dosyasina;

HTML Code:

ul, li { list-style:none; margin:0; padding:0;}
 
.sidebar a, .sidebar a:visited {
    color: #ccc;
    text-decoration:none;
    border-bottom: 1px dotted #4f4f4f;
    display: block;
    font-size: .7em;
    padding: 2px;
    }
.sidebar a:hover {
  background: #255a90;
  color: #fff;
  text-decoration: none;
  }

body tagi icerisine

HTML Code:

<div class="sidebar">
   <ul>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
   </ul>
</div>

s5prin · 08.01.2007

Sorunun bire bir aynısı, benim yaptığım aşağıya açılan menülerimde de oluyor(du). CSS ve div hiyerarşisi verdiğinden pek farklı değil. Ne olduğunu ben de anlamadım ve dediğin gibi halledip geçmiştim. Linkler veritabanından alınsa da PHP ya da HTML koduna dökülen yere (döngüde) gerekli yere boşluk bırakarak halletmiştim.

Explorer'ı anlamaya çalışmayı uzun zaman önce bıraktım, tavsiye ederim.

Abyss82 · 08.01.2007

ie ve ff için box model hack dökümanlarını inceleyebilirsin.
padding ve margin'leri iki browser'da farklı olarak işliyor, belki bunları biliyorsundur

ama yazayım dedim.

ve belirtmek isterim çoğu Wordpress temasının CSS'ı buglar ile doludur.
kendi yazdığın bir CSS değilse hatayı bulmak senin için ölüm olabilir

aynı mantıkta işleyen daha temiz bir tema bulabilirsin belki.

diğer sayfalarda kapanmamış bir tag başını ağrıtıyor olabilir

kod'ları görmeden daha fazla birşey sölemiyorum çünkü bu gibi Wordpress problemleri genellikle include edilen sayfalarda ki tag kapanma ve tag açık kalmalarda oluşuyor.

allah sabır versin
kolay gelsin.

s5prin · 08.01.2007

Wordpress'in ne olduğunu bile bilmiyorum, benim oluşturduğum menülerde herhangi bir margin ve padding değeri de yok, açık tag tabi ki yok. Şu an halen tasarımda olduğu için link veremiyorum ama baştan sona en temiz haliyle CSS ve HTML'dir. sorun %99 herşeyi kafasına göre yorumlayan IE problemi.

CSS-hack vs ile uğraşarak muhtemelen halledilebilir ama 1 boşluk koymak daha mantıklı ve basit, diye düşünüyorum ben şahsım ve kanımca.

metsatöll · 08.01.2007

Theme tasarimini ben yapiyorum, ve problemim box model ile ilgili birsey degil.

Tek sorun asagidaki kod ie de farkli, firefoxta farkli görünüyor. Width degeri atayarak ve ya </a>'dan önce bir bosluk birakarak problem ortadan kaldirilabiliyor, ama buda benim isime yaramiyor. Bunu düzeltmenin baska yolu var mi?

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<HTML xmlns="http://www.w3.org/1999/xhtml" lang="en" XML:lang="en">


<style>

ul, li { list-style:none; margin:0; padding:0;}
 
.sidebar a, .sidebar a:visited {
    color: #ccc;
    text-decoration:none;
    border-bottom: 1px dotted #4f4f4f;
    display: block;
    font-size: .7em;
    padding: 2px;
    }
.sidebar a:hover {
  background: #255a90;
  color: #fff;
  text-decoration: none;
  }

</style>

<div class="sidebar">

<ul id="menu">
  <li><a href="#">Birinci Link</a></li>
  <li><a href="#">Ikinci Link</a></li>
</ul>
</div>

oky · 08.01.2007

şey.. sidebar linklerine height: 20px; gibi bir değer verince mesela, 2 browser'da da aynı görüntü oluyor ama tabi tüm linklerin tek satır olacağı ne malum..

sonradan ekleme: height: 100%; deyince o problem de ortadan kalkıyor.

metsatöll · 08.01.2007

@oky, .sidebar a, .sidebar a:visited altina width degeri verdigimde de sorun cözülüyordu ama o zamanda padding degerleri sifirlaniyor ve hic bir padding degerini kabul etmiyor. Karmakarisik

HTML Code:

Her iki browserda da calisan bir kodlama buldum, iki günlük dert bitti sükür

.sidebarMenu {
	list-style:none;
	font-size: .7em;
}
.sidebarMenu li {
	border-bottom: 1px dotted #4f4f4f;
	line-height: 1em;
	list-style:none;
}
.sidebarMenu li a, .sidebarMenu li a:visited {
	color: #4c6b7d;
	text-decoration: none;
	padding: 4px 0px 4px 3px;
	display:block;
}
.sidebarMenu li a:hover {
	background:#4f4f4f;
	color:#FFFFFF;
}

Bu konuda cevap veren herkese tesekkürler

oky · 08.01.2007

hmm pardon bu mesajı yanlışlıkla gönderdim ama hazır göndermişken bari tebrik edeyim

Demetivasyon · 10.01.2007

Bu sorunun line-height ile çözüldüğünü biliyordum daha önce yapmıştım ama seninki çok temiz olmuş, ben luzumlu luzumsuz birsürü şey eklemişim. Teşekkür ederim.

08.01.2007	#2 (permalink)
s5prin Üyelik Tarihi: 16.12.2006 Yer: istanbul Yaş: 26 Mesaj: 459	Re: CSS - dikey menü ekstra bosluk problemi Sorunun bire bir aynısı, benim yaptığım aşağıya açılan menülerimde de oluyor(du). CSS ve div hiyerarşisi verdiğinden pek farklı değil. Ne olduğunu ben de anlamadım ve dediğin gibi halledip geçmiştim. Linkler veritabanından alınsa da PHP ya da HTML koduna dökülen yere (döngüde) gerekli yere boşluk bırakarak halletmiştim. Explorer'ı anlamaya çalışmayı uzun zaman önce bıraktım, tavsiye ederim. __________________ imzaya sponsor

08.01.2007	#3 (permalink)
Abyss82 Üyelik Tarihi: 31.03.2004 Yer: istanbul Yaş: 25 Mesaj: 157	Re: CSS - dikey menü ekstra bosluk problemi ie ve ff için box model hack dökümanlarını inceleyebilirsin. padding ve margin'leri iki browser'da farklı olarak işliyor, belki bunları biliyorsundur ama yazayım dedim. ve belirtmek isterim çoğu Wordpress temasının CSS'ı buglar ile doludur. kendi yazdığın bir CSS değilse hatayı bulmak senin için ölüm olabilir aynı mantıkta işleyen daha temiz bir tema bulabilirsin belki. diğer sayfalarda kapanmamış bir tag başını ağrıtıyor olabilir kod'ları görmeden daha fazla birşey sölemiyorum çünkü bu gibi Wordpress problemleri genellikle include edilen sayfalarda ki tag kapanma ve tag açık kalmalarda oluşuyor. allah sabır versin kolay gelsin. __________________ sigara bir gün hepimizi öldürecek !

08.01.2007	#4 (permalink)
s5prin Üyelik Tarihi: 16.12.2006 Yer: istanbul Yaş: 26 Mesaj: 459	Re: CSS - dikey menü ekstra bosluk problemi Wordpress'in ne olduğunu bile bilmiyorum, benim oluşturduğum menülerde herhangi bir margin ve padding değeri de yok, açık tag tabi ki yok. Şu an halen tasarımda olduğu için link veremiyorum ama baştan sona en temiz haliyle CSS ve HTML'dir. sorun %99 herşeyi kafasına göre yorumlayan IE problemi. CSS-hack vs ile uğraşarak muhtemelen halledilebilir ama 1 boşluk koymak daha mantıklı ve basit, diye düşünüyorum ben şahsım ve kanımca. __________________ imzaya sponsor

08.01.2007	#6 (permalink)
oky Üyelik Tarihi: 30.12.2000 Yer: İstanbul Yaş: 23 Mesaj: 2,774 Görsel: 12	Re: CSS - dikey menü ekstra bosluk problemi şey.. sidebar linklerine height: 20px; gibi bir değer verince mesela, 2 browser'da da aynı görüntü oluyor ama tabi tüm linklerin tek satır olacağı ne malum.. sonradan ekleme: height: 100%; deyince o problem de ortadan kalkıyor. __________________ . blogger \| deviant \| lastfm \| twitter \| myspace

08.01.2007	#7 (permalink)
metsatöll Üyelik Tarihi: 11.07.2001 Yer: Tallinn Yaş: 28 Mesaj: 517 Görsel: 9	Re: CSS - dikey menü ekstra bosluk problemi @oky, .sidebar a, .sidebar a:visited altina width degeri verdigimde de sorun cözülüyordu ama o zamanda padding degerleri sifirlaniyor ve hic bir padding degerini kabul etmiyor. Karmakarisik HTML Code: Her iki browserda da calisan bir kodlama buldum, iki günlük dert bitti sükür .sidebarMenu { list-style:none; font-size: .7em; } .sidebarMenu li { border-bottom: 1px dotted #4f4f4f; line-height: 1em; list-style:none; } .sidebarMenu li a, .sidebarMenu li a:visited { color: #4c6b7d; text-decoration: none; padding: 4px 0px 4px 3px; display:block; } .sidebarMenu li a:hover { background:#4f4f4f; color:#FFFFFF; } Bu konuda cevap veren herkese tesekkürler

08.01.2007	#8 (permalink)
oky Üyelik Tarihi: 30.12.2000 Yer: İstanbul Yaş: 23 Mesaj: 2,774 Görsel: 12	Re: CSS - dikey menü ekstra bosluk problemi hmm pardon bu mesajı yanlışlıkla gönderdim ama hazır göndermişken bari tebrik edeyim __________________ . blogger \| deviant \| lastfm \| twitter \| myspace

10.01.2007	#9 (permalink)
Demetivasyon Üyelik Tarihi: 29.12.2006 Yer: İstanbul Yaş: 31 Mesaj: 4	Re: CSS - dikey menü ekstra bosluk problemi Bu sorunun line-height ile çözüldüğünü biliyordum daha önce yapmıştım ama seninki çok temiz olmuş, ben luzumlu luzumsuz birsürü şey eklemişim. Teşekkür ederim.