...

View Full Version : SOLVED: Cross-browser font-style problems



cbmr777
07-19-2007, 07:40 AM
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. :o

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

Here is my CSS file (which contains mine + the cart's CSS stuff):



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

koyama
07-19-2007, 07:56 AM
Hmm... It may not be related to your issue, but I suggest that you first fix your CSS. Use the CSS validator (http://jigsaw.w3.org/css-validator/).

Here are your errors: http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fdollclothesbyvickie.com%2Fgo%2Forder.php%3Fvc%3Dy%26return%3Ddollclothesbyvickie.co m%252Findex.php%253Fgo%253Dy

cbmr777
07-19-2007, 10:00 AM
Hmm... It may not be related to your issue, but I suggest that you first fix your CSS. Use the CSS validator (http://jigsaw.w3.org/css-validator/).

Here are your errors: http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fdollclothesbyvickie.com%2Fgo%2Forder.php%3Fvc%3Dy%26return%3Ddollclothesbyvickie.co m%252Findex.php%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...

cbmr777
07-19-2007, 10:06 AM
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.

ahallicks
07-19-2007, 10:30 AM
You need to add the following to your CSS:



#basics2 a {
color: #6f246f;
font-weight: bold;
text-decoration: none;
}

#basics2 a:hover {
color: #000000;
text-decoration: underline;
}

koyama
07-19-2007, 01:43 PM
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.


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


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

cbmr777
07-19-2007, 06:35 PM
<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. :o 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!! :eek: ) 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!!! :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum