Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Feb 2013
    Posts
    23
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Text not wrapping correctly in P Element

    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:
    Code:
    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:
    Code:
    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??

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

  • #2
    New Coder
    Join Date
    Sep 2011
    Posts
    17
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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 ?

  • Users who have thanked hydrix for this post:

    redkelly (03-06-2013)

  • #3
    New Coder
    Join Date
    Feb 2013
    Posts
    23
    Thanks
    15
    Thanked 0 Times in 0 Posts
    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

  • #4
    New Coder
    Join Date
    Sep 2011
    Posts
    17
    Thanks
    0
    Thanked 2 Times in 2 Posts
    glad you worked it out.

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by redkelly View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    redkelly (03-06-2013)

  • #6
    New Coder
    Join Date
    Feb 2013
    Posts
    23
    Thanks
    15
    Thanked 0 Times in 0 Posts
    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

  • #7
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    No, you don't want to nest <p> tags. That would be a case for the <br/> tag.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • Users who have thanked jerry62704 for this post:

    redkelly (03-06-2013)

  • #8
    New Coder
    Join Date
    Feb 2013
    Posts
    23
    Thanks
    15
    Thanked 0 Times in 0 Posts
    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

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by redkelly View Post
    maybe the (p) tag was being phased out or something...
    It's not.

    Quote Originally Posted by redkelly View Post
    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.

    Quote Originally Posted by redkelly View Post
    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:

    Code:
    <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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    redkelly (03-07-2013)

  • #10
    New Coder
    Join Date
    Feb 2013
    Posts
    23
    Thanks
    15
    Thanked 0 Times in 0 Posts
    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

  • #11
    New Coder
    Join Date
    Feb 2013
    Posts
    23
    Thanks
    15
    Thanked 0 Times in 0 Posts
    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

  • #12
    New Coder
    Join Date
    Feb 2013
    Posts
    37
    Thanks
    1
    Thanked 4 Times in 4 Posts
    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:

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

  • Users who have thanked Obsidian for this post:

    redkelly (03-07-2013)

  • #13
    New Coder
    Join Date
    Feb 2013
    Posts
    23
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Obsidian -

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

    thanks again!

    -red

  • #14
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by redkelly View Post
    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.

    Quote Originally Posted by redkelly View Post
    Also, would I apply the BG img in the CSS, or right in the document?
    You apply background images via CSS.

    Quote Originally Posted by redkelly View Post
    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.

    Quote Originally Posted by redkelly View Post
    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:

    Code:
    [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:

    Code:
    #header img { display: block; }
    1963.html still has many of the same errors that were in 1960.html per the W3C validator.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    redkelly (03-07-2013)

  • #15
    New Coder
    Join Date
    Feb 2013
    Posts
    37
    Thanks
    1
    Thanked 4 Times in 4 Posts
    You're welcome. I'm glad this worked out for the header.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •