font size changes on part of page (x-browser)

[jerseyjoe]

Please see this site under construction:

First in IE7

http://www.buildinghosting.com/~veces3/store/

Compare the font displayed in the title and contents of the boxes Shop by Category, Shopping Basket, Featured Product and Information with the same fonts in the title and text of the boxes Mailing List and the center column.

That's one issue.

Now look at the same page in FF. Not only does the same text display in the same font across all those areas, but note that the links in the Information box are underlined, whereas they are not underlined in IE. I'd like the line decorationfor both IE and FF to be "none." That's what is set in style.css.

This came about after moving the Site Doc links from the bottom of the page to the Information box.

Suggestions on cross-browser uniformity will be appreciated.

[Guest Meow Meow]

Please see this site under construction:

First in IE7

http://www.buildinghosting.com/~veces3/store/

Compare the font displayed in the title and contents of the boxes Shop by Category, Shopping Basket, Featured Product and Information with the same fonts in the title and text of the boxes Mailing List and the center column.

That's one issue.

Now look at the same page in FF. Not only does the same text display in the same font across all those areas, but note that the links in the Information box are underlined, whereas they are not underlined in IE. I'd like the line decorationfor both IE and FF to be "none." That's what is set in style.css.

This came about after moving the Site Doc links from the bottom of the page to the Information box.

Suggestions on cross-browser uniformity will be appreciated.

I am not a CC expert here...however, here are my thoughts:

1. If you want your sitedocs to appear consistent with the rest of the boxes, i.e. your category box, consider coding the sitedocs the same way as the category was coded.

2. Looking at your index.tpl, your sitedocs were coded with hot links; therefore, they appeared just as they were coded.

3. Your issue could be classified as one of those 'cross-browser' issues, I think.

Your site appears to be consistent in Firefox and Opera with underlines under Sitedocs.

[jerseyjoe]

Thanks for the input. Between the above responses (greatly appreciated) and some offline advice from CC Tech Support, the cause of the Site Docs problem has been identified and fixed by cleaning up a dog's dinner of code in info.tpl. Basically it came down removing to the unneeded span codes.

I might mention that, as the CC/TS response said privately, CSS tutorials are not included in the paid support - but the fact that I decline to build store for a client unless registration is paid for dis get me a bit of off-schedule help. I highly recommend paying the modest fee for any store you build.

Now, one item remains on the page http://69.93.140.122/~veces3/store/

The Mailing List subscription box (bottom left) still looks bad in different ways.

The box title font is fine in FF, but small in IE.

The box content and button fonts are fine in IE but not in FF.

I have not edited mailList.tpl so I'm at a loss at to why it looks so different across the two browsers.

Someone, please?

[Guest Meow Meow]

Hi JerseyJoe -

I'm glad that you're able to address the siteDocs issue. As for formatting the Mailing List, pls. see below:

1. The box title font is fine in FF, but small in IE.

In skins/your skin/styleSheets/layout.css, find this block of codes:

=====

.boxTitleLeft, .boxTitleRight {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 70%;

color: #09347C;

background-image: url(../styleImages/backgrounds/boxTitleBg.gif);

width: 155px;

height: 15px;

padding-left: 5px;

padding-top: 1px;

}

====

Noted that you already changed the font-size to 70% but it didn't look consistent in size when tested on both browsers. I would change the font-size from "%" to "px", ie. 11px (or whatever the size would be for you), it seemed to work for me. Here what's mine would look like:

====

font-size: 11px;

====

2. The box content and button fonts are fine in IE but not in FF.

2.a. box content's font

====

.boxContentLeft, .boxContentRight {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 100%;

border-left: 2px solid #0E51A3;

border-right: 2px solid #0E51A3;

border-bottom: 2px solid #0E51A3;

background-color: #FFFFEA;

padding-left: 5px;

margin-bottom: 10px;

padding-top: 3px;

padding-bottom: 5px;

}

====

Change the font-size to 70%;

2b. button's font

Look in skins/your skin/styleSheets/style.css, find this block of codes:

====

.submit {

font-family: Verdana, Arial, Helvetica, sans-serif;

color: #FFFFFF;

background-color: #070F72;

border: none;

height: 18px;

font-weight: bold;

border: 1px solid #070F72;

}

====

Add: font-size: 70%;

====

Again, try either " %" or "px" to define your font size to see which one works best in both browsers. BTY, pls back up your files first before trying new things. ;)