Text not wrapping correctly in P Element

[redkelly]

Hello Folks:

As I continue to struggle with my rudimentary seat-of-the-pants approach to CSS, I've come across another problem I can't seem to fix:

I need to display a P element below a table on a number of pages. The only way I've found to get the right edge of both elements to line up correctly is to set the width of the P at 100%. See Below:

Without fixed width:



With width set at 100%:



As you can see, although the edges line up nicely with the 100% width, the text no longer conforms to the padding, and runs out the side.

Here is the code for both:

WITHOUT:

P {       background: #000000 url("http://souldetective.com/images/paper72.gif") repeat-y left top;
        font-family: "helvetica", verdana,arial,sans-serif;
	font-size: 1em;
        font-weight:bold;
	color:#000000;                
        padding: 3%;
        border-top: 4px solid black;
        border-right: none;
        border-bottom: none;
        border-left: none;

   }

WITH:

P {   width: 100%;
    background: #000000 url("http://souldetective.com/images/paper72.gif") repeat-y left top;
        font-family: "helvetica", verdana,arial,sans-serif;
	font-size: 1em;
        font-weight:bold;
	color:#000000;                
        padding: 3%;
        border-top: 4px solid black;
        border-right: none;
        border-bottom: none;
        border-left: none;

   }

I've read a lot of mumbo-jumbo about 'display-block' and 'display-inline-block' as well as ideas about nesting divs, 'word-wrap-word-break' etc. - but have so far had no luck implementing any of these. It's either lined up nice, with the text messed up, or displaying outside of the P's BG element... just a mess.

Any concrete ideas on how I can get the right edges of the table and P to play nice together, and still allow my padding to work in my P with the BG image?

Maybe it has to do with the table CSS itself??

<style type="text/css">
table.hovertable {
	font-family: verdana,arial,sans-serif;
	font-size: 11px;
	color:#333333;
	border-width: 1px;
	border-color: #999999;
	border-collapse: collapse;
}
table.hovertable th {
	background-color:#fffbd0;
	border-width: 2px;
	padding: 8px;
	border-style: solid;
	border-color: #6599FF;
}
table.hovertable tr {
	background-color:#f8f8ff;
}
table.hovertable td {
	border-width: 2px;
	padding: 2px;
	border-style: solid;
	border-color: #6599FF;
}
</style>

Any help would be greatly appreciated!!

Thanks!

-red

[hydrix]

can you link to the page? and i dont see much of a problem with the top image.
are you wanting the 1960 below the line ?

[redkelly]

Thanks for replying...

Here is a link to the page (it wasn't published earlier):

http://cosimocode.com/1960.html

I figured out a workaround, which seems to be working just fine... I added this to the html of the page:

<div align="left">

<table class="hovertable" width="99%">

Believe it or not, this seems to align the right edge of the table and the P element below it perfectly, without having to fix the width of the P.

Hey, I'll take it!

thanks again!

-red

[hydrix]

glad you worked it out.

[Arbitrator]

Originally Posted by redkelly

Believe it or not, this seems to align the right edge of the table and the P element below it perfectly, without having to fix the width of the P.

The table is still misaligned with the paragraph section in Firefox 19.

Your code has a lot of basic issues that might be part of the problem. I would consider fixing those (via a code validator) before you continue to experiment with your style sheets.

For example:

• You're missing several </a> tags.
• You've misnested tags (e.g., <i><b>text</i></b>).
• Your div#header is missing an end tag.
• Your have an unterminated img element start tag with multiple repeated attributes.
• You have a stray tag start character (<) in the document.
• You have an attribute value that ends with a double quotation mark ("), but that doesn't start with one.
• (et cetera)

And those are only basic syntax issues. You're also doing syntactically correct, but improper things like starting new paragraphs with line break (br) elements instead of paragraph (p) elements, using XML attributes in an HTML document, etc.

[redkelly]

Arbitator:

Thanks for taking the time to look at my page... I have run it through the validator (which I never knew existed), and am working on fixing the errors...

The page started out being built from the code of my original Blogger page, which I imagine is causing many of the issues... I always used the (p) element to delineate my paragraphs, until I noticed that in the "new" blogger post WYSIWYG editor, they used the double (br /) instead. I wasn't sure what was up with that, and thought that maybe the (p) tag was being phased out or something... Also, once i use the P to represent the entire larger element (with bg image), I wouldn't be able to use (p)'s to break the enclosed paragraphs, would I?

Thanks!

-red

[jerry62704]

No, you don't want to nest <p> tags. That would be a case for the <br/> tag.

[redkelly]

Thanks, Jerry...


OK - I was able to fix multiple errors, mostly caused by my own sloppy 'cut and paste' techniques. There is only one persistent one, that doesn't make sense. The Validator says:

Line 317, Column 41: an attribute value literal can occur in an attribute specification list only after a VI delimiter
<!-- Begin #content --> <div id="content">
✉
Have you forgotten the "equal" sign marking the separation between the attribute and its declared value? Typical syntax is attribute="value".

BUT, as you can see, there is indeed an "equal sign" - any ideas?

Here's the link to the page again:

http://cosimocode.com/1960.html

Thanks!

-red

[Arbitrator]

Originally Posted by redkelly

maybe the (p) tag was being phased out or something...

It's not.

Originally Posted by redkelly

Also, once i use the P to represent the entire larger element (with bg image), I wouldn't be able to use (p)'s to break the enclosed paragraphs, would I?

If you need to specify a background image behind multiple paragraphs, put all of the p elements inside a div element, and set the background image on the div element.

Originally Posted by redkelly

Line 317, Column 41: an attribute value literal can occur in an attribute specification list only after a VI delimiter
<!-- Begin #content --> <div id="content">
✉
Have you forgotten the "equal" sign marking the separation between the attribute and its declared value? Typical syntax is attribute="value".

I don't see this error. Make sure you're validating your document as an HTML5 document (HTML4 is dead). I manually switched the validator to HTML5 using the "Doctype" field in the validator which is reflected in the link I provided, but if you validate the document again, it'll be validated as HTML4 unless you also manually switch the setting.

To fix this, use the HTML5 doctype declaration; change <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> to <!doctype html> in your code. That will cause your document to be validated as HTML5 automatically from now on.

With that fixed, upon revalidating, you will see four errors related to attributes mentioning <!-- Begin #content --> <div id="content">. If you look at the code in context, you'll see this:

<img src="http://souldetective.com/images/coscodebnr2.jpg" alt="The Cosimo Code)>




<!-- Begin #content --> <div id="content">

You can then see that the error is caused by a missing double quotation mark (") after Code) (within the alt attribute). This is confusing the validator into thinking the following content is part of the alt attribute value, hence the seemingly unrelated error messages.

[redkelly]

You Da Man - Arbitator!

If I use the bg image for a DIV, do I need to specify width, etc.? Or will it expand with the content the way the P does? Also, would I apply the BG img in the CSS, or right in the document?

Thanks again!

-red

[redkelly]

I have made the changes and 'validated' 3 of the pages on my site so far, thankyou, but there is one issue that doesn't seem to make sense.

After I changed the 'doctype' declaration as suggested, Safari began adding extra space between the 'header' img and the tabbed navigation (see below):

Original HTML 4.01 Transitional:



with <!doctype html>:



the doctype declaration is the only change made to the 1963.html page so far, and so must be where the extra space is coming from.

Is there any way to fix this? I definitely like the look of the original, thinner space, and would like to figure out a way to keep it.

Any ideas?

thanks!

-red

[Obsidian]

I've inspected the code, it seems that the height of the header will need to be specified. Try adding the height the same as the image, below is what you can add to the #header in the CSS:

height: 175px;

If the height settings for the header are not specified the browsers will not view the div height correctly.

I hope this helps.

[redkelly]

Obsidian -

YOU ARE A FREAKIN' GENIUS!! That did it - who knew?

thanks again!

-red

[Arbitrator]

Originally Posted by redkelly

If I use the bg image for a DIV, do I need to specify width, etc.? Or will it expand with the content the way the P does?

Elements do not expand to accommodate background images. If you want to ensure that a certain portion of a background image will always be visible, you might try experimenting with the min-height and min-width properties.

Originally Posted by redkelly

Also, would I apply the BG img in the CSS, or right in the document?

You apply background images via CSS.

Originally Posted by redkelly

After I changed the 'doctype' declaration as suggested, Safari began adding extra space between the 'header' img and the tabbed navigation (see below):

I hope this isn't Safari for Windows, which was discontinued.

Originally Posted by redkelly

the doctype declaration is the only change made to the 1963.html page so far, and so must be where the extra space is coming from.

I see this issue in Firefox 19 too. It's probably because the HTML5 doctype declaration triggered your browser's standards mode which causes certain parts of CSS to be treated more strictly (and less forgiving).

In this case, your img element is being treated as text (i.e., display: inline, the default behavior). This results in descender space below it for letters like g, j, p, and y. (Do a Web search for "typography descender" to read about that if desired.) The fix is applying display: block to the img element to remove the descender space:

[src*="coscodebnr2.jpg"] { display: block; }

You could also use the following, less error-prone CSS selector if you add the missing div element end tag for the #header element:

#header img { display: block; }

1963.html still has many of the same errors that were in 1960.html per the W3C validator.

[Obsidian]

You're welcome. I'm glad this worked out for the header.