The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> two stylesheets problem, i cannot have two sheets working correctly on one page
explorers5000
post Aug 8 2011, 11:10 PM
Post #1


Newbie
*

Group: Members
Posts: 16
Joined: 8-August 11
Member No.: 15,126



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 9 2011, 07:15 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 14,921
Joined: 9-August 06
Member No.: 6



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?


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 9 2011, 07:17 AM
Post #3


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 14,921
Joined: 9-August 06
Member No.: 6



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


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
explorers5000
post Aug 9 2011, 10:46 AM
Post #4


Newbie
*

Group: Members
Posts: 16
Joined: 8-August 11
Member No.: 15,126



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

IPB Image

Uploaded with ImageShack.us


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

IPB Image

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

This post has been edited by explorers5000: Aug 9 2011, 10:52 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 9 2011, 11:22 AM
Post #5


Programming Fanatic
********

Group: Members
Posts: 4,125
Joined: 23-August 06
From: Europe
Member No.: 9



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


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
explorers5000
post Aug 9 2011, 11:26 AM
Post #6


Newbie
*

Group: Members
Posts: 16
Joined: 8-August 11
Member No.: 15,126



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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
explorers5000
post Aug 9 2011, 11:27 AM
Post #7


Newbie
*

Group: Members
Posts: 16
Joined: 8-August 11
Member No.: 15,126



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..
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
explorers5000
post Aug 9 2011, 11:38 AM
Post #8


Newbie
*

Group: Members
Posts: 16
Joined: 8-August 11
Member No.: 15,126



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 : )
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
explorers5000
post Aug 9 2011, 11:43 AM
Post #9


Newbie
*

Group: Members
Posts: 16
Joined: 8-August 11
Member No.: 15,126



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..
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 9 2011, 11:54 AM
Post #10


Programming Fanatic
********

Group: Members
Posts: 4,125
Joined: 23-August 06
From: Europe
Member No.: 9



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


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 9 2011, 11:57 AM
Post #11


Programming Fanatic
********

Group: Members
Posts: 4,125
Joined: 23-August 06
From: Europe
Member No.: 9



Our posts overlapped.

Just add he color to #contactus label.


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
explorers5000
post Aug 9 2011, 12:28 PM
Post #12


Newbie
*

Group: Members
Posts: 16
Joined: 8-August 11
Member No.: 15,126



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

This post has been edited by explorers5000: Aug 9 2011, 12:29 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 9 2011, 12:29 PM
Post #13


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 14,921
Joined: 9-August 06
Member No.: 6



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


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
explorers5000
post Aug 9 2011, 02:53 PM
Post #14


Newbie
*

Group: Members
Posts: 16
Joined: 8-August 11
Member No.: 15,126



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


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 10 2011, 02:20 AM
Post #15


Programming Fanatic
********

Group: Members
Posts: 4,125
Joined: 23-August 06
From: Europe
Member No.: 9



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?


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 10 2011, 03:55 AM
Post #16


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 14,921
Joined: 9-August 06
Member No.: 6



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.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
explorers5000
post Aug 10 2011, 07:58 PM
Post #17


Newbie
*

Group: Members
Posts: 16
Joined: 8-August 11
Member No.: 15,126



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>


This post has been edited by explorers5000: Aug 10 2011, 07:59 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 11 2011, 03:49 AM
Post #18


Programming Fanatic
********

Group: Members
Posts: 4,125
Joined: 23-August 06
From: Europe
Member No.: 9



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


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
explorers5000
post Aug 11 2011, 10:56 PM
Post #19


Newbie
*

Group: Members
Posts: 16
Joined: 8-August 11
Member No.: 15,126



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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th April 2014 - 10:18 AM