Page 1 of 1
CSS elementen overlappen elkaar
Posted: Sun Jan 22, 2012 1:48 pm
by 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?
Re: CSS elementen overlappen elkaar
Posted: Mon Jan 23, 2012 1:49 am
by mcDavid
"position:absolute" eruit skippen.
Re: CSS elementen overlappen elkaar
Posted: Tue Jan 24, 2012 3:13 pm
by 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 1914 times
Re: CSS elementen overlappen elkaar
Posted: Tue Jan 24, 2012 11:12 pm
by 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.
Re: CSS elementen overlappen elkaar
Posted: Tue Jan 24, 2012 11:31 pm
by 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;
}
Re: CSS elementen overlappen elkaar
Posted: Wed Jan 25, 2012 10:47 am
by erpee
Zou werken als het in alle browsers een probleem gaf. Dit is alleen een IE probleem.
Re: CSS elementen overlappen elkaar
Posted: Wed Jan 25, 2012 1:58 pm
by mcDavid
Dan gebruik je conditional comments
