Question about alignment in css (repost)

Discussion in 'HTML' started by Becky Lash, Nov 23, 2004.

  1. Becky Lash

    Becky Lash Guest

    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
     
    Becky Lash, Nov 23, 2004
    #1
    1. Advertising

  2. On Tue, 23 Nov 2004 03:25:01 -0600, Becky Lash <>
    wrote:

    > 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.

    --
    Weblog | <http://home.wanadoo.nl/b.de.zoete/_private/weblog.html>
    Webontwerp | <http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html>
    Zweefvliegen | <http://home.wanadoo.nl/b.de.zoete/html/vliegen.html>
     
    Barbara de Zoete, Nov 23, 2004
    #2
    1. Advertising

  3. Becky Lash

    Becky Lash Guest

    See "Becky" below.
    "Barbara de Zoete" <> wrote in message
    news:eek:pshwv1u0tx5vgts@zoete_b...
    > On Tue, 23 Nov 2004 03:25:01 -0600, Becky Lash <>
    > wrote:
    >
    > 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.
    >> 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: Thanks for the info. I do appreciate it.

    > --
    > Weblog | <http://home.wanadoo.nl/b.de.zoete/_private/weblog.html>
    > Webontwerp | <http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html>
    > Zweefvliegen | <http://home.wanadoo.nl/b.de.zoete/html/vliegen.html>
     
    Becky Lash, Nov 23, 2004
    #3
  4. Becky Lash

    rf Guest

    Barbara de Zoete wrote:

    > 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.

    --
    Cheers
    Richard.
     
    rf, Nov 23, 2004
    #4
  5. On Tue, 23 Nov 2004 10:09:41 GMT, rf <rf@.invalid> wrote:

    > Barbara de Zoete wrote:
    >
    >> 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.
    >


    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.

    --
    Weblog | <http://home.wanadoo.nl/b.de.zoete/_private/weblog.html>
    Webontwerp | <http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html>
    Zweefvliegen | <http://home.wanadoo.nl/b.de.zoete/html/vliegen.html>
     
    Barbara de Zoete, Nov 23, 2004
    #5
  6. Becky Lash

    rf Guest

    Barbara de Zoete wrote:

    > 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?

    --
    Cheers
    Richard.
     
    rf, Nov 23, 2004
    #6
  7. On Tue, 23 Nov 2004 10:40:40 GMT, rf <rf@.invalid> wrote:

    > Barbara de Zoete wrote:
    >
    >> 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 :)
    >


    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.

    --
    Weblog | <http://home.wanadoo.nl/b.de.zoete/_private/weblog.html>
    Webontwerp | <http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html>
    Zweefvliegen | <http://home.wanadoo.nl/b.de.zoete/html/vliegen.html>
     
    Barbara de Zoete, Nov 23, 2004
    #7
  8. Becky Lash

    Becky Lash Guest

    "Barbara de Zoete" <> wrote in message
    news:eek:pshwx0eikx5vgts@zoete_b...
    > On Tue, 23 Nov 2004 10:09:41 GMT, rf <rf@.invalid> wrote:
    >
    >> Barbara de Zoete wrote:
    >>

    +++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.
     
    Becky Lash, Nov 23, 2004
    #8
  9. Becky Lash

    Wÿrm Guest

    "Becky Lash" <> wrote in message
    news:...

    <snip>

    > 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>
     
    Wÿrm, Nov 23, 2004
    #9
  10. Becky Lash

    rf Guest

    Becky Lash wrote:

    > --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 :)

    --
    Cheers
    Richard.
     
    rf, Nov 23, 2004
    #10
  11. Becky Lash

    Becky Lash Guest

    "rf" <rf@.invalid> wrote in message
    news:ShFod.45840$...
    > 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.


    > --
    > Cheers
    > Richard.
    >
    >
     
    Becky Lash, Nov 23, 2004
    #11
  12. Becky Lash

    rf Guest

    Becky Lash
    > "rf" <rf@.invalid> wrote in message
    > news:ShFod.45840$...
    > > 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?).
    > >


    > 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 :)

    --
    Cheers
    Richard.
     
    rf, Nov 23, 2004
    #12
  13. Becky Lash

    Becky Lash Guest

    "rf" <rf@.invalid> wrote in message
    news:ShFod.45840$...
    >
    > 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
     
    Becky Lash, Nov 24, 2004
    #13
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kelwin Delaunay

    img alignment in xhtml strict and css

    Kelwin Delaunay, Apr 17, 2004, in forum: HTML
    Replies:
    4
    Views:
    10,870
    Kelwin Delaunay
    Apr 17, 2004
  2. rfq
    Replies:
    3
    Views:
    555
  3. tshad

    Question on CSS alignment

    tshad, Jan 31, 2005, in forum: HTML
    Replies:
    22
    Views:
    928
    Beauregard T. Shagnasty
    Feb 1, 2005
  4. Xah Lee
    Replies:
    1
    Views:
    415
    Johannes Koch
    Jul 7, 2005
  5. 1995 Cobra
    Replies:
    5
    Views:
    494
    1995 Cobra
    Sep 9, 2006
Loading...

Share This Page