I am using Website Font 4.1, and I am having a frustrating problem. Maybe it's because I'm not doing everything necessary... I have tried adjusting the size of the font I'm using by editing the all.css file. When I view the web page from my local file it looks fine, but the live Online file does not show correctly. The text will not fit on one line like it needs to, and the size seems to be unaffected by the changes in all.css, even though my local file shows the size change...? I am attaching screen shots of both so you can compare and see what I'm talking about. Hopefully it is just a simple step I am missing, but I need help.
Thanks,
Rob
Evert Oldham
Ambassador
9 posts
BillR
Senior Advisor
3,144 posts
Rob,
I can only guess that it is a CSS issue.
What program are you using to create the page?
A link will tell a lot more than a screenshot, so please provide a link. Bill R.
First Baptist Church
Brighter Day Charities
Roberson Family
I can only guess that it is a CSS issue.
What program are you using to create the page?
A link will tell a lot more than a screenshot, so please provide a link. Bill R.
First Baptist Church
Brighter Day Charities
Roberson Family
Evert Oldham
Ambassador
9 posts
I am using CoffeeCup HTML Editor 2008. Here is the link:
http://www.shcsfarmington.org
The problem is on the "Mission" page. Is there more than one place to change the CSS other than the "all.css" file in the "websitefontdata" folder?
Thanks,
Rob
http://www.shcsfarmington.org
The problem is on the "Mission" page. Is there more than one place to change the CSS other than the "all.css" file in the "websitefontdata" folder?
Thanks,
Rob
BillR
Senior Advisor
3,144 posts
Rob,
It appears that you have a page with tables. In one of the table cells, you have an iframe. Inside that iframe, you have a page with tables. In one of those cells, you have a menu and another iframe. The second iframe has tables with content. All three pages will put a browser into quirks mode since none of the three pages have a doctype.
I think you could do all that with a single page, and have better control over things like your padding and margins. All three of your have CSS in them in one location or another. The outermost page has an internal style section in the head. Check that for padding and margin commands that could affect the ultimate size of the innermost page. The middle page also has styling that appears to mostly be for the menu.
I suggest you put in a doctype. Based on some of the code I found, you may want to use html transitional. The doctype is case sensitive, so try copy and paste of this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
That may get the browsers out of quirks mode so you can better control them.
Then try setting the left table cells to something larger than 20%, which will require reducing the size of the right table cells. To make that easier, you should put the cell widths in your style section so you change only 2 numbers to get all the cells. One more reason to move the width commands out of the <td> tags is that width is depreciated, and future browsers may not support that setting, but CSS styles will work.
Hope this helps some. Bill R.
First Baptist Church
Brighter Day Charities
Roberson Family
It appears that you have a page with tables. In one of the table cells, you have an iframe. Inside that iframe, you have a page with tables. In one of those cells, you have a menu and another iframe. The second iframe has tables with content. All three pages will put a browser into quirks mode since none of the three pages have a doctype.
I think you could do all that with a single page, and have better control over things like your padding and margins. All three of your have CSS in them in one location or another. The outermost page has an internal style section in the head. Check that for padding and margin commands that could affect the ultimate size of the innermost page. The middle page also has styling that appears to mostly be for the menu.
I suggest you put in a doctype. Based on some of the code I found, you may want to use html transitional. The doctype is case sensitive, so try copy and paste of this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
That may get the browsers out of quirks mode so you can better control them.
Then try setting the left table cells to something larger than 20%, which will require reducing the size of the right table cells. To make that easier, you should put the cell widths in your style section so you change only 2 numbers to get all the cells. One more reason to move the width commands out of the <td> tags is that width is depreciated, and future browsers may not support that setting, but CSS styles will work.
Hope this helps some. Bill R.
First Baptist Church
Brighter Day Charities
Roberson Family
Cary
Ambassador
1,058 posts
You also need to modify the styling in Mission.html which starts at about line 38.
sIFR.replace(h1_font, {selector: 'h1',
css: [
'.sIFR-root { line-height: 1em; font-size: 26px; color: #B82327; background-color: #FFFFFF; text-align: left; font-weight: normal; font-style: normal; text-decoration: none; visibility: hidden; }',
'a { text-decoration: none; }',
'a:link { color: #0000FF; }',
'a:hover { color: #FF0000; }'
],
css: [
'.sIFR-root { line-height: 1em; font-size: 26px; color: #B82327; background-color: #FFFFFF; text-align: left; font-weight: normal; font-style: normal; text-decoration: none; visibility: hidden; }',
'a { text-decoration: none; }',
'a:link { color: #0000FF; }',
'a:hover { color: #FF0000; }'
],
Cary
Ambassador
1,058 posts
Also try it without "display:inline".
Evert Oldham
Ambassador
9 posts
Very good advice everyone.... things are working much better now. Thanks!
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
