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.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    SOLVED: Cross-browser font-style problems

    My coding is going downhill as I am trying to figure out what is what. I have to use this shopping cart software as a request from a client. Problem is that it seems to sneak in CSS coding here and there (classes inserted in "random" php files), and I am having trouble with making certain text look the way I want...

    My issue at the moment... (one thing at a time, right? )

    The area I just can not seem to figure out is the HOME | VIEW CART | CONTACT US links under the header. I need them bold, #6f246f color, and not underlined. Hovered would result in #00000 color change and being underlined. I know this has got to be something simple that I am overlooking because I have been staring at it for too long.

    The website is:
    http://dollclothesbyvickie.com/

    Here is my CSS file (which contains mine + the cart's CSS stuff):
    Code:
    body {
    	margin: 20px 0;
    	padding: 0;
    	background: #FFFFFF url(images/bkgrd2.gif) repeat 30px 30px;
    	font: normal small Arial, Helvetica, sans-serif;
    	color: #666666;
    	font-size:  11pt;              /*added july16 */
    }
    
    h1, h2, h3 {
    	margin-top: 0;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-weight: normal;
    	font-style: italic;
    
    }
    
    h2 {
    	letter-spacing: -1px;
    	font-size: 2em;
    }
    
    h3 {
    	font-size: 1.2em;
    	margin: 0;
    }
    
    p, ul, ol, blockquote {
    	margin-top: 0;
    }
    
    h2.pink {
    	color: #f63a93;
    }
    
    h2.blue {
    	color: #3a9bf6;
    }
    
    
    
    li {
    	color: #A33000;
    }
    
    li a:link {
    	border-bottom: 1px dotted #A33000;
    	color: #666666;
    }
    
    li a:hover {
    	border-bottom: 1px solid #A33000;
    	text-decoration: none;
    	color: #A33000;
    }
    
    img.float {
    	float: left;
    	margin: 5px 15px 10px 0;
    	border: 5px solid #000000;
    }
    
    /* Header */
    
    #header {
    	width: 800px;
    	height: 195px;
    	margin: 0 auto;
    	padding: 10px;
    	background: #622062 url(images/header2.gif) no-repeat 10px 10px;
    }
    
    #header * {
    	margin: 0;
    	padding: 0;
    	float: left;
    	text-decoration: none;
    	font-size: 18px;
    	font-style: italic;
    	color: #FFFFFF;
    }
    
    #header h1 {
    	padding: 128px 0 0 18px;
    	font-weight: bold;
    }
    
    #header h2 {
    	padding: 128px 0 0 0;
    }
    
    #basics2 {
         font-weight: bold;
         color: #6f246f;
         text-decoration: none;
    }
    
    #basics2 a {
         text-decoration: none;
         font-weight: bold;
         color: #6f246f;
    }
    
    #basics2 a:hover {	
         text-decoration: underline;
         font-weight: bold;
         color: #000000;
    }
    
    /* Content */
    
    #content {
    	width: 800px;
    	margin: 0 auto;
    	background: #FFFFFF;
    	border: 10px solid #622062;
    	border-top: none;
    }
    
    #colOne {
    	float: left;
    	width: 180px;
    	padding: 20px 10px;
    }
    
    #colOne ul {
    	margin-left: 0;
    	padding-left: 1em;
    list-style: none;
    }
    
    #colTwo {
    	float: left;
    	width: 560px;
    	padding: 20px 10px;
    }
    
    #colThree {
    	float: left;
    	width: 180px;
    	padding: 20px 10px;
    }
    
    #colThree ul {
    	margin-left: 0;
    	padding-left: 1em;
    	list-style: none;
    }
     li.sqpink
    {
    background-image: url(images/sq_pink.gif);
    background-repeat: no-repeat;
    background-position: 0 50%;
    padding: 3px 0 3px 20px;
    margin: .4em 0;
    }
    
     li.sqpurple
    {
    background-image: url(images/sq_purple.gif);
    background-repeat: no-repeat;
    background-position: 0 50%;
    padding: 3px 0 3px 20px;
    margin: .4em 0;
    }
    
    /* Footer */
    
    #footer {
    	padding: 10px;
    	text-align: center;
    	font-size: smaller;
    }
    
    #footer * {
    	color: #000000;
    }
    
    /* DOODLECART STYLECSSPHP ATTRIBUTES */
    
    !-- 
    
    /* BODY FONT AND SIZE */
    
    
    /* ANCHOR STYLES */
    
    a { 
    color: #6f246f;   /* changed july16 */
    text-decoration: underline;  /* added july16 */
    }
    
    a:hover { 
    color: #000000; 
    text-decoration: none;  /* added july16 */
    }
    
    /* TABLE DATA CELL FONT AND SIZE */
    
    td { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 10pt; 
    }
    
    /* SMALL FONT SIZE */
    
    .smfont { 
    font-size: 8pt; 
    text-decoration: none; 
    }
    
    /* LARGE FONT SIZE */
    
    .lgfont { 
    font-size: 12pt; 
    font-weight: bold; 
    }
    
    /* BOLD FONT */
    
    .boldtext { 
    font-weight: bold; 
    }
    
    /* ACCENTED FONT */
    
    .accent { 
    font-style: italic; 
    }
    
    /* HIGHLIGHT TEXT */
    
    .highlighttext { 
    color: #000000; 
    font-weight: bold; 
    }
    
    /* ACCENT TEXT */
    
    .accenttext { 
    color: ; 
    font-weight: bold; 
    }
    
    /* HEADER FONT COLOR */
    
    .header { 
    color: #000000; 
    font-weight : bold; 
    text-align : center; 
    font-size : 24px; 
    }
    
    /* CELL COLOR FOR ACCENTS */
    
    .accentcell { 
    background-color: ; 
    }
    
    /* TABLE BORDER FOR ACCENTS */
    
    .accenttable { 
    border: 1px solid ; 
    border-collapse: collapse; 
    }
    
    /* FORMATTING FOR ORDER/SEARCH BUTTONS AND LINKS */
    
    /* SALE AND ERROR COLOR */
    
    .salecolor { 
    color: ; 
    }
    
    /* HORIZONTAL LINE LINK */
    
    .linecolor { 
    color: ; 
    height: 1px; 
    width: 100%; 
    }
    
    /* LINE TABLE */
    
    .linetable { 
    border: 1 solid ; 
    border-collapse: collapse; 
    }
    
    /* LINE TABLE CELL */
    
    .linecell { 
    border: 1 solid ; 
    }
    
    /* PRODUCT LINK */
    
    .itemcolor { 
    color: #000000; 
    font-weight: bold; 
    }
    
    a.itemcolor:hover { 
    
    color: #000000; 
    font-weight: bold; 
    }
    
    /* PAGE LINK */
    
    .pagelinkcolor { 
    color: #000000; 
    font-weight: bold; 
    }
    
    a.pagelinkcolor:hover { 
    color: #000000; 
    font-weight: bold; 
    }
    
    /* FEATURED ITEMS */
    
    .featurecolor { 
    color: #000000; 
    font-weight: bold; 
    }
    
    a.featurecolor:hover { 
    color: #000000; 
    font-weight: bold; 
    }
    
    /* EMAIL FRIEND LINK */
    
    .emailcolor { 
    color: #000000; 
    }
    
    a.emailcolor:hover { 
    color: #000000; 
    }
    
    /* RELATED ITEM LINK */
    .relatedcolor { 
    color: #000000; 
    }
    
    a.relatedcolor:hover { 
    color: #000000; 
    }
    
    /* POP UP LINK */
    .popupcolor { 
    color: #000000; 
    }
    
    a.popupcolor:hover { 
    color: #000000; 
    }
    
    /* DRILL DOWN LINK */
    
    .drilldown { 
    color: #6c3600; 
    }
    
    a.drilldown:hover { 
    color: #6c3600; 
    }
    
    /* VIEW CART LINK */
    
    
    
    /* MAIN CATEGORY LINK */
    
    
    
    /* SUBCATEGORY LINK */
    
    .subcatcolor { 
    color: #6c3600; 
    }
    
    a.subcatcolor:hover { 
    color: #6c3600; 
    }
    
    /* END CATEGORY LINK */
    .endcatcolor { 
    color: #6c3600; 
    }
    
    a.endcatcolor:hover { 
    color: #6c3600; 
    }
    
    /* PARAGRAPH LAYOUT FOR CATALOG PRODUCTS */
    
    .p_layout { 
    margin-top: 10; margin-bottom: 10; 
    }
    
    /* BUTTON SETUP FOR USE WITH %PAGES_TABLE% OR %NAVBAR_TABLE% */
    
    td.buttoncell { 
    border: 1 solid #000000; 
    background-color: #CCCCCC; 
    color: #000000; 
    }
    
    td.buttoncell a { 
    font-weight: bold; 
    color: #000000; 
    text-decoration: none; 
    background-color: #CCCCCC; 
    display: block; 
    }
    
    td.buttoncell a:hover, td.buttonactive a:hover { 
    font-weight: bold; 
    color: #000000; 
    text-decoration: none; 
    background-color: #CCCCCC; 
    display: block; 
    }
    
    td.buttonactive { 
    border: 1 solid #000000; 
    background-color: #CCCCCC; 
    color: #000000; 
    }
    
    td.buttonactive a { 
    font-weight: bold; 
    color: #000000; 
    text-decoration: none; 
    background-color: #CCCCCC; 
    display: block; 
    }
    
    /* TAB CELL STYLE FOR USE WITH %PAGES_TABS% OR %NAVBAR_TABS% */
    
    td.tabcell { 
    border-top: 1 solid #000000; 
    border-left: 1 solid #000000; 
    border-right: 1 solid #000000; 
    background-color: #CCCCCC; 
    color: #000000; 
    }
    
    td.tabcell a { 
    font-weight: bold; 
    color: #000000; 
    text-decoration: none; 
    background-color: #CCCCCC; 
    display: block; 
    }
    
    td.tabcell a:hover, td.tabactive a:hover { 
    font-weight: bold; 
    color: #000000; 
    text-decoration: none; 
    background-color: #CCCCCC; 
    display: block; 
    }
    
    td.tabactive { 
    border-top: 1 solid #000000; 
    border-left: 1 solid #000000; 
    border-right: 1 solid #000000; 
    background-color: #CCCCCC; 
    color: #000000; 
    }
    
    td.tabactive a { 
    font-weight: bold; 
    color: #000000; 
    text-decoration: none; 
    background-color: #CCCCCC; 
    display: block; 
    }
    
    /* BAR CELL STYLE FOR USE WITH %PAGES_BAR% OR %NAVBAR_BAR% */
    
    table.bar { 
    border-top: 1 solid #000000; 
    border-bottom: 1 solid #000000; 
    background-color: #CCCCCC; 
    }
    
    td.barcell { 
    background-color: #CCCCCC; 
    color: #000000; 
    }
    
    td.barcell a { 
    font-weight: bold; 
    color: #000000; 
    text-decoration: none; 
    background-color: #CCCCCC; 
    display: block; 
    }
    
    td.barcell a:hover, td.baractive a:hover { 
    font-weight: bold; 
    color: #000000; 
    text-decoration: none; 
    background-color: #CCCCCC; 
    display: block; 
    }
    
    td.baractive { 
    background-color: #CCCCCC; 
    color: #000000; 
    }
    
    td.baractive a { 
    font-weight: bold; 
    color: #000000; 
    text-decoration: none; 
    background-color: #CCCCCC; 
    display: block; 
    }
    
    // -->
    If anyone can help, I'd greatly appreciate it!
    Last edited by cbmr777; 07-19-2007 at 06:36 PM.

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Hmm... It may not be related to your issue, but I suggest that you first fix your CSS. Use the CSS validator.

    Here are your errors: http://jigsaw.w3.org/css-validator/v...p%253Fgo%253Dy
    Last edited by koyama; 07-19-2007 at 07:58 AM.

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by koyama View Post
    Hmm... It may not be related to your issue, but I suggest that you first fix your CSS. Use the CSS validator.

    Here are your errors: http://jigsaw.w3.org/css-validator/v...p%253Fgo%253Dy

    Well thank you very much for that helpful reply. I already mentioned I was not done with this CSS file and wanted to fix this one specific issue. I have the link to the validating source already...

  • #4
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Since the forum won't let me edit my reply above...

    I wanted to add that when validating the errors are related to the Cart's CSS coding... not mine.

  • #5
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    You need to add the following to your CSS:

    Code:
    #basics2 a {
    color: #6f246f;
    font-weight: bold;
    text-decoration: none;
    }
    
    #basics2 a:hover {
    color: #000000;
    text-decoration: underline;
    }
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #6
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by cbmr777 View Post
    Well thank you very much for that helpful reply. I already mentioned I was not done with this CSS file and wanted to fix this one specific issue. I have the link to the validating source already...
    I was asking you to validate your CSS because you have some stray characters that don't belong in your style sheet. The CSS validator catches such errors.
    Code:
    /* DOODLECART STYLECSSPHP ATTRIBUTES */
    !-- 
    
    /* BODY FONT AND SIZE */
    
    
    /* ANCHOR STYLES */
    
    a { 
    color: #6f246f;   /* changed july16 */
    text-decoration: underline;  /* added july16 */
    }
    Effectively, this is the same as this:
    Code:
    !--  a { 
    color: #6f246f;   /* changed july16 */
    text-decoration: underline;  /* added july16 */
    }
    Since !-- does not match any element, the stray characters prevent the selector from working the way you want.

  • #7
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    <sigh> someone remind why it is NOT a good idea to be working on CSS (or a website in general) at 4am when you are 8 months pregnant...

    First all I feel so stupid... the editing I was doing was on the WRONG CSS style sheet. I was working with an old version. So all my changes never showed up.

    I did correct all of the CSS errors (I can not believe how many there was in the cart's css!! ) and the sheet now validates.

    Sorry for being snarky. Something so easy really didn't have to be hard. Between the cart and myself, it has been harder than need be.

    Thank you though for your help!!!
    Last edited by WA; 07-26-2007 at 11:30 PM.


  •  

    Posting Permissions

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