browser test this page please

[james438]

demo page

As near as I can tell the vertical border lines in the table line up pretty well and perfectly in my browser, but my client would like it to be closer. He says that it is not lining up in the Chrome browser. I could reproduce this unevenness when I looked at it on a friend's computer, but the discrepancy was very slight. I could also see this when I resized the page, but again only in certain browsers.

The discrepancy is between the vertical border lines on the first row, which lists the date, verse, etc. and the vertical border lines on the following rows, which list the data.

If this can not be remedied what should I mention to my client?

[traq]

Chrome 14 (on Linux(Ubuntu))

"Date" header width vs. data width:
...................................equal (98px)

"Title" header width vs. data: width
...................................233px vs. 235px

"Verse" header width vs. data width:
...................................186px vs. 187px

"Preacher" header width vs. data width:
...................................207px vs. 189px
(This data column has a scrollbar, which actually makes the right borders line up equally.)



To confirm your client's concern, yes, it's noticeable.

To answer your question:
I would normally explain that "different browsers display websites differently," etc. - but in this case, since you're trying to create the illusion of a single table with scrollable fields, I'd say they're right: fix it.
(Furthermore, I don't see any reason why you wouldn't be able to fix it.)

[james438]

I am using Chrome 17 on Windows and as far as I know so is my client. It appears evenly on my browser and one line is 1px off on monitors with lower resolutions. The pixel resolutions you listed are ones that I do not use, so I'm not quite sure where your numbers came from. When I used the ones you listed the divider lines were much further off.

I did find one line that was 1px off in chrome that I had not noticed before, so I corrected that, so the numbers may be slightly different.

How would you correct this with the linux browser or when artificially resizing the browser window display size (ctrl + "+")?

I'm open to any suggestions.

[traq]

numbers came from Chrome's Developer Tools (computed styles).

I hadn't even thought to try [ctrl][+/-], but now that I have, it oddly increases the discrepancy (the "Date" header and data column, for example -which were equal widths - are misaligned after zooming in twice: 140px vs. 142px. I don't think I'd worry about this, however. Matching widths in normal views is more than sufficient).

first step towards fixing this:

You're assigning specific widths to table cells, but tables more-or-less-ignore defined css dimensions (no matter how specific or !important they are) without table-layout: fixed;.

Honestly, I'm not sure where to go from there. (table-layout doesn't solve the problem on its own.) It's pretty hard to read through your markup, with all the embedded styles and scripts. The fact that you specified widths, inline, on every single <td> (widths which are different than those in your <style> blocks, and don't match the widths you defined for your header table) makes it very difficult to experiment.

Edit:

Chrome / Windows looks fine to me, too.

I am using Chrome 17 on Windows and as far as I know so is my client. It appears evenly on my browser and one line is 1px off on monitors with lower resolutions.
[...]

and of course, once your client is happy, your work is done.

[jscheuer1]

Looks good to me in IE 9 in its IE 9, 8, and 7 modes. Good in Chrome, Firefox and Opera too.

[james438]

Thanks for the feedback. I'll let you know what he says after I have talked to him about it some more and maybe see things on his computer to see what he is talking about. He can be very picky about how he wants things to look, but honestly it is rather refreshing too. Generally I just code or work on my website for my own enjoyment.

Yeah, I know what you mean about all the clutter scripts and style sheets. It's the equivalent of a messy room. I'll see if I can work through it and organize them better so that only the necessary scripts and style sheets are pulled for the respective codes if only to make it easier to read.

[jscheuer1]

One a humorous side note, I love that last entry in the sermons table:

2009-04-12	Our Salvation: A Living Hope	none yet

[james438]

I should get rid of that. Even though I am a conservative Christian I found it pretty funny too. I'll mention it to my pastor, I'm sure he'll find it funny too