PDA

View Full Version : (yet another) alignment issue


RainForest
04-08-2013, 11:49 PM
I'm having an issue recently where some of the columns in virtually all of the tables on my website have the data aligned right instead of left. Example page here (http://cityofdepoebay.org/pages/archives/indexBudget.html).

I examined my main.css file but didn't see anything there that would cause this, so I started correcting each individual page to correct the issue; but then I decided that the better idea is to find the problem... Except I haven't been able to.

Can anyone identify what's causing my table data to be misaligned?

edbr
04-09-2013, 02:17 AM
add align center to

td {
padding: 10px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #142f0f;
vertical-align: middle;
}

RainForest
04-09-2013, 04:49 PM
edbr,

I added align: center; to main.css and uploaded it. Didn't notice any change, so I went back and looked at the code for the table itself. The main rules for the table are identified in main.css as .archive3ColTable, with one additional rule identified on this page only.

When I look at the code for the table, I notice that each cell in the second two columns includes this code: <td align="center">, while the first column only has <td>. Since I want the first column to align left, I changed the first row to <td align="left"> which works for that row. But I want the first column in all rows to align left, hopefully without having to tell each row.

gentleone
04-09-2013, 10:45 PM
If you want to align text in a table or actually in any other HTML element you use CSS.

td { text-align: left } /* or right, center or justify... oh no forget the latter :) */

the reason why you don't see anything happening to the first column is because you have also this in your CSS

#article { text-align: right }

That one is overriding your CSS of the first td.

So if I'm right you want to have the content of the first column left aligned and the second and the third aligned in the center?
First you delete all the align attributes in your table, td's, etc... like I said we use CSS to align things.
You delete also the text-align: right in your #article in your css, cause I don't think you want all the content in #article aligned to the right.
If you've cleaned up things you can do something like this in your css to achieve what you want:

#article table td { text-align: center }
#article table td:first-child { text-align: left }

RainForest
04-09-2013, 11:13 PM
Ah, gentleone! I can't believe I didn't find that! And how on earth did it get there in the first place? I must've been distracted that day, or perhaps I only intended it for one page. It shall remain a mystery...

td:first-child is a new one for me. Let me see if I understand the concept correctly:

If I wanted a three-column table with the center column right aligned and the outer two columns centered, would it be like this?

#article table td { text-align: center }
#article table td {second-child { text-align: right }

gentleone
04-10-2013, 12:16 AM
No, second child doesn't exist. :first-child is one of the many (https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Selectors#List_of_pseudo-classes) pseudo classes selectors we have these days, but :first-child was one of the first we had in CSS. You can use them to hook styles (CSS) on HTML elements without adding classes or ID's to an element.
So you keep your HTML clean from classes and ID's and it's very handy if you have to deal with HTML that has been spit out a CMS and you don't have easy access tot the HTML/PHP to add classes or ID's for your CSS.

So what I did with my code was giving every td a text-align: center and then override that text-align: center on the first td with td:first-child ( text-align: left } but I guess you understood that.

So what you want now, you need something like this:

#article table td { text-align: center }
#article table td:nth-child(2) { text-align: right }

Okay... :nth-child is one of the new CSS3 pseudo class selector which doesn't work in IE8 and below, but there is a javascript polyfill called selectivizr which make them work in old IE.

http://selectivizr.com/



...

RainForest
04-10-2013, 12:22 AM
Hmm. OK. Well, I don't need to do that. I just wondered if that would be the way to do it. I'll get to work on cleaning up my code. Thanks for your help. You, too, edbr!

RainForest
04-13-2013, 12:37 AM
I've decided that the real mystery is why the tables aligned the way I wanted in the first place (for about 18 months!)! I've been over the code again & again. I re-arranged it so it's easier for me to read. I never did find anything that should have caused the issue. Bonus to this exercise was a few nice tweaks and code that's just a bit cleaner.

Anyway, how I resolved the issue was to go to each table that was giving me a problem, and mod the 1st column entry in every single line to make it a left-aligned div. Labor intensive, but it works.

Thanks for the assistance and suggestions.

gentleone
04-13-2013, 11:45 AM
RainForest, why did you add these <div align="left"> to the first td's? A div there is redundant and align attributes are deprecated already for many years, because we should use CSS for this. You make it for yourself also very difficult once you decide to have the content of the first column also aligned centered. Then you have to go through the HTML and change it one by one if a find/replace is not possible.

The first-child example I gave you was all you need for the table in the example page of you.

RainForest
04-15-2013, 04:46 PM
gentleone, I did it the way I did it, time-consuming tho it was and will be when the times comes to undo it, because that was the only thing I could get to work, and I needed those pages to display correctly NOW. I do want to get it right, and will spend some time with your suggestion:
td { text-align: left }which I wasn't able to get to behave the way I needed. If you tell the td element to align left, they ALL align left, correct? This brings up a question. When I "fixed" the tables on Friday, the tables with four columns (here (http://www.cityofdepoebay.org/pages/archives/indexCouncil.html) and here (http://www.cityofdepoebay.org/pages/archives/indexCouncil2002-2010.html)) needed a smaller text size for the left column. If I could do this, why couldn't I get it to align left???. The left align function was working for well over a year and suddenly broke - likely some minor tweak I made, but I'm missing what caused the break... I haven't given up, tho.

I've worked hard to keep the code on my site as clean as I can, and I'll keep working to get this cleaned up as soon as I can figure out how. If you have any other input or suggestions on why I couldn't get your code to work for me, I'm open to trying.

gentleone
04-15-2013, 09:39 PM
You probably override the text-align property with another one that you've set in your CSS... just like what happend with the 'text-align: right' on #article. Or you will need to be more specific, so that it has a stronger CSS specificity then another one; http://www.htmldog.com/guides/css/intermediate/specificity/

You can debug things much easier with the browser developer tools. Just select (in the browser) the part that's bugging you and do a right mouse click and select 'inspect element' in the context menu. You will get then the 'real' HTML (the DOM) and all the CSS that is applied to that bugging element. That's how I found the conflicting 'text-align: right' on #article within 20 seconds or so.

RainForest
04-15-2013, 10:41 PM
The link to specificity information on HTML Dog is really helpful, gentleone, thank you! That helps me understand what kinds of code override other kinds of code.

I'm afraid I have a hard time with the web dev tools such as firebug etc. Maybe I'm too old for them. Anyway, that's why I look at the code manually to find errors.

RainForest
04-16-2013, 12:50 AM
I got it! I got it! I got it! All I had to do is download a cloud version of each page before I changed it on Friday. Then, I created a new .columnLeftAlign class, and I changed the table ID to the new name instead of the class it was assigned, and then I assign the new class to the column! Voila! It's lovely!!! Won't have time to finish all pages today, but I'll get to them first thing tomorrow. Here's the two I've done so far (nice & neat!): here (http://www.cityofdepoebay.org/pages/archives/indexCouncil.html) and here (http://www.cityofdepoebay.org/pages/archives/indexCouncil2002-2010.html) (:-D) Thanks for your help and patience. :-\

gentleone
04-16-2013, 01:13 PM
Good that you keep on learning... it's the only way to keep up with things in regards to developing for the web.

If you don't have to support IE6 then you could get rid of that class 'columnLeftAlign' on the first td and use the :first-child selector instead to target that td. But you also should get rid of the align="center" attributes on the other td's, cause you should set that also with CSS.

So first you set a 'text-align: center' on all the td's and right after that you'll override with :first-child the 'text-align: center' with 'text-align: left' on your first column.

#table4col td { text-align: center }
#table4col td:first-child { text-align: left }

d a v e
04-16-2013, 07:58 PM
btw your background image is huge at around 1mb - try this http://pp.kpnet.fi/prescott/stuff/bgOceanWaves_tr.jpg

and your logo should be a png (jpegs for photos and complex gradients)

e.g. http://pp.kpnet.fi/prescott/stuff/headerLogo.png

RainForest
04-16-2013, 08:45 PM
@gentleone, thanks for the support. I'll work on making that change when I have an opportunity to spend a little time sorting it out (couldn't get it to go on first try).

@d a v e: Wow, big change on the background size! Did you just reduce the res? I didn't know that about png files; I've always stayed with jpg because they're so universal. Thanks for the tip.

RainForest
04-16-2013, 08:57 PM
One last question - what is the advantage to using png over jpg?

d a v e
04-17-2013, 05:15 AM
reducing the res only matters for print - on the web 1 pixel i 1pixel ;)

i simply used more agressive compression (i.e. saved it at a lower quality) and used a small amount of smoothing (gentlre blur) because your background picture is, well, in the background.

jepg works by simply removing some information from an image - and i photograhps it's hard to notice until you really throw away too much information (i.e. over-compress it).

png works like gif: when it encounters a row of the same colour pixels it says hey, we can remember this by row 1, 18 white pixels - rather than 1 white pixel, 1 white pixel, 1 white pixel...

use jpegs (with enough compression) on photos, and pngs (8 bit, same as gifs) for pretty much everything else.
gradients can be tricky for png and sometimes you may have to use jpeg or png-24

using jpegs for things like logos means you have a greater filesize (around 40kb compared to 5kb in your case) and also text/shapes aren't as crisp, and often you'll get colour changes or blocks of different coloured pixels

gentleone
04-17-2013, 01:22 PM
@gentleone, thanks for the support. I'll work on making that change when I have an opportunity to spend a little time sorting it out (couldn't get it to go on first try).
Your welcome and just try to figure it out, cause it will save you a lot of typing :)

RainForest
04-17-2013, 11:57 PM
d a v e, you just opened up a whole new world for me! I'd been looking & looking at my original pic & your modification, & I couldn't find what you'd done. I never thought to look at compression (duh). I've got some work ahead of me to compress and convert images on the site. Thank you for the detailed explanation!