PDA

View Full Version : XHTML Transitional DTD is messing things up...

SYP}{ER
08-02-2002, 03:03 AM
Well I fixed the worst of it, but for some reason all my paragraphs have huge gaps above and below them.

p { margin: 0; } fixes it, but <p>Hello</p><p>Hello</p> renders to look the same as <p>Hello<br />Hello</p> (no space between the lines)

Any suggestions would be greatly appreciated :)

PS: Sorry if it's a little slow, it's running off my comp...
boxer_1
08-02-2002, 04:42 AM
Is the location to the page where you're having this problem on the site listed in your profile? If not, could you post a link so we could look things over :thumbsup: ?

BTW - Although not widely supported, you can also set negative values for margins (p {margin: -5px;}). By default the margins should be "0", but it seems this is not always the case.
MCookie
08-02-2002, 09:43 AM
Just add padding:0px;...
boxer_1
08-02-2002, 11:02 AM
Padding doesn't eliminate the paragraph spacing the way you cna with margin: 0px;. Copy/paste/preview the validated document below to see what I mean:

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Example</title>
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" alink="ff0000" vlink="#800080">
<p style="padding: 0px;">
Hello 1
</p>
<p style="padding: 0px;">
Hello 2
</p>
<p style="margin: 0px;">
Hello 3
</p>
<p style="margin: 0px;">
Hello 4
</p>
<br />
<p>
<a href="http://validator.w3.org/check/referer">
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" border="0" height="31" width="88" /></a>
</p>
</body>
</html>


Using "margin" you can gain precise control over the spacing between the paragraphs.
SYP}{ER
08-02-2002, 11:28 AM
lol, I can't believe I forgot to post the URL! I had it on my clipboard ready to go, but it was late and I was off to bed so that's my excuse :P

http://24.112.168.19/sites/aaron-wright.com/randombitsnbytes/
MCookie
08-02-2002, 11:42 AM
What I meant was adding "padding:0px;" to the p {margin:0px;}, like: p {margin:0px;padding:0px;}
The zero margin removes the space outside the paragraph, the zero padding leaves no space within the paragraph. I thought that was SYP}{ER was looking for.

But now, looking at the page, I see nothing wrong. Mac IE5.1.
SYP}{ER
08-02-2002, 12:06 PM
Oh fer... lol

I forgot to mention this: the trouble is in Mozilla :)

Sorry about that. It was late... hehe
boxer_1
08-02-2002, 12:09 PM
Hmm...I don't see any major problems with the paragraph spacing either using XP IE 6. I get the same spacing if I remove the DTD. I guess if you want to have less space between your paragraphs you'll have to resort to the previously discussed methods :).

On a side note, not causing any problems, but just out of curiosity, why do you have the alt attribute repeated in some of your images, like this one?

<img alt="" alt="" src="images/spacer.gif" width="467" height="5">

Again, that's of no consiquence, just curious :) .

BTW - Nice looking site :thumbsup: !

Edit: Just looked at it with Moz and it looks the same to me when compared side by side with IE 6 (as far as paragraph spacing anyway). I don't know what to tell you :confused: .
SYP}{ER
08-02-2002, 12:35 PM
hehe, about the alt="" attributes being repeated, I noticed I'd forgotten a bunch of them and wrote a regular expression to parse my entire site and insert them where they weren't. However, it added them to EVERY img tag even with the alt="" attribute already declared. Thought I'd fixed them all :p

About the sameness in each browser: Then how come I see this?

In Internet Explorer 6
http://24.112.168.19/log-ie.gif

In Mozilla 1.1b
http://24.112.168.19/log-moz.gif

:confused:
boxer_1
08-02-2002, 02:51 PM
I see, now that you mention it (and posted the scrn shots) I do notice that Mozilla and IE render the paragraphs differently. I wish I could tell you why, but I can't. Does it do it if you remove the DTD? I guess the two browsers just render the page differently with the DTD included :confused: .
SYP}{ER
08-02-2002, 03:00 PM
http://24.112.168.19/sites/aaron-wright.com/randombitsnbytes/?nodtd=yes

That's without the DTD. And it renders it just fine without the DTD. But without the DTD, my tags are just adding to the filesize with /> and such :(
boxer_1
08-02-2002, 03:08 PM
Originally posted by SYP}{ER
http://24.112.168.19/sites/aaron-wright.com/randombitsnbytes/?nodtd=yes

That's without the DTD. And it renders it just fine without the DTD. But without the DTD, my tags are just adding to the filesize with /> and such :(

I know what you mean. I've wrestled with the issue of everything rendering differently with an XHTM DTD. It's hard to work around, but like you mentioned, it sort of defeats the purpose if you code in XHTML and don't include the DTD. To DTD or not to DTD, that is the question...lol. No, but seriously, although there is a slight difference in rendering, I don't think the page looks totally ruined in Mozilla. I guess the best bet is just to use p {margin: 0px;} to handle the issue. Dunno :confused:
SYP}{ER
08-02-2002, 03:28 PM
But I don't wanna :p

*sigh*

Well, thanks for the help :thumbsup: I'll ask Jason to take a peek (maybe he'll get it... who knows) and if can't get it, I'll just *gulp* revert back to just plain old HTML.