Another question if someone doesn't mind answering this for me

Discussion in 'HTML' started by Kate, Feb 15, 2005.

  1. Kate

    Kate Guest

    I have a couple of questions if someone could shed some glorious light on
    them for me I would be very grateful.

    http://myweb.tiscali.co.uk/wwsfamilies/

    http://myweb.tiscali.co.uk/wwsfamilies/main2.css

    I have uploaded to my dump site above a page that I would like to use as the
    basis for my layout on another site.

    First question is that on the menu div I have height:100% set, but this
    only shows in IE and Opera, Netscape and Firefox don't seem to support this.
    I would preferably like to have the blue menu bar run the full length of the
    page where there is page content past the immediate frame of view.

    The second question is I have a horizontal scroll bar in again Netscape and
    Firefox, but not in IE and Opera, any idea on how to get rid of it? I'm
    sure I've missed something in the css, but for the life of me I can see the
    tree for the wood. :-(

    Many thanks in advance,
    Kate
     
    Kate, Feb 15, 2005
    #1
    1. Advertising

  2. Please start using more appropriate subject lines. 'Another question'
    doesn't mean a thing. 'Two column layout' and 'Scrollbar just in
    Gecko-based browser' tell the world what your post is about.

    On Tue, 15 Feb 2005 14:48:31 -0000, Kate <> wrote:

    > I have a couple of questions if someone could shed some glorious light on
    > them for me I would be very grateful.
    >
    > http://myweb.tiscali.co.uk/wwsfamilies/
    >
    > http://myweb.tiscali.co.uk/wwsfamilies/main2.css
    >
    > I have uploaded to my dump site above a page that I would like to use as
    > the
    > basis for my layout on another site.
    >
    > First question is that on the menu div I have height:100% set, but this
    > only shows in IE and Opera, Netscape and Firefox don't seem to support
    > this.
    > I would preferably like to have the blue menu bar run the full length of
    > the page where there is page content past the immediate frame of view.
    >


    Ofcourse you do. So do many others. This question gets asked about fifty
    times a year. So you wouldn't have to google any further back than
    probably a week for an answer.
    <http://groups.google.com/groups?q=two+column+layout+css+OR+tableless>

    > The second question is I have a horizontal scroll bar in again Netscape
    > and Firefox, but not in IE and Opera, any idea on how to get rid of it?
    > I'm
    > sure I've missed something in the css, but for the life of me I can see
    > the tree for the wood. :-(
    >


    This to is a very comon problem and question. Again, go to google for an
    answer
    <http://groups.google.com/groups?hl=nl&lr=&q=horizontal+scrollbar+firefox>

    Please try to remember that this is not a helpdesk. Try put some effort in
    finding an anwer yourself.

    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | 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, Feb 15, 2005
    #2
    1. Advertising

  3. Kate

    Uncle Pirate Guest

    Kate wrote:

    > I have a couple of questions if someone could shed some glorious light on
    > them for me I would be very grateful.
    >
    > http://myweb.tiscali.co.uk/wwsfamilies/
    >
    > http://myweb.tiscali.co.uk/wwsfamilies/main2.css
    >
    > I have uploaded to my dump site above a page that I would like to use as the
    > basis for my layout on another site.
    >
    > First question is that on the menu div I have height:100% set, but this
    > only shows in IE and Opera, Netscape and Firefox don't seem to support this.
    > I would preferably like to have the blue menu bar run the full length of the
    > page where there is page content past the immediate frame of view.


    You might try max-height and min-height to see if they'll give you what
    you want. I've pretty much given up on using height as it never seems
    to work the way I'd like.

    >
    > The second question is I have a horizontal scroll bar in again Netscape and
    > Firefox, but not in IE and Opera, any idea on how to get rid of it? I'm
    > sure I've missed something in the css, but for the life of me I can see the
    > tree for the wood. :-(


    Try setting your width to just under 100% or don't set width at all.
    100% width + 1pt border + 1pt border = >100%, thus your horizontal
    scroll bar. I doubt pt is what you want there, maybe px or 98%+1%+1% so
    you can add it up?

    --
    Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
    Webmaster/Computer Center Manager, NMSU at Alamogordo
    Coordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB
    '94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg
    A zest for living must include a willingness to die. - R.A. Heinlein
     
    Uncle Pirate, Feb 15, 2005
    #3
  4. Kate

    Kate Guest

    "Uncle Pirate" <> wrote in message
    news:42122fb4$...
    > Kate wrote:


    > > First question is that on the menu div I have height:100% set, but this
    > > only shows in IE and Opera, Netscape and Firefox don't seem to support

    this.
    > > I would preferably like to have the blue menu bar run the full length of

    the
    > > page where there is page content past the immediate frame of view.

    >
    > You might try max-height and min-height to see if they'll give you what
    > you want. I've pretty much given up on using height as it never seems
    > to work the way I'd like.
    >
    > >
    > > The second question is I have a horizontal scroll bar in again Netscape

    and
    > > Firefox, but not in IE and Opera, any idea on how to get rid of it? I'm
    > > sure I've missed something in the css, but for the life of me I can see

    the
    > > tree for the wood. :-(

    >
    > Try setting your width to just under 100% or don't set width at all.
    > 100% width + 1pt border + 1pt border = >100%, thus your horizontal
    > scroll bar. I doubt pt is what you want there, maybe px or 98%+1%+1% so
    > you can add it up?


    Many thanks Uncle Pirate, I'll give it a try. I have spent the last 24hrs
    or so removing all padding, borders etc, just leaving three div of menu
    (left column) content (middle) side column (right) set to 15%, 70%, 15% but
    I still seem to have this horizontal scroll in the fore mentioned browsers.

    And I have searched through google and other sites for answers, and have
    done much reading to the point of pulling my hair out. In a two column
    layout with div there doesn't seem to be any problem, everything works fine.
    It's just when I use the three column layout. I thought it may be my css or
    html that was causing the prob, but when I checked both with W3C they passed
    fine. I do take your point though Barbara about the Subject title, my
    apologise. You are right, it would be more helpful if I had used something
    relating to my problem.

    Have a good evening,
    Kate
     
    Kate, Feb 15, 2005
    #4
  5. Kate

    rf Guest

    "Kate" <> wrote

    > First question is that on the menu div I have height:100% set, but this
    > only shows in IE and Opera, Netscape and Firefox don't seem to support

    this.

    The lack of a URL in your doctype is putting the former browsers into quirks
    mode, where they incorrectly use your height as a percentage of the
    viewport.

    Supply a correct doctype (look at http://www.W3C.org for one) and all
    browsers will treat height as a percentage of the containing box. Since that
    menu div is floated it effectively has no containing box so the height is
    not applicable and is ignored.

    > I would preferably like to have the blue menu bar run the full length of

    the
    > page where there is page content past the immediate frame of view.


    This is not going to happen. There are various ways to simulate this, such
    as using background colours.
    <tinkers/>
    http://users.bigpond.net.au/rf/menu.html

    I have purposely turned on borders for all elements so you can see where
    they go. You would of course turn them off in production.

    Be sure to change your font size so you can see the "navbar" changing in
    width.

    > The second question is I have a horizontal scroll bar in again Netscape

    and
    > Firefox, but not in IE and Opera,


    It's the header thats causing the problem. Look up width in the CSS
    reccomendations:
    http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-width

    You have specified 100%, that is 100% of the headers containing box (which
    is effectively the viewport). The 100% is that of the content. That is, the
    bits inside the borders. Then you have added a border which makes the div
    wider than the viewport by two pixels.

    Once again you are running IE in quirks mode where is uses it's Very Broken
    box model (as against the just Normally Broken one), which includes the size
    of the borders in the width calculation, the borders are (incorrectly)
    inside the width.

    If you do not specify any width at all for that div then it will naturally
    expand to fill the viewport. The browser knows how to handle this.

    This is also why (in quirks mode) you have a permanent vertical scroll bar.
    The height of your page is 100% plus the height of that header. This is
    always larger than the viewport. It makes me want to scroll down there to
    see what you are concealing under the fold :)

    You have a few more issues.

    Do not use the transitional DTD unless you have a Very Good Reason for doing
    so. Use the strict one. This will prevent you from making a mistake and
    using deprecated HTML.

    Do not specify font size in pixels. This prevents IE users from changing the
    font size to their liking, unless they use the accessibility options to
    ignore your fonts entirely.

    Don't style a div to be a header. Use a <h1> element. It is suspected that
    search engines pay more attention to headings than other text on the page.

    Don't position things absolutely (the top menu). When I change my font size
    the rest of the graphics and sometimes the text overlaps that absolutely
    positioned stuff. Simply put the menu inside the content div and let it flow
    normally. At the moment the position of those menu items also depends on the
    viewport width. A wide viewport causes the menu "bar" to seperate and look
    odd. A narrow viewport causes the menu items ot overlap and look unreadable.

    I would not float: left the centre column. I would specify left and right
    margins as big as the left and right columns. That way you can use up all
    the canvas instead of having an inch or so of vacant space at the rigth of
    that middle column.

    You have not specified a with for the left column. This is in fact an error.
    The recommendations state that floated elements should have a width (unless
    there is an intrinsic width). The way it is you are defaulting to the width
    of the content, which you don't know.

    When you do specify a width make it in ems. That way the width of that
    column adjusts to the font size, not some arbitrary percentage of the
    viewport. Same for the right column. Specify width in ems. In addition this
    allows you to know exactly where those columns end and allows you to specify
    a correct margin for the centre column.

    Don't specify padding etc in points. Points are for print media. Use pixels
    where you can be sure you actually do have for example 10 pixels. 10 points
    results in some variable number of pixels depending on the DPI setting in
    the operating system (hint this is different for a Mac (76 IIRC) than for
    Windows (96)).

    Don't specify padding in %. Use ems. Padding really relates to the size of
    the font, not the width or height of the viewport.

    Don't justify text. This is OK on paper but on a screen becomes hard to
    read. There are simply not enough pixels to do it properly.

    Lastly, simplify your CSS. You don't need to specify default things (float:
    none;). Use the shorcuts. border-top: solid 1px black; is easier to read and
    easier to maintain than all those border properties you are using. Padding:
    1em; rather than padding-left: ...

    Remember KISS. If you don't have a Really Good Reason for something being
    there then remove it.

    HTH

    --
    Cheers
    Richard.
     
    rf, Feb 16, 2005
    #5
  6. Kate

    Kate Guest

    "rf" <rf@.invalid> wrote in message
    news:L2wQd.162658$...
    > "Kate" <> wrote
    >
    > > First question is that on the menu div I have height:100% set, but this
    > > only shows in IE and Opera, Netscape and Firefox don't seem to support

    > this.
    >
    > The lack of a URL in your doctype is putting the former browsers into

    quirks
    > mode, where they incorrectly use your height as a percentage of the
    > viewport.
    >
    > Supply a correct doctype (look at http://www.W3C.org for one) and all
    > browsers will treat height as a percentage of the containing box. Since

    that
    > menu div is floated it effectively has no containing box so the height is
    > not applicable and is ignored.
    >
    > > I would preferably like to have the blue menu bar run the full length of

    > the
    > > page where there is page content past the immediate frame of view.

    >
    > This is not going to happen. There are various ways to simulate this, such
    > as using background colours.
    > <tinkers/>
    > http://users.bigpond.net.au/rf/menu.html
    >
    > I have purposely turned on borders for all elements so you can see where
    > they go. You would of course turn them off in production.
    >
    > Be sure to change your font size so you can see the "navbar" changing in
    > width.
    >
    > > The second question is I have a horizontal scroll bar in again Netscape

    > and
    > > Firefox, but not in IE and Opera,

    >
    > It's the header thats causing the problem. Look up width in the CSS
    > reccomendations:
    > http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-width
    >
    > You have specified 100%, that is 100% of the headers containing box (which
    > is effectively the viewport). The 100% is that of the content. That is,

    the
    > bits inside the borders. Then you have added a border which makes the div
    > wider than the viewport by two pixels.
    >
    > Once again you are running IE in quirks mode where is uses it's Very

    Broken
    > box model (as against the just Normally Broken one), which includes the

    size
    > of the borders in the width calculation, the borders are (incorrectly)
    > inside the width.
    >
    > If you do not specify any width at all for that div then it will naturally
    > expand to fill the viewport. The browser knows how to handle this.
    >
    > This is also why (in quirks mode) you have a permanent vertical scroll

    bar.
    > The height of your page is 100% plus the height of that header. This is
    > always larger than the viewport. It makes me want to scroll down there to
    > see what you are concealing under the fold :)
    >
    > You have a few more issues.
    >
    > Do not use the transitional DTD unless you have a Very Good Reason for

    doing
    > so. Use the strict one. This will prevent you from making a mistake and
    > using deprecated HTML.
    >
    > Do not specify font size in pixels. This prevents IE users from changing

    the
    > font size to their liking, unless they use the accessibility options to
    > ignore your fonts entirely.
    >
    > Don't style a div to be a header. Use a <h1> element. It is suspected that
    > search engines pay more attention to headings than other text on the page.
    >
    > Don't position things absolutely (the top menu). When I change my font

    size
    > the rest of the graphics and sometimes the text overlaps that absolutely
    > positioned stuff. Simply put the menu inside the content div and let it

    flow
    > normally. At the moment the position of those menu items also depends on

    the
    > viewport width. A wide viewport causes the menu "bar" to seperate and look
    > odd. A narrow viewport causes the menu items ot overlap and look

    unreadable.
    >
    > I would not float: left the centre column. I would specify left and right
    > margins as big as the left and right columns. That way you can use up all
    > the canvas instead of having an inch or so of vacant space at the rigth of
    > that middle column.
    >
    > You have not specified a with for the left column. This is in fact an

    error.
    > The recommendations state that floated elements should have a width

    (unless
    > there is an intrinsic width). The way it is you are defaulting to the

    width
    > of the content, which you don't know.
    >
    > When you do specify a width make it in ems. That way the width of that
    > column adjusts to the font size, not some arbitrary percentage of the
    > viewport. Same for the right column. Specify width in ems. In addition

    this
    > allows you to know exactly where those columns end and allows you to

    specify
    > a correct margin for the centre column.
    >
    > Don't specify padding etc in points. Points are for print media. Use

    pixels
    > where you can be sure you actually do have for example 10 pixels. 10

    points
    > results in some variable number of pixels depending on the DPI setting in
    > the operating system (hint this is different for a Mac (76 IIRC) than for
    > Windows (96)).
    >
    > Don't specify padding in %. Use ems. Padding really relates to the size of
    > the font, not the width or height of the viewport.
    >
    > Don't justify text. This is OK on paper but on a screen becomes hard to
    > read. There are simply not enough pixels to do it properly.
    >
    > Lastly, simplify your CSS. You don't need to specify default things

    (float:
    > none;). Use the shorcuts. border-top: solid 1px black; is easier to read

    and
    > easier to maintain than all those border properties you are using.

    Padding:
    > 1em; rather than padding-left: ...
    >
    > Remember KISS. If you don't have a Really Good Reason for something being
    > there then remove it.
    >
    > HTH
    >
    > --
    > Cheers
    > Richard.


    Richard, thank you for your frankness and valued information. I intend to
    spend the next hour going through what you have said, and hopefully
    understanding it. The DTD was place auto by Stones Webwriter, truthfully I
    don't have a clue as to what it means, I am still pretty much a learner on
    all of the aspects of web design.

    I have been using a table to for layout up until now. But I have wanted to
    get rid of it for a long time, and have been told by many people that div
    and css was the way to go about it. It is turning into a real learning
    curb. Can't say truly either way whether I'm enjoying it or not, lol...
    "but" as they say "he who dares" and all that, I am determined to win,
    hopefully! I have up until now used css for mainly visual purposes, so
    learning how to use it for page design has not been as easy as I thought it
    would be. Funny really, I kind of thought I was at least an intermediate
    with css, I now realise I'm still very much a beginner. :-(

    Any way once again thank you for your valued help and opinions, have a good
    day.
    All the best,
    Kate
     
    Kate, Feb 16, 2005
    #6
  7. On Wed, 16 Feb 2005 10:54:29 -0000, Kate <> wrote:

    > I have been using a table to for layout up until now. But I have wanted
    > to get rid of it for a long time, and have been told by many people that
    > div
    > and css was the way to go about it. It is turning into a real learning
    > curb. Can't say truly either way whether I'm enjoying it or not, lol...
    > "but" as they say "he who dares" and all that, I am determined to win,
    > hopefully! I have up until now used css for mainly visual purposes, so
    > learning how to use it for page design has not been as easy as I thought
    > it would be. Funny really, I kind of thought I was at least an
    > intermediate
    > with css, I now realise I'm still very much a beginner. :-(
    >


    Have you ever seen this post?
    <http://groups.google.com/groups?selm=>

    It is a valuable guidance, contributed already over a year ago by Toby,
    but still very much worth your while reading.


    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | 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, Feb 16, 2005
    #7
  8. Kate

    Kate Guest

    "rf" <rf@.invalid> wrote in message
    news:L2wQd.162658$...
    > "Kate" <> wrote
    >

    Richard would you mind later today or tomorrow, when I have had a chance to
    read, re-read and read through it again, if I came back with a few questions
    on your comments and advice? Only I tend to like to digest info, try to
    figure things out then if I can't ask questions.

    Best regards
    Kate
     
    Kate, Feb 16, 2005
    #8
  9. Kate

    rf Guest

    rf, Feb 16, 2005
    #9
  10. Kate

    rf Guest

    "Kate" <> wrote

    > Richard would you mind later today or tomorrow, when I have had a chance

    to
    > read, re-read and read through it again, if I came back with a few

    questions
    > on your comments and advice? Only I tend to like to digest info, try to
    > figure things out then if I can't ask questions.


    Please return and ask any further questions you need to. This is one of the
    reasons I lurk here.

    http://users.bigpond.net.au/rf/tricks/why.htm

    Bear in mind that I am UTC +10 hours. So... it is now almost my bedtime :)

    When you post again please include your latest effort on the template you
    are building. We can, together, critisise it and make it better.

    --
    Cheers
    Richard.
     
    rf, Feb 16, 2005
    #10
  11. Kate

    Kate Guest

    Kate, Feb 16, 2005
    #11
  12. Kermit the Frog stuck a mic in Barbara's face, who said:

    >Have you ever seen this post?
    ><http://groups.google.com/groups?selm=>


    >It is a valuable guidance, contributed already over a year ago by Toby,
    >but still very much worth your while reading.


    I like it. Except maybe the bits about 20pounds... if I read it
    correctly, the better work I do, the poorer I get!

    --
    - Steve
    "I think a good friend would recommend CLR to all his friends."
     
    Steve Greenaway, Feb 16, 2005
    #12
  13. On 16 Feb 2005 15:44:10 GMT, Steve Greenaway <> wrote:

    > Kermit the Frog stuck a mic in Barbara's face, who said:
    >
    >> Have you ever seen this post?
    >> <http://groups.google.com/groups?selm=>

    >
    >> It is a valuable guidance, contributed already over a year ago by Toby,
    >> but still very much worth your while reading.

    >
    > I like it. Except maybe the bits about 20pounds...


    lol

    > if I read it
    > correctly, the better work I do, the poorer I get!
    >


    ;-) It's a minor investment to do, and it allows you to implement years of
    experience in your own ways. I can see only winners.

    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | 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, Feb 16, 2005
    #13
  14. Kate

    Uncle Pirate Guest

    rf wrote:

    > "Barbara de Zoete" <> wrote
    >
    >
    >>Have you ever seen this post?
    >>

    >
    > <http://groups.google.com/groups?selm=pan.2003.10.19.16.05.38.354002@goddamn
    > .co.uk>
    >
    > Toby is a very smart man. Worth paying attention to ;-)
    >
    >


    Agreed. I also went and read that article. Full of good points. I'll
    not send the 20 though. :)

    --
    Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
    Webmaster/Computer Center Manager, NMSU at Alamogordo
    Coordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB
    '94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg
    A zest for living must include a willingness to die. - R.A. Heinlein
     
    Uncle Pirate, Feb 16, 2005
    #14
  15. Kate

    Kate Guest

    "rf" <rf@.invalid> wrote in message
    news:gEGQd.163474$...
    > "Kate" <> wrote
    >
    > > Richard would you mind later today or tomorrow, when I have had a chance

    > to
    > > read, re-read and read through it again, if I came back with a few

    > questions
    > > on your comments and advice? Only I tend to like to digest info, try to
    > > figure things out then if I can't ask questions.

    >
    > Please return and ask any further questions you need to. This is one of

    the
    > reasons I lurk here.
    >
    > http://users.bigpond.net.au/rf/tricks/why.htm
    >
    > Bear in mind that I am UTC +10 hours. So... it is now almost my bedtime

    :)
    >
    > When you post again please include your latest effort on the template you
    > are building. We can, together, critisise it and make it better.
    >


    Good evening/morning firstly, ;) don't know how late it is over there now.
    Ok I've made a few changes and now have some questions if you don't mind
    enlightening me.

    >Supply a correct doctype (look at http://www.W3C.org for one) and all
    >browsers will treat height as a percentage of the containing box.


    I have changed the DTD to strict as suggested, and have done a bit of
    reading in last 24hrs on this subject, as you may remember I stated that
    Stones Webwriter placed this in auto, and I didn't bother changing it as I
    knew little about it.


    >> I would preferably like to have the blue menu bar run the full length of

    the
    >> page where there is page content past the immediate frame of view.


    >This is not going to happen. There are various ways to simulate this, such
    >as using background colours.
    ><tinkers/>
    >http://users.bigpond.net.au/rf/menu.html
    >Be sure to change your font size so you can see the "navbar" changing in
    >width.



    I have now dropped this idea, and will look into it again at a later date
    when I have gained more knowledge in css. I did take a look at the page and
    printed off copies of the css and the page itself for future reference. I'm
    not to confident with em so I ended up using % in both width and font. It
    seems to do the same trick, font changing size along with div size.

    This also works well when I make the browser window small, everything in
    it's place so to speak.

    >> The second question is I have a horizontal scroll bar in again Netscape
    >> and Firefox, but not in IE and Opera,


    >It's the header thats causing the problem. Look up width in the CSS
    >reccomendations:
    >http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-width
    >You have specified 100%, that is 100% of the headers containing box (which
    >is effectively the viewport). The 100% is that of the content. That is, the
    >bits inside the borders. Then you have added a border which makes the div
    >wider than the viewport by two pixels.


    Lol... yep I figured this out about ten minutes before your post.

    >You have a few more issues.


    >Do not specify font size in pixels. This prevents IE users from changing

    the
    >font size to their liking, unless they use the accessibility options to
    >ignore your fonts entirely.


    Noted and change as stated above.

    > Don't style a div to be a header. Use a <h1> element. It is suspected that
    > search engines pay more attention to headings than other text on the page.


    Yes I knew when I was doing it, that I should really have used a <h1>
    element. Tell me why do different browser display the element in different
    sizes? Fire Fox and IE display it the same, text tall and slim, where as
    Opera and Netscape the text is slightly shorter and looks as if it's in
    bold.

    > Don't position things absolutely (the top menu). When I change my font

    size
    > the rest of the graphics and sometimes the text overlaps that absolutely
    > positioned stuff. Simply put the menu inside the content div and let it

    flow
    > normally. At the moment the position of those menu items also depends on

    the
    > viewport width. A wide viewport causes the menu "bar" to seperate and look
    > odd. A narrow viewport causes the menu items ot overlap and look

    unreadable.

    This top menu has given me a headache, I would like it there but no amount
    of placing it in a containing div, moving it around has got it the way I
    want it, so for now I am going to omit it from the page design. I may come
    back to this one in a few weeks, when I feel in the mood for tackling it
    again.

    > I would not float: left the centre column. I would specify left and right
    > margins as big as the left and right columns. That way you can use up all
    > the canvas instead of having an inch or so of vacant space at the right of
    > that middle column.


    As I was using the three column layout below the header div, if I didn't
    float left the content div it meant the right column ended up beneath the
    left column. I did try your suggestion, not once but a few times. The
    first time thinking there was something missing when it did the above. But
    alas I couldn't get all three columns to fall side by side. And due to the
    vacant space that you mentioned above, (that was annoying, it didn't look
    good I will agree) I have now change it to a two column. Placing the menu
    and the right content boxes in a left column containing div which I floated
    left and had just the content on the right side. Not quite what I wanted
    but it looks ok for now.

    > You have not specified a with for the left column. This is in fact an

    error.
    > The recommendations state that floated elements should have a width

    (unless
    > there is an intrinsic width). The way it is you are defaulting to the

    width
    > of the content, which you don't know.


    I did not actually realise that, thank you for this info. I have rectified
    this.

    > When you do specify a width make it in ems. That way the width of that
    > column adjusts to the font size, not some arbitrary percentage of the
    > viewport.


    I have already mentioned this above. I do have a question on this though, I
    don't really understand em, what is it in relation to px and percentage? I
    noticed that 1em seemed to look around 4 or 5 px. I think I need to do a
    little more research into this before I feel confident in using it.

    > Don't specify padding etc in points. Points are for print media. Use

    pixels
    > where you can be sure you actually do have for example 10 pixels.


    I have also rectified this. I actually thought I had changed them all, but
    that was a stray one. I did ask a week or so about pt px etc, and Barbara
    kindly told me that it was better to use px.

    > Lastly, simplify your CSS. You don't need to specify default things

    (float:
    > none;). Use the shorcuts. border-top: solid 1px black; is easier to read

    and
    > easier to maintain than all those border properties you are using.

    Padding:
    > 1em; rather than padding-left: ...


    I hope the updated version is cleaner, though I'm sure to be told if not,
    lol... when you do get a sec would you mind taking a look and throwing some
    criticisms (good or bad ) my way.

    Many thanks in advance,
    Kate
     
    Kate, Feb 17, 2005
    #15
  16. Kate

    Kate Guest

    Kate, Feb 17, 2005
    #16
  17. Kate

    Kate Guest

    Kate, Feb 18, 2005
    #17
  18. in alt.html, Kate wrote:
    >
    > "Kate" <> wrote in message
    > news:4214bc44$...
    > > Sorry forgot the links. :)
    > >
    > > http://myweb.tiscali.co.uk/wwsfamilies/
    > >
    > > http://myweb.tiscali.co.uk/wwsfamilies/test_update3.css
    > >
    > > Also I don't seem to be able to add any padding to the content


    There is padding, but it is behind those floated menues.

    > and Opera
    > > dispalys it with a gap above the menu content div, any idea on why?

    > I found it has something to do with the <h1>, why doesn't Opera like it? As
    > soon as I remove it, every thing falls in to place.


    Opera supports margin collapsing better than others, maybe that was the
    reason. Hard to say as you seem to have changed the site.


    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Utrecht, NL.
     
    Lauri Raittila, Feb 20, 2005
    #18
    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. ani
    Replies:
    1
    Views:
    362
    Craig Deelsnyder
    Oct 31, 2003
  2. tom c
    Replies:
    24
    Views:
    824
    Ken Cox [Microsoft MVP]
    Jul 12, 2006
  3. Replies:
    0
    Views:
    411
  4. Tom St Denis

    On answering homework

    Tom St Denis, Jan 10, 2010, in forum: C Programming
    Replies:
    14
    Views:
    546
    Michael Foukarakis
    Jan 21, 2010
  5. Kirk I Reiten

    Answering a cell call then switch to bluetooth

    Kirk I Reiten, Mar 30, 2006, in forum: ASP .Net Mobile
    Replies:
    0
    Views:
    224
    Kirk I Reiten
    Mar 30, 2006
Loading...

Share This Page