Here under the html from my dropdown. The right DIV shows lower than the left one.
i can't find how to fix it.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: #00ff61;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
outline: 0;
background: #6D0448;
background-image: none;
border: 1px solid black;
}
select {
width: 25%;
height: 100%;
margin: auto;
padding: 0 uto0 0 .5em;
color: #f9f91b;
cursor: pointer;
}
select::-ms-expand {
display: none;
}
.select::after {
content: '\25BC';
position: absolute;
top: 0;
right: 0;
bottom: 0;
padding: 0 1em;
background: #34495E;
pointer-events: none;
}
.select:hover::after {
color: #F39C12;
<!-- For different browsers -->
.select::after {
-webkit-transition: .25s all ease;
-o-transition: .25s all ease;
transition: .25s all ease;
}
.container{
text-align: center;
}
.blok{
display: inline-block;
zoom: 1;
*
display: inline;
width: 100px;
height: 200px;
background: red;
}
.blok p{
float: left;
width: 100px;
}
</style>
</head>
<hr>
<hr>
<body>
<div class="container" align="left">
<p><font face="Lucida Calligraphy"><b>SELECT DOELGROEP</font></p>
<select name="whichpage" id="whichpage"
onChange="if(this.selectedIndex!=0)
self.location=this.options[this.selectedIndex].value">
<option value="">Select</a></br>
<option value="https://www.natural-healing-shop.com/product-categorie/50/">50+</a></br>
<option value="https://www.natural-healing-shop.com/product-categorie/baby-kind/">baby-kind</br>
<option value="https://www.natural-healing-shop.com/product-categorie/bevallen/">bevallen</br>
<option value="https://www.natural-healing-shop.com/product-categorie/man/">man</br>
<option value="https://www.natural-healing-shop.com/product-categorie/sporter/">sporter</br>
<option value="https://www.natural-healing-shop.com/product-categorie/student/">student</br>
<option value="https://www.natural-healing-shop.com/product-categorie/vegetarier/">vegetarier</br>
<option value="https://www.natural-healing-shop.com/product-categorie/vrouw/">vrouw</br>
<option value="https://www.natural-healing-shop.com/product-categorie/wil-zwanger-worden/">wil-zwanger-worden</br>
<option value="https://www.natural-healing-shop.com/product-categorie/zwanger/">zwanger</br>
</select></div>
<div class="blok" align="center">
<p><font face="Lucida Calligraphy"><b>SELECT INDICATIEGEBIED</font></p>
<select name="whichpage" id="whichpage"
onChange="if(this.selectedIndex!=0)
self.location=this.options[this.selectedIndex].value">
<option value="https://www.natuur-healing.eu/">Select</a></br>
<option value="https://www.natural-healing-shop.com/product-categorie/50/">50+</a></br>
<option value="https://www.natural-healing-shop.com/product-categorie/accessoires/">accessoires</br>
<option value="https://www.natural-healing-shop.com/product-categorie/additieven/</br>
<option value="https://www.natural-healing-shop.com/product-categorie/afslanken/">afslanken</br>
<option value="https://www.natural-healing-shop.com/product-categorie/allergie/">allergie</br>
<option value="https://www.natural-healing-shop.com/product-categorie/allergie-en-ademhalingswegen/">allergie en ademhalingswegen</br>
<option value="https://www.natural-healing-shop.com/product-categorie/anti-aging/">anti aging</br>
<option value="https://www.natural-healing-shop.com/product-categorie/anti-insect/">anti-insect</br>
<option value="https://www.natural-healing-shop.com/product-categorie/baby-kind/">baby-kind</br>
<option value="https://www.natural-healing-shop.com/product-categorie/beenderen-en-gewrichten/">beenderen-en-gewrichten</br>
<option value="https://www.natural-healing-shop.com/product-categorie/bevallen/">bevallen</br>
<option value="https://www.natural-healing-shop.com/product-categorie/bijnier/">bijnier</br>
<option value="https://www.natural-healing-shop.com/product-categorie/blaas-en-nieren/">blaas-en-nieren</br>
<option value="https://www.natural-healing-shop.com/product-categorie/botten-en-spieren/">botten-en-spieren</br>
<option value="https://www.natural-healing-shop.com/product-categorie/cbd/">CBD</br>
<option value="https://www.natural-healing-shop.com/product-categorie/cholesterol/">cholesterol</br>
<option value="https://www.natural-healing-shop.com/product-categorie/cosmetica/">cosmetica</br>
<option value="https://www.natural-healing-shop.com/product-categorie/dag-en-nachtcremes/">dag-en-nachtcremes</br>
<option value="https://www.natural-healing-shop.com/product-categorie/detox/">detox</br>
<option value="https://www.natural-healing-shop.com/product-categorie/drainage/">drainage</br>
<option value="https://www.natural-healing-shop.com/product-categorie/energie-focus/">energie-focus</br>
<option value="https://www.natural-healing-shop.com/product-categorie/etherische-olien/">etherische-olien</br>
<option value="https://www.natural-healing-shop.com/product-categorie/fertiliteit/">fertiliteit</br>
<option value="https://www.natural-healing-shop.com/product-categorie/geef-boorstvoeding/">geef-boorstvoeding</br>
<option value="https://www.natural-healing-shop.com/product-categorie/geurspray/">geurspray</br>
<option value="https://www.natural-healing-shop.com/product-categorie/gewichtscontrole/">gewichtscontrole</br>
<option value="https://www.natural-healing-shop.com/product-categorie/gewrichten-botten-spieren/">gewrichten-botten-spieren</br>
<option value="https://www.natural-healing-shop.com/product-categorie/gezichtslotion/">gezichtslotion</br>
<option value="https://www.natural-healing-shop.com/product-categorie/gezondheid-zenuwachtigheid/">gezondheid-zenuwachtigheid</br>
<option value="https://www.natural-healing-shop.com/product-categorie/glucosemetabolisme/">glucosemetabolisme</br>
<option value="https://www.natural-healing-shop.com/product-categorie/haarlotion/">haarlotion</br>
<option value="https://www.natural-healing-shop.com/product-categorie/handcreme/">handcreme</br>
<option value="https://www.natural-healing-shop.com/product-categorie/hart-bloedvaten/">hart-bloedvaten</br>
<option value="https://www.natural-healing-shop.com/product-categorie/hart-en-bloedsomloop/">hart-en-bloedsomloop</br>
<option value="https://www.natural-healing-shop.com/product-categorie/hennapoeder/">hennapoeder</br>
<option value="https://www.natural-healing-shop.com/product-categorie/hormonale-balans/">hormonale-balans</br>
<option value="https://www.natural-healing-shop.com/product-categorie/hpa-as/">hpa-as</br>
<option value="https://www.natural-healing-shop.com/product-categorie/huid-nagels-haren/">huid-nagels-haren</br>
<option value="https://www.natural-healing-shop.com/product-categorie/huidcreme/">huidcreme</br>
<option value="https://www.natural-healing-shop.com/product-categorie/huidgel/">huidgel</br>
<option value="https://www.natural-healing-shop.com/product-categorie/huidolie/">huidolie</br>
<option value="https://www.natural-healing-shop.com/product-categorie/huidzalf/">huidzalf</br>
<option value="https://www.natural-healing-shop.com/product-categorie/immuniteit/">immuniteit</br>
<option value="https://www.natural-healing-shop.com/product-categorie/inflammatie/">inflammatie</br>
<option value="https://www.natural-healing-shop.com/product-categorie/jacob-hooy/">jacob-hooy</br>
<option value="https://www.natural-healing-shop.com/product-categorie/keel-oren/">keel-oren</br>
<option value="https://www.natural-healing-shop.com/product-categorie/laboratoire-fenioux/">laboratoires-fenioux</br>
<option value="https://www.natural-healing-shop.com/product-categorie/lever-galblaas/">lever-galblaas</br>
<option value="https://www.natural-healing-shop.com/product-categorie/liftingkuur/">liftingkuur</br>
<option value="https://www.natural-healing-shop.com/product-categorie/longen/">longen</br>
<option value="https://www.natural-healing-shop.com/product-categorie/man/">man</br>
<option value="https://www.natural-healing-shop.com/product-categorie/massage-olie/">massage-olie</br>
<option value="https://www.natural-healing-shop.com/product-categorie/microbioom/">microbioom</br>
<option value="https://www.natural-healing-shop.com/product-categorie/mitochondrien/">mitochondrien</br>
<option value="https://www.natural-healing-shop.com/product-categorie/natuurlijke-weerstand/">natuurlijke-weerstand</br>
<option value="https://www.natural-healing-shop.com/product-categorie/neus/">neus</br>
<option value="https://www.natural-healing-shop.com/product-categorie/olie-en-vloeistoffen/">olie-en-vloeistoffen</br>
<option value="https://www.natural-healing-shop.com/product-categorie/oogcreme/">oogcreme</br>
<option value="https://www.natural-healing-shop.com/product-categorie/geneeskrachtige-orgonites/">geneeskrachtige-orgonites</br>
<option value="https://www.natural-healing-shop.com/product-categorie/parasieten/">parasieten</br>
<option value="https://www.natural-healing-shop.com/product-categorie/parasieten-schimmels/">parasieten-schimmels</br>
<option value="https://www.natural-healing-shop.com/product-categorie/parfum-olie/">parfum-olie</br>
<option value="https://www.natural-healing-shop.com/product-categorie/pijn/">pijn</br>
<option value="https://www.natural-healing-shop.com/product-categorie/policicincep-q10/">policicincep-q10</br>
<option value="https://www.natural-healing-shop.com/product-categorie/prostaat/">prostaat</br>
<option value="https://www.natural-healing-shop.com/product-categorie/pure-powder/">pure-powder</br>
<option value="https://www.natural-healing-shop.com/product-categorie/raw-pure-food/">raw-pure-food</br>
<option value="https://www.natural-healing-shop.com/product-categorie/reinigingsmelk/">reinigingsmelk</br>
<option value="https://www.natural-healing-shop.com/product-categorie/schildklier/">schildklier</br>
<option value="https://www.natural-healing-shop.com/product-categorie/schimmels/">schimmels</br>
<option value="https://www.natural-healing-shop.com/product-categorie/slaap-en-gemoedstoestand/">slaap-en-gemoedstoestand</br>
<option value="https://www.natural-healing-shop.com/product-categorie/spijsverteringskanaal/">spijsverteringskanaal</br>
<option value="https://www.natural-healing-shop.com/product-categorie/sporter/">sporter</br>
<option value="https://www.natural-healing-shop.com/product-categorie/stress/">stress</br>
<option value="https://www.natural-healing-shop.com/product-categorie/student/">student</br>
<option value="https://www.natural-healing-shop.com/product-categorie/urinair-comfort-menopauze/">urinair-comfort-menopauze</br>
<option value="https://www.natural-healing-shop.com/product-categorie/vegetarier/">vegetarier</br>
<option value="https://www.natural-healing-shop.com/product-categorie/vermoeidheid/">vermoeidheid</br>
<option value="https://www.natural-healing-shop.com/product-categorie/voedingssuplementen/">voedingssuplementen</br>
<option value="https://www.natural-healing-shop.com/product-categorie/vrouw/">vrouw</br>
<option value="https://www.natural-healing-shop.com/product-categorie/wil-zwanger-worden/">wil-zwanger-worden</br>
<option value="https://www.natural-healing-shop.com/product-categorie/zeep/">zeep</br>
<option value="https://www.natural-healing-shop.com/product-categorie/zenuwstel-en-hersenen/">zenuwstel-en-hersenen</br>
<option value="https://www.natural-healing-shop.com/product-categorie/zwanger/">zwanger</br>
</div>
</select>
<script type="text/javascript">
function handleSelect(elm)
{
window.location = elm.value+".html";
}
</script>
</body>
This is a typo:
It's in the stylesheet.
I don't know if it fixes the DIV problem, it's just a typo I noticed.
And another brace before it... The rule before the * selector lacks the closing brace.
Or wait, maybe the * is the typo? A rule that makes everything inline, 100px wide, 200px high and red doesn't make sense. Does the below belong to the rule above, .blok?
Good catches pandy!
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)