CSS layout question

[dacoyle]

See the top of this page's content (http://www.adamebbin.com/091505.htm) with this text:

Contact: Constituent Services Office
Office: 703-549-8253
E-mail: info@adamebbin.com

I would like Constituent, 703-, and info@ aligned evenly with the bolded words still left aligned. Anyone have any ideas how to do that with CSS? This site is tableless layout, though if there isn't an easy CSS way I could use a table as technically it could be considered a data table...

Going on a 24 hour or so trip. Will have my laptop with me, but little time to use it...

10 minutes later: never mind... I created to classes with padding-left and spanned the unbolded text in the 2nd two lines. Can a few people let me know how it looks on their systems?

Thanks,

[ktinkel]

See the top of this page's content (http://www.adamebbin.com/091505.htm) with this text:

Contact: Constituent Services Office
Office: 703-549-8253
E-mail: info@adamebbin.com

I would like Constituent, 703-, and info@ aligned evenly with the bolded words still left aligned. Anyone have any ideas how to do that with CSS? This site is tableless layout, though if there isn't an easy CSS way I could use a table as technically it could be considered a data table...
If you meant that the three unbolded items should look as if indented to the same point, the bottom two work but the Constitutent... line is further to the left (very close to Contact:).

Mac, Firefox 1.4 beta and Safari 2.0.1.

What about creating two divs, one for the three bold lines, the other for the three unbold lines?

Have a good trip.

[Daudio]

Dennis,

It looks fine to me on Mac WaMCom.

But I would like to see the bolded items to be right aligned.

I have always believed that to be a more attractive and readable layout. Reading is enhanced by the 'envelope' or shape of the overall, mixed case, text. And I think a symetrical set of right aligned labels and left aligned data text reads much easier.

Any thoughts on that from the graphics design gurus here ?

[ktinkel]

But I would like to see the bolded items to be right aligned.

I have always believed that to be a more attractive and readable layout. Reading is enhanced by the 'envelope' or shape of the overall, mixed case, text. And I think a symetrical set of right aligned labels and left aligned data text reads much easier.

Any thoughts on that from the graphics design gurus here ?I actually often do that in things like mastheads, with a long list of editors, contributors, and so on; or on a letterhead for an organization that lists its officers down the side.

But then the entire array then is typically centered in a narrow column, not floating on a larger page, where I think it might call distracting attention to itself.

In this case, though, it would simplify the CSS layout, and might be worth a try.

[dacoyle]

If you meant that the three unbolded items should look as if indented to the same point, the bottom two work but the Constitutent... line is further to the left (very close to Contact:).

Mac, Firefox 1.4 beta and Safari 2.0.1.

What about creating two divs, one for the three bold lines, the other for the three unbold lines?

Have a good trip.

Kathleen, I thought the bottom two were off a bit. There's just one space before constituent, so I decreased padding by 1 px below and I think it's aligned now.

[dacoyle]

Dennis,

It looks fine to me on Mac WaMCom.

But I would like to see the bolded items to be right aligned.

I have always believed that to be a more attractive and readable layout. Reading is enhanced by the 'envelope' or shape of the overall, mixed case, text. And I think a symetrical set of right aligned labels and left aligned data text reads much easier.

Any thoughts on that from the graphics design gurus here ?

Dave,

I thought of that, but share Kathleen's concern. Though if she thinks it's worth a try I may play with it tomorrow. No time today.

[Kelvyn]

Dennis, it looks fine to me, now.

PC, Firefox 1.5 Beta1, IE6 Sp1, Opera 8.0

[ktinkel]

Kathleen, I thought the bottom two were off a bit. There's just one space before constituent, so I decreased padding by 1 px below and I think it's aligned now.Sounds as if we are not seeing the same thing so I will attach an image of what I see in both browsers.

As it appears to me, the plain text in the first line is to the left of the lower two.

[ktinkel]

I thought of that, but share Kathleen's concern. Though if she thinks it's worth a try I may play with it tomorrow. No time today.I think it might work, especially with that block as far to the right as it is now.

Lots easier to code, and easier to read. Sounds like a win to me!

[dacoyle]

Kathleen,

Been trying to think how to do it... I may have a lot of these in the future so want something that's easy to apply.

Hotel has free wifi. Woo Hoo!

Dennis

[dacoyle]

That's odd... looks nothing like that in Windows...

[annc]

That's odd... looks nothing like that in Windows...Happens to me all the time, Dennis - pages that look fine in Mac Firefox look very odd in Windows Firefox, and vice versa. I can never just trust mine once they are right on the Mac - I always move them across to the Windows laptop and check them with all the browsers i have there (IE, Firefox, Mozilla, Netscape and Opera).

[ktinkel]

Been trying to think how to do it... I may have a lot of these in the future so want something that's easy to apply.Hmmm. I need to think about it. Conceptually I like the idea, but I have used it in print publications, and the web is not nearly so accommodating.

Hotel has free wifi. Woo Hoo!Good grief! Don’t you have something more pleasurable to do than worry about the fine points of the perfect web site? <g>

It will be there tomorrow! You obviously have an enormous sense of responsibilty! :-)

Let me think about this. I have been struggling with my own CSS problems and have a kind of dried-out brain (and perhaps too much pinot noir!).

[dacoyle]

Good grief! Don’t you have something more pleasurable to do than worry about the fine points of the perfect web site? <g>

It will be there tomorrow! You obviously have an enormous sense of responsibilty! :-)

Let me think about this. I have been struggling with my own CSS problems and have a kind of dried-out brain (and perhaps too much pinot noir!).

Kathleen,

The main reason I bought the laptop was so I could take it on trips. Both Dave and I get a high volume of e-mail and even going away for 24 hours, it's better to keep up than have to catch up.

I currently only have one other press release; I may play with a new approach on that one. My concern is I'll need to do six blocks, 2 per line. It's probably possible to do in 2 boxes, but then when read by a text viewer it would likely come out like this:

Contact
Phone
E-mail
Constituent Services Office
703-------
info@----

[dacoyle]

Happens to me all the time, Dennis - pages that look fine in Mac Firefox look very odd in Windows Firefox, and vice versa. I can never just trust mine once they are right on the Mac - I always move them across to the Windows laptop and check them with all the browsers i have there (IE, Firefox, Mozilla, Netscape and Opera).

Ann,

I don't have access to a Mac, so rely on the good folk here for that. I mostly test in IE and Firefox. Haven't put Opera on the laptop yet and for this level of design, I don't bother with Netscape 4.7 anymore. I do have Netscape 8 installed, but haven't looked yet...

Dennis

[annc]

I don't have access to a Mac, so rely on the good folk here for that. I mostly test in IE and Firefox. Haven't put Opera on the laptop yet and for this level of design, I don't bother with Netscape 4.7 anymore. I do have Netscape 8 installed, but haven't looked yet...As one who prefers the Mac environment for all production work, I've found it to be absolutely essential to have a Windows box to test my pages on. They're always readable in IE6, but often need some tweaking to make them look close enough to what I intended for real time. By and large, the Mac browsers play nicely - at least, Safari and Firefox do.

[dacoyle]

As one who prefers the Mac environment for all production work, I've found it to be absolutely essential to have a Windows box to test my pages on. They're always readable in IE6, but often need some tweaking to make them look close enough to what I intended for real time. By and large, the Mac browsers play nicely - at least, Safari and Firefox do.

That's why I'm so surprised you're not seeing the layout correctly on a Mac, when IE, Opera, and Firefox both show the same thing in Windows. It's not even advanced CSS; just some extra padding on the 2nd and 3rd lines. Maybe if I put padding on the first line, then increase the later lines?

[gary]

As it appears using Firefox 1.0.6 under Linux (1280x1024, 88dpi)

[ktinkel]

I currently only have one other press release; I may play with a new approach on that one. My concern is I'll need to do six blocks, 2 per line. It's probably possible to do in 2 boxes, but then when read by a text viewer it would likely come out like this:

Contact
Phone
E-mail
Constituent Services Office
703-------
info@----I see the difficulty. Maybe you can punt.

Are the labels actually necessary? You could head the group Constituent Services and then just list name, phone, and e-mail (all of which are obvious). Just a thought.

Better go get my coffee!

[dacoyle]

The Contact label is; it's a typical press release standard.

Just wish I had a clue why something so basic isn't working on Mac. I didn't have time to see if setting the padding on the first line makes a difference. Will try to get to that soon.

[dacoyle]

As it appears using Firefox 1.0.6 under Linux (1280x1024, 88dpi)

Same way it's displaying on Mac. <sigh>