Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Box Shadow Container Problem – Fluid?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #40333
    MBM
    Participant

    I am using a separate box shadow containers on a homepage and contact page :

    http://mbmitservices.co.uk/ExpressTravel2/index.html
    http://mbmitservices.co.uk/ExpressTravel2/contact.php

    They have different heights. Once a user submits a form on the contact page (you do not have to enter any data in the fields) the thank you message pushes the contact form down thus the box shadow is not aligned correctly. How do I fix this? I have tried to adjust the styling of the thank you message but can’t get it to line up exactly on the form without pushing it down. Is there a way to make the shadow container fluid? Or a way to split the sections of the box shadow code and then add them to the individual elements of my pages i.e. the header, main section & footer?

    homepage box shadow css :

    /*container styling*/
    div.content {
    background: #333333;
    margin:0 auto 0;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    width:1000px;
    height:1063px;
    }

    .offset-blur
    {-webkit-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);
    -moz-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);
    box-shadow:2px 2px 1.0em hsla(0, 0%, 0%, 1.0);}

    contact page box shadow css :

    /*container styling*/
    div.content {
    background: #333333;
    margin:0 auto 0;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    width:1000px;
    height:65.4em;
    }

    .offset-blur
    {-webkit-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);
    -moz-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);
    box-shadow:2px 2px 1.0em hsla(0, 0%, 0%, 1.0);}

    php thank you message styling :

    p.phpmessage {
    margin-top:0px;
    margin-left:110px;
    margin-bottom:-140px;
    position:relative;
    }
    #112057
    Kitty Giraudel
    Participant

    The problem is the float: left on your footer. Just add a clear element after, or clearfix the parent (.content).

    #112133
    MBM
    Participant

    When I added a clearfix to the mainsection div after clicking submit the thank you message was not displayed. When I added it to the footer it removed the background colour and still pushed the contact form down besides I find br style=”clear:left;” usually clears elements but not in this case.

    Anyway back to the problem. I added position:absolute; to the php paragraph styling and it works perfectly in all browsers. The form stays in exactly the same position while the thank you text on clicking submit is displayed in the gap between the header and form.


    p.phpmessage {
    margin-top:0px;
    margin-left:110px;
    position:absolute;
    }
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.