Inputveld verticaal uitlijnen in IE - Softwareontwikkeling

donderdag 31 mei 2007 12:17

Acties:

Verwijderd

Topicstarter

Ik heb een simpel input veld die ik verticaal wil uitlijnen tegen de bovenkand van de pagina (of een div) aan. In firefox wordt het input veld in het volgende voorbeeld netjes tegen de bovenkant van de viewport gezet, maar in Internet Explorer (v6 en v7) zit er aan de bovenkant een marge van 1 pixel. Ik heb al heel wat geprobeerd; marges, padding, border, vertical-align, maar ik krijg het nog steeds niet werkend.
Kan iemand mij aub hier advies over geven?

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
    background: #FF0000;
    margin: 0;
    padding: 0;
    }
</style>
</head>
<body>
<input name="zoek" type="text"  />
</body>
</html>

donderdag 31 mei 2007 18:28

Acties:

moozzuzz

Ik vrees voor jou dat deze pixel "een deel van" het input-content-gedeelte is en dus altijd getoond wordt, én dus niet kan aangepast worden (dit weekend ook ontdekt; maar bij mij maakte het niet echt veel uit).

vrijdag 1 juni 2007 09:16

Acties:

Verwijderd

Topicstarter

Ik dacht dat er misschien wel een hack voor was.
Als ik:

code:

1
2
3

* html input {
margin-top: -1px;
}

doe, werkt het wel in IE6, alleen werkt deze hack weer niet bij IE7.
Iemand die misschien een andere hack weet, wat volgens mij de enige oplossing is om dit probleem op te lossen?

vrijdag 1 juni 2007 09:43

Acties:

dB90

werkt margin:auto; ?

Webberry Webdevelopment

vrijdag 1 juni 2007 16:05

Acties:

Verwijderd

heb je geprobeerd het absoluut in een relatieve div te positioneren?

zondag 3 juni 2007 14:34

Acties:

Verwijderd

Topicstarter

Ik heb het input veld een margin:auto meegegeven, maar dit werkt niet.

Als ik het input veld absolute positioneer in een relative div werkt het wel!
Dit is dus een oplossing die ik kan gebruiken, maar niet de oplossing die ik in mijn hoofd had.
Ik ben bang dat dit de enige oplossing is.. iig bedankt!

zondag 3 juni 2007 14:45

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op vrijdag 01 juni 2007 @ 09:16:
Ik dacht dat er misschien wel een hack voor was.
Als ik:
code:
1
2
3
* html input {
margin-top: -1px;
}
doe, werkt het wel in IE6, alleen werkt deze hack weer niet bij IE7.
Iemand die misschien een andere hack weet, wat volgens mij de enige oplossing is om dit probleem op te lossen?

Gebruik dan gewoon een conditional comment ipv een ranzige hack

Intentionally left blank

zondag 3 juni 2007 17:34

Acties:

DelTorro

crisp schreef op zondag 03 juni 2007 @ 14:45:
[...]

Gebruik dan gewoon een conditional comment ipv een ranzige hack

offtopic: misschien heeft-ie dit wel opgenomen in een stylesheet voor IE dat door middel van een conditional comment wordt opgenomen. is het alsnog netjes gedaan en leest alleen IE6 het