Sudden Font Problems in Internet Explorer

[annajane]

Hey,

I've been using a variety of different font classes for different sections on my site for a couple of years

eg:
.myfontstyle
{
color: rgb(204, 204, 255);
font: 12px verdana, arial, sans-serif;
font-style: italic;
text-align: center;
margin-left: 4px;
margin-right: 4px;
width: 500px;
display: block;
}

And then in the HTML:
<font class=myfontstyle> BLAHBLAH </font>

And it's worked without a problem until a couple of days ago when spontaneously it stopped, and all fonts that should be directed by my CSS are the standard PBase font.
But only in Internet Explorer (it's the same as always in Firefox).

I haven't changed anything, what could be causing this? Is it a CSS problem or the HTML?

Thanks,

Anna

[dang]

Hey,

I've been using a variety of different font classes for different sections on my site for a couple of years

eg:
.myfontstyle
{
color: rgb(204, 204, 255);
font: 12px verdana, arial, sans-serif;
font-style: italic;
text-align: center;
margin-left: 4px;
margin-right: 4px;
width: 500px;
display: block;
}

And then in the HTML:
<font class=myfontstyle> BLAHBLAH </font>

And it's worked without a problem until a couple of days ago when spontaneously it stopped, and all fonts that should be directed by my CSS are the standard PBase font.
But only in Internet Explorer (it's the same as always in Firefox).

I haven't changed anything, what could be causing this? Is it a CSS problem or the HTML?

Thanks,

Anna

IE can be fickle, to say it nicely, and requires closer inspection of codes. The only thing I can suggest is remove extra spaces, close and check for proper tags. Example from your html:

Code: Select all

<td align="left"><fon t="" class="fontstyletwo">the things nobody ever

notices...</fon></td>

If you click the "Tools" tab on FF Web Developer, scroll down to validate html, click and you'll get an idea where mistakes are that might be fixed. Some things we can't change, of course.

[annajane]

Thanks for your reply.

The HTML errors you quoted surprised me, so I double checked, and what's weird is that the source code reads with these errors, but my HTML in the description box for the gallery is correct.

I guess firefox notices these errors and corrects them whereas IE doesn't.

But what on earth is causing them to be different as of a few days ago??

The same example:

From the source code:
<td align="left"><fon t="" class="fontstyletwo">the things nobody ever

notices...</fon></td>

In my description box:
<td align=left><font class=fontstyletwo>the things nobody ever notices...</font></td>

[dang]

Thanks for your reply.

The HTML errors you quoted surprised me, so I double checked, and what's weird is that the source code reads with these errors, but my HTML in the description box for the gallery is correct.

I guess firefox notices these errors and corrects them whereas IE doesn't.

But what on earth is causing them to be different as of a few days ago??

The same example:

From the source code:
<td align="left"><fon t="" class="fontstyletwo">the things nobody ever

notices...</fon></td>

In my description box:
<td align=left><font class=fontstyletwo>the things nobody ever notices...</font></td>

Hi Anna,
Personally, I don't have an answer. There's many things which might affect it, such as an update to IE. Since I only use IE to occasionally check pages, I turned IE auto updates off. This isn't a good solution though, since it might affect other viewers and I wouldn't know until I update manually.

Another thing which might have affected your pages could be the recent, additional removal of java script noted in this thread: viewtopic.php?f=8&t=36436&start=15 While not directly related, there may have been a change made which affected other types of coding. You're guess is as good as mine.

Sometimes it takes me days to work out simple problems with IE, the best I can suggest is using images with various text types, instead of depending on html, as we discussed here: viewtopic.php?f=8&t=40417 and here: viewtopic.php?f=8&t=40450 This will avoid cross-browser problems.

I've kept thinking someone else might offer a better solution, but so far there hasn't been a response.

[gpmerfeld]

I was just about to start a new topic when I found Anna's. I am having the EXACT same problem. Up until two days ago my pages/fonts styles looked the same in Firefox and in IE (not always an easy thing to accomplish). Then bam, every font, when viewed in IE is now a standard PBase white font. I am going nuts trying to figure it out, as I have checked my html syntax/coding over and over, and can find nothing different or wrong.

I do notice that when I do a "Validate HTML" with the tool in Web Developer Toolbar (Firefox), it shows a bunch of errors that seem to be server related (no valid doc type listed, etc). Just a few minor errors when I check the CSS. Wondering if someone wizardly (like you, Dang), could take a quick look at that html validation?

At least know that you are not alone, Anna. I am as frustrated as you. And I also wonder if this has something to do with the Admins going further in their code restrictions...

And Dang, are you saying basically to change a block of text into an image and then use it as such? I see your point, though I don't think we can then make a word like EMAIL a hyperlink within that pic text block, but find another workaround, I guess. Thanks for the suggestion

Or, do we now have to create a request on every page for our galleries to be only viewed in Firefox??? Jeez, I hope not...

[dang]

GP, you reminded me... That being fonts changing back to default. But actually, what might be happening is fonts are changing back to this section:

Code: Select all

DIV,TH,TR,TABLE,FONT,LI,UL,FORM,
BLOCKQUOTE,P,B,I,H1,H2,H3,H4,H5,FONT, CENTER
{
  font-family: verdana, arial, sans-serif;
  font-size: 10pt;
  color: #CCCCCC;
}

If you have time, you might change the font by simply removing the H2 (for example) in the above section of code, and any changes you make specified in the additional H2, H4 and such would work.

Code: Select all

h2
{

  font-size:         1pt;
  font-weight:      normal;
  text-align:       right;
  letter-spacing:     0px;
  padding-top:       0px;
  padding-bottom:    0px;
  margin-left:       0px;
  margin-right:      0px;
  background-color: black;
  color:  #000000;
}

h2:first-letter
{
  color:      #000000;
  font-style: bold;
  font-size:  0pt;
}


h4
{
  color: #44dd44;
  font-size: 11pt;
}

My reasoning is this, since the first H2 is removed it wouldn't be there to default to. Or put otherwise, the top H2 couldn't over-ride. Of course, it's more time consuming and you'll need to specify each section for font type in similar manner to the current top section. And, of course, you can't mix font types in the same section. Probably worth a try, though I can't say it's 100% effective.

As for other problems in validation, you're correct. There's nothing we can do concerning code which is specified strictly server side.

GP wrote:

And Dang, are you saying basically to change a block of text into an image and then use it as such? I see your point, though I don't think we can then make a word like EMAIL a hyperlink within that pic text block, but find another workaround, I guess. Thanks for the suggestion

Actually, we can. We can add as many image links as we'd like by using table code, included in the linked threads.

An example of a single image link would work similar to this:

Code: Select all

<p align="center"><a HREF="http://www.dangphoto.net"><img src="http://www.pbase.com/dang/image/92677214/original.jpg" alt="DangPhoto.net Macro Photos & Techniques" width=80 height=15 border=0></a></p>

Another way is to use "Image Mapping", though you'd probably need a program to do the coding for you.

Hope all this makes sense.

[gpmerfeld]

Thanks so much for your valuable input, Dang. Much appreciated. Yes, I believe that I do use a couple of different font colors in the same section, so It might be difficult to use your first recommendation, but I will do some experimenting. As for the image/text idea, I think I could accomplish it by using two images (text blocks created and saved as an image), one being hyperlinked. Again I will consider the options, the work, the results, and do some experimenting.

Just so much hassle for something that has been working fine for years! I betcha 10 to 1 this happened with the ever more aggressive action on the parts of admin to limit any alternative coding within PBase, since it occurred right when they said they were "closing holes." But in this case it truly is throwing the baby out with the bath water, as this has nothing to do with java script.

Thanks again, friend. You are such a great help around here, and it is this kind of camaraderie that keeps me plugging along with PBase...

Aloha,
GP

[dang]

GP,
You're welcome, and thanks for the comment. But in all honesty, most things I'm just passing along and learned from others here. Of course, I've learned some myself, but I'll never come close to knowing the "in & outs" like numerous others around. I agree, it's the camaraderie that makes Pbase attractive to me. I can't recall when I've ever asked for help there wasn't someone willing to jump in.

Now, for your comment about using two images. Shouldn't be a problem at all, and only take a few minutes. Just use a "table of two" under your banner, and you'll be set. If you need coding, let me know, but I doubt you'll have a problem adapting whats in the links above.

Just to be clear... I hope you removed the H2 in the first section, without making additional changes to see if the myfont html works as before? Or did you make several changes, and remove the myfont html/CSS first?

For the changes admin made, I doubt it would have been intentional. And IF it did affect fonts, we can still work around it.

Good luck, and have fun with it.

[gpmerfeld]

Aloha Dang,
I have taken a simpler way out right now, and just changed the default text color to one of mine (gold). So at least in IE, the text is not the off-white. You are right, it defaults to that first section, as you said. It might create more problems with me fiddling with H2 as I have already minimized the font in that section, as I use my own titles, rather than PBase's banner style. Sorta hard to explain, but for right now, I will live with the IE change to a better standard font color for me.

This will work for you, Anna, if you just change that top font color to your light lavender color, then at least IE will default to your chosen color rather than PBase's. I don't think you mix font colors as I do, so it may be your easiest answer...

Thanks again, Dang!

Aloha,
GP

[flemmingbo]

GP, something has gone wrong with the formatting your html code.

If you view source then notice that all your font class are like this:

Code: Select all

<fon t class=

There's a space between fon and t

Try removing that space, should hopefully help!

regards,

Flemming

[flemmingbo]

Anna, the problem is exactly the same with your html.

Now - if this is due to some weird Pbase bug for testing and formatting html to remove javascript, then I suggest simply using the "span" object instead.

Instead of

<font class="myfont">adfadfasfasdf</font>

just do

<span class="myfont">asdfasfasf</span>

that works! But see if you can remove the spaces first.

Flemming

[dang]

Thanks Flemming,
Hoped you pop in.

[gpmerfeld]

Aloha Flemming,

Thanks so much for checking this out.

The strange things is, that space between fon and t does not exist anywhere in my html code placed in the gallery description box! Only when you view page source do you see that!

But I did try using "span" in the description box code instead of font and, by God, it works! Now looks the same in Firefox and IE. I just finished going through every gallery and changing the CSS default font color, so now I must go through every gallery's HTML (Description box) and change that, but if it sticks it is certainly worth it.

THANK YOU SO MUCH!!!

I think you are right - that space in the source code must have something to do with PBase formatting the html to remove javascript, though I don't see the logic in that specific action...

I'll stick with changing to "span" and see how long it lasts...

Thanks again, with aloha,
GP

[gpmerfeld]

I have noticed other errors when viewing the page source: Not only is there that space, but after that are two sets of quotation marks, AND all of the closing font symbols </font> are missing the t !! And yet nothing is wrong at all with the code entered in the Decsription box.

Very weird, and raises suspicions... Guess it will be easier to copy and paste codes from gallery description to gallery description using "span" rather than dealing with so many corrections in the page source HTML...

Thanks again...

[annajane]

The strange things is, that space between fon and t does not exist anywhere in my html code placed in the gallery description box! Only when you view page source do you see that!

But I did try using "span" in the description box code instead of font and, by God, it works! Now looks the same in Firefox and IE. I just finished going through every gallery and changing the CSS default font color, so now I must go through every gallery's HTML (Description box) and change that, but if it sticks it is certainly worth it.

THANK YOU SO MUCH!!!

YES! It works! Thanks so much.

(I now have a mixture of images with text, and using the "span" code, so at least if one breaks I get a 50/50 chance of something working!)

And yes, GP, my html is the same.

Thanks again Flemming, & dang for the image help.