Browser interprets css rules for bottom: and max-height: differently from Dw
Big problem here. I'll try to be as clear as possible. I have a parent div <div class="container-fluid div-header-image-full"> with two child divs inside it <div class="container-fluid div-header-image"> <div class="div-form-header">. In order to get the div-form-header positioned above div-header-image, I set it to position:absolute and the parent to position:relative.
So this the code that worked perfectly with the browser window full-sized:
<div class="container-fluid div-header-image-full">
<div class="container-fluid div-header-image">
<img src="images/headerimage.jpg" alt="Placeholder image" class="img-responsive">
<div class="div-form-header"><h3 class="h3-form-header">GET A QUOTE</h3>
<form action="<?php echo get_template_directory_uri(); ?>/send.php" id="form1" name="form1" method="post">
<p>
<input name="textfield" type="text" class="form-textfield-header" id="textfield" placeholder="Name"></p>
<p>
<input name="textfield" type="text" class="form-textfield-header" id="textfield" placeholder="Company"></p>
<p>
<input name="textfield" type="text" class="form-textfield-header" id="textfield" placeholder="Site url"></p>
<p>
<input name="email" type="email" class="form-textfield-header" id="email" placeholder="Email">
<p>
<textarea name="textarea" class="form-textarea-header" id="textarea" placeholder="Project details"></textarea>
<p>
<input type="submit" name="submit" id="submit" value="Submit" class=""></p>
</p>
</p>
</form></div></div>
</div>
.div-form-header {
background-color:aqua;
position: absolute;
right: 0;
width: 35%;
text-align: center;
top: 30px;
}
.div-header-image-full {
background-color: #1d8fca;
max-height: 500px;
}
.div-header-image {
max-width: 1200px;
padding-right: 10px;
position:relative;
}
The above settings won't work well because I need the parent div to resize to fit the child div when the screen gets smaller. But since the div-form-header is position:absolute it won't cause the div-header-image-full to resize at all. So, the solution is to change it to position:relative, right? Well, I don't think so. Using position:relative, firefox and chrome don't respect the max-height:500px of div-header-image-full and top and bottom values are interpreted differently from what Dreamwaver is showing me.
AdChoices