Question about alignment in css (repost)

[Becky Lash]

Hi, all,

Thanks to all of you who made the suggestion to start with basic html in a
different thread ("CSS2 question" posted 11/22/04). That has made things
much simpler. Because I am constructing most pages from scratch, I decided
to try to learn transitional XHTML syntax that validates. So far, both my
first page and .css file validate at the W3C site.

I have three questions pertaining to the following URL:

http://www.smallbusinessproofreading.com/woodstone/index2.asp

The .CSS is at the following URL:

http://www.smallbusinessproofreading.com/woodstone/templates/woodstone2.css

CSS as plain text:

http://www.smallbusinessproofreading.com/woodstone/templates/woodstone2.txt

Questions:

1. When you pass the mouse cursor over the top menu buttons, the text does
not align on the buttons. What are the best
properties to add to my .css to make the text align? I do not want to use
<br /> tags, but I will do that if there is no other way.

Note: I am not crazy about this menu, but the owner insisted that I use
this. I much prefer text-driven menus with not so many graphics.

2. On the left side, the sliced images are not aligning correctly either.
What is the best way to fix this in the .css?

3. The alignment is slightly different in Firefox and Internet Explorer.
Does anyone have any tips on how to deal with these differences in .css? I
googled this and tried a few workarounds I found, but the workarounds did
not fix the difference in alignment. What am I doing wrong?

Note: The site is not finished, of course. The animated GIF was added
because the owner insisted after I pointed out the design issues to him.

I am posting the .css as well, after my closing name "Becky". Thank you
<<very>> much for any insights. I do appreciate the help so much and hope
one day to return the favor when I am better at .css.

Kind regards,

Becky

 

[Barbara de Zoete]

Because I am constructing most pages from scratch, I decided to try to
learn transitional XHTML syntax that validates.

1. Did you read/understand Lauri's post about xHTML?
2. Why transitional (if xHTML)? Strict for new pages is in a way better,
I think, because it requires discipline to keep a clean code for markup
and a lot of depricated stuff is not valid in strict.

So far, both my
first page and .css file validate at the W3C site.

I have three questions pertaining to the following URL:

http://www.smallbusinessproofreading.com/woodstone/index2.asp

The .CSS is at the following URL:

http://www.smallbusinessproofreading.com/woodstone/templates/woodstone2.css

CSS as plain text:

http://www.smallbusinessproofreading.com/woodstone/templates/woodstone2.txt

Much better Thank you.
I'm on a wireless connection and I pay for the amount of data transferred
(upload/download). That is the main reason (among other reasons) for my
dislike of unnecessary large posts.

<snipped what I'm not answering />

<site note>
You are referring frequently to the owner of the site, so I'm assuming you
are not the owner. Are you working on a payed project for this? If so, I'm
not sure I'm very willing to work hard for free advise. You could always
find a business associate with more knowledge than you have, but that of
course costs money.

3. The alignment is slightly different in Firefox and Internet Explorer.
Does anyone have any tips on how to deal with these differences in .css?
I googled this and tried a few workarounds I found, but the workarounds
did
not fix the difference in alignment. What am I doing wrong?

As you are not telling what workarounds you tried, I have no clue. First
of all, pixel perfect design for all browsers is impossible. If you create
a design that has an exceptable and even pleasant look and feel in all
graphical browsers and it works in all browsers, the non-graphical too,
you've achieved the best possible.
Having said that: If a difference between the site appearance in IE and
all others really bugs me, I use the child selector to set values for the
other browsers, like this:

<style example />
h1 { line-height:140%;padding:0;border:0;margin:0.8em 0 0 0 }
body>h1 { margin-top:0.6em }
< />

There is no reason this would not work well for the mainstream modern
graphical browsers.

 

[Becky Lash]

See "Becky" below.

1. Did you read/understand Lauri's post about xHTML?

Becky: Yes.

2. Why transitional (if xHTML)? Strict for new pages is in a way better,
I think, because it requires discipline to keep a clean code for markup
and a lot of depricated stuff is not valid in strict.

Becky: Because that is the advice of several books by Eric Meyer and Jeffrey
Zeldman that I have read recently. Their criteria seemed to best fit my
situation.

++snip+++>
<site note>
You are referring frequently to the owner of the site, so I'm assuming you
are not the owner. Are you working on a payed project for this? If so, I'm
not sure I'm very willing to work hard for free advise. You could always
find a business associate with more knowledge than you have, but that of
course costs money.
< />

Becky: I took this on as a learning project for css. I am working for almost
free basically---less than 5 USD per hour at this point. However, if the
custom of this group is to only trade advice on unpaid work, then I'll
respect that and move on. I thought, from posts I read, that information was
freely given or traded whether the work was paid or not.

As you are not telling what workarounds you tried, I have no clue. First
of all, pixel perfect design for all browsers is impossible. If you create
a design that has an exceptable and even pleasant look and feel in all
graphical browsers and it works in all browsers, the non-graphical too,
you've achieved the best possible.
Having said that: If a difference between the site appearance in IE and
all others really bugs me, I use the child selector to set values for the
other browsers, like this:

<style example />
h1 { line-height:140%;padding:0;border:0;margin:0.8em 0 0 0 }
body>h1 { margin-top:0.6em }
< />

There is no reason this would not work well for the mainstream modern
graphical browsers.

Becky: Thanks for the info. I do appreciate it.

 

[rf]

You are referring frequently to the owner of the site, so I'm assuming you
are not the owner. Are you working on a payed project for this? If so, I'm
not sure I'm very willing to work hard for free advise. You could always
find a business associate with more knowledge than you have, but that of
course costs money.

Bzzzzt. Give the girl a break. Half of the posts that come in here are from
developers who are getting paid to write something and have come across a
stumbling block. Crikey, even I asked a question a few years ago

If *you* don't want to waste your time on "paid" projects then don't, but
don't give the Bekcy the impression that she can not ask here for advice.
There are any number of people here quite willing to help a colleague in
distress. And we do it for free.

 

[Barbara de Zoete]

Bzzzzt. Give the girl a break. Half of the posts that come in here are
from developers who are getting paid to write something and have come
across a
stumbling block. Crikey, even I asked a question a few years ago

If *you* don't want to waste your time on "paid" projects then don't, but
don't give the Bekcy the impression that she can not ask here for advice.
There are any number of people here quite willing to help a colleague in
distress. And we do it for free.

I know. In this case though, I don't see someone coming across a stumbling
block. The project *is* the stumbling block. I see someone that is in over
her head. From where I stand, I see someone getting paid for a site well
done on the one hand, and on the other getting a free CSS education (and
in a newsgroup less appropriate than ciwas would be too).

Getting a puzzle solved with the cumulative knowledge of all the
participants in a newsgroup is one thing and can be quite a bit of fun
too. Doing someone elses job for free is an entirely different thing.
Somehow I got the feeling these threads are in the last category, but I
can't explain why exactly.

If I'm wrong, I'm sorry.

 

[rf]

Getting a puzzle solved with the cumulative knowledge of all the
participants in a newsgroup is one thing and can be quite a bit of fun
too. Doing someone elses job for free is an entirely different thing.
Somehow I got the feeling these threads are in the last category, but I
can't explain why exactly.

If I'm wrong, I'm sorry.

I have not closely audited the other threads. Perhaps you are correct, given
the swipe I had to deal the site in the previous thread

However, that swipe was with best intentions as well. I could have simply
said "deep end". I didn't. I stated what I would do, given the task at hand.
The client must be made to understand this as well.

Often I have taken an OPs page and rewritten it totally, simpler, cleaner, I
hope more "correctly". This has on occasion jump started said OP into
something better than simply trying to amend a cronically flawed page.

Of course sometimes it backfires. I recall some bloody Canadian who
threatened to sue me for stealing his graphics

I dunno. Who knows. Lets see what Becky does, eh?

 

[Barbara de Zoete]

I have not closely audited the other threads. Perhaps you are correct,
given the swipe I had to deal the site in the previous thread

However, that swipe was with best intentions as well. I could have simply
said "deep end". I didn't. I stated what I would do, given the task at
hand.
The client must be made to understand this as well.

Often I have taken an OPs page and rewritten it totally, simpler,
cleaner, I hope more "correctly". This has on occasion jump started said
OP into
something better than simply trying to amend a cronically flawed page.

Of course sometimes it backfires. I recall some bloody Canadian who
threatened to sue me for stealing his graphics

Whoops ROFL

I dunno. Who knows. Lets see what Becky does, eh?

Perhaps you are right. I had to learn this stuff myself somehow and if the
majority in newsgroups hadn't been a bit forgiving for all the newbe
mistakes I made, I might not have stayed around long enough to learn even
the basics of markup and styles.

Lets see what Becky does indeed.

 

[Becky Lash]

+++snip+++
I know. In this case though, I don't see someone coming across a stumbling
block. The project *is* the stumbling block. I see someone that is in over
her head. From where I stand, I see someone getting paid for a site well
done on the one hand, and on the other getting a free CSS education (and
in a newsgroup less appropriate than ciwas would be too).

Getting a puzzle solved with the cumulative knowledge of all the
participants in a newsgroup is one thing and can be quite a bit of fun
too. Doing someone elses job for free is an entirely different thing.
Somehow I got the feeling these threads are in the last category, but I
can't explain why exactly.

If I'm wrong, I'm sorry.

Becky: I am sorry if I created the impression that I was trying to take
advantage of this group. I asked my first question prematurely, before I had
completely recoded the first page of the site with CSS tags, which I knew I
needed to do, although many of you pointed that out. For my next posting,
after cleaning up the tags on the original page, I thought my three current
questions were specific enough to warrant some advice. The questions are
related to the original question in my original post. I came to this
newsgroup as a last resort only after I had done the following:

--I researched these questions for several weeks on the newsgroups and other
resources, some paid and others unpaid, and had seen that even experts are a
bit stumped by similar questions to mine.

--I also spent 200.00 USD in the last month on several good books to search
for an answer to these positioning issues.

--I also took these questions to several freelance folks with whom I have
worked in the past. They were stumped, as they are still using mostly tables
and spacer .gifs.

I did not mean to create the impression that I expected someone to do this
work for me---my professional background for the last 13 years has been in
technical documentation and online Help. I have some experience in XML and
this got me interested in CSS2, especially because LongHorn Help will be
based on XML and CSS, from what I understand. I am an independent contractor
like many of you.

 

[Wÿrm]

I thought, from posts I read, that information was
freely given or traded whether the work was paid or not.

That's true as far as I know.

Advices you get here are given willingly (usually) and free (good and bad
advices, that is) and it doesn't matter if you ask even when you are
learning/doing some paid thing, many people are doing some commercial
things. So feel free to ask as much as you feel like. It's as simple as that


<snip>

 

[rf]

--I researched these questions for several weeks on the newsgroups and other
resources, some paid and others unpaid, and had seen that even experts are a
bit stumped by similar questions to mine.

Hmmm. As am I.

--I also spent 200.00 USD in the last month on several good books to search
for an answer to these positioning issues.

Oh. I don't really think you will find your answer in a book. Not that books
are bad but they are usually over a year to production and therefore sort of
out of date when you buy them. Besides, the problems you have will not be
covered in a book. This is specific hands on material.

--I also took these questions to several freelance folks with whom I have
worked in the past. They were stumped, as they are still using mostly tables
and spacer .gifs.

Hmmm as well. They are old school? Here we are new school

I did not mean to create the impression that I expected someone to do this
work for me

You did not give me that impression. You have a problem. It needs to be
solved.

Where to go from here...

Your problem is IMHO in the design of the page you are trying to convert to
CSS. It is not a "CSS" design, it is a table design (did I say that
elsewhere?).

The existing page looks like some graphic artist drew it carefully on a
piece of A4 paper and said: Web Site. The best thing to work with using CSS
for layout is a rough sketch on the back of an envelope. With a really big
crayon.

The CSS centric design assumes nothing except the general look and feel of
the page. The graphic design (and table design) assumes you have pixel
perfect control over everything. In the web you don't.

If you really want to explore how to design web sites using CSS then you
will start with a completely new design. One with none of the hangovers from
previous technologies.

Just my opinion of course

 

[Becky Lash]

Your problem is IMHO in the design of the page you are trying to convert
to
CSS. It is not a "CSS" design, it is a table design (did I say that
elsewhere?).

The existing page looks like some graphic artist drew it carefully on a
piece of A4 paper and said: Web Site. The best thing to work with using
CSS
for layout is a rough sketch on the back of an envelope. With a really big
crayon.

Becky: Well, dern. The advice I got from a few posters was to turn this into
a CSS-driven layout, if I remember correctly. Now I wish I'd followed my
first instincts and gone with a combination of CSS and table layout. Thanks
for the advice.

 

[rf]

Becky Lash

Becky: Well, dern. The advice I got from a few posters was to turn this into
a CSS-driven layout, if I remember correctly. Now I wish I'd followed my
first instincts and gone with a combination of CSS and table layout. Thanks
for the advice.

My opinion is that all new designs, including RE-designs (as in new) of
existing sites should use modern technology. When simply re-*vamping* an
existing site a little bit one should stay with what the site was written
in. If the customer does not wish to pay for a total re-write, from the
ground up, then leave it as it is.

You don't put a jet engine on a tired biplane. You simply replace the tires
and add some oil.

More simply, if it is not broken then don't fix it

 

[Becky Lash]

The existing page looks like some graphic artist drew it carefully on a
piece of A4 paper and said: Web Site. The best thing to work with using
CSS
for layout is a rough sketch on the back of an envelope. With a really big
crayon.

Actually, you are right on the truth about this project. The customer's
partner drew out what she wanted on paper and they sent the scanned
documents to me. I am to reproduce exactly what is on the paper, down to the
colors, alignment, and everything. I tried to withdraw from this project
when I saw the type of navigation system that they wanted and the ripple
effect that navigation system has throughout the design of the page. The
graphic artist who created the menu system did not give me validated .html
either, so, naturally, I have a kind of mess to begin with, as many OP's
have already commented on. I had never dealt with such a graphic intensive
menu before and all the problems that it presents. The buttons must have
absolute positioning to work, which is a huge problem.

Well, after testing <div> floats in every combination in Firefox and IE, I
am back to using a combination of tables, <div> tags with absolute
positioning, and CSS. IE and Firefox seem to treat the float tag differently
in certain situations; at least this is confirmed with my searches on the
web for information. Although Firefox is the "correct" renderer, I need to
deal with the differences as so many folks have IE. Absolute positioning
seems to work well enough, I suppose; but I sure don't like absolute
positioning. Jakob Nielsen would have a field day with this web site on
usability issues. ugh.

Thanks for the viewpoints.

Becky