Highlighted

Browser interprets css rules for bottom: and max-height: differently from Dw

New Here ,
Oct 03, 2017

Copy link to clipboard

Copied

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.

Views

168

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Browser interprets css rules for bottom: and max-height: differently from Dw

New Here ,
Oct 03, 2017

Copy link to clipboard

Copied

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.

Views

169

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 03, 2017 0
Adobe Community Professional ,
Oct 03, 2017

Copy link to clipboard

Copied

It would be much easier to help you if you could post your work to a server you control. I suggest uploading to a folder called TEST, then posting a link to that folder/page here. Once the answer is found, you can delete the TEST folder and its contents.

It's just simpler if we can see the entire thing within our browsers and have you say "I'd like Y to move below the X when the page goes to Z" vs trying to rebuild your page from snippets that may not include everything we need to understand the issue.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 03, 2017 2
New Here ,
Oct 03, 2017

Copy link to clipboard

Copied

Sorry, I don't have a server available right now. I'll try to get help on Stack Exchange instead.

Admin can close or delete this thread. Thanks.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 03, 2017 0
Adobe Community Professional ,
Oct 03, 2017

Copy link to clipboard

Copied

I have no idea what you're talking about and neither will Stack Exchange or any other technical forum if you can't provide a live example.    Do you know how to post code on CodePen or JS Fiddle?

Nancy

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 03, 2017 1