<br><br> versus </div><div>

However, would it be true that <div> and <span> still have one semantic meaning, and that’s <div> is supposed mean vertically stacked items, and <span> is to mean flowing inline kind of element

A div has meaning in that is is a container for block elements. A span is a container for inline elements. Therefore only use them in the context that they apply to.

I like to think of div as meaning “division” and that you use divs to logically structure sections of the page and group things together so that they can either be targeted from the parent div of just to make things easier to understand and work with. The rest of the time you will use the appropriate html for the job in hand.

e.g.h1,h2,h3 etc heading elements for headings. p for paragraphs. ul,ol,dd for lists and definitions etc and so on…

Only use a div when there is nothing else suitable or when you want to logically separate sections of the document. (e.g. #main,#sidebar etc…)


Tommy was quicker than me :slight_smile:

The semantics of the paragraph or line break cannot be changed with CSS.

Right, this I know. I only mean that if we do change the <p> not to have line break, then it is “against” the semantic, because most common language human use and write, a paragraph starts on a new line. When we change the presentation to not start in a new line, then it is against the common usage of writing or the common meaning of a paragraph.

The vertical space will be equal to the computed value of line-height, which usually isn’t exactly the same as 1em

ah right… thanks. i just went through the inline model and get a lot out of these concepts too:

font-size => content area
line-height => inline box height
line box: enclosing all inline boxes, ie, enclosing all line-height boxes, not necessarily enclosing all content areas.

so 1em is the font-size… and <br> on a new line will “skip a line”, so that’s line-height, not font-size.

No. The semantic meaning is the same as long as it’s marked up with <p>. Semantics is something you derive from the markup, not from the way it’s rendered on screen or on paper.

Using display:inline for a <p> may confuse users because it looks odd. But the semantic meaning is still the same.

I’d say,
font-size => size of the rendered glyphs
line-height => font size + leading = height of line box
line box => a rectangle that encompasses one or more inline boxes that make up one ‘line’ on the output device.

By the way, it is by asking questions like these a few months ago that I found out about collapsing margins, the box model difference in quirks mode between IE and Firefox, and why many experienced developers get confused by vertical-align:middle and thought it doesn’t work. And there are people who will step in and tell you it is meaningless to ask these questions.

Keep asking them. It’s the only way some of us get anywhere.

right… that’s what i mean too. semantic is the same. but the presentation is not working with that semantic but is working against it. Kind of just like saying a fish swim against the tide but the tide is still the tide.

maybe i should say
font-size => content area height (and how big the font renders: em-box displayed with its height equal to the font-size value)

i used content area because in the inline model i read about, there are numerous references to inline boxes, line box, and content area, together with font-size and line-height.


actually, it seems that font-size determines content area height, but font-size is actually added together with padding, border, and margin to reach the content area’s height. though i wonder whether it matters if vertical margin is added or not, because it doesn’t have any visual effect on inline elements at all. only horizontal margins, padding and border have visual effect. having said that… maybe the vertical margin does have visual effect when it is near the paragraph’s border and the margin will collapse with other vertical margins of block elements

If I remember correctly, inline elements themselves can’t have top-bottom margins just like they can’t have explicit widths and heights (exception, replaced elements like img). Making them display: block lets them have margins.

Now IE acts differently with font-size and line-height anyway. Everyone (except maybe Microsoft) sat down, looked at the specs, and interpreted them as best they could. So even when we read that something should have or do this-that-the other, what you’ll see from browser to browser isn’t always the same.

@poes: you’re right – vertical margins are ignored for non-replaced inline elements. The spec says that the vertical margins apply even for those, but that they have no effect. No wonder people find the spec hard to understand! :lol:


From all your recent questions, I think I see a theme: you often say, someone’s making an exception here or there or why don’t browsers follow this rule or that?

And the answer I think is that they were set out as guidelines (thus not hard and fast rules like you can find by programming languages) by a large and not always cohesive group of humans from around the world, and then they are interpreted by another not always cohesive group of humans from around the world, this time working for different companies and either try to make their best guess on the spec OR they say, we’ll do something else for consistancy for our customers instead.

And that the group making the recommendations have changed things to accomodate default “standards” sometimes, or because something else ended up making more sense somewhere along the way, or because the group’s direction has changed (look at the changes between HTML 3.2, 4, 4.01, and XHTML1). And since everything’s a guideline and not a rule… bleh.

I found a good paper somewhere about a particular spec regarding colgroup and colspan, and how the example in the spec wasn’t too clear, and then how the US government’s example for their employees ended up being completely wrong due to this misunderstanding. I can probably find it again, it was on someone’s list of further reading (I think Roger/456bereast’s page)

My question is really just to able to tell what the rule is, simply and clearly, within a few sentences. and to know whether there is any exception to the rule. but i find out not too many people are intellectually curious. they just go by intuition feeling, but that’s the people who think in outer space, it is weightless because it is vacuum. when given the result and asking if there is a rule, they just become expert and say of course it is this way. but when asked what the output is given some HTML and CSS code, they probably won’t be able to tell what the output is exactly.

an example is

    <img src="pic.jpg" alt="pic"><br><img src="pic.jpg" alt="pic">

if i give the result and ask if there is rule to it, many people comment as if they are expert and even say the question shouldn’t be asked, and think that the question is so basic that it is probably that i don’t know how to use <br> and just need to go back to the HTML intro books.

The thing is, they can’t really know the rule and reason behind things. Above is an example. In Strict Compliance HTML 4.01 Mode, does the code above generate what layout? (without any other style definitions). Draw it on a piece of paper exactly, is there any space at all between the 2 images in the final result? Is it nothing at all, or is there something? Give the answer in YES or NO, and say what the true reason is. I bet many people cannot really tell the result and explain the real reason behind it.

Above is an example. In Strict Compliance HTML 4.01 Mode, does the code above general what layout?

Well it depends if its a good browser or a bad browser :slight_smile:

The image is an inline element and in strict mode the image should be aligned on the baseline (not the bottom) in the same way that text is. This means there should be a small gap underneath the image to allow for descenders in text. Otherwise subsequent lines of text will overlap.

If you look in Firefox and Opera (in strict mode) then this is exactly what happens as the images are stacked below each other with a small gap.

IE doesn’t show a gap so it doesn’t quite understand the rules.

If you set the image to vertical-align:bottom then the gap disappears for all.

Alternatively you could set the images to display block and remove the break completely and they will stack on top of each other with no gaps and less code. (Then there is the issue of white space bugs in the html which may also confuse the issue further.)

Although there may be explicit rules for elements you shouldn’t confuse this with what browsers actually do as in may cases its the browsers interpretation that may be wrong rather than ambiguity in the specs.

However its also worth noting that the specs do allow for ambiguity in some cases and therefore differences are allowed. For instance the default margin and padding of elements is not defined in the specs and therefore all browsers are correct even if they are all different.

The specs define as much as possible but in some situations they say “the resulting behavior is undefined” and leave it to the UAs to control.

Yes, this is the true expert answer. I understand the spec sometimes allow ambiguity and all that. For the code question above, many people if told there is a gap, will tell you their “expert” explanation about it. If you tell them there is no gap, they will again tell you their expert explanation for it. They can’t even say exactly YES or NO. and they even think it is just a plain beginner’s question about the <br> tag and think you should go back and do some more reading and shouldn’t even ask the question here. but the true answer is, yes, since image is an inline element, so by default, it will align the bottom of image to the baseline, and it will form a gap with the next image which is the space between the baseline to the bottom of the inline box. Even IE7 is doing it wrong.

I think sometimes people answer with a simple answer when in fact the question may be more involved than they originally thought. I try not to think of any questions as silly but we do often get silly questions asked and perhaps sometimes people jump to the wrong conclusions too early in the discussion.

Even the most simplest of things can be complicated when you get into the finer detail so its good that you want to understand how it all fits together and what the real rules are.:slight_smile:

After all its only when you know the rules and the problems associated with them that you can truly plan your layout accordingly.

yes, and especially when a layout template is needed for dynamic content that comes from the db or from program conditions in PHP or other languages giving the content depending on the situation. with static page it is a lot easier because we can always tweak it… if the image is 300px tall, we can easily center it by hard coding some fixed length, but when the content is dynamic, then it is harder and it takes deeper understand of things.

Often beginners don’t even know what question they should be asking. They think they partly understand something and so decide that they should be using a particular process to achieve their goal but that process isn’t working quite right and they ask how to fix it where in fact they really ought to be using something completely different to achieve what they are really after. Those are the sorts of situations where either the question doesn’t make sense or the obvious answer to the question that was asked is of no help whatever to the asker. Often it is necessary to step back and ask why that particular question is being asked in the first place and what outcome is really required. Then it becomes possible to define what the real question should be.

As for browsers following or not following a given standard. Most browsers do a reasonably good job of following those standards that they implement in a correct and consistent way. The differences due to interpretation between browsers that are actually trying to follow a given standard are fairly minor. The big differences come between those browsers that follow the standard and those that don’t.

The thing to remember about Internet Explorer 6 is that its release predated the introduction of HTML 4 and CSS 1 that part of the standard that it does follow is basically because they did such a good job of anticipating what the standard would be. In the case of IE7 the browser release was a critical security patch for IE6 to plug about 600+ security holes that can only be plugged in IE6 by disabling so much of the browser that it becomes just about unusable. With the urgency of the release it is amazing that Microsoft found any time to update the browser to better comply with the standards at all. The IE release that is trying to implement better support for the current standards is IE8 and there they are starting from so far behind the other browsers that by the time IE8 is released to handle the same standards that other browsers do now, those other browsers will have implemented another section of the standards and IE will be again behind all the others in what they support. This is basically a result of business decisions that were made back when IE had over 95% of the browser market and they are now attempting to do something to try to catch up before they end up with less than 5% of the market (they will probably start to panic soon as their share is about to fall below 50%).

You are at best just intermediate… using hunch to do CSS, thinking <embed> is not supported in any modern browser, and provide vague answers.

So according to you, there is only one way to do something. And the beginners MUST follow THAT WAY. You know, when they ask why something won’t work, it actually advance their knowledge by learning how exactly something works. But your suggestion is: just don’t learn. JUST DO IT THE OTHER WAY WHICH YOU THINK IS THE RIGHT WAY AND THE ONLY WAY.

There is usually more than one way to do things. If you refuse to learn, you are at best just an intermediate stuck there forever.

I know details in CSS that you refuse to know about. I don’t even consider you the same league as mine.

Pardon? CSS1 came out in 1996 and HTML4 in 1997, IIRC. And IE6 was released in – what? – 2001?

My memory must be going as I misremembered when IE6 was released, probably got it confused with either 5.5 or 5 in remembering when it was released. What I should have said is that when IE6 was released it had better support in it for HTML 4 and CSS 1 than any of the other browsers that had any noticeable market share (of course at the time the main competition was IE5.5 followed by IE5, IE4 and Netscape 4).

There are many ways of doing things - there is the right way following the standards and there are wrong ways creating a mess that works in current browsers but may not work in future browsers. Sure I am at an intermediate level with CSS as I am primarily a developer rather than a designer but you are a bare beginner at anything internet related if you don’t understand that the standards are there for a reason and should be followed unless you have an extremely good reason not to.

The best way of helping someone to do something on the web is using the right way according to the standards rather than just any old way that works for now. Understanding what it is that they are really trying to achieve and helping them to do that rather than just answering what they ask is a way to help them progress to the next level.

Sure there will also be a few nobodies who claim that my help is useless. Those few nobodies balance the tens of thousands each year who find my assistance useful. Fortunately the nobodies are such a small fraction that I barely notice them so that it doesn’t interfere with my trying to help those who do appreciate it.

i am far from a beginner. If I find something strange, I reduce it to the simplest form and ask the question. To you, it may look like a simple question like <div> </div> with spaces inside and the question is not worth anything. But I asked the question on Sitepoint and got no concrete answer that it is specified in any formal doc that says ANY SPACE INSIDE a block element and not within an inline will be TOTALLY IGNORED. In fact, someone suggested that the HTML 4.01 spec has a line there saying that how white space is handled is not specified in HTML 4.01. However, IE7, Firefox 2, and Safari 3 all totally ignore such space. If I had ask why multiple spaces are collapsed in an inline element, then it will be a really beginner’s question, as back in 1996, I already noticed that and it is actually in the HTML spec and in the CSS Definitive Guide too. However, the fact that <div> Hello </div> is 100% the same as <div>Hello</div>, I don’t think too many people can be very sure to say that they are 100% identical when rendered.

You know, when someone ask a simple question, sometimes it is looked down upon. Such as the question: maybe the earth is not a flat piece of land. Or, maybe the sun doesn’t turn around the earth, it is the earth that turns around the sun. Or, can speed actually have a limit? Such questions can bring some people to laugh at, and to think that person is asking such meaningless question. And some “righteous” people even consider it evil to ask such question. You fall right into this group.

And about the fact that you negate people and just say this question is meaningless. If you go help thousands of people in real life but for some of them, you slap them on the face. Does helping thousands of people make your action of slapping some people alright?

In real life, we have to work with other people’s code. If there are hundred lines of code that is doing it one way, and I need to fix a couple of lines to make it work, and I only have half an hour, I can’t say let’s revamp the design totally and make it “correct”. I need to know fine details of why it is breaking and make it work. And you are there saying, “such meaningless question.”

Maybe you are like that in real life, or maybe in real life, you are a “polite” person. On the internet, there are often people who just giving out mean comments, because they have no responsibility, and it is hard to say whether he will see the other person any more online, let alone to see him in real life. So you can see his true nature: utterly unkind to another human. In real life, because he has to face the other people like coworkers for a longer term, and maybe even have association with them in the computer field after leaving the company, they all of a sudden become “polite” and kind.

Anyway, if it is really “nobody”, I would consider you “nobody”, being only intermediate and stomping on people. A nobody will not hurt other people like that, so in this regard, you are worse than a “nobody”.