For the first time ever and I'm shocked at this... IE is actually showing my site perfectly!! Now I have problems with Opera and FireFox which seem to be outputting the same result which is not what I want!! What's the problem?? Well it goes something like this...
... I've just created a new and totally awesome layout for my site WOW!! So I fire up GoLive (do most of my web coding in it -- sweet thing) and start creating the structure of the page in XHTML. Ok so far then comes the real juicy bit... CSS! I make the layout and it works nicely in all three browsers then I come to the 'text' stylesheet and start creating how I'd like the typography to look. My design is somewhat like this, I have a header on top a navigation below and then the content begins. (All are in seperate divs)
The problem I have is with the paragraphs. Allow me to illustrate:
What you see above is a little example of what my paragrahs look like. I have a left border and a right border. I've specified a width to the paragraphs and headings as I don't want them to exceed that width and I've added some padding as well (see code below). In IE I don't have any problem but in FF and Opera it adds some extra padding to the right of the paragraph when I've strictly specified an amount in the code. To be more specific the border right moves to the right several extra pixels and that ruins the whole layout. How do I stop that from happening? My host isn't allowing me to upload any files for some reason even though my whole site is uploaded there so I can't provide you a better example sorry...
... another thing! This is new for me and I'm kinda scared of what the out come will be! I've made the layout in such a way that specific paragraphs will have some extra information that will be written on the side of the para much like the one's on Eric Meyer's site. How do you make those? Do I have to make div's for those extra info's or can I do it using just paragraphs and some classes?
I've added the CSS code and XHTML structure as well I can't make a full example so I'll have to do with this
<div id="main">
<div id="head"></div>
<div id="nav">
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</div>
<div id="content">
<h1 class="fresh">Heading 1</h1>
<h2>Heading 2</h2>
<p>lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum
dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum
dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum dolar lorem ipsum
dolar lorem ipsum dolar lorem ipsum dolar</p>
</div>
</div>
The bottom bordered 'area' is setup in text01.css basically by giving the h1, h2 & p elements a width of 565px and a left and right padding of 19px each.
For your header (#head), you have only a width of a 565px set with no padding. Padding affects width.
To make it the right size, add padding: 0 19px; to #head (or, if you like, just change width: 565px; to width: 603px;).
I'm guessing this problem was only manifesting in IE in the past because of the XML prologue/bad doctype/etc., putting IE into a mode that has a broken box model.
Yeah, your #head is still adding up tp 38px less than your p.
On a semi-related note: why transitional? XHTML is, by deifinition, strict. Using XHTML transitional defeats the purpose of using XHTML, and it throws IE into quirks mode (making it not behave properly, as illustrated by this thread).
There's also not much point in using XHTML if you're going to make browsers render it as text/html.
quote:HZR said:
So, what's the purpose of using XHTML?
The best points are that it's stricter, so rendering engines can be less bloated and more efficient, and you can incorporate other namespaces in the same source.
As resio mentioned, the point of using XHTML is that it is stricter in structure than HTML.
In order to conform with the concept of XML, XHTML requires well-formedness....proper nesting, all tags closed, etc.
As for which definition - pick one?
The whole point of XHTML is strict well-formed structure. Whether or not to use XHMTL at all is, of course, a different debate altogether. But if you are, it makes no sense not to use strict IMO.
> [...] rendering engines can be less bloated and more efficient [...]
Yes, parsers can be smaller. If we talk about rendering though, Gecko for example doesn't support incremental rendering for application/xhtml+xml
> [...] and you can incorporate other namespaces in the same source.
Yes, but to no use if you send it as text/html of course. And there really is no other option currently IMHO, since IE doesn't support application/xhtml+xml
DL-44 said:
> the point of using XHTML is that it is stricter in structure than HTML.
I got the impression you were not talking about the differences in structure between XHTML and HTML when you said: "why transitional? XHTML is, by deifinition, strict.", because there is no difference between the structure of XHTML Strict and XHTML Transitional.
> In order to conform with the concept of XML, XHTML requires well-formedness....
Yes.
> [...] proper nesting [...]
There seems to be a common myth that HTML somehow allows things like
code:
<b><i></b></i>
> [...] all tags closed
Yes, to allow DTD-less parsing (ITYM elements btw)
> Strict means that you are actually adhering to the standard.
> Transitional means....you're in transition from an earlier standard...
But you're still adhering to the recommendation of course.
> So transitional just means 'not quite xhtml'
No. It doesn't.
templar654 said:
> Hmmm... what's so special about Strict? Anything new to learn?
quote:Hmmm... what's so special about Strict? Anything new to learn?
Haven't checked it, of course, but from a cursory look, it looks like your code would pass as xhtml 1.0 strict as is.
Change the doctype, run it through the validator, and see what happens
HZR - we could argue semantics all day long.
Simply put, transitional is exactly that - it is used for a transitional period while you adapt to the new standard.
Strict means you are actually adhering to that standard.
Using the transitional doctype also, as stated above, throws IE into 'quirks mode', which basically tells IE that the code is not going to be standard, so don't try to treat it that way...
(many of the things that are 'removed' in xhtml 1.0 strict according to that page are thigns that were deprecated as of HTML 4 anyway...)
> Strict means you are actually adhering to that standard.
If you're suggesting that using transitional doesn't, I would really like to hear your definition of 'adhering to a "standard"'
> Using the transitional doctype also, as stated above, throws IE into 'quirks mode'
No the XML declaration does that. Omitting the system identifier also does that AFAIK.
> many of the things that are 'removed' in xhtml 1.0 strict according
> to that page are thigns that were deprecated as of HTML 4 anyway
All of the things that are 'removed' in xhtml 1.0 strict according to that page are things that were removed as of HTML 4 [Strict] anyway.
Simply put, XHTML 1.0 _is_ HTML 4.01 using a restricted meta-language.
Yes, parsers can be smaller. If we talk about rendering though, Gecko for example doesn't support incremental rendering for application/xhtml+xml
That's irrelevant. New engines and new versions of old engines can and most likely will.
quote:HZR said:
Yes, but to no use if you send it as text/html of course. And there really is no other option currently IMHO, since IE doesn't support application/xhtml+xml
Sure there is - don't use IE. The sort of people that want to look at the kinds of things that require another namespace are more likely to not be using IE anyways.
quote:HZR said:
I got the impression you were not talking about the differences in structure between XHTML and HTML when you said: "why transitional? XHTML is, by deifinition, strict.", because there is no difference between the structure of XHTML Strict and XHTML Transitional.
Yes, there is. More elements, etc. are valid in Transitional.
quote:HZR said:
There seems to be a common myth that HTML somehow allows things likecode <b><i></b></i>
The rec may not have called for it, but because of how slack browsers were/are, it is often rendered. It especially cannot be undone in quirks mode, since that's the safeguard for the ignorant people out there. Most people equate what browsers allow with what HTML allows and many also simply are just not as technical as you 24/7.
quote:HZR said:
No. It doesn't.
Basically, yes, Transitional is a step between.
quote:HZR said:
Simply put, XHTML 1.0 _is_ HTML 4.01 using a restricted meta-language.
Hrmm - shall we rip apart your statements of what things are simply now, or should we just realize that it is not meant to be a thesis and let it go...decisions, decisions...
I don't understand what about this is a sticking point for you HZR.
Transitional, as I said, is meant for a transitional period. As such it *is* more leniant than strict, which can be considered the "real" version of a given spec.
If you care to drag it out more feel free, but that's about the size of it.
> New engines and new versions
> of old engines can and most likely will [render faster].
Yes, of course.
> don't use IE.
I don't. But it's still the market leader, so you can't really ignore it.
> Yes, there is. More elements, etc. are valid in Transitional.
Yea, of course, sloppy wording from me there. What I meant by "there is no difference between the structure of XHTML Strict and XHTML Transitional" was that transitional doesn't in any way let you use sloppy code, i.e. bad nesting and such.
> The rec may not have called for it, but
> because of how slack browsers were/are, it is often rendered.
Yea, but that's also irrelevant. It was an answer to a statement that XML requires proper nesting.
> Basically, yes, Transitional is a step between.
So you are also suggesting that _XHTML_ Transitional means "not quite XHTML". Well... what does it mean then?
> If you care to drag it out more feel free, but that's about the size of it.
posted 05-28-2005 13:50
happy happy!
The sort of people that want to look at the kinds of things that require another namespace are more likely to not be using IE anyways.