Amici Nybråten
Reputation: 57
Why isn't div height changed?
Yo, I have a div, which I've tried to give a specific height for ages. It refuses to cooperate. I can change the width, but not the height. Does anybody know maybe a reason why? Any properties that can affect my ability to set specific div sizes?
Here's my HTML, and although I have the same problem with every div, it is the div with tag "priser" which frustrates me the most. I'll give you a picture to show how it leads to different placement from browser to browser (the rectangle called "Prisinformasjon" is the output of the "priser"-div):
<form method='POST' id='form1' runat='server' autocomplete='off'>
<div id="screenie" style="position: relative; width: 100%; height: 100%; font-family: 'Malgun Gothic'; font-weight: 400;">
<div style="margin-top: 15px;">
<div id="Tjenesteinformasjon" style='width: 300px; height: 335px; text-align: center; position: absolute; left: 30px; border-radius: 18px; border-color: #ff3333; border-style: solid; border-width: 6px; padding: 10px 10px;'>
<span style='font-size: 26px;'>Hva gjør vi?</span><br />
<p style='color:black;'>Vi tilbyr flyttehjelp, flyttevask, varetaxi/budbil, transport og utleie av biltransporthenger!<br /><br />
Vennligst benytt bestillingsskjema til høyre for å få et tilbud raskt og enkelt (bestilling er ikke bindende)!<br /><br />
Ønsker du å kontakte oss manuelt, enten for bestilling, informasjon eller kundeservice, kan du også bruke kontakt- og bedriftsinformasjonen nedenfor.</p>
</div>
<div id="Center-div" style="width: 550px; position: absolute; left: 380px;">
<div style='color: black; border-radius: 18px; border-color: #ff3333; border-style: solid; border-width: 6px; padding: 10px 10px;'>
<div style="text-align: center;">
<div id="skjematype_a" style="display: block; width: 265px; height: 75px; margin-left: 120px; color: black; font-size: 11.75px; text-align: center; border-width: 3px; border-style: outset; border-color: #00e6ab;">
<img id="bil" src="/images/bil.jpg" onclick="changeImage()" style="width: 135px; height: 75px; float: left; padding-right: 2px;" />
<div id="skjematype_b">Klikk på bildet for å bytte bestillingskjema til <b>biltransporthenger.</b></div>
</div>
<script>
function changeImage()
{
var bestillingstekst = document.getElementById('bestillingstekst')
var bestillingstekst2 = document.getElementById('bestillingstekst2')
var block = document.getElementById('skjematype_a')
var s_text = document.getElementById('skjematype_b')
var image = document.getElementById('bil');
if (image.src.match("bil"))
{
image.src = "/images/henger.jpg"
s_text.innerHTML = "Klikk på bildet for å bytte bestillingskjema til <b>transport</b> og <b>flyttetjenester.</b>"
bestillingstekst.hidden = 'hidden'
bestillingstekst2.hidden = ''
}
else
{
image.src = "/images/bil.jpg";
s_text.innerHTML = "Klikk på bildet for å bytte bestillingskjema til <b>biltransporthenger.</b>"
bestillingstekst.hidden = ''
bestillingstekst2.hidden = 'hidden'
}
}
</script>
<div id='bestillingstekst' class='bestillingstekst'>
<p>
<span style='font-size: 26px;'>Bli kontaktet med tilbud på sms!</span><br />
<span style='font-style: italic;'>(tilbudet kommer normalt dagen etter)</span>
</p>
<p class='question'>Hvilke tjenester ønsker du?</p>
<label>Flyttehjelp<input id='fhjelp' type='checkbox' name='tjenester' runat='server'/></label>
<label>Flyttevask<input id='fvask' type='checkbox' name='tjenester' runat='server'/></label></>
<label>Transport<input id='transport' type='checkbox' name='tjenester' runat='server'/></label></>
<p class='question'>Hvordan ønsker du å betale?</p>
<label>Kontant<input id='kontant' type='radio' name='betaling' runat='server'/></label></>
<label>Faktura<input id='faktura' type='radio' name='betaling' runat='server'/></label></>
<p class="question">Hva synes du er en god pris for jobben?</p>
<div style='width: 100%; display: inline-block; text-align: left; line-height: 22px;'>
<label>Pris i kroner:<input style='width: 150px; display: inline-block; float:right;' id='pris1' type='tel' maxlength='8' runat='server'/></label>
</div>
<p class='question'>Er du privatperson eller bedrift?</p>
<label>Privat<input id='privat' type='radio' name='kundetype' runat='server'/></label></>
<label>Bedrift<input id='bedrift' type='radio' name='kundetype' runat='server'/></label></>
<p class='question'>Hvordan kontakter vi deg?</p>
<div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
<label>Fullt personnavn<input style='width: 150px; display: inline-block; float:right;' id='personnavn' type='text' runat='server'/></label>
<br />
<label>Bedriftsnavn<span class='psmall'> (kun for bedrifter)</span><input style='width: 150px; display: inline-block; float:right;' id='bedriftsnavn' type='text' runat='server'/></label>
<br />
<label>Mobilnr.<input style='width: 150px; display: inline-block; float:right;' id='tlf' type='tel' maxlength='8' runat='server'/></label>
<br />
<label>Alternativt telefonnr.<input style='width: 150px; display: inline-block; float:right;' id='alt_tlf' type='tel' maxlength='8' runat='server'/></label>
<br />
<label>Epost<input style='width: 150px; display: inline-block; float:right;' id='epost' type='email' runat='server'/></label>
<br />
</div>
<p class='question'>Hva er beste dato og tidspunkt for tjenesten(e)?</p>
<p class='psmall2'>(bare endr tidspunkt for tjenestene du skal ha)</p>
<div style='width: 100%; display: inline-block; text-align: left; line-height: 24.5px;'>
<label>Flyttehjelp<input style='width: 150px; display: inline-block; float:right;' id='fhjelp_tid' type='datetime-local' value='2020-01-01T10:00:00' runat='server'/></label>
<br />
<label>Utflyttingsvask<input style='width: 150px; display: inline-block; float:right;' id='fvask_tid' type='datetime-local' value='2020-01-01T10:00:00' runat='server'/></label>
<br />
<label>Tilflyttingsvask<input style='width: 150px; display: inline-block; float:right;' id='fvask_tid2' type='datetime-local' value='2020-01-01T10:00:00' runat='server'/></label>
<br />
<label>Transport<input style='width: 150px; display: inline-block; float:right;' id='transport_tid' type='datetime-local' value='2020-01-01T10:00:00' runat='server'/></label>
<br />
</div>
<p class='question'>Hvor skal tjenesten(e) starte?</p>
<div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
<label>Adresse<input style='width: 150px; display: inline-block; float:right;' id='adresse1' type='text' runat='server'/></label>
<br />
<label>Poststed<input style='width: 150px; display: inline-block; float:right;' id='poststed1' type='text' runat='server'/></label>
<br />
<label>Postnr.<input style='width: 150px; display: inline-block; float:right;' id='postnr1' type='text' maxlength='4' runat='server'/></label>
<br />
<label>Etasje<input style='width: 150px; display: inline-block; float:right;' id='etasje1' type='tel' maxlength='2' runat='server'/></label>
<br />
<label>Ca. kvadratmeter <span class='psmall'>(trengs bare ved utflyttingsvask)</span><input style='width: 150px; display: inline-block; float:right;' id='kvadratmeter1' type='tel' maxlength='8' runat='server'/></label>
<br />
<label>Bygningstype<input style='width: 150px; display: inline-block; float:right;' id='bygningstype1' type='text' runat='server'/></label>
<br />
<label>Heis?</label>
<div style='display: inline-block; float:right;'>
<label>Ja<input id='heisja1' type='radio' name='heis1' runat='server'/></label>
<label>Nei<input id='heisnei1' type='radio' name='heis1' class='radioleft' runat='server'/></label>
</div>
<br />
</div>
<p class='question'>Hvor skal tjenesten(e) avslutte(s)?</p>
<p class='psmall2'>(ikke fyll inn viss kun utflyttingsvask)</p>
<div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
<label>Adresse<input style='width: 150px; display: inline-block; float:right;' id='adresse2' type='text' runat='server'/></label>
<br />
<label>Poststed<input style='width: 150px; display: inline-block; float:right;' id='poststed2' type='text' runat='server'/></label>
<br />
<label>Postnr.<input style='width: 150px; display: inline-block; float:right;' id='postnr2' type='text' maxlength='4' runat='server'/></label>
<br />
<label>Etasje<input style='width: 150px; display: inline-block; float:right;' id='etasje2' type='tel' maxlength='2' runat='server'/></label>
<br />
<label>Ca. kvadratmeter <span class='psmall'>(trengs bare ved tilflyttingsvask)</span><input style='width: 150px; display: inline-block; float:right;' id='kvadratmeter2' type='tel' maxlength='8' runat='server'/></label>
<br />
<label>Bygningstype<input style='width: 150px; display: inline-block; float:right;' id='bygningstype2' type='text' runat='server'/></label>
<br />
<label>Heis?</label>
<div style='display: inline-block; float:right;'>
<label>Ja<input id='heisja2' type='radio' name='heis2' runat='server'/></label>
<label>Nei<input id='heisnei2' type='radio' name='heis2' class='radioleft' runat='server'/></label>
</div>
<br />
</div>
<p class='question'>Hva ønsker du fraktet (og annet vi bør vite)?</p>
<textarea id='textarea1' rows='6' cols='32' spellcheck='False' name='S1' runat='server'>Du behøver ikke skrive noe her viss du ikke trenger det...</textarea><br />
<button style='margin-top: 2px;' id='Button2' form='form1' type='submit' onserverclick='sendemail' runat='server'>Kontakt meg med et tilbud!</button>
</div>
<div hidden="hidden" id='bestillingstekst2' class='bestillingstekst'>
<p>
<span style='font-size: 26px;'>Bli kontaktet med tilbud på sms!</span><br />
<span style='font-style: italic;'>(tilbudet kommer normalt dagen etter)</span>
</p>
<p class='question'>Hvordan ønsker du å betale?</p>
<label>Kontant<input id='leie_kontant' type='radio' name='betaling' runat='server'/></label></>
<label>Faktura<input id='leie_faktura' type='radio' name='betaling' runat='server'/></label></>
<p class="question">Hva synes du er en god pris for leie?</p>
<p class='psmall2'>(fastpriser inntil 1 døgn: 300kr/400kr/500kr under 4/8/24 timer)</p>
<div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
<label>Pris i kroner:<input style='width: 150px; display: inline-block; float:right;' id='pris2' type='tel' maxlength='8' runat='server'/></label>
</div>
<p class='question'>Er du privatperson eller bedrift?</p>
<label>Privat<input id='leie_privat' type='radio' name='kundetype' runat='server'/></label></>
<label>Bedrift<input id='leie_bedrift' type='radio' name='kundetype' runat='server'/></label></>
<p class='question'>Hvordan kontakter vi deg?</p>
<div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
<label>Fullt personnavn<input style='width: 150px; display: inline-block; float:right;' id='leie_personnavn' type='text' runat='server'/></label>
<br />
<label>Bedriftsnavn<span class='psmall'> (kun for bedrifter)</span><input style='width: 150px; display: inline-block; float:right;' id='leie_bedriftsnavn' type='text' runat='server'/></label>
<br />
<label>Mobilnr.<input style='width: 150px; display: inline-block; float:right;' id='leie_tlf' type='tel' maxlength='8' runat='server'/></label>
<br />
<label>Alternativt telefonnr.<input style='width: 150px; display: inline-block; float:right;' id='leie_alt_tlf' type='tel' maxlength='8' runat='server'/></label>
<br />
<label>Epost<input style='width: 150px; display: inline-block; float:right;' id='leie_epost' type='email' runat='server'/></label>
<br />
</div>
<p class='question'>Når ønsker du å leie?</p>
<div style='width: 100%; display: inline-block; text-align: left; line-height: 24.5px;'>
<label>Leiestart<input style='width: 150px; display: inline-block; float:right;' id='leiestart' type='datetime-local' value='2020-01-01T10:00:00' runat='server'/></label>
<br />
<label>Leieslutt<input style='width: 150px; display: inline-block; float:right;' id='leieslutt' type='datetime-local' value='2020-01-01T10:00:00' runat='server'/></label>
<br />
</div>
<p class='question'>Hva er adressen din?</p>
<div style='width: 100%; display: inline-block; text-align: left; line-height: 23px;'>
<label>Adresse<input style='width: 150px; display: inline-block; float:right;' id='leie_adresse' type='text' runat='server'/></label>
<br />
<label>Poststed<input style='width: 150px; display: inline-block; float:right;' id='leie_poststed' type='text' runat='server'/></label>
<br />
<label>Postnr.<input style='width: 150px; display: inline-block; float:right;' id='leie_postnr' type='text' maxlength='4' runat='server'/></label>
<br />
</div>
<p class='question'>Noe mer vi bør vite?</p>
<textarea id='textarea2' rows='6' cols='32' spellcheck='False' name='S1' runat='server'>Du behøver ikke skrive noe her viss du ikke trenger det...</textarea><br />
<button style='margin-top: 2px;' id='Button1' form='form1' type='submit' onserverclick='sendemail2' runat='server'>Kontakt meg med et tilbud!</button>
</div>
</div>
</div>
</div>
<img style="width: 315px; height: 245px; position:absolute; left: 955px;" src='/images/logo.jpg'/ alt='logo'/>
<div id="Priser" style="width: 300px; position:absolute; left: 45px; top: 375px">
<div style="text-align: center; color: black; border-radius: 18px; border-color: #ff3333; border-style: solid; border-width: 6px; padding: 10px 10px;">
<span style='font-size: 26px;'>Prisinformasjon:</span><br />
<p>
Priser avtales som en fast sum på forhånd! Du skal aldri betale mer enn denne prisen!<br />
<span style="color: red; font-weight: 600; font-size: 19px;">Det er viktig for oss at du er fornøyd med prisen din! Derfor kan du gi oss et tilbud i bestillingskjema til høyre! Ikke glem å fortell oss hva du ønsker!</span>
</p>
</div>
</div>
<div id="Kontaktinformasjon" style='width: 300px; height: 190px; position:absolute; left: 30px; top: 700px; text-align: center; border-radius: 18px; border-color: #ff3333; border-style: solid; border-width: 6px; padding: 10px 10px;'>
<span style='font-size: 26px;'>Hvordan kontakte oss?</span><br />
<p style='color:black;'>epost: [email protected]<br />tlf: 92 53 48 35<br/>Organisasjonsnr.: 916 043 112<br/>
Postadresse: Nøsteveien 60, 3413 Lier<br/>Kontaktperson: Mantas Tamosiunas</p>
</div>
<div id="Finn" style='width: 300px; height: 265px; position:absolute; left: 950px; top: 265px; text-align: center; border-radius: 18px; border-color: #ff3333; border-style: solid; border-width: 6px; padding: 10px 10px;'>
<p style="font-size: 16px; font-style: italic;">Se våre finn.no referanser i linken under! <a href="http://www.finn.no/smajobber/profiler/510702027/">http://www.finn.no/smajobber...</a></p>
<img style="" src='/images/finn1.PNG'/>
<img style="" src='/images/finn2.PNG'/>
<img style="" src='/images/finn3.PNG'/>
</div>
<div id="Facebook" style="width: 300px; position:absolute; left: 965px; top: 580px;">
<div style="text-align: center;">
<div style="color: black; border-radius: 18px; border-color: #ff3333; border-style: solid; border-width: 6px; padding: 10px 10px;">
<h4 style="font-style: italic;">
Liker du oss? Vis det her! <3
</h4>
<div class="fb-like" data-href="http://hjelpsommefolk.no" data-width="100" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
<br />
<div class="fb-comments" data-href="http://hjelpsommefolk.no" data-width="275" data-numposts="6"></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var screen_width_string = ((screen.width * 0.5)-(1265*0.5)-30);
var screen_width_string = screen_width_string + "px";
document.getElementById('screenie').style.marginLeft = screen_width_string;
</script>
</form>Upvotes: 0
Views: 60
Answers (1)
CrisAlfie
Reputation: 111
You will have to work with margins to adjust it at the end since it is where it's not showing properly. As said by Niet, there is no way to win a battle with browsers when using absolute positioning, at least at the moment.
Upvotes: 1
Related Questions
- How can I transition height: 0; to height: auto; using CSS?
- How do I vertically align text in a div?
- How to make a div 100% height of the browser window
- How can I make a div not larger than its contents?
- Make a div fill the height of the remaining screen space
- How can I vertically center a div element for all browsers using CSS?
- Why does HTML think “chucknorris” is a color?
- How to overlay one div over another div
- How to align content of a div to the bottom
- Click through div to underlying elements