PDA

View Full Version : Minor Firefox discrepancy



Spider
04-08-2011, 01:25 PM
I am in the slow process of learning css and changing my pages, over time, from tables-based to css-based. But the different browsers don't behave the same. Case in point - a minor matter but quite glaring as it is center-page on several pages of my website. Actually, it's not a css/tables discrepancy but a IE/Firefox discrepancy.

One of the pages in question is BUILDING WEALTH (http://frederickpearce.com/wealth.html)

If you look at it in IE, the red star is sitting to the left and above the title text - just as you would want an asterisk.

But in Firefox, there is a line between the text and the image, so instead of being one line above the text, as in IE, the star is two lines above the text in Firefox.

I can see nothing in the code to cause this, and, in fact, the same effect exists whether it is css or tables - compare the previous page with this one - BUSINESS COACHING (http://frederickpearce.com/buildbusiness.html) which is still in tables.

Incidentally, Safari also adds an unwanted line break or space in css but not in tables.

My question is, therefore, how can I prevent Firefox adding this unwanted space?

Any ideas would be appreciated.

Spider
04-09-2011, 01:30 PM
Hmmm. 32 visits and nobody knows how to do this?

Harold Mansfield
04-09-2011, 01:45 PM
What you are experiencing is common. IE displays differently than compliant browsers.
You will probably have to share the page code for anyone to help...I don't think there is an all purpose string of code that acts as a fix.

Spider
04-09-2011, 04:00 PM
............... deleted

Spider
04-09-2011, 04:08 PM
Well, I wouldn't call it common but, you are right, it does happen. It's interesting, though, that the only time I have difficulty is when Firefox does not comply with the code I write and IE does. But the old Netscape was the same, so this is nothing new.

Here's the code--


<center><a href="index.html"><img src="starr.jpg" border=0 width=27 height=32></a><img src="space.gif" width=430 height=5 border=0>
<div STYLE="width:95%;filter:shadow(color:#bbcccc);">
<FONT FACE="Times,Times New Roman" color=#930000>
<H1 STYLE="LETTER-SPACING:-1pt;">
<center>CREATE A WEALTH PLAN </center></H1>
</FONT>
</div></center>

You will see that the image -starr - is followed by a space image on the same line - to position the star left of center.
The div is the text.
There is no gap, line break, or space between the two images and the text, so the text should appear one line below the image.

In IE the text appears one line below the imge.
In Firefox, the text appears two lines below the image.

It appears that Firefox has added a "ghost" line break.

Has anyone any idea how I can place an image on the line immediately above the text in Firefox.

Spider
04-10-2011, 09:14 AM
Wow! We are up to 55 views and still no-one seems to know how to do this. Where are all the Firefox experts when you need them! :-)

Harold Mansfield
04-10-2011, 02:47 PM
You will see that the image -starr - is followed by a space image on the same line - to position the star left of center.
The div is the text.
There is no gap, line break, or space between the two images and the text, so the text should appear one line below the image.

In IE the text appears one line below the imge.
In Firefox, the text appears two lines below the image.

It appears that Firefox has added a "ghost" line break.

Has anyone any idea how I can place an image on the line immediately above the text in Firefox.


1. Why are you using an image for spacing? Why not just add the space with the proper coding using margins? Eg: margin-right: 20px;

I don't know if it has anything to do with it but you seem to be writing an older version of HTML that is for older versions of Internet Explorer and not code that is WC3 compliant which is what FF and newer versions of IE (attempts to) work on.

I'm not an HTML expert so I'm probably not expressing this correctly ( and could be completely wrong here ) but you are writing for IE 5. I only see some of your codes and tags when I read older articles that go back a few years.
That's probably why you are seeing some things differently in FF, because you are writing for IE. And an older version of IE at that.

I didn't even recognize "Font Face" I had to look it up:

font-face was first proposed for CSS2 and has been implemented in Internet Explorer since version 5! However, their implementation relied on the proprietary Embedded Open Type (.eot) format, and no other browsers decided to use this format

So, I'm guessing some other aspects of the version of HTML that you are using could also be causing some problems.
Sorry I don't know how to fix that. I only know how to rewrite it, but what will that do for the rest of your page if it's still using old tags?

But again, I could be completely wrong here.
I've never used "font face", I use "font-family"
I style my text with <span style> not <h1 style>
I space my images in the image code, not use a second image, and I don't use the tag "letter" at all.

So I can't say that your way doesn't work because I don't write mine that way and never learned to, but it just looks like it's written for IE only.

Spider
04-10-2011, 06:03 PM
I wasn't using margin-right, Harold, because I hadn't learned that one yet - but now you have mentioned it, I have learned it and I will try it. Besides, all html code is supposed to be forward compatible, so there really aren't any "old" versions. There is only code that was commonly used in the past and code that is commonly used today. And as long as it works it is no better or worse than more recently introduced commands.

That notwithstanding, I am not writing for IE or for anything else - I learn some code and try it to see what it does. If it does what I want, I use it. If it doesn't, I don't. And every once in a while, I try it in different browsers to see what they are doing with the code I write.

Now, the question here is not what code I write. It is what code I do not write. I did not write code that called for a line break where FF appears to insert one. And I'm not coming down on FF - now and then I find IE and Safari putting in stuff I didn't ask for. What I do then (in whichever browser) is to try various things to try to make the offending browser do what I want without disturbing the others, and usually I find a way. This time, though, regarding this "ghost" line break, I have been unable to get this browser to behave.

I thank you for your comments and will try the different ideas you have suggested.

Harold Mansfield
04-10-2011, 09:26 PM
When I say older version, what I meant was writing for Internet Explorer.
It's not the same. IE has been non-compliant for years and reads some things differently, hence the use of things like "font face". No one else uses that.
Also using caps. Again an IE thing. Everyone else uses lowercase.

5+ years ago when IE was the dominate browser, you may have gotten used to doing things to please IE, not knowing that it wasn't really compliant with anything else except IE. I'm sure every tutorial written back then was with Internet explorer in mind because there was really not much else used by regular computer users. Only "geeks" used alternative browsers.

Now that IE has fallen from the number 1 browser and Firefox is the most used, you may have to start using WC3 complaint code.

Not saying you are doing anything wrong, just that you are doing what you learned a few years ago based on what was the norm at the time. It hasn't been that way for some years now.

To fix what is happening I would try using WC3 complaint code:

Adding your unit of measurement to your sizes.."430px", instead of just dangling "430" with no designation may help.
Also try using the same file extension on your images. I don't write in or for IE, but I remember that it used to have a problem with .gif files...adding extra spacing around them. I don't know if that has anything to do with your specific spacing issue.

You may also try defining a specific line height and spacing in your CSS file. You can also add it on the page eg: <span style="line-height:150px;">
You can also try line-spacing, and use a negative number to bring the line up to where you want it.

Honestly, hopefully someone else will come along to help you clean that up. Like I said, I'm not an HTML expert so not only wouldn't I do it like that, but I'm having a hard time wrapping my head around doing it the way that you write HTML. To me it still looks like code written to display in an older version of Internet Explorer.


There is only code that was commonly used in the past and code that is commonly used today. And as long as it works it is no better or worse than more recently introduced commands.
It matters if the browsers don't support it anymore. If it isn't supported anymore, and you keep using them, then you are using outdated code. It happens. We all have to deal with it.

Spider
04-10-2011, 11:10 PM
Harold, I really cannot imagine you aren't saying most of this with your tongue in your cheek! C'mon - read what you have written--
...When I say older version, what I meant was writing for Internet Explorer. It's not the same. IE has been non-compliant for years and reads some things differently, hence the use of things like "font face". No one else uses that. Also using caps. Again an IE thing. Everyone else uses lowercase...

1. You don't "write for" a particular browser. You write hypertext markup language in a text editor (or a glorified text editor) and what you write is read by every browser a viewer is using. You can view a webpage in IE, in Chrome, in Firefox, in Safari, in an old Netscape browser, if you wish. The browser reads what it is presented.

2. This compliancy business you keep dragging up is nonsense (in this context, anyway.) All it is is an agreement between certain browser manufacturers that specific words or combinations of alpha-numeric characters will cause certain agreed things to happen on a computer screen. This is not scripture handed down to Moses along with the Ten Commandments. If someone thinks they can get a jump ahead of the competition by adding a few character combinations that will cause something to happen that other browser manufactureres aren't doing, then that is the American way - it is called "competition," Harold. Just like there is nothing to stop a car manufacturer including an automatic back massager in the passenger seat of every car they produce. Just because they have all agreed to use steering wheels of the same size, doesn't mean they can't have gear-shift knobs of different sizes.

3. <Font face> is an HTML command that goes back to the beginning of graphic browsers and, of course, it is still in use today. And what do mean, no-one else uses it? You mean no code-writers use it, or no browsers use it? Certainly Firefox, Safari and IE deliver on it (I don't know firsthand that any others do because I don't test on any others, but I would be extremely surprised if Chrome and whatever other browsers out there don't respond.) And if the browsers respond, writers will use it - and why not?

4. And capital letters is an IE thing? How on earth did you come up with that? HTML is not case-sensitive. Period. As long as you use English characters (recognizing that there are probably some browsers in the world that recognize non-English characters) it doesn't matter if you use upper-case, lower-case or a comBinATiOn of both, and Firefox and Safari and IE (and I imagine all others) will accept it, read it and render it to the screen.

It will stop there. I will dig around in the rest of your message for the useful information that I'm sure is hiding there, but -- really, ol' chap, I get that you don't care for IE. I get that you like Firefox, but it doesnt serve either of us when your helpful suggestions turn into illogical rhetoric.

BTW - I tried margin-right and, while it made for tidier code, it didn't stop FireFox adding a line break. What I did discover, though, was the H1 command. Seems Firefox adds a line break before, and possibly after, H1. IE doesn't and I don't think Safari does, either. As I didn't want to give up using H1, I have found an alternative solution. So, thanks for pointing me in the right direction.

Harold Mansfield
04-10-2011, 11:55 PM
You obviously don't know that IE is different from other browsers so I can see why you think I'm making this up. Some of what you are doing is for IE, whether you know it or not. It has nothing to do with how I feel about the browser. The facts are that it is not completely compliant so people compensate. IF all you know is how to make things work for IE, then you will find discrepancies in other browsers that are WC3 compliant.

That's the whole point. Clean up the code so that it is cross compatible. Don't use blank images for spacing. Use actual code for the space that you need.

When I open up files on old sites, I see people using caps in the HTML. When I open up files from sites created in the last 5 years, I don't see people doing that anymore. So I can only assume that, that is the way people used to write it since I wasn't doing this back in 1996. All I know is I was told not to do it. I never see any examples or tutorials that use caps, so there would be no reason for me to do it anyway.

I do know that Uppercase tags were the standard several years ago (when those tutorials that you seem to be following were written), however ever since XHTML 1.0 was released tags became case sensitive.
HTML tags are supposed to be written in lowercase letters. For one there may be several portable devices not supporting uppercase tags, and as for the website designer's best it may be good as other languages such as XML are case sensitive.
Here is one source on that:
http://www.w3.org/TR/xhtml1/#h-4.2


The World Wide Web Consortium (W3C) recommends lowercase in HTML 4, and demands lowercase tags in XHTML.
Source: http://www.w3schools.com/Html/html_elements.asp
So yes, it is very possible that you are writing HTML based on old standards that you learned 10 years ago and eventually little things are going to stop working because the browsers are constantly updating. The web is constantly changing. Too much for anyone to hold on to one way of doing things.

Like I said, not an HTML expert here. All I can tell you is what I see, what works for me and what I have read.
I must know something because I'm not having any problems with my HTML.

If I were having line spacing problems, I would add "line-spacing" tag and set it where I needed it. But I also wouldn't have used an image for spacing, caps in my tags, and some of the other "tags" that you use, so I can't say that my suggestion will work for the way you are trying to do it.

If you know that the <h1> tag adds a space in the way that a certain browser displays the surrounding lines, then I wouldn't use that tag and would probably instead add a size, eg: <span style="font-size:18px;">, using the same size as whatever an <h1> is. Problem solved.

Spider
04-11-2011, 09:20 AM
You obviously don't know that IE is different from other browsers so I can see why you think I'm making this up. ...This is the sort of stupid comment that makes me cross. Of course I know it is different - they all are different from each other. Even what you call "compliant" browsers differ from each other. I have been writing HTML since 1996 - first in Netscape Navigator and then in Explorer. Every tutorial I have read recommends checking one's code in all common browsers as one progresses. Why would they do that? Because every browser is different.

I just wish you would stop trying to put me down because I happen to prefer a different browser to the one you like. In this case, there is no question that Firefox is adding a line break that is not supposed to be there. I object to you making that something I am doing wrong.

I am done with this conversation. Thank you for your help.

Harold Mansfield
04-11-2011, 11:30 AM
Frederick, this has nothing to do with what browser you prefer. It's about how you are writing your code. You keep saying things like "I have been writing HTML since 1996"..Good for you, but unfortunately it shows that you haven't learned anything new since 1996.

You ask for help. We give it, and then you argue against what we tell you even when we provide you with documentation. It's a no win situation on every question where you basically tell us we don't know what we are talking about. I can't speak for others, but when I commit to answering a question from you, I also have to commit to the subsequent disagreement where basically you tell me I don't know what I'm talking about, and then spend days arguing for the way you think it should be.

You have basically already told me that everything I said trying to help you is nonsense, and then YOU get offended. That's rich.


This compliancy business you keep dragging up is nonsense (in this context, anyway.) All it is is an agreement between certain browser manufacturers that specific words or combinations of alpha-numeric characters will cause certain agreed things to happen on a computer screen.



You don't "write for" a particular browser. You write hypertext markup language in a text editor (or a glorified text editor) and what you write is read by every browser a viewer is using. You can view a webpage in IE, in Chrome, in Firefox, in Safari, in an old Netscape browser, if you wish. The browser reads what it is presented.


And capital letters is an IE thing? How on earth did you come up with that? HTML is not case-sensitive. Period. As long as you use English characters (recognizing that there are probably some browsers in the world that recognize non-English characters) it doesn't matter if you use upper-case, lower-case or a comBinATiOn of both, and Firefox and Safari and IE (and I imagine all others) will accept it, read it and render it to the screen.


<Font face> is an HTML command that goes back to the beginning of graphic browsers and, of course, it is still in use today. And what do mean, no-one else uses it?
All of that rhetoric just screams of the 1990's. Back when SOME of that was true. Some of that was never true and I don't know who told it to you. It's 2011 now. Most of that is outdated information.

If you want to stop having browser issues on certain code strings, you will learn how to write for browser compatibility, or waste time putting out fires that could be avoided.

I'm sorry if you take offense, but everything you stand by on every question you argue is 10 years old (or older) and you haven't taken the time to learn anything new in the last 5 years, so you argue constantly on old understandings. In case you haven't noticed, you do a lot of things that people don't do online anymore and you have tunnel vision about it (so I guess you wouldn't notice anyway). You've learned one way , a long time ago, and refuse to update that no matter what. Everyone else is wrong, but we aren't the ones having issues.

There is validity to everything I have told you. I've even provided links since you think I have nothing better to do than to come on the forum to steer you wrong.

The bottom line is, I'm not having an issue with the way I write HTML, so I thought I could help. Yet, I still get sucked in because you are going to spend more time on the argument, than actually fixing the problem.

Why even ask in the first place if you always know more than the people who do this for a living? Is it some kind of conspiracy against just you?
If you notice, rarely does anyone disagree with you on things where you would have the professional expertise .But you are constantly disagreeing with us when we try and help you with things that are ours.

And yet, all of our websites are running just fine, and you have been arguing against everything we tell you and working on yours for over 2 years like it's your white whale.
See a pattern yet?

billbenson
04-11-2011, 04:50 PM
Spider, I'm not a web designer, but I do web design and frequently (daily) php programming. I have been doing it for over 10 years. I'm not a php, html, seo, or css expert, but I do know a lot about them.

Would you go to a job interview and say "ain't got any of those" or say "I don't have any of those". Ain't is in the Webster dictionary. Its your option to use the word. And in many cases it won't work to help you get a job over using proper English. In fact it may make it far more difficult to get a job although you may eventually get on using bad English.

So, you want to write your website using bad code because you can. That's your option, but it is going to make your life far more difficult. Look at the time you have wasted on some of these posts in this thread not to mention searching for confirmation that you can use bad code etc.

The web is still the wild wild west, but the sheriff is closing in. Browsers and the people and companies who develop them consider W3C to be the standard. So you say why does IE do it differently? Because they could get away with it and they were trying to force developers to use them as a standard. That hasn't worked evidenced by their loss of market share to other browsers. Also evidenced by the fact that IE is moving closer and closer to being W3C standard. MS is loosing their standards battle and I bet their are some really nervous people over there regarding open source as well. W3C is constantly evolving. FF and most browsers try to be complaint but have bugs or aren't updated yet. W3C is the ideal for them. Its not like everybody is trying to be different (except IE).

I suggested in another thread that you hang out on some web design or webmaster forums and see what they do. This is neither, but it has some webmasters and designers on it. I particularly like webmaster forums as those are the people that are making money on the internet. What you will find out is that no one competent will support your ideas or stubbornness to conform.

I understand that you want to question things to be sure you are doing what is best for you. There comes a time that not accepting the norm becomes a complete waste of time.

CloptonCapital
04-13-2011, 03:12 PM
Firefox needs code spelled out more clearly, it's probably a good idea to get into the habit of it anyway. On a similar subject IE9 has massive flaws in how it renders and interacts with pages that should probably just be ignored, the IE9 updates will fix it

Harold Mansfield
04-13-2011, 04:40 PM
That was pretty much my whole point. You are using code and writing your HTML based on what was standard back when IE was the only game in town. It's not exactly WC compatible, it never was. It's IE compatible. That's how everyone was doing it back then.

The subtle differences will cause you a problem here and there because browsers are leaning more towards compliancy and are not supporting what was. So some of those old code strings, tags and command structures are outdated.
You may have gotten way with it up until now, but as you move forward you will have to use what is the standard TODAY.

That's just how it is today. It's something that everyone has to deal with and be flexible about. No one is picking on just you although it may seem like it since most of your web and design questions seem to go back to the same or a simular outcome...old standards and practices that don't apply anymore. And then you get mad because you don't want to hear that something has changed or isn't the best way to do it anymore.

You have to keep learning the new standards. What was a standard years ago..even though they said it would be all forward compatible...is not.
Arguing with me (or anyone else) about it isn't going to change the web. I didn't do it.