Results 1 to 8 of 8

Thread: two style sheets problem

  1. #1
    Join Date
    Aug 2011
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default two style sheets problem

    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?

  2. #2
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    557
    Thanks
    8
    Thanked 66 Times in 66 Posts

    Default

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

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,935
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

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

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Aug 2011
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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):

    Code:
    #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.

  5. #5
    Join Date
    Aug 2011
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by JShor View Post
    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:

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


    so this is the popup-contact.css:


    Code:
    #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;
    }

  6. #6
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    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.)
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,935
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    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:

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

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

    Code:
    #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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Aug 2011
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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:

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

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

    Code:
    #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..

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •