The issue with different browser's different rendering has often been discussed in the Asylum. And here's a good one for ya'll. I really need some good help with this puzzle:
Every single site that I have made or rebuilt since I started working with CSS have had a similar problem. Example: A block (#menutext) starts at top 2px left 0px, with the width 134px and height 300px. Next block (#info) starts at top 302px left 0px, with the width 134px and height 50px. These two are the left menu. Main block starts at top 2px left 135px, with the width 630px (to fit in 800x600) and height 95%. In IE and Opera this looks neat and fine, just the way it is supposed to in my opinion. In Netscape and Mozilla the left blocks overlap the main block. Furthermore, the main block has become "too big", so two scrolliebars appear, both to the right and in the bottom of the screen.
It seems to me that Netscape and Mozilla read pixel-sizes larger than IE and Opera, but only when it comes to text, width and height - NOT starting points. And when did 95% become more than 100% of the window's height?
This really bugs me. It throws off the entire design that I am trying to do.
Here are a few screenshots in different browsers which illustrate what I mean: http://www.malmo.bostream.se/richcris/test/. On the first four shots I have put in green circles to show where the problem is. I have colored the two menu blocks and put a frame on the main block to make it show more clearly what I mean.
Here is also the CSS for the three blocks the way they show on the first four screenshots:
There is as far as I can understand nothing wrong with this CSS-code. But is there anything in this code that makes the blocks "grow" in NN and Mozilla? Or is there a good way of going around this problem?
As I said in the start, a few more sites that I have been working on lately have the similar problem with "growing" blocks. Look at the right part of the menu on this site: http://www.malmo.bostream.se/richcris/studioone/
This one has a picture in the very right part of the menu bar, to create a transparent effect with the menu bar and the background image. Looks like bad web design in NN and Mozilla. Tried to make the fonts smaller, lower the line-height, make the block bigger - and smaller, etc. Nothing works...
And have a look at the right side of the upper menu bar on this site (I have tried to tweak the size here): http://www.malmo.bostream.se/richcris/kartis/
The borders of the horizontal menu is supposed to go all the way to the right border. In NN and Mozilla they overlap. Looks like the web designer had too much whiskey and missed with a few pix. Tried to make the menu shorter, as you can see. Currently it is too short in IE and Opera, and too long in NN and Mozilla. Neither is good...
I would appreciate as much help as possible, since I'm out of ideas of how to get around this problem. All you guys who use Mozilla-based browsers, haven't you noticed this "growing-block" problem? Or am I just blind to not see what I am doing wrong???
(Another difference is that a "fixed" block isn't fixed in IE (still scrolls), but works fine in all the other three. I guess that is just a thing they "forgot" to put into IE... )
This browser thing makes me soooo tired!!! Please help!
I suspect that the problem here is a misunderstanding of the "box model".
Yes, I believe that's the case. Let me clarify something: the only reason your page (i'm looking at http://www.malmo.bostream.se/richcris/studioone/ right now) looks right in Internet Explorer (IE) is because IE *knows* that you misunderstand the box model, and it's being nice to you.
How does IE know that you misunderstand the box model? Because you're using an invalid doctype at the top of your page. If nothing else, the word "doctype" needs to be in capital letters. I think you'll find that if you replace your doctype with this doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
And make sure that it's the very first thing on your page, then IE will display the same problems that Mozilla does. When you use a valid doctype (a list of which can be found at http://www.w3.org/QA/2002/04/valid-dtd-list.html ), the browser says "aha, this person knows what they're doing, so I shouldn't be nice to them - I should follow the standards to the letter." So I strongly, strongly, strongly suggest that you use a valid doctype such as the one I suggested. You may also want to make sure your page validates by checking it at validator.w3.org , so that you know you're using HTML and CSS correctly.
OK, now that we've determined that the problem is the page and not the browser, allow me to explain what the issue actually is:
When you specify the width or height of an element, you are specifying the width or height of the *content area*, not including padding, borders, or margins.
So, if you want a box to be 20 pixels high with 2 pixels of padding and a 1 pixel border, you want to give it a height of 14. (1 + 2 + 14 + 2 + 1 = 20). Make sense? Same thing for the width of an element.
This is a bit of an annoyance, but it's the way that CSS works. In the future, there will be "box-width" and "box-height" properties which behave more intuitively, but in the meantime, you'll have to deal with this different behavior.
I think you'll find that when you use a valid doctype and specify the widths/heights of elements in this way, your pages will look correct in both IE and Mozilla, along with other browsers that properly support these standards.
OK, now, all would be well and good at this point, except for one thing: Internet Explorer 5. IE 5 is too old to know about the doctype. So, regardless of whether you specify a doctype for your page or not, IE 5 will behave the same way that IE 6 does when you don't specify a valid doctype. That means that you'll encounter the exact opposite of the problem you're facing now when you test your valid page in IE 5.
However, there is a known hack for IE 5 that you can use to fix this problem. If IE 5 support is important to you, then after you get your page working in IE 6 and Mozilla, I suggest you take a look at http://www.tantek.com/CSS/Examples/boxmodelhack.html which explains the problem and the workaround. It's a little complicated, so I suggest that you make your page work in IE 6 and Mozilla before you get into it.
I hope that covers everything. Let us know if you're still confused.
Thanks Slime, yes it was a really excellent explanation. And here is the original poster, Kartis, again. I'm sorry I couldn't read your answer right away. My ISP's DNS was down for a day or so and I have been working a lot both day and night, so that's why I couldn't react on your reply immediately.
I didn't know that I have to use capital letters with the first tag, the doctype tag. And, yes, the page you visited is validated at W3C with no errors or warnings, as are the other sites I included in my first post. Both html-code and CSS are validated. W3C Validation didn't tell me anything about the must of having a capital letter doctype tag. Kind of astonishing, if it can throw off the looks of a site, I think.
I also had no clue that I have to add the second part of this doctype, the "http://www.w3.org/TR/html4/loose.dtd"-link. So, did I understand it right from W3C's page there, that this second part of the tag tells the browser to download the right stuff to make my site work as it is supposed to? I searched for "loose" on W3C's Google-search. After reading a few articles about loose coupling (?) I still don't understand anything about "loose". It feels like I am wandering around in a landscape very far from home when reading this. I will have to come back later in this issue when I have read up about it a little more. Right now I will just put it in with a smirk on my lips that hopefully will tell you that I understand fully (not!).
But I DO understand that the real problem lies in what you are mentioning next, the box model padding. That's what's wrong! It's funny, but I read about the padding thing just a few hours ago, and was thinking that this could be the problem. I will go ahead and change the sizes of my boxes to make them fit better. Thank you so much for noticing this error! You saved my day, Slime!
quote:W3C Validation didn't tell me anything about the must of having a capital letter doctype tag. Kind of astonishing, if it can throw off the looks of a site, I think.
I might have been wrong about the capital letters thing. The problem was probably that Internet Explorer is very specific about what doctypes it considers to be correct, and it's very possible that you had a correct doctype, even though IE didn't think it was. This is a problem with IE, but we have to go along with it if we want our pages to be rendered correctly.
Follow that link I gave you to the page of valid doctypes. Anything on that page should work in IE. You probably want to use transitional (aka "loose") or strict HTML 4.1. The main difference between transitional and strict is that transitional allows the use of presentional tags and attributes, like the font tag. I encourage you to use strict if you're up to it.
Thanks again, Slime. Yes, I did follow the link and read. So you mean loose is just another word for transitional? That brings me a little closer to home out there in the wilderness...
When using strict instead of transitional, how strict is strict? heh
I mean, what may I not do when using strict? If percentages for fonts and other stuff are the main difference, I could live with that. I guess I have a lot to read up on, Slime.
It's funny, the more I learn about coding the bigger it gets. Talked to a friend the other day who's 12-year son was into html-coding. My friend owns a record company and is doing real good. He said he was thinking of putting his son on managing the updates for his companie's web page, when the kid had learned a little more. Quietly in my head I was thinking: Oh dear, he doesn't know about the jungle out there, lucky him! hehe
Kasta sten i glashus? Jag?
<edit: making myself a little bit clearer, I hope>
[This message has been edited by Kartis Shone (edited 07-16-2003).]
Oh jeeeez ! I am such a dork! After reading your last post over and over again, I finally see that you didn't write "percentional", but "presentional". THAT is a difference! Cheesuz! How dumb do you think I feel right now?
Well, next stupid question: What exactly does that mean? hahaha I guess it means "present something" but with html and CSS what is presentional?
(Consider I am Swedish. Swedsih blonde girls are not known for their brains....)
quote:When using strict instead of transitional, how strict is strict? heh
I mean, what may I not do when using strict? If percentages for fonts and other stuff are the main difference, I could live with that. I guess I have a lot to read up on, Slime.
I think you're a bit confused, am i right?
"Percentages for fonts" have to do with CSS, not XHTML. You use CSS the same way no matter what doctype you choose.
The difference is that in the Strict DTD, you're not allowed to use presentational HTML. "Presentational HTML" is basically any HTML tags that describe the appearance of a page, such as <font>, <center>, etc. All those tags are deprecated in favor of CSS, and if you do use them (with the strict doctype), it won't validate. It will validate with a transitional doctype, however.
Oooops and I didn't reload the page before posting, so I didn't read your last message, Oz.
If THAT what you're saying is strict code, then I am already using it. Great! I will change to strict in doctype.
One thing though: Can I use <font class="but"> for a specific font in strict, or are some of those tags "forbidden"? Should it be <span class="but"> instead?
<edit> But hold on!!! I guess the second part of the doctype cannot be used in STRICT html, the link to W3C saying it's loose html? Then my boxes will kinda fail in Explorer. </edit>
<edit2>crap, typos, grammar, blah, blah</edit>
[This message has been edited by Kartis Shone (edited 07-17-2003).]
[This message has been edited by Kartis Shone (edited 07-17-2003).]
quote:Had a few of those black pills the nurse gave me...
Now you're heading into the right direction! Just continue that way and things will seem to get much clearer soon... at least until you reach the basement.
As for your question - any use of presentational HTML tags will stop your pages from validating when you're using the strict doctype, and although you're using CSS to define the appearance of the text within the <font> tags in your example, they are still presentational tags and should therefore be replaced with something more general like <span> (or <p> if you it's a whole paragraph). This also makes more sense when you decide that you don't only want to specify a font-family, size etc. but also styles like background images and borders later on - then the <font> tag really wouldn't be appropriate anymore.
I checked with this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd
">
and it works - kinda. My boxes keep the same size as they should, but in IE 6 two fixed boxes on top of eachother aren't so happy. The second box (menu text box in menu box) scoot downwards like 20px. And that is without any padding. Have no clue why so far. I guess I can skip the box lying under the menu-text-box... In Netscape everything looks fine! Sorry I haven't put anything on the net yet for you to see what I am talking about...
*thinking load: Did they get any of this confusing babble?* *reaching for the red pill*
Just for the record, though, you should only use generic tags like <div> and <span> as a last resort. HTML is all about structure, so you should try to find tags that actually describe the content. If you really can't, then go for <div> and <span>.
Keep in mind that simply replacing all your <font> tags with <span> tags doesn't make the situation better because <span> is still meaningless.
Yes, I just recently understood why I should use <div> instead of <span>, and almost understand the difference between <span> and <font>. And when I mean difference, I mean what the tags ACTUALLY do when I use them. I guess the reason to why i didn't really grasp the idea of <span> is just because it is - meaningless. Good point, Oz.
Well, after some experimenting with the doctypes - transitional and strict - with my specific menu boxes, I figured out that IE cannot put two boxes that has position: fixed on top of each other, just adds the second mentioned box AFTER the first one. If the first box is sized with height: 98%, the second drops down about 20px, and the first stops where the second starts. Netscape can do what I want - put them on top of eachother. This is the result when using html 4.01 STRICT doctype. With Transitional doctype and the appropriate link (loose-thingie) IE6 will show it right: two boxes on top of each other.
The reason to the two boxes is that I want a border to limit the menu, so I put the menu-box 98% with nothing in it but the border, and menutext-box with menu links, and another box underneath with info-blahblah text. I simply have to kill my darling and find a new solution.
quote:Yes, I just recently understood why I should use <div> instead of <span>
Um, I never said that.
<div> is a "block level element", which means it creates a line break before and after it. <p> is an example of a block element.
<span> is an "inline element", which means it, um, goes "in line", without creating any line breaks. <font>, <b>, and <i> are some inline elements.
Which one you use depends on the situation. Do you want it to be "block" or "inline"? That determines which one to use.
What I said previously is that should use neither one unless all else fails.
Oz: Yes, I know IE is not supporting "fixed". But if Netscape, Mozilla, Opera, and a few other browsers do, then I would like to have it fixed. I am remaking a frame based site - that I made a few years ago - into CSS, and the owner would like to have it as much the same as it was from the start = menu is showing all the time.
quote:quote:
--------------------------------------------------------------------------------
Yes, I just recently understood why I should use <div> instead of <span>
--------------------------------------------------------------------------------
Um, I never said that.
I know you didn't. That's not what I mean. I just mentioned that I have been confused about what span actually does. And you saying:
quote:because <span> is still meaningless.
made me feel better about not being clever enough to grasp the whole thing about <span>, if you see what I mean. Nevermind, although blonde, Swedish, having too many black pills, I still have a few brain cells left.
I have a fat HTML reference book which I use quite a lot, and in which I just recently read up more about CSS. There are many new concepts for me, so it takes a few days of experimenting with it before all the nickels fall down, you know. And even if I have a rather good understanding of the English language, there are words or concepts that I don't understand immediately - like inline. Now I know what inline is *k'ching another nickel fell down*, and that is after experimenting and failing with my ideas a few times.
Well it is late night here, and a long day at work tomorrow, so I just have to sleep a few hours. See you later guys.
And thanks so much for lighten up my dark brain!!!
quote:Yes, I know IE is not supporting "fixed". But if Netscape, Mozilla, Opera, and a few other browsers do, then I would like to have it fixed.
As much as I love those browsers, the reality is that they account for less that 10% of the market, even when combined. IE is still the dominant browser. I wish we could all just say "screw IE, I'm going for standards!", but that's pointless if standards don't work.
If your client wants it to look exactly as before, then use the frames. I'm sure the client didn't mean "Make is look exactly the same, but it only has to work in 10% of browsers."
Yes, I know, we all hate frames, but it's up to you to decide which is worse: A design that 90% of your audience won't see correctly, or a design with frames..
EDIT: Typos.
[This message has been edited by ozphactor (edited 07-17-2003).]
Sorry about that, I meant "presentational," not "presentional." Heh. =)
If there's ever any doubt whether the page you're writing conforms to the doctype that you're using, check the page at http://validator.w3.org/ , and it will let you know.
posted 07-13-2003 13:12
