[SOLVED] Simple Question: Why does Font Style change on Web Page in different Browse

BlackReef · #1 Dec 5th, 2007, 10:14

Please check out a re-design I am doing:

http://www.rimnordic.com/test/rimtest.php

In IE7, everything looks just about the way I want it to look, including the small "Arial" style font, which was set in Dreamweaver CS3. So when I checked the page in FireFox, the font is Times New Roman, and is larger, throwing the design of the page off. Could somebody please tell me how I can set a static font so no matter what browser is viewing, it never changes? I have seen other sites that can maintain one style in multiple browsers, so how can I change it, thanks

-Joe

dab42pat · #2 Dec 5th, 2007, 10:35

I assume you mean the text to the left of the picture if so their id no style associated with it, therefore each browser is just defaulting to its standard text.

HTML: Select all

<p>
                <br />
<br />
12-3-07<br />
FIRE UPDATE:  We recieved a dusting of snow the other day, but it's already gone. Maybe a sign??!! At this time, Green Valley Nordic will be closed for this winter due to the two fires' worth of damages making it very hazardous...falling trees, etc. Rim Nordic will be open when the snow cooperates. Our new snow report page will be up soon. 
Thank you for checking in.<br />
              </p>

should be something like.

HTML: Select all

p>

                <br />
<br />
<span class="style1">12-3-07<br />
FIRE UPDATE:  We recieved a dusting of snow the other day, but it's already gone. Maybe a sign??!! At this time, Green Valley Nordic will be closed for this winter due to the two fires' worth of damages making it very hazardous...falling trees, etc. Rim Nordic will be open when the snow cooperates. Our new snow report page will be up soon. 
Thank you for checking in.</span><br />
              </p>

hope this helps

BlackReef · #3 Dec 5th, 2007, 10:43

Here is my code: (To make matters worst, I am using the CMS WebYep!) And I have limited knowledge in coding!

<td> 

<?php webyep_longText("Fieldname", false, "", false); // WebYepV1 ?>

dab42pat · #4 Dec 5th, 2007, 10:53

I have never heard of webyep,but if you can access your source code you can change the code as in my above post. I will check out webyeb and see if I can find a solution.

BlackReef · #5 Dec 5th, 2007, 11:00

What is funny is at the old site, (www.rimnordic.com) it also has WebYep, but the page seems to display "Arial" just fine in FireFox and IE? Why is the new test site is displaying Times New Roman in FireFox? The code looks the same on the two pages?

dab42pat · #6 Dec 5th, 2007, 11:14

The code on the two pages is different. On your older page it has a doctype and headers. Your new page doesnt. also the old page has styles applied to text youre new page doesnt.

HTML: Select all

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Rim Nordic and Green Valley Nordic</title>
<style type="text/css">
<!--
body {
	background-color: #000440;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 50%;
	background-image: url();
}
#Layer1 {
	position:absolute;
	width:1205px;
	height:958px;
	z-index:1;
	left: 40px;
	top: 75px;
}
#Layer2 {
	position:absolute;
	width:2438px;
	height:299px;
	z-index:1;
	left: 1px;
	top: 134px;
	background-color: #FFFFFF;
}
#Layer3 {
	position:absolute;
	width:995px;
	height:124px;
	z-index:1;
	left: 0px;
	top: 1px;
	background-color: #000440;
}
#Layer4 {
	position:absolute;
	width:190px;
	height:367px;
	z-index:2;
	left: 4px;
	top: 126px;
	background-color: #FFFFFF;
}
#Layer5 {
	position:absolute;
	width:957px;
	height:17px;
	z-index:3;
	left: 3px;
	top: 128px;
}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}
#Layer6 {
	position:absolute;
	left:0px;
	top:384px;
	width:263px;
	height:272px;
	z-index:1;
}
#Layer7 {
	position:absolute;
	left:265px;
	top:384px;
	width:500px;
	height:365px;
	z-index:2;
}
.style6 {font-size: 12px}
.style1 {font-family: Arial, Helvetica, sans-serif}
.style2 {font-size: 10px}
.style3 {font-family: Arial, Helvetica, sans-serif; font-size: 10px; }
#Layer8 {
	position:absolute;
	left:28px;
	top:671px;
	width:173px;
	height:299px;
	z-index:3;
}
#Layer9 {
	position:absolute;
	left:0px;
	top:659px;
	width:262px;
	height:114px;
	z-index:3;
}
.style11 {color: #FF0000}
.style12 {font-family: Arial, Helvetica, sans-serif; font-size: 9px; }
a:link {
	color: #FF0000;
}
a:visited {
	color: #FF0000;
}
.style30 {color: #FF0000; font-size: 9px; }
-->
</style>
<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

new page there is no doctype or <head></head> tags. also there are no styles applied to your text.

dab42pat · #7 Dec 5th, 2007, 11:52

Are you using dreamweaver with the webyep extension?

BlackReef · #8 Dec 5th, 2007, 20:29

dab42pat -

Yes I am using Dreamweaver with WebYep Extension. This is frustrating and I wish I had more knowledge with coding, so I could spot problems like this. I still don't know how to fix it

BTW, thanks for the help too

dab42pat · #9 Dec 5th, 2007, 20:56

You might find this useful, if you havent looked at it yet.

http://www.obdev.at/resources/webyep...als/index.html

I think if you can get the text set with a style then others can change or add text, keeping the style intact.

look at the adding css styles paragraph.

BlackReef · #10 Dec 6th, 2007, 22:48

Dab-

I just want to say I got the problem fixed now. I really appreciate the help. For anyone curious, it was not a WebYep problem. I needed to set the Font and Size in PAGE PROPERTIES, and remove anything else from the coding

Thanks again

-Joe

dab42pat · #11 Dec 6th, 2007, 22:53

Glad you got it sorted.

Marc · #12 Dec 7th, 2007, 09:39

Glad you got this problem Sorted.

All you needed to do was declare the 'font-family:' in the 'body{}' tags in your CSS. This will make the changes site-wide granted each page uses the same CSS file.

Thread marked as Solved!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] Simple form submission question	future448	JavaScript Forum	2	Oct 14th, 2007 09:35
Simple Pop-Up page question	BlackReef	Web Page Design	3	Jun 29th, 2007 14:19
Question about "Browse" field for web form...	pdbuddy	Web Page Design	2	Apr 7th, 2007 00:20
Buttons to update font style and colour help	Loobyt	JavaScript Forum	4	Jun 20th, 2006 20:55
change style sheets	screamer2k	Web Page Design	5	Aug 6th, 2004 11:19

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] Simple Question: Why does Font Style change on Web Page in different Browse