two style sheets problem

[explorers5000]

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?

[JShor]

Okay, you have conflicting classes. You have no choice but to rename the conflicting classes in popup-contact.css and rename them in your HTML as well.

[jscheuer1]

What browser are you using? I ask because it looks fine to me except for the close button. To fix that, just add the highlighted to the popup-contact.css file as shown (around line #154):

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

[explorers5000]

What browser are you using? I ask because it looks fine to me except for the close button. To fix that, just add the highlighted to the popup-contact.css file as shown (around line #154):

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

jscheuer1,

thank you for your reply. with both mozilla and ie if you actually compare the form on http://tercume.pro/a-page.php with the one on http://tercume.pro/index.php you will see that the one on a-page has bold black color and the font size is also bigger. and also the popup box size gets smaller on index.php when you hit the send (gonder) button.

but the piece of code you just gave me just makes it "acceptable" now that the close link is visible. i will try to make it perfect but if i cannot then i will use it like it is.

thank you so much.

[explorers5000]

Okay, you have conflicting classes. You have no choice but to rename the conflicting classes in popup-contact.css and rename them in your HTML as well.

thank you for the reply, i appreciate it.

if you could just show me what exactly from the below popup-contact.css code i have to rename then i'll apply that to the rest of it and can give it a try.

you also mentioned that i have to rename them in my HTML too but in the html there is only this as far as the popup-contact.css is concerned:

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

so this is the popup-contact.css:

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#fg_form_InnerContainer
{
   margin:15px;
}

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

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

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

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

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

[djr33]

If you download Firebug for Firefox, you can view the current state of the page including all styles relevant to an element. So if you're combining two style sheets, this can be very useful. (Play with it for a bit to see how it works, but what you're looking for is the "inspect element" option available on the right click menu for any element.)

[jscheuer1]

OK, the problem appears to me is just specifying the styles you actually want on the popup form.

For example, in popup-contact.css there are a number of spots where we see:

font-size: 0.8em;

That's a relative font size. For the demo form that was OK. For your page, it's obviously too small (something higher up must have already set the global font-size or at least the font-size inherited by this form to something smaller than the default). I'd suggest using the exact px (like 14px, 15px, or 16px), or a percentage (also relative but I prefer it to ems when setting font-size, it's a legacy browser thing), which in this case would be about 120%, 125%, give or take.

It also looks as though if you want black like the demo for the labels, you need to specify the color here (additions, changes highlighted):

#contactus label
{
   font-family : Arial, sans-serif;
   color: #000;
   font-size: 125%;
   font-weight: bold;
}

I included the font-size change. But it will only affect the labels there, if you want it for other things, find their selectors and make the change there as well, like here (for the size of the text inside the text inputs and textarea):

#contactus input[type="text"],textarea
{
  font-family : Arial, Verdana, sans-serif;
  font-size: 0.8em; */ should be 120% or 125% /*
  line-height:140%;
  color : #000; 
  padding : 3px; 
  border : 1px solid #999;
    -moz-border-radius: 5px;
    -webkit-border-r . . .

Anything else that's not to your liking? If you find something else that's 'off', find its selector and make the appropriate additions and/or changes. If you have trouble with a particular one, let us know.

[explorers5000]

OK, the problem appears to me is just specifying the styles you actually want on the popup form.

For example, in popup-contact.css there are a number of spots where we see:

font-size: 0.8em;

That's a relative font size. For the demo form that was OK. For your page, it's obviously too small (something higher up must have already set the global font-size or at least the font-size inherited by this form to something smaller than the default). I'd suggest using the exact px (like 14px, 15px, or 16px), or a percentage (also relative but I prefer it to ems when setting font-size, it's a legacy browser thing), which in this case would be about 120%, 125%, give or take.

It also looks as though if you want black like the demo for the labels, you need to specify the color here (additions, changes highlighted):

#contactus label
{
   font-family : Arial, sans-serif;
   color: #000;
   font-size: 125%;
   font-weight: bold;
}

I included the font-size change. But it will only affect the labels there, if you want it for other things, find their selectors and make the change there as well, like here (for the size of the text inside the text inputs and textarea):

#contactus input[type="text"],textarea
{
  font-family : Arial, Verdana, sans-serif;
  font-size: 0.8em; */ should be 120% or 125% /*
  line-height:140%;
  color : #000; 
  padding : 3px; 
  border : 1px solid #999;
    -moz-border-radius: 5px;
    -webkit-border-r . . .

Anything else that's not to your liking? If you find something else that's 'off', find its selector and make the appropriate additions and/or changes. If you have trouble with a particular one, let us know.

that's it!

that's what i was looking for.

it's all good now..


thanks a lot jscheuer1.


i even put an underline to the close (X)..


now just one more thing: once the form is sent all the info sticks in the labels and is there a way to have all the boxes cleared once the form is submitted?

or should i ask that under php forum : )

thank you so much for the help..