<p> tag

@PetrolMonkeyApr 17.2007

Hi All,

I would like to improve my understanding of why my page has rendered in ie differently to what I expected. Can anyone assist?

~~[url]~~http://www.petrolmonkey.co.uk/wqs/?page=dufour[/url]

I have created a <div> within which an floated image sits with <p>text</p> below. The text has margins which seem to be added to the outside of the <div>.:mad:

I thought the <div> would act as a container within which the text would sit.

I am still struggling to appreciate block elements and would appreciate some guidence.

I have validated the page (It passed).

Cheers PM?

to post a comment

CSS

11 Comments(s) _↴

@jogolApr 17.2007 — #looks like the doubled float-margin bug. see this page for a solution.

@PetrolMonkeyauthorApr 17.2007 — #Thanks for your reply but I'm not sure I agree.

The <p>text</p> isnt floated and the floated image has no margins. I'll have a look at option tonight. Any other ideas??

@jogolApr 17.2007 — #add display: inline; to #welcomeaboard

@CentauriApr 17.2007 — #Why all the left floats ?? As far as I can see, the only floats required in the whole layout is the navigation <li>s - no others are needed. As IE is known to have [B]MANY[/B] problems with floats, the less used in a layout the better.

Cheers

Graeme

@PetrolMonkeyauthorApr 17.2007 — #I'll try removing some of the floats but when I was constructing the site without them the images didnt line up correctly. ?

@WebJoelApr 17.2007 — #You have quite a few uses of "px" in a an html attribute:

Should be, for instance, [U]width="700" [/U] not [U]width="700[B]px[/B][/U]" See Screenshot. ?

[upl-file uuid=56502edc-0eb3-45e0-b10e-49a5d8da64eb size=14kB]ScreenHunter_1.gif[/upl-file]

@PetrolMonkeyauthorApr 17.2007 — #Hi there,

I checked here http://www.w3schools.com/tags/tag_img.asp and it states pixels or %. The page validated so why would I not use px? ?

I've had another look at my code and I'm sure there is room to remove some of the floats.?

@CharlesApr 17.2007 — #I checked here http://www.w3schools.com/tags/tag_img.asp and it states pixels or %. The page validated so why would I not use px? ? [/QUOTE]That page from the W3 Schools is just a little misleading. The value can be in pixels but it doesn't take a "px" when it is. The rules of HTML are different from the rules of CSS.

Your page is valid but "non-conforming". "Validity" is a technical and somewhat artificial concept here applied. It simply means that the page conforms to the DTD. DTDs are, however, somewhat limited in their ability to constrain documents and so the specifications impose further constraints that carn't picked up by the validator.

XHTML is built out of XML, HTML out of SGML. Unlike SGML, in XML you can't use a DTD to specify that an element can't contain another one. To make that more clear, in HTML the DTDs say that A elements can contain all inline elements except A elements. The A element being inline you need the except part. But in XHTML the DTD doesn't have an "except" and so in XHTML it is perfectly valid for an A to contain an A but the specification says don't do that. A page that does so would be valid but non-conforming.

Now XHTML, being built out of XML, splits the idea of "valid" into two concepts, well-formedness and validity. Well formed means things like every element with both a opening and a closing tag, all attribute values quoted, elements properly nested. Validity is still checking against the DTD. And the three stack up. A conforming page is valid and well formed and a valid page is also well formed.

Now because if the DTDs limitations a new thing has been brought to life, XML schema.

@PetrolMonkeyauthorApr 17.2007 — #Hey Charles,

Thank you for your fantastically informative response.

Clearly you know your eggs so would you say (assuming you don't mind having a look) that my page has too many Unnecessary floats? And why is that margin protruding outside my <div>? ?

Any help is always very much appreciated.

PM

P.S. I did try removing some of the floats but the page started getting out of shape.?

@toicontienApr 17.2007 — #Your issue with the margins of the P tag appearing outside of the DIV has to do with Collapsing Margins. Vertical margins, like the ones above and below P tags collapse with other vertical margins. That is, if you stack two P tags, one above the other, and give them 10 pixel top and bottom margins, the gap between the two paragraphs is 10 pixels, not 20. And here's the other screwy thing with collapsing margins: They spill over the edges of block elements if the containing block elements do not have top or bottom padding or borders.

If you add at least 1 pixel of top and bottom padding, or a 1 pixel top and bottom border, the margins of the paragraph tags contained in the DIV will appear contained by the DIV.

BTW: I have LOADS of problems with floated elements too, but they are all fixable. In order to have columns, and have things appear beneath the columns reliably, you MUST use floats. Don't shy away from floats because people say they are frustrating to work with -- [I]and they are![/I] But absolute positioning was never meant to be the main method of laying out a page. And IE-Win can be just as frustrating to work with when using positioning as opposed to floats.

@PetrolMonkeyauthorApr 18.2007 — #Thank you very much for your response and reassurance that I haven't gone off in completely the wrong direction.

I've not used fixed positioning much and prefer to float elements; somewhere in a dark recess of my mind it feels like the right thing to do.

I only get to code when I get home (Note to self. Buy laptop) but managed to fix the problem by clearing the float below the image.

I'll probably tidy this up a little by not floating all images but only those that need it but last night I just want to fix this bug.

FF and IE7 worked fine just good old IE6 playing silly buggers. Bless!

Cheers all. PM?

Also in #CSS _↴

Changing z-index of overlapping layers Not sure what Im doing wrong. Can someone help re: css & positioning for resolutions Wrapper Background Problem

Success!

Help @PetrolMonkey spread the word by sharing this article on Twitter...

Tweet This

<p> tag

11 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

<p> tag

11 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #CSS _↴