HTMLHelp Forums > two stylesheets problem

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 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 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?

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?

pandy

Aug 9 2011, 07:17 AM

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

CODE

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

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

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

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 index.php is not styled like the one on a-page.php

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

Uploaded with ImageShack.us

and this is from index.php where it is not properly styled:

Uploaded with 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

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/cs...vs-px-vs-pt-vs/ .

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;
}

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/cs...vs-px-vs-pt-vs/ .

I am giving it a try now..

I'll let you know..

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/cs...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 : )

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/cs...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..

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).

Frederiek

Aug 9 2011, 11:57 AM

Our posts overlapped.

Just add he color to #contactus label.

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..

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?

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?

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 : )

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?

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.

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

Frederiek

Aug 11 2011, 03:49 AM

I assume you got the script from http://www.html-form-guide.com/php-form/ph...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/? .

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/ph...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.