Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    2 style sheet files problem

    Hi,

    I am very stuck with the following issue:

    I already have a page with layout.css and there is a popup contact form that I like to add to this page which also has its own css file (popup-contact.css).



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

    When I have it like the above, only the layout.css is run and the form pops up without the style.

    How can I have the form in its proper style when I already have another css on the same page?


    Thank you in advanced

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    881
    Thanks
    0
    Thanked 115 Times in 114 Posts
    Without seeing the document-source and the content of the CSS files, there is not much we can do to help you.

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by lerura View Post
    Without seeing the document-source and the content of the CSS files, there is not much we can do to help you.





    ok this is the index.php


    <?PHP

    //1. First, include the file popup-contactform.php
    require_once('popup-contactform.php');

    //2. link to the style file contact.css
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN" dir="ltr">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
    <title> Education</title>


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


    <meta http-equiv="imagetoolbar" content="no" />


    <!-- Homepage Specific Elements -->
    <script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="scripts/jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.tabs.setup.js"></script>
    <!-- End Homepage Specific Elements -->
    <style type="text/css">
    <!--
    .style2 {
    font-size: 9px
    }
    .style13 {
    font-size: 13px;
    font-weight: bold;
    }
    .style19 {font-size: 15px}
    .style20 {color: #000000}
    .style22 {color: #000033}
    .style24 {color: #FF0000}
    -->
    </style>


    <script src="scripts/AC_ActiveX.js" type="text/javascript"></script>
    <script src="scripts/AC_RunActiveContent.js" type="text/javascript"></script>

    </head>

    <body onload="javascript:fg_hideform('fg_formContainer','fg_backgroundpopup');">


    <div class="latestnews">
    <p><a href="#">Contact me</a></p>
    <p> Click here to contact me</p>
    </div>

    <?PHP
    //3. php include contactform-code.php at the end of the page

    require_once('contactform-code.php');
    ?>
    </body>
    </html>



    this is the layout.css




    @import url(navi.css);
    @import url(forms.css);
    @import url(tables.css);
    @import url(homepage.css);
    @import url(gallery.css);
    @import url(portfolio.css);
    @import url(featured_slide.css);


    body{
    margin:0;
    padding:0;
    font-size:13px;
    font-family:Georgia, "Times New Roman", Times, serif;
    color:#979797;
    background-color:#06213F;
    }

    img{margin:0; padding:0; border:none;}
    .justify{text-align:justify;}
    .bold{font-weight:bold;}
    .center{text-align:center;}
    .right{text-align:right;}
    .nostart{list-style-type:none; margin:0; padding:0;}

    .clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden; line-height:0;}
    .clear{display:inline-block;}
    html[xmlns] .clear{display:block;}
    * html .clear{height:1%;}

    a{outline:none; text-decoration:none; color:#55ABDA; background-color:#F9F9F9;}

    .fl_left{float:left;}
    .fl_right{float:right;}

    .imgholder, .imgl, .imgr{padding:4px; border:1px solid #DEDACB; text-align:center;}
    .imgl{float:left; margin:0 15px 15px 0; clear:left;}
    .imgr{float:right; margin:0 0 15px 15px; clear:right;}

    /* ----------------------------------------------Wrapper-------------------------------------*/

    div.wrapper{
    position:relative;
    margin:0 auto 20px;
    width:960px;
    text-align:left;
    }

    div.wrapper h1, div.wrapper h2, div.wrapper h3, div.wrapper h4, div.wrapper h5, div.wrapper h6{
    margin:0 0 15px 0;
    padding:0;
    font-size:16px;
    font-weight:normal;
    font-style:normal;
    line-height:normal;
    }

    .row1{color:#999999; background-color:#06213F;}
    .row1 a{color:#FCFCFC; background-color:#06213F;}
    .row2, .row3, .row4{color:#979797; background-color:#F9F9F9;}

    /* ----------------------------------------------Generalise-------------------------------------*/

    #header, #container, #footer{
    display:block;
    width:960px;
    }

    .rnd{
    display:block;
    width:960px;
    padding:12px 0 0 0;
    background:url("../images/round_top.gif") top left no-repeat;
    }

    /* ----------------------------------------------Header-------------------------------------*/

    #header{padding:25px 0 0 0;}

    #header h1, #header p, #header ul{
    margin:0;
    padding:0;
    list-style:none;
    line-height:normal;
    }

    #header h1{font-size:36px; font-variant:small-caps; font-style:normal;}

    #header .fl_right{
    display:block;
    width:360px;
    }

    #header .fl_right ul{
    margin-bottom:10px;
    font-size:11px;
    }

    #header .fl_right li{
    display:inline;
    margin:0 4px 0 0;
    padding:0 6px 0 0;
    border-right:1px solid #FCFCFC;
    }

    #header .fl_right li.last{
    margin:0;
    padding:0;
    border:none;
    }

    /* ----------------------------------------------Content-------------------------------------*/

    #container{
    width:920px;
    padding:20px;
    line-height:1.6em;
    background:url("../images/round_bot.gif") bottom left no-repeat;
    }

    #container a{
    color:#55ABDA;
    background-color:#F9F9F9;
    }

    #container h1, #container h2, #container h3, #container h4, #container h5, #container h6{
    padding-bottom:8px;
    border-bottom:1px solid #DEDACB;
    }

    #container .readmore{
    display:block;
    width:100%;
    text-align:right;
    line-height:normal;
    }

    #content{
    display:block;
    float:left;
    width:600px;
    }

    /* ------Comments-----*/

    #comments{margin-bottom:40px;}

    #comments .commentlist{margin:0; padding:0;}

    #comments .commentlist ul{margin:0; padding:0; list-style:none;}

    #comments .commentlist li.comment_odd, #comments .commentlist li.comment_even{margin:0 0 10px 0; padding:15px; list-style:none;}

    #comments .commentlist li.comment_odd{color:#666666; background-color:#F7F7F7;}
    #comments .commentlist li.comment_odd a{color:#55ABDA; background-color:#F7F7F7;}

    #comments .commentlist li.comment_even{color:#666666; background-color:#E8E8E8;}
    #comments .commentlist li.comment_even a{color:#55ABDA; background-color:#E8E8E8;}

    #comments .commentlist .author .name{font-weight:bold;}
    #comments .commentlist .submitdate{font-size:smaller;}

    #comments .commentlist p{margin:10px 5px 10px 0; padding:0; font-weight:normal; text-transform:none;}

    #comments .commentlist li .avatar{float:right; border:1px solid #EEEEEE; margin:0 0 0 10px;}

    /* ----------------------------------------------Column-------------------------------------*/

    #column{
    display:block;
    float:right;
    width:300px;
    }

    #column .holder, #column #featured{
    display:block;
    width:300px;
    margin-bottom:30px;
    }

    #column .holder h2.title{
    display:block;
    width:100%;
    height:65px;
    margin:0;
    padding:15px 0 0 0;
    font-size:20px;
    text-transform:none;
    line-height:normal;
    border-bottom:1px dotted #999999;
    }

    #column .holder h2.title img{
    float:left;
    margin:-15px 8px 0 0;
    padding:5px;
    border:1px solid #999999;
    }

    #column div.imgholder{
    display:block;
    width:290px;
    margin:0 0 10px 0;
    }

    #column .holder p.readmore{
    display:block;
    width:100%;
    font-weight:bold;
    text-align:right;
    line-height:normal;
    }

    /* Featured Block */

    #column #featured ul, #column #featured h2, #column #featured p{
    margin:0;
    padding:0;
    list-style:none;
    color:#666666;
    background-color:#F7F7F7;
    }

    #column #featured a{
    color:#55ABDA;
    background-color:#F7F7F7;
    }

    #column #featured li{
    display:block;
    width:250px;
    margin:0;
    padding:20px 25px;
    color:#666666;
    background-color:#F7F7F7;
    }

    #column #featured li p.imgholder{
    display:block;
    width:240px;
    height:90px;
    margin:20px 0 15px 0;
    }

    #column #featured li h2{
    margin:0;
    padding:0 0 8px 0;
    font-weight:normal;
    font-family:Georgia, "Times New Roman", Times, serif;
    line-height:normal;
    border-bottom:1px dotted #999999;
    }

    #container #column .readmore a{
    display:block;
    width:100%;
    margin-top:15px;
    height:auto;
    padding-left:0;
    font-weight:bold;
    text-align:right;
    line-height:normal;
    background:none;
    }

    #column .latestnews{
    display:block;
    width:100%;
    margin:0;
    padding:0;
    list-style:none;
    }

    #column .latestnews li{
    display:block;
    width:100%;
    height:99px;
    margin:0 0 11px 0;
    padding:0 0 21px 0;
    border-bottom:1px dotted #C7C5C8;
    overflow:hidden;
    }

    #column .latestnews li.last, #column .last{
    margin-bottom:0;
    }

    #column .latestnews p{
    display:inline;
    }

    #column .latestnews img{
    float:left;
    margin:0 10px 0 0;
    padding:4px;
    border:1px solid #C7C5C8;
    clear:left;
    }

    /* ----------------------------------------------Footer-------------------------------------*/

    #footer{
    width:920px;
    padding:5px 20px 15px 20px;
    background:url("../images/round_bot.gif") bottom left no-repeat;
    }

    #footer .fl_left img{margin-bottom:30px;}

    #footer address{
    display:inline;
    float:left;
    margin-left:40px;
    text-transform:none;
    font-style:normal;
    line-height:1.8em;
    }

    #footer .fl_right{
    display:block;
    width:400px;
    }

    #footer .fl_right p{margin:0 0 15px 0; padding:0; line-height:normal;}

    #footer .fl_right #social{display:block; width:100%; margin:0 0 15px 0; padding:0; line-height:normal;}
    #footer .fl_right #social ul{margin:0; padding:0; list-style:none;}
    #footer .fl_right #social li{float:left; /* Only For IE */}
    #footer .fl_right #social a{display:block; float:left; width:49px; height:49px; margin-right:20px; overflow:hidden; text-indent:-4000em; background:url("../images/social-sprite.gif") no-repeat;}
    #footer .fl_right #social li.last a{margin-right:0;}

    #footer .last{margin:0;}

    /* ----------------------------------------------Copyright-------------------------------------*/

    #copyright{
    padding:0 12px;
    }

    #copyright p{
    margin:0;
    padding:0;
    }

    #copyright, #copyright a{
    color:#55ABDA;
    background-color:#06213F;
    }





    and this is the popup-contact.css




    /*
    Popup Contact Form
    You can customize all the aspects of the form in this style sheet
    All the style elements use form id selector(notice the #contactus). So, including this
    stylesheet does not affect the other elements at all!
    */

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

  • #4
    New Coder
    Join Date
    Aug 2011
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by lerura View Post
    Without seeing the document-source and the content of the CSS files, there is not much we can do to help you.

    Already had the layout.css and then I found a nice php contact form which I am trying to implement to index.php but because of the layout.css the popup-contacts.css is not rendered at all. If I take out the layout.css then the popup form is styled but then the website is not. U see what I mean?

  • #5
    New Coder
    Join Date
    Jul 2011
    Location
    Canada
    Posts
    60
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Smile

    Just saying, please wrap the code in to the
    Code:
    Code tags so it's a bit easier.

  • #6
    New Coder
    Join Date
    Aug 2011
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by samxdesigns View Post
    Just saying, please wrap the code in to the
    Code:
    Code tags so it's a bit easier.

    sorry about that..

    do you have any idea how I can get the contact-form in style?

  • #7
    New Coder
    Join Date
    Aug 2011
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Ok now the links

    ok this will make things a lot easier for you to understand the problem:

    ok this is the proper style of the form and how it should be:

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

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


    however,


    when you go to: 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 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..

    so how can we solve this?

  • #8
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is it possible to just add the style from popup-contacts.css into the index.php file itself? This would eliminate you having to have two .css files.

    Have you verified that all the IDs are different?

    I'm just trying to give you some basic things to check = )

  • #9
    New Coder
    Join Date
    Aug 2011
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by faile486 View Post
    Is it possible to just add the style from popup-contacts.css into the index.php file itself? This would eliminate you having to have two .css files.

    Have you verified that all the IDs are different?

    I'm just trying to give you some basic things to check = )

    OK, for duplicates I checked it by validator.w3.org

    http://validator.w3.org/check?uri=ww...Inline&group=0

    there doesn't seem to be any duplicates.

    for eliminating two .css files are you saying instead of using an external sheet for popup-contacts.css, I should define it in the <head> tag?

  • #10
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    I just looked at your site and the pop up form looked like the test one. I looked in firefox, IE and Chrome.

  • #11
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by lerura View Post
    Without seeing the document-source and the content of the CSS files, there is not much we can do to help you.
    You asked for it and got it...lol

    OP, please when posting code use the code tag button(#) in the navigator window. Makes reading ALLLLL that code much easier. A link to your live test site is preferred much more if you have one.


    Edit: oops Sorry just saw it has already been mentioned. Ignore my redundant post..lol
    Teed

  • #12
    New Coder
    Join Date
    Aug 2011
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by resdog View Post
    I just looked at your site and the pop up form looked like the test one. I looked in firefox, IE and Chrome.
    : )

    below is how it looks like from my side..


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



    there are differences.. 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.. also the without the proper style, the close link is not underlined.


    i am using both firefox and ie for testing

  • #13
    New Coder
    Join Date
    Aug 2011
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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;
    }

  • #14
    New Coder
    Join Date
    Aug 2011
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok here is what i did..

    somebody told me that popup-contact.css use a relative font size unit: 0.8em, and are affected by my body text, which is set to be 13px in my own stylesheet.

    so i just changed the 0.8em to 13px and it looks better.

    thanks everybody for the tips.

  • #15
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    OK I got it and I see what your problem is. It has nothing to do with !important; so you can remove those. Your styles are being applied, but you don't explicitly state in the popup CSS default colors, so the popup is inheriting from the layout.css.

    to fix the two issues that you mentioned, you need to add a default color (in this case, black) and a default a link (underline) so it will use that instead of your css in layout.css.

    So in your popup css, find #fg_formContainer and add this style inside the brackets:

    Code:
    color: #000;
    Then find #fg_container_header a { and add this style:

    Code:
    text-decoration: underline;
    That will fix those issues. If there are other discrepancies, post them and I can show you how to edit them.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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