Font "tweaks" working in Safari locally, but not working on "live" site

[Martin717]

Hello,

I believe this is both an HTML and a CSS related question, so I wasn't sure which room of the forum was most appropriate.

I've setup a site with a bunch of font tweaks, including some in paragraph changes occasionally (HTML style <em> and p style font weight adjustments). All these changes are coming through as intended when viewing the site locally, but are not when viewing the live/hosted version. This is on Safari only - every other browser I've tested this on (Chrome, Firefox, IE, Opera) displays the pages as intended, identically between the local and live versions, as well as live on multiple computers.

The Safari issue does not seem to affect all variants of the browser. I tested the live version on a friend's not very old Mac laptop and all looked fine, while another friend's computer (and my Windows based laptop with Safari) had the same issues.

I am using @font-face for the font. Someone suggested to me I needed to make more declarations for font-weight, etc., but that doesn't quite compute to me considering all is working correctly in all other browsers I've tested in + SOME Safari browsers, and at least one of these changes (the <em> code) is independent of any @font-face coding.

I'm stumped. I've been trying to research this issue on and off by digging around online, and I don't know if I'm not hitting on the right combination of words or am describing the problem correctly in my searches, but I can't find anything.

I greatly appreciate any possible assistance. My thanks in advance...

[Beverleyh]

Might be an issue with the font declarations - maybe the order or use of "/' round the URLs

Try this syntax from my demo here to see if that makes a difference: http://fofwebdesign.co.uk/template/_testing/font-face/demo.html

If you need more help, please post a link to your page so we can check it out properly.

[Martin717]

Thanks Beverley. I have my @font-face setup differently (after a lot of trial and error to get it to work at all).

I'm going to send you a PM with my site (I need to not let it be public for now), with password, etc.

[Beverleyh]

I won't be back on a computer til tomorrow (10:15pm here now and I'm on iPhone) but I can have a look then.

[Martin717]

OK - thanks for the update, Beverley!

[Beverleyh]

Sorry but the page you sent me wont load at all in Safari on my Windows 7 computer - I've been prompted to login 12 times and I cant get any further, so I had to give up there.

However, I downloaded it in Chrome and then viewed locally in Safari, but the page kept refreshing, over and over, to the point of crashing.

I have no idea what's causing the repeating reload - I've never seen it before, although someone else here might have. I don't know if it's related to the @font-face issue but you should probably try to find out why that's happening before proceeding.

The only things I can suggest at this moment in time are;

- try a different doctype (make sure its valid)
- validate your markup: http://validator.w3.org/ (eg, you have divs inside paragraphs, which isn't allowed)
- optimise your images (they are pretty large)
- rename images/resources (shorter names, no spaces, lower case)
- remove empty/unused tags


If this doesn't help, try rebuilding your page gradually, line by line if necessary, and check in different browsers as you go.

This may or may not be related to the @font-face issue but either way, it should help you narrow down problem areas.

[Martin717]

Thanks Beverley.

Am I able to validate a password protected page?

I'll look into the reloading issue with my hosting company - I only had that problem with trying to load the page in Safari yesterday, and never did previously (with no changes to the code in between).

[Martin717]

Hmm...I just tried the local version in Safari and it's giving me fits in loading as well. I never had a problem with that before. Not sure what would cause that - the only thing I can recall changing since the last time I test it there are a few images, and they weren't any larger, etc. than I had previously.

[Deadweight]

Try this:
http://blog.elliottcable.name/posts/webkit_safari_3_1_and_the_css_font_face_declaration.xhtml

[Martin717]

Thanks! I'll take a look...

One thing I remembered that changed in my pages before Safari not loading them is I inserted links to pages that don't exist. Why? I know what the URLs will be once those pages will become active, and was preparing for them in advance (since the site is password protected). Would having those in a page cause any loading issues in a browser?

[Beverleyh]

You can copy and paste markup into the validator so don't worry about the password.

[Martin717]

I'll try it, thanks Beverley - hopefully that will tell me why the pages aren't loading in Safari currently (I've never used a validator)...

[Martin717]

OK, I input the URL from one page of the site so far in the validator and got only five errors on it, three of which I've already corrected (I was missing the ALT info by three images).

One problem I haven't fixed yet - a warning, not an error:


Byte-Order Mark found in UTF-8 File.

The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files is known to cause problems for some text editors and older browsers. You may want to consider avoiding its use until it is better supported.

Do you know what that means?


Another is an actual problem where it's telling me I can't use "<a target="_blank"" in an HTML 4.01 strict document, that there is no "target" attribute in it. What should I use as a substitute? This is for a button...

[Martin717]

I found what's giving Safari fits!

It's not "liking" the brown PNG's (matching my background) I've inserted into my code to adjust placement of stuff on the page. Previously I used various sized jpgs, but I changed it to PNGs because the jpgs weren't blending into the background well enough.

I *think* the problem might be that I'm using a one sized fits all solution, by taking a PNG file that isn't to the size I need, and making the HTML resize that one each time. I'm going to try making PNGs in each needed size and see how Safari "likes" that.

Phew!

[Beverleyh]

There is lots of info about BOM utf-8 that you will easily be able to find online but I would guess that there has been a mix-up in the way your web editor has encoded your files when it saved them. Maybe you switched between softwares that had different encoding (eg iso-8859-1 and utf-8 with or without BOM)?

You might find that if you open your web page in a plain text editor, such as Notepad, you see these strange characters right at the very start:  <-- that's the BOM.
If you delete those and change the encoding to uft-8 when you save the file, that should hopefully fix things.
Standard Notepad is very limited though so it might be better to use something like Notepad++ http://notepad-plus-plus.org/download/v6.4.5.html

As for the target="_blank" in a HTML 4.01 strict doc, it isn't allowed. If you want to use that, and have your doc validate, you would need to use another doctype (try a transitional one) or better yet, upgrade to HTML5 :D

Of course, you don't have to do what the validator tell you - they're only recommendations, rather than "somebody is going to hunt you down and smash your kneecaps" demands ;)

[Deadweight]

One way around the target attribute warning is this:


<html>
<head>

<script>
function click_open(value){
window.open (value,"_newtab","location=1");
}

</script>

</head>
<body>

<div onClick="click_open('http://facebook.com')">What</div>
<div onClick="click_open('http://google.com')">test</div>

</body>
</html>

[Beverleyh]

You could do that, although I avoided providing a JavaScript alternative simply because it isn't really required if Martin use a different (maybe more appropriate to his content) doctype. And to me it seems a little bit overkill using JavaScript for something that can easily be achieved with HTML.

Hmmm, on a closer look, you've used the short <script> tags of HTML5. That might be sending mixed messages - the target attribute is valid in HTML5 so a JavaScript method wouldn't be required.

[Martin717]

Thank you both. Let me wrap my head around each, though I already replaced the one script I had left that had a <script> tag containing the code between them with a file that has the script. One problem fixed.

I tried replacing my jpgs I'm using for spacing within a line, and Safari still isn't loading. It only loaded when I removed these images altogether (which I can't do).

Why would Safari go into fits with images placed in line, where it keeps wanting to reload the page (and never seems to finish)? Something I've coded wrong? This is only a recently seen problem, and in all previous testing was not an issue at all, ever. I don't get it.

[Beverleyh]

I honestly don't know - it is very peculiar. When I hit the repeat login prompt, I thought maybe it had something to do with the http requests - one login for each external resource - which kind of makes sense. Now with you identifying the relationship with images, my line of thought is tickling at the idea of there being an issue with the wrong headers being sent by the server, or incorrect mime types. That would support what you say about it working locally but not online. Do you have another web space to upload to? It might help - you would be able to narrow down it being a server issue rather than a coding/resource issue. Try signing up for a few different free accounts (both Windows and Linux if you can) for testing purposes to see if the problem persists in other environments.

[Deadweight]

Oh i just used script because I was just showing another way of doing the target="_blank"
Also if you want to message me with the website i would be more than glad to help.

[jscheuer1]

If you do use javascript, in order to get a _blank target you should use it:


function click_open(value){
window.open (value,"_blank","location=1");
}

Using anything else means that the same tab could and probably would be reused for each value.

And Beverley is right. If the script tag used in the example is valid in a given page's DOCTYPE, then target is valid as well, so there's no point to it like that. It would need to have the type attribute specified:


<script type="text/javascript">

Not just <script> as was offered.

@Crazykld69 - In the future, please think these sorts of things through before posting misleading/incomplete/unnecessary/invalid* solutions.

*Invalid in the sense that it's against standards.

[Martin717]

Well, I fixed the Safari reloading problem! Hopefully what I found will help others. A little background though...

When I had tested the site one day in a computer at the library, I noticed the images in the color of my background I used for spacing were plainly obvious (where they were not very visible on my own computers). So, I went in search of a better quality image to match my background (603B3D) and looked at sites online that show examples of the various HTML colors. The first gave me a jpg that didn't look so good (actually worse), but then found a PNG on another site that looked fine. Great, or so I thought.

I took that PNG as is, tried using one image for all instances I needed it for, and resized within the HTML. That worked in browsers *except* Safari. While trying to research this problem, I came across something online (I don't remember much about it at this point) re Safari and resizing images. So, I figured since I really didn't change anything else on the site (besides planned URLs, and that really made no sense to me that it would cause a problem), I ended up making proper resized individual PNGs for each "spacer" image. The site now works fine again in Safari!

I still don't understand what is causing the text tweaks I intended/mentioned above to *sometimes* (depending on the computer or the version of Safari) not work. I'm going to send this to Beverley again to see in Safari now that it's working. If anyone else wants to take a look, please let me know here and I'll PM you the link and username/password.

Thanks!