Topic: Width and Padding issues Pages that link to <a href="https://ozoneasylum.com/backlink?for=25885" title="Pages that link to Topic: Width and Padding issues" rel="nofollow" >Topic: Width and Padding issues\

 
Author Thread
templar654
Paranoid (IV) Inmate

From: beyond the WEB!
Insane since: Apr 2004

IP logged posted posted 05-28-2005 13:50 Edit Quote

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

CSS

code:
p {
	font: 9pt Verdana, Arial, san-serif; color: #7f7f7f;
	line-height: 18px; margin: 0; padding: 10px 19px 10px 19px;
	border-left: 5px solid #f2f2f2; border-right: 5px solid #f2f2f2;
	float: left; width: 565px;
}

h1 {
	font: 20px "Trebuchet MS", Helvetica, Verdana, Arial, san-serif;
	color: #626262; width: 565px;
	margin: 0; padding: 6px 19px 12px 19px;
	border-left: 5px solid #f2f2f2;border-right: 5px solid #f2f2f2;
}

h2 {
	font: 16px "Trebuchet MS", Helvetica, Verdana, Arial, san-serif;
	color: #000; width: 565px;
	margin: 0; padding: 0 19px 0 19px;
	border-left: 5px solid #f2f2f2; border-right: 5px solid #f2f2f2;
}


XHTML

code:
<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>



DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 05-28-2005 17:42 Edit Quote

Gonna need to see the page, or all the code...

templar654
Paranoid (IV) Inmate

From: beyond the WEB!
Insane since: Apr 2004

IP logged posted posted 05-29-2005 05:44 Edit Quote

That is all the code!!

I'll see if I can get a temporary host from somewhere...

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 05-29-2005 06:36 Edit Quote
quote:
templar654 said:

That is all the code!!


Doctype, head, etc...y'know - the entire source.

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 05-29-2005 06:40 Edit Quote

If that is in fact *all* the code then you have some very serious issues that have nothing to do with the subtleties of CSS.

You have elements in your HTML with class names that are not adressed in your CSS.

You have no doctype, no opening or closing <html> tags, no <head> tags, no <body> tags, no <style> tags or links to your CSS file.

I feel pretty confident that what you have displayed here is not anywhere near *all* of your code.

We cannot asess this partial bit of code which holds references to other parts of code, without seeing everything.

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 05-29-2005 07:01 Edit Quote

chances are you're just using the XML prologue which makes IE b0rk out into quirks mode, but it could be something else

templar654
Paranoid (IV) Inmate

From: beyond the WEB!
Insane since: Apr 2004

IP logged posted posted 05-29-2005 10:47 Edit Quote

... ummm...

... I made an example if that's what you're saying!!

[edit] I made this 'workshop' thingy in a hurry so there's bound to be some loose ends here and there, I'll fix them up later [/edit]



(Edited by templar654 on 05-29-2005 10:48)

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 05-29-2005 11:15 Edit Quote

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.

http://www.w3.org/TR/REC-CSS2/box.html

GoLive...sigh.

(Edited by reisio on 05-29-2005 11:32)

templar654
Paranoid (IV) Inmate

From: beyond the WEB!
Insane since: Apr 2004

IP logged posted posted 05-29-2005 17:47 Edit Quote

Wilco Roger!! Fixing padding as we speak upload soon!

quote:

reisio said:

GoLive...sigh


What's wrong with GoLive??

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 05-29-2005 20:47 Edit Quote

mostly I just don't like HTML editors and commercial products

templar654
Paranoid (IV) Inmate

From: beyond the WEB!
Insane since: Apr 2004

IP logged posted posted 05-30-2005 16:59 Edit Quote

I don't see any changes... >>

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 05-30-2005 19:01 Edit Quote

That's because you haven't changed it.

quote:
reisio said:

padding: 0 19px; to #head (or, if you like, just change width: 565px; to width: 603px;)
DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 05-30-2005 21:36 Edit Quote

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).

HZR
Paranoid (IV) Inmate

From: Cold Sweden
Insane since: Jul 2002

IP logged posted posted 05-30-2005 22:28 Edit Quote

DL-44 wrote:

> XHTML is, by deifinition, strict.

By which definition?

> Using XHTML transitional defeats the purpose of using XHTML

So, what's the purpose of using XHTML?

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 05-30-2005 23:28 Edit Quote

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.

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 05-31-2005 03:15 Edit Quote

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.

templar654
Paranoid (IV) Inmate

From: beyond the WEB!
Insane since: Apr 2004

IP logged posted posted 05-31-2005 05:01 Edit Quote

Oh... that padding... I changed something else no problem my boo boo fixed it, works now happy happy!

DL-44: Isn't XHTML Strict a bit harder

Hey the slimies are working again!

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 05-31-2005 05:14 Edit Quote

I don't see how it would be.

Strict means that you are actually adhering to the standard.
Transitional means....you're in transition from an earlier standard...

So transitional just means 'not quite xhtml'

IMO it's as simple as use it or don't - if you're going to use it, no sense not actually using it....

templar654
Paranoid (IV) Inmate

From: beyond the WEB!
Insane since: Apr 2004

IP logged posted posted 05-31-2005 11:42 Edit Quote

Hmmm... what's so special about Strict? Anything new to learn?

HZR
Paranoid (IV) Inmate

From: Cold Sweden
Insane since: Jul 2002

IP logged posted posted 05-31-2005 14:23 Edit Quote

reisio said:

> [...] 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?

No, but a lot to forget, see: http://liorean.web-graphics.com/xhtml/comparison.loose-strict.html

(Edited by HZR on 05-31-2005 15:48)

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 05-31-2005 15:54 Edit Quote
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...)



(Edited by DL-44 on 05-31-2005 15:56)

HZR
Paranoid (IV) Inmate

From: Cold Sweden
Insane since: Jul 2002

IP logged posted posted 05-31-2005 16:29 Edit Quote

DL-44 said:

> HZR - we could argue semantics all day long.

Let's hope not.

> 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.

(Edited by HZR on 05-31-2005 16:31)

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 05-31-2005 19:32 Edit Quote
quote:
HZR said:

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&gt;&lt;i&gt;&lt;/b&gt;&lt;/i&gt;


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...

(Edited by reisio on 05-31-2005 19:35)

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 05-31-2005 20:02 Edit Quote

Resio has summed up most of what I needed to add.

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.

HZR
Paranoid (IV) Inmate

From: Cold Sweden
Insane since: Jul 2002

IP logged posted posted 05-31-2005 20:49 Edit Quote

reisio:

> 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.

Ditto.

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 05-31-2005 21:25 Edit Quote

No, that they thought up XHTML and decided that it would be good to have a sort of "transitional" setup so people could easily...transition to XHTML.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu