CSS elementen overlappen elkaar

[erpee]

Ik heb een serachbox in mijn sidebar geplaats met de volgende CSS

Code: Select all

#searchwrapper {
width:220px; /*follow your image's size*/
height:35px;/*follow your image's size*/
background-image:url([[root_url]]/uploads/searchbox.jpg);
background-repeat:no-repeat; /*important*/
padding:0px;
margin:0px;
position:relative; /*important*/
}
 
#searchwrapper form { display:inline ; }
 
.searchbox {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:0px;
left:6px;
width:170px;
height:35px;
}
 
.searchbox_submit {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:2px;
left:187px;
width:31px;
height:31px;
}

Daaronder wil ik iets over Social Media. Dit geheel roep ik als volgt aan:

Code: Select all

      <div id="r-sidebar">
		{search}
		<br />
		Social Media
      </div>

Resultaat is echter dat de tekst "Social Media" en de searchbox over elkaar heengaan, i.p.v. dat de tekst netjes onder de searchbox zou komen (zoals ik eigenlijk verwachtte..)


Wie weet raad?

[mcDavid]

"position:absolute" eruit skippen.

[erpee]

Dat was ´m ....

Maar nu dit. In Internet Explorer (sorry voor ´t woord) zie ik dat de zoektekst niet netjes verticaal in het midden van de box wordt uitgelijnd. Hij staat meer aan de bovenkant. Is dit te fixen

Snapshot_1.png (5.32 KiB) Viewed 1919 times

[mcDavid]

Ben bang van niet, input-elementen worden nogal raar gerenderd in Internet Explorer... Als het wel kan zal het ongetwijfeld line-height zijn wat je zoekt.

[timdebuurman]

misschien een

padding-top: 5px;

toevoegen aan

.searchbox
?

bijv.

.searchbox {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:0px;
left:6px;
width:170px;
height:30px;
padding-top: 5px;
}

[erpee]

Zou werken als het in alle browsers een probleem gaf. Dit is alleen een IE probleem.

[mcDavid]

Dan gebruik je conditional comments