Another pain in the butt CSS problem...

sgtmac66 · #1 (**permalink**) 07-08-2009, 12:34 AM

Aligning stuff is CSS, as I am finding out, is the biggest pain in the rear end...

I finally figured out how to align my navbar and a box within a column, but the same formula's do not seem to apply when it comes to text.

My problem now, is a paragraph within my container box. I justified the text, but cannot get the text on either the left or the right to move over from the left or right hand borders...I tried positioning, text align , margins and who knows what else...I am at my wits end....

I've got a feelin' as with he other things, that it is some stupid, simple little trick, but it escapes me tonight...I need Zzzzzzzz's ;(

MissANN · #2 (**permalink**) 07-08-2009, 04:26 AM

how's the text appearing?

James · #3 (**permalink**) 07-08-2009, 08:32 AM

Two questions:

1. Is the text really in the container? Usually, at least, you would have the container holding at least two or three divs for the columns on your page and any text would be in a paragraph or whatever inside one of the divs. In other words, it sounds unusual to have text directly in the container.

It is easy to apply css to the wrong tag. This is common, especially in a list set up for example.

2. Is this online or can you post it online with a link in your signature? It would be easier to check it out that way.

sgtmac66 · #4 (**permalink**) 07-08-2009, 12:33 PM

Quote:

Originally Posted by James

Two questions:

1. Is the text really in the container? Usually, at least, you would have the container holding at least two or three divs for the columns on your page and any text would be in a paragraph or whatever inside one of the divs. In other words, it sounds unusual to have text directly in the container.

It is easy to apply css to the wrong tag. This is common, especially in a list set up for example.

2. Is this online or can you post it online with a link in your signature? It would be easier to check it out that way.

I don't have hosting yet, but do have a Free host...I will attempt to post it up today....Maybe I am confused with terminology. I think the container is what holds the whole page...What I am talking about I guess is the body, that area in between the left column and the right column where all the content goes...

My text is slammed up against the border on the left and right columns at both sides. I justified the text, but can't get any padding(?) between the text and the border at both the left and right sides...

sgtmac66 · #5 (**permalink**) 07-08-2009, 01:41 PM

Quote:

Originally Posted by James

Two questions:

1. Is the text really in the container? Usually, at least, you would have the container holding at least two or three divs for the columns on your page and any text would be in a paragraph or whatever inside one of the divs. In other words, it sounds unusual to have text directly in the container.

It is easy to apply css to the wrong tag. This is common, especially in a list set up for example.

2. Is this online or can you post it online with a link in your signature? It would be easier to check it out that way.

James...just uploaded the layout to a free account...listed under the sig...Sorry, couldn't figure out how to get my images on yet, but you can get a good idea with the layout.

Xfactor · #6 (**permalink**) 07-08-2009, 03:56 PM

Not sure whats going on, but one way that will give you control is to change

the p { in your style sheet from a text-align: left, to a "float-left" and then add the desired padding.

Hopefully this will help you track your source, if not solve it.

EDIT: Well maybe not. Sorry!

James · #7 (**permalink**) 07-08-2009, 06:15 PM

Before fixing the text problem, here are two other quick issues to fix. These are easy but important.

You have a doctype, but it does not work the way you have it. This causes each browser to guess at your formatting and actually assumes some old style abuses that could even account for your differences with various browsers.

The reason it doesn't work is that doctypes are NOT html. That is why they come before the html tag. The doctype must be the very first item in your page. Not even a single space is allowed before it or the browser will assume you have started your html and will not read the doctype. You have inserted a comment first. You must remove it or move it down after the html tag (any html code must be inside the html tags).

Second, the html tag only supports the standard attributes xml:lang, dir and lang as far as I know. The following css is questionable and you do not have an id of html anyway, just html:

PHP Code:


			
#html,body {



background-color: white; /*Optional BG color when BG not viewed or loading*/

background-image: url(images/camobg.gif);  /*Sets BG image of entire page*/

background-attachment: fixed; /*Determines how a BG image should scroll*/

padding:5px; /*Specifies distance between one or more sides of an elements content area and it's border*/

}

In any case, applying the css to the html would not do anything you have here more than just applying it to the body. And, this shows an ID for the html tag which it does not have.

Drop the html part and for the first line just put:

body {

Now for the text positioning issue. This is easy IF you know it but easily frustrating if you do not. I am not going to try to explain everything (like why the text now stays just in the center, etc.) just what you really need to know.

The basic problem is that you have two side columns each 140 pixels wide but no instructions in the css for the center column not to invade that space. If you put a border around the div you will see that the tag is extending all the way to the outside border even though the text doesn't. As a result, when you assign a margin or padding less than 140 pixels nothing shows up on screen. Here is how to fix your problem.

Your center column content area you have set up is a div which you have given a class name of "p." You have reasonably given the two outside columns an id suggesting their use. I recommend revising this content area's name to a div with an id of "content" or something of the sort but I will proceed with a class of "p" because that is what you have and it will work.

In your css, as it is, you can add this code:

PHP Code:


			
.p {

margin: 0px 140px 0px 140px;

padding: 0px 20px 0px 20px;

}

The margin settings will bring the sides of the content area into the lines you have on the side columns and the padding will give you some space between the line and your center column text.

I have tried this on your code and it works. You can adjust the padding to suit your taste.

sgtmac66 · #8 (**permalink**) 07-08-2009, 09:00 PM

Quote:

Originally Posted by James

Before fixing the text problem, here are two other quick issues to fix. These are easy but important.

You have a doctype, but it does not work the way you have it. This causes each browser to guess at your formatting and actually assumes some old style abuses that could even account for your differences with various browsers.

The reason it doesn't work is that doctypes are NOT html. That is why they come before the html tag. The doctype must be the very first item in your page. Not even a single space is allowed before it or the browser will assume you have started your html and will not read the doctype. You have inserted a comment first. You must remove it or move it down after the html tag (any html code must be inside the html tags).

Second, the html tag only supports the standard attributes xml:lang, dir and lang as far as I know. The following css is questionable and you do not have an id of html anyway, just html:

PHP Code:


			
#html,body {



background-color: white; /*Optional BG color when BG not viewed or loading*/

background-image: url(images/camobg.gif);  /*Sets BG image of entire page*/

background-attachment: fixed; /*Determines how a BG image should scroll*/

padding:5px; /*Specifies distance between one or more sides of an elements content area and it's border*/

}

In any case, applying the css to the html would not do anything you have here more than just applying it to the body. And, this shows an ID for the html tag which it does not have.

Drop the html part and for the first line just put:

body {

Now for the text positioning issue. This is easy IF you know it but easily frustrating if you do not. I am not going to try to explain everything (like why the text now stays just in the center, etc.) just what you really need to know.

The basic problem is that you have two side columns each 140 pixels wide but no instructions in the css for the center column not to invade that space. If you put a border around the div you will see that the tag is extending all the way to the outside border even though the text doesn't. As a result, when you assign a margin or padding less than 140 pixels nothing shows up on screen. Here is how to fix your problem.

Your center column content area you have set up is a div which you have given a class name of "p." You have reasonably given the two outside columns an id suggesting their use. I recommend revising this content area's name to a div with an id of "content" or something of the sort but I will proceed with a class of "p" because that is what you have and it will work.

In your css, as it is, you can add this code:

PHP Code:


			
.p {

margin: 0px 140px 0px 140px;

padding: 0px 20px 0px 20px;

}

The margin settings will bring the sides of the content area into the lines you have on the side columns and the padding will give you some space between the line and your center column text.

I have tried this on your code and it works. You can adjust the padding to suit your taste.

1. I knew the DOCTYPE had to be at the very top of the page, but never thought about the comment tag above it....Another one of those lesser known things that can screw up ones best intent.

2. Yeah I got the html, body tag off of a template I purchased. The thought never crossed my mind that it it conflicted with xhtml.

3. Not sure I exactly understand the rest of it, but I will give all a go and let you know how it turns out...

Thanks much for the response, a I have spent a good two hours trying to fix this thing, lol!

sgtmac66 · #9 (**permalink**) 07-09-2009, 03:21 PM

James...

I deleted the html, from the body tag, but once I did this, I lose my background image and everything else on Firefox? I played around with the code for a half hour, but could not re-establish any of the background coding without the html, body tag.

Any ideas?

James · #10 (**permalink**) 07-09-2009, 07:19 PM

[Followup Editorial Note: I am leaving this post because it has some thoughts that are useful but I have narrowed this down a little so check my following post before wasting time doing anything without the followup information.]

Strange. I went back and created an "images" folder and tried a background file for the body with your file name and it worked fine for me either way, with or without the "#html," in front of body. The # makes "html" an id name rather than referring to the html in any case and you do not have an id by that name so is it possible you are not ending up with just

body {

at the beginning of the css for the body tag when you change it. Is there a chance you left the "#."

Another possibility just popped into mind and it may be significant. Most people put a div around the entire content of the body element and call that the container or something, then apply these attributes you have applied to the body. The reason is as the w3schools reference states it: All "presentation attributes" of the body element were deprecated in HTML 4.01, and are not supported in XHTML 1.0 Strict DTD. If you fixed your doctype by removing the comment you fixed some problems but it may have disabled most of what you have in the body css because now you are using xhtml where before you only thought you were!

Life gets tedious doesn't it!

I just found another violation of the rules and I do not know what affect it has either to cause problems or to leave things undone. You have some code, including some javascript, in between the head and body. Nothing can be there. To my knowledge everything (particularly your javascript) must be in the head or body except the doctype. Javascript in the head runs as you load the page; javascript in the body operates as called for in the body.

James · #11 (**permalink**) 07-10-2009, 10:52 AM

As noted in the previous post, xhtml does not allow any design attributes applied to the body tag. I note that you do (at least now if not before) have a container tag. Move the background image you have in the body tag to the container tag and it shows up. I have not checked (actually tried them as I have this one) each of the other attributes in the body tag but I think all of them need to be moved.

Next, insert the code I recommended before into your css:

.p {
margin: 0px 140px 0px 140px;
padding: 0px 20px 0px 20px;
}

This fixes the text location problem. The explanation is as described in an earlier post. When you tried to use margin or padding before you were using numbers less than 140 no doubt so saw no results. You have to have a margin of 140 px just to get to the beginning of the center column. Then the padding is inside the margins. This is because of the div structure (which is ok) including the side columns within the center column and floating left and right rather than as distinct columns.

Again, being careful to get it right in the html and the css, I would change the class="p" to an id="maincolumn" or something like that. You might want to just insert the code above at first to see how it works. It does.

sgtmac66 · #12 (**permalink**) 07-10-2009, 02:46 PM

James...

Yeah, I went back and changed a few items as you described before without any luck. I have the same thought as you , that I either forgot something or put it in the wrong place...

At any rate, I really appreciate your time on this thing..

.

Once I deleted the html on the body tag, it through everything out of whack. But I am going back one item at a time, checking and previewing, checking and previewing to see how it all works.

I'll repost an update, when I get something close to normal, lol!

Thanks again, bud!!

James · #13 (**permalink**) 07-10-2009, 05:38 PM

There are a number of small things to fix, but if you do the two things I mentioned in the last post, move the image to the container in the css and add that piece of code, you will fix the two main issues.

I downloaded you code as it is now and did those two things to see if it works. It does.

sgtmac66 · #14 (**permalink**) 07-11-2009, 07:16 PM

James...

I erased all of my coding in Styles and started afresh...I also redid my xhtml to make sure all the divs and classes are arranged correctly. I can't figure it out, but without the html, body, I cannot get the background image to show...

I am still in the process of trying some of your other suggestions and will keep you up to speed. Hopefully some of this stuff can help someone else out...

LEGEND · #15 (**permalink**) 07-16-2009, 11:17 AM

To get the backgound image of the page:

body {background: #FFF url('images/bodybg.png') repeat-x fixed;}

You may also wanna customise your hyperlinks:

a: {color:#333 ;text-decoration:underline }
a:hover {color:#CCC ;text-decoration:none }

Change the stuff in RED to suit your needs

WB Sponsors