Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ two stylesheets problem

Posted by: explorers5000 Aug 8 2011, 11:10 PM

i have a problem which i cannot solve..

i found a nice php popup contact form for my page which aldready has layout.css and this contact form has its own .css file which is called popup-contact.css

the contact form work without a problem with its test page:

http://www.tercume.pro/a-page.php

when you click on the yellow "contact us" button you will see that the form is nice and
styled..



however,


when i implement it to my website http://www.tercume.pro/index.php where the form is supposed to be,and click on the picture with numbers on, you see that the form does not get rendered and is without the style and even the "close link" is not visible, whereas it is properly styled on the http://www.tercume.pro/a-page.php


when i get rid of the layout.css in the index.php, then the form is styled but then the page is not..

i wanna have both the styles in one page..

so how can we solve this?

Posted by: pandy Aug 9 2011, 07:15 AM

Have you already found some of the problems? The only thing I notice is that the closing X isn't visible because it has the wrong color. Otherwise it looks fine. If not, what browser do you use?

Posted by: pandy Aug 9 2011, 07:17 AM

Now I notice that the URL to both the style sheets are wrong.

CODE
<link rel="stylesheet" type="text/css" href="../styles/layout.css">
<link rel="STYLESHEET" type="text/css" href="../styles/popup-contact.css">


../ means up one directory and you are already in the top directory. Odd, I wouldn't have expected that to work at all. unsure.gif

Posted by: explorers5000 Aug 9 2011, 10:46 AM

QUOTE(pandy @ Aug 9 2011, 07:17 AM) *

Now I notice that the URL to both the style sheets are wrong.

CODE
<link rel="stylesheet" type="text/css" href="../styles/layout.css">
<link rel="STYLESHEET" type="text/css" href="../styles/popup-contact.css">


../ means up one directory and you are already in the top directory. Odd, I wouldn't have expected that to work at all. unsure.gif




thank you.. i just removed the "../"

i also cleared cache and even used tried with another pc..



actually there's a difference.. the form on http://tercume.pro/index.php is not styled like the one on http://tercume.pro/a-page.php


let me show you, this is the proper style from http://tercume.pro/a-page.php:

http://imageshack.us/photo/my-images/849/styled.jpg/

Uploaded with http://imageshack.us


and this is from http://tercume.pro/index.php where it is not properly styled:

http://imageshack.us/photo/my-images/850/notstyled.jpg/

Uploaded with http://imageshack.us


You see one form has black and bold font and the other is grey..


i am using both firefox and ie for testing

Posted by: Frederiek Aug 9 2011, 11:22 AM

The labels, which are styled in popup-contact.css, use a relative font size unit: 0.8em, and are affected by your body text, which is set to be 13px in your own stylesheet.
Just get rid of the font-size: 0.8em; for the labels in popup-contact.css or change it to your likings.

See for an explanation on EM: http://24ways.org/2005/an-explanation-of-ems and http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/ .

Posted by: explorers5000 Aug 9 2011, 11:26 AM

i have just tried adding

CODE
!important
but the form on the test page did not pop up at all.. the index however, did not get affected since the popup-contact.css is not rendered at all..



this is how i added the
CODE
!important




CODE

#contactus fieldset
{
   width:320px !important;
   padding:20px !important;
   border:1px solid #ccc !important;
-moz-border-radius: 10px !important;
-webkit-border-radius: 10px !important;
-khtml-border-radius: 10px !important;
border-radius: 10px !important;  
}

#contactus legend, h2
{
   font-family : Arial, sans-serif !important;
   font-size: 1.3em !important;
   font-weight:bold !important;
   color:#333 !important;
}

#contactus label
{
   font-family : Arial, sans-serif !important;
   font-size:0.8em !important;
   font-weight: bold !important;
}

#contactus input[type="text"],textarea
{
  font-family : Arial, Verdana, sans-serif !important;
  font-size: 0.8em !important;
  line-height:140% !important;
  color : #000 !important;
  padding : 3px !important;
  border : 1px solid #999 !important;
    -moz-border-radius: 5px !important;
    -webkit-border-radius: 5px !important;
    -khtml-border-radius: 5px !important;
    border-radius: 5px !important;

}

#contactus input[type="text"]
{
  height:18px !important;
  width:220px !important;
}

#contactus #scaptcha
{
  width:60px !important;
  height:18px !important;
}

#contactus input[type="submit"]
{
   width:100px !important;
   height:30px !important;
   padding-left:0px !important;
}

#contactus textarea
{
  height:120px !important;
  width:310px !important;
}

#contactus input[type="text"]:focus,textarea:focus
{
  color : #009 !important;
  border : 1px solid #990000 !important;
  background-color : #ffff99 !important;
  font-weight:bold !important;
}

#contactus .container
{
   margin-top:8px !important;
   margin-bottom: 10px !important;
}

#contactus .error
{
   font-family: Verdana, Arial, sans-serif !important;
   font-size: 0.7em !important;
   color: #900 !important;
   background-color : #ffff00 !important;
}

#contactus fieldset#antispam
{
   padding:2px !important;
   border-top:1px solid #EEE !important;
   border-left:0 !important;
   border-right:0 !important;
   border-bottom:0 !important;
   width:350px !important;
}

#contactus fieldset#antispam legend
{
   font-family : Arial, sans-serif !important;
   font-size: 0.8em !important;
   font-weight:bold !important;
   color:#333 !important;  
}

#contactus .short_explanation
{
   font-family : Arial, sans-serif !important;
   font-size: 0.6em !important;
   color:#333 !important;  
}
#fg_formContainer
{
   height:500px !important;
   width:390px !important;
   background:#FFFFFF !important;
   border:1px solid #000 !important;
   padding:0 !important;
   position:absolute !important;
   z-index:999 !important;
   cursor:default !important;  
-moz-border-radius: 10px !important;
-webkit-border-radius: 10px !important;
-khtml-border-radius: 10px !important;
border-radius: 10px !important;  
display:none !important;
}

#fg_container_header
{
   height:30px !important;
   background:#000066 !important;
   border-top-right-radius:10px !important;
   -moz-border-radius-topright:10px !important;
   -webkit-border-top-right-radius:10px !important;
   -khtml-border-top-right-radius: 10px !important;
  
   border-top-left-radius:10px !important;
   -moz-border-radius-topleft:10px !important;
   -webkit-border-top-left-radius:10px !important;
   -khtml-border-top-left-radius: 10px !important;  
}

#fg_container_header a
{
   color:#fff !important;
   background:#000066 !important;
   font-family:Verdana,Arial !important;
   font-size:10pt !important;
   font-weight:bold !important;
}

#fg_box_Title
{
   float:left !important;
   width:180px !important;
   margin:5px !important;
  
   color:#fff !important;
   font-family:Verdana,Arial !important;
   font-size:12pt !important;
   font-weight:bold !important;  
}

#fg_box_Close
{
   float:right !important;
   width:80px !important;
   margin:5px !important;
}

#fg_form_InnerContainer
{
   margin:15px !important;
}

#fg_form_InnerContainer h2
{
   font-family : Arial, sans-serif !important;
   font-size: 14pt !important;
   font-weight:bold !important;
   color:#333 !important;    
}

#fg_form_InnerContainer p
{
   font-family : Arial, sans-serif !important;
   font-size: 12pt !important;
   color:#333 !important;
}

#fg_backgroundpopup
{
   position: fixed !important;
   top:0 !important;
   left:0 !important;
   bottom:0 !important;
   right:0 !important;
  
   background:#000000 !important;
   opacity: .3 !important;
   -moz-opacity: .3 !important;
   filter: alpha(opacity=30) !important;
   border:1px solid #cecece !important;
   z-index:1 !important;
   display:none !important;
}

#fg_submit_success_message
{
   display:none !important;
   padding:15px !important;
}

/* spam_trap: This input is hidden. This is here to trick the spam bots*/
#contactus .spmhidip
{
   display:none;
   width:10px !important;
   height:3px !important;
}
#fg_crdiv
{
   font-family : Arial, sans-serif !important;
   font-size: 0.3em !important;
   opacity: .2 !important;
   -moz-opacity: .2 !important;
   filter: alpha(opacity=20) !important;  
}
#fg_crdiv p
{
    display:none !important;
}

Posted by: explorers5000 Aug 9 2011, 11:27 AM

QUOTE(Frederiek @ Aug 9 2011, 11:22 AM) *

The labels, which are styled in popup-contact.css, use a relative font size unit: 0.8em, and are affected by your body text, which is set to be 13px in your own stylesheet.
Just get rid of the font-size: 0.8em; for the labels in popup-contact.css or change it to your likings.

See for an explanation on EM: http://24ways.org/2005/an-explanation-of-ems and http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/ .


I am giving it a try now..

I'll let you know..

Posted by: explorers5000 Aug 9 2011, 11:38 AM

QUOTE(Frederiek @ Aug 9 2011, 11:22 AM) *

The labels, which are styled in popup-contact.css, use a relative font size unit: 0.8em, and are affected by your body text, which is set to be 13px in your own stylesheet.
Just get rid of the font-size: 0.8em; for the labels in popup-contact.css or change it to your likings.

See for an explanation on EM: http://24ways.org/2005/an-explanation-of-ems and http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/ .




man, this does it : ) finally..

thank you very much Frederiek

i managed to have bigger fonts now and will try to change the font color from grey to black and then all set : )

Posted by: explorers5000 Aug 9 2011, 11:43 AM

QUOTE(Frederiek @ Aug 9 2011, 11:22 AM) *

The labels, which are styled in popup-contact.css, use a relative font size unit: 0.8em, and are affected by your body text, which is set to be 13px in your own stylesheet.
Just get rid of the font-size: 0.8em; for the labels in popup-contact.css or change it to your likings.

See for an explanation on EM: http://24ways.org/2005/an-explanation-of-ems and http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/ .



how about label font color?

that must be relative too because it gets changed in layout.css too..

i fixed the size can you tell me how i'll do the label font color now?


than you very much once again..

Posted by: Frederiek Aug 9 2011, 11:54 AM

You're welcome.

You could get rid of the font-size altogether, as you've set it now to be the same as body, which would be the default size for all text, including the labels, anyway.

As for the color, just add that to the rule.

And, since you made changes to the popup-contact.css file, now you see it *does* load with the page, or you wouldn't have seen the changes in the page. You would have noticed already if you could inspect elements (with eg the Web Inspector in Safari or the Firebug plugin for Firefox).

Posted by: Frederiek Aug 9 2011, 11:57 AM

Our posts overlapped.

Just add he color to #contactus label.

Posted by: explorers5000 Aug 9 2011, 12:28 PM

QUOTE(Frederiek @ Aug 9 2011, 11:57 AM) *

Our posts overlapped.

Just add he color to #contactus label.



you know what everything's good now : )

problem solved.


thanks a lot..



just one more thing i'd like to ask. is it possible to have the form cleared once the submit button is pressed or should i ask that question in the php forum?


thank you so much Frederiek..

Posted by: pandy Aug 9 2011, 12:29 PM

I'm confused now. If the popup form doesn't render at all, what did you just post a screen cap of? wacko.gif

Posted by: explorers5000 Aug 9 2011, 02:53 PM

QUOTE(pandy @ Aug 9 2011, 12:29 PM) *

I'm confused now. If the popup form doesn't render at all, what did you just post a screen cap of? wacko.gif



interesting, right..

well the best i can think of is that it did get rendered but the layout.css was overwriting some parts of the popup-contacts.css. now that we changed those parts from relative to fixed, they do not get affected any more.


this is the best i can think of : )



Posted by: Frederiek Aug 10 2011, 02:20 AM

QUOTE
just one more thing i'd like to ask. is it possible to have the form cleared once the submit button is pressed or should i ask that question in the php forum?

In fact, I think a successful submission of the form should be notified to the visitor. And, since the form is in a popup window, a close button could then be provided to dismiss the popup.

The form's action has a javascript call. In what way is PHP used for the form?

QUOTE
Pandy: I'm confused now. If the popup form doesn't render at all

It didn't render for you?

Posted by: pandy Aug 10 2011, 03:55 AM

Sure it did. The OP said it doesn't render for him on the "real" page, still he can produce a screen cap of it on that page. That's what's confusing.

Posted by: explorers5000 Aug 10 2011, 07:58 PM

QUOTE(Frederiek @ Aug 10 2011, 02:20 AM) *

QUOTE
just one more thing i'd like to ask. is it possible to have the form cleared once the submit button is pressed or should i ask that question in the php forum?

In fact, I think a successful submission of the form should be notified to the visitor. And, since the form is in a popup window, a close button could then be provided to dismiss the popup.

The form's action has a javascript call. In what way is PHP used for the form?

QUOTE
Pandy: I'm confused now. If the popup form doesn't render at all

It didn't render for you?




popup-contactform.php:

CODE


<?php

require_once("./include/fgcontactform.php");
$formproc = new FGContactForm();

//1.Add your email address here.
//You can add more than one receipients.
$formproc->AddRecipient('info@tercume.com'); //<<---Put your email address here

//2. For better security. Get a random string from this link: http://tinyurl.com/randstr
// and put it here
$formproc->SetFormRandomKey('dz0sbNoc7mZPgXa');

if(isset($_POST['submitted']))
{
    if($formproc->ProcessForm())
    {
        echo "success";
    }
    else
    {
        echo $formproc->GetErrorMessage();
    }
}
?>








contactform-code.php:

CODE

<script type='text/javascript' src='scripts/gen_validatorv31.js'></script>
<script type='text/javascript' src='scripts/fg_ajax.js'></script>
<script type='text/javascript' src='scripts/fg_moveable_popup.js'></script>
<script type='text/javascript' src='scripts/fg_form_submitter.js'></script>
<div id='fg_formContainer'>
    <div id="fg_container_header">
        <div id="fg_box_Title">Contact us</div>
        <div id="fg_box_Close"><a href="java script:fg_hideform('fg_formContainer','fg_backgroundpopup');">Close(X)</a></div>
    </div>

    <div id="fg_form_InnerContainer">
    <form id='contactus' action='java script:fg_submit_form()' method='post' accept-charset='UTF-8'>

    <input type='hidden' name='submitted' id='submitted' value='1'/>
    <input type='hidden' name='<?php echo $formproc->GetFormIDInputName(); ?>' value='<?php echo $formproc->GetFormIDInputValue(); ?>'/>
    <input type='text'  class='spmhidip' name='<?php echo $formproc->GetSpamTrapInputName(); ?>' />
    <div class='short_explanation'>* required fields</div>
    <div id='fg_server_errors' class='error'></div>
    <div class='container'>
        <label for='name' >Your Full Name*: </label><br/>
        <input type='text' name='name' id='name' value='' maxlength="50" /><br/>
        <span id='contactus_name_errorloc' class='error'></span>
    </div>
    <div class='container'>
    <label for='email' >Email Address*:</label><br/>
        <input type='text' name='email' id='email' value='' maxlength="50" /><br/>
        <span id='contactus_email_errorloc' class='error'></span>
    </div>
    <div class='container'>
        <label for='message' >Message:</label><br/>
        <span id='contactus_message_errorloc' class='error'></span>
        <textarea rows="10" cols="50" name='message' id='message'></textarea>
    </div>

    <div class='container'>
        <input type='submit' name='Submit' value='Submit' />
    </div>
    </form>
    </div>
</div>
<!-- client-side Form Validations:
Uses the excellent form validation script from JavaScript-coder.com-->

<script type='text/javascript'>
// <![CDATA[

    var frmvalidator  = new Validator("contactus");
    frmvalidator.EnableOnPageErrorDisplay();
    frmvalidator.EnableMsgsTogether();
    frmvalidator.addValidation("name","req","Please provide your name");

    frmvalidator.addValidation("email","req","Please provide your email address");

    frmvalidator.addValidation("email","email","Please provide a valid email address");

    frmvalidator.addValidation("message","maxlen=2048","The message is too long!(more than 2KB!)");

    document.forms['contactus'].refresh_container=function()
    {
        var formpopup = document.getElementById('fg_formContainer');
        var innerdiv = document.getElementById('fg_form_InnerContainer');
        var b = innerdiv.offsetHeight+30+30;

        formpopup.style.height = b+"px";
    }

    document.forms['contactus'].form_val_onsubmit = document.forms['contactus'].onsubmit;


    document.forms['contactus'].onsubmit=function()
    {
        if(!this.form_val_onsubmit())
        {
            this.refresh_container();
            return false;
        }

        return true;
    }
    function fg_submit_form()
    {
        //alert('submiting form');
        var containerobj = document.getElementById('fg_form_InnerContainer');
        var sourceobj = document.getElementById('fg_submit_success_message');
        var error_div = document.getElementById('fg_server_errors');
        var formobj = document.forms['contactus']

        var submitter = new FG_FormSubmitter("popup-contactform.php",containerobj,sourceobj,error_div,formobj);
        var frm = document.forms['contactus'];

        submitter.submit_form(frm);
    }

// ]]>
</script>

<div id='fg_backgroundpopup'></div>

<div id='fg_submit_success_message'>
    <h2>Thanks!</h2>
    <p>
    Thanks for contacting us. We will get in touch with you soon!
    <p>
        <a href="java script:fg_hideform('fg_formContainer','fg_backgroundpopup');">Close this window</a>
    <p>
    </p>
</div>

Posted by: Frederiek Aug 11 2011, 03:49 AM

I assume you got the script from http://www.html-form-guide.com/php-form/php-form-validation.html. Unfortunately, there aren't any online demos, but there are several demos in the zip file. I suppose you added some code (from somewhere else?) to put it in an overlayer (popup).

Anyway, sample 2 seems to be the one you use. A thank-you.php is used for the succesfull submission of the form. It seems to me you have to load that in the popup, like you did for the contact form itself, only now after submision of the form.

IIRC, you also use some other js validation, which seems overkill.

BTW, your site seems to be down now, as I get redirected to http://error404.000webhost.com/? .

Posted by: explorers5000 Aug 11 2011, 10:56 PM

QUOTE(Frederiek @ Aug 11 2011, 03:49 AM) *

I assume you got the script from http://www.html-form-guide.com/php-form/php-form-validation.html. Unfortunately, there aren't any online demos, but there are several demos in the zip file. I suppose you added some code (from somewhere else?) to put it in an overlayer (popup).

Anyway, sample 2 seems to be the one you use. A thank-you.php is used for the succesfull submission of the form. It seems to me you have to load that in the popup, like you did for the contact form itself, only now after submision of the form.

IIRC, you also use some other js validation, which seems overkill.

BTW, your site seems to be down now, as I get redirected to http://error404.000webhost.com/? .



actually i changed my mind.. i am not going to use php forms.. during the testing, only 1 out 10 forms submitted reached to destination. other 9 forms did not.


Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)