Welcome to WebmasterWorld Guest from 107.20.37.212

Forum Moderators: incrediBILL

Message Too Old, No Replies

<p> tag in IE6

Different support to Firefox etc.

     
9:54 am on May 28, 2004 (gmt 0)

New User

10+ Year Member

joined:Mar 29, 2004
posts:26
votes: 0


Probably a basic one... I tried a search and found no answer.

Anyway it seems IE6 handles the <p> tag differently to "better" browsers like Firefox - IE6 gives no line break after a </p> tag, whereas the others do.

This is making a bit of a mess of my layout when going from browser to browser.

What is a good universal workaround? Is it a case of not using "<p>text</p><p>more text<p>", but using plain "text<p>moretext<p>", without full tags?

(Also, does IE6 give less spacing above a new <p> tag as well? I think it does, but it could be another thing about my page).

Thanks

11:01 am on May 28, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Mar 9, 2003
posts:2097
votes: 6


Unless you style the <p> tag with a style sheet, IE6 should give you a line break after you close the paragraph.

Check to see if you have a valid doctype as the first line of your html document here:

[w3.org ]

11:09 am on May 28, 2004 (gmt 0)

New User

10+ Year Member

joined:Mar 29, 2004
posts:26
votes: 0


Everything adds up with a validation - it's HTML 4.01 Transitional

Here is the complete stylesheet...

html {
overflow-x:hidden;
overflow-y:auto;
}

body {
background-color: #ffffff;
margin: 5%;
}

.lcd {
font-family: monospace;
font-size: 16px;
font-weight: bold;
background-color: #bfe2f9;
border-style: ridge;
border-width: 8px;
border-color: #000000;
padding: 2px;
}

.lcd2 {
font-family: monospace;
font-size: 12px;
font-weight: bold;
background-color: #bfe2f9;
border-style: ridge;
border-width: 6px;
border-color: #000000;
padding: 1px;
}

a.lcdlink {
text-decoration: none;
color: #000000;
margin: 2px
}

.main {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
}

h1 {
font-size: 14px;
}

h2 {
font-size: 16px;
}

h3 {
font-size: 18px;
}

No style for p, although I do set the tables the page is built with as style="main"

Here is a bit of code that has no line break...

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="main">
<tr>
<td>
<hr width="100%">
<p align="center">Any questions? Email me at <a href="mailto:****@yyy.zzz">xxx@yyy.zzz</a></p>
</td>
</tr>
<tr>
<td align="center">
<a href="http://validator.w3.org/check/referer"><img border="0" src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01!" height="31" width="88"></a>
<a href="http://jigsaw.w3.org/css-validator/"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"></a>
</td>
</tr>
</table>

Any comments?

11:33 am on May 28, 2004 (gmt 0)

New User

joined:May 28, 2004
posts:23
votes: 0


try a authoring tool they are designed to take care of these problems.

<snip>

[edited by: korkus2000 at 6:13 pm (utc) on May 28, 2004]
[edit reason] No sigs please [/edit]

11:57 am on May 28, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 13, 2003
posts:590
votes: 0


What I've seen is that IE collapses paragraph margins that are at the tops and bottoms of table cells -- your first paragraph inside a cell will have no top margin, and your last paragraph inside a table cell will have no bottom margin.

Mozilla and the other gecko-based browsers display the top and bottom p margins regardless.

There's probably a way to code for this in css to make that consistent, and I'd sure like to know how.

12:12 pm on May 28, 2004 (gmt 0)

New User

10+ Year Member

joined:Mar 29, 2004
posts:26
votes: 0


Sonjay - that is EXACTLY what is happening. Thanks for putting your finger on it.

Anyone know a fix?

1:04 pm on May 28, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 17, 2001
posts:1262
votes: 0


Have you tried setting a style for paragraphs within tables in the "main" class?

.main th p, .main td p {margin:0} /* if you're trying to eliminate space*/
.main th, .main td {padding:1em 0} /* if you're trying to ensure at least one line of space at the top and bottom of the table cell */

You could also obviate the need for adding align='center' on your <p> tags by adding "text-align:center" to the style.

6:33 pm on May 28, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


haven't tested your code, but I've found previously that IE collapses default <p> margins, try putting an explicit margin in your stylesheet for the <p>

all browsers collapse margins under a set of rules, it's a feature, but there have been instances where I found that IE's default (when no explicit setting has been declared) collapse for no reason ;)

p {margin: 1em 0;}

{note: you might require the more specific

td p
or
p
may do it}

Suzy

8:05 am on June 2, 2004 (gmt 0)

New User

10+ Year Member

joined:Mar 29, 2004
posts:26
votes: 0


Thanks all for the answers. SuzyUK's code seems to have done the job. Thanks again.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members