Loading ...
Sorry, an error occurred while loading the content.

Re: [NH] Multiple Browser CSS

Expand Messages
  • Larry Hamilton
    Sorry for the messed up link. Here is a good one: http://www.hamiltongensociety.org/index_css_test.htm. Larry
    Message 1 of 18 , May 21, 2003
    • 0 Attachment
      Sorry for the messed up link.

      Here is a good one: http://www.hamiltongensociety.org/index_css_test.htm.

      Larry

      Larry Hamilton wrote:
      > I am working on an update to the layout of our pages using pure
      > stylesheets instead of tables.
      >
      > I have come up with something based on a sample from an online
      > article. It was based on IE, so it looks great in IE. I am using IE 6
      > SP1.
      >
      > The problem is that in Mozilla 3.1, Opera 6, and Opera 3.62 the body
      > is next to the left margin of the navigation bar on the left of the
      > page. It is legible, but not pleasing. Nothing I try can make any
      > whitespace appear between the border and the first letter of each
      > line.
      >
      > Here are some things I have tried adding to the in-line stylesheet.
      > Each one has an effect on IE, which would be acceptable, if it
      > affected the other browsers.
      >
      > border-left:2px solid #000000;
      > padding-left: 1ex;
      > text-indent: 3em;
      > margin-left: 2em;
      >
      > I do not currently have Netscape installed. I think Netscape 7 will
      > be about like Mozilla. I do not have any idea if Netscape 4.x will
      > like it or not.
      >
      > I believe this is CSS2, so I know not all browsers will handle it. I
      > found a link at work today that lays out what CSS tags for which
      > version of CSS are supported in what browser, but I forgot to email
      > myself the link.
      >
      > Here is the link to the page for the new index.
      >
      > http://http://www.hamiltongensociety.org/index_css_test.htm
      >
      > I think it is much cleaner than the current home page, and since
      > there are no tables, it is much easier to modify. It is amazing how
      > much time it can take for one page!
      >
      > The home link on the test page will take you to the current home page.
      >
      > I have looked at this far too long, so it is either something realy
      > simple, or just an issue of not being supported.
      >
      > I realise that for browsers that do not support tables or CSS I will
      > need a browser sniffer to direct to the appropriate substitue page. I
      > am just trying to get this right before I go too far.
      >
      > TIA!
      >
      > Larry Hamilton
      > lmh@...
      > My Web Site: http://notlimah.tripod.com/
      > Webmaster: Hamilton National Genealogical Society, Inc.
      > http://www.hamiltongensociety.org/
      >
      >
      >
      > ------------------------ Yahoo! Groups Sponsor
      > ---------------------~--> Get A Free Psychic Reading!
      > Your Online Answer To Life's Important Questions.
      > http://us.click.yahoo.com/aM1XQD/od7FAA/uetFAA/CefplB/TM
      > ---------------------------------------------------------------------~->
      >
      >
      >
      > Your use of Yahoo! Groups is subject to
      > http://docs.yahoo.com/info/terms/
    • alice ttlg - koyaanisqatsi
      ... In your body class, specify padding, that puts whitespace inside the boxes. padding: 5px; will put 5px all the way around inside the box. Or specify only
      Message 2 of 18 , May 21, 2003
      • 0 Attachment
        On Wednesday, May 21, 2003 10:21 PM, Larry Hamilton wrote:

        > The problem is that in Mozilla 3.1, Opera 6, and Opera 3.62 the body is
        > next to the left margin of the navigation bar on the left of the page.
        > It is legible, but not pleasing. Nothing I try can make any whitespace
        > appear between the border and the first letter of each line.

        In your body class, specify padding, that puts whitespace inside the boxes.

        padding: 5px;

        will put 5px all the way around inside the box. Or specify only padding on
        the left inside of the box:

        padding-left: 5px;

        Mozilla, Opera and Netscape 7 follow web standards in regard to padding
        (white space inside the box) and margin (white space outside the box) but
        IE does not, it does strange things, so you just kind of have to play with
        it till you get something that looks decent in both IE and Mozilla. Also
        IE5 and IE6 have some differences in how they handle CSS as well, iirc.

        I tend to write my css to web standards so it that it work with all newer
        standards compliant browsers, like Mozilla and Netscape 7+ and it usually
        looks acceptable in IE6, just some minor differences.

        > I do not currently have Netscape installed. I think Netscape 7 will be
        > about like Mozilla. I do not have any idea if Netscape 4.x will like it
        > or not.

        N7 is based on Mozilla so it will look the same in both browsers. N4 is
        particularly deficient with CSS and some CSS will actually crash the
        browser so the user cannot view the page at all. I've the primary problems
        with N4 are line-height, padding and margins on IDs (they're okay on
        classes) and most CSS-P will crash N4 as well.

        If you have a lot of visitors using N4, I recommend installing N4 and
        testing your site in it, in particular, look for N4.08 in the Netscape
        archive and install that, it's the one that has the most trouble with CSS
        and there are some companies and universities that use it exclusively and
        have not updated their computers. N4.7 is less crash prone but it makes a
        huge mess of CSS, some CSS will cause some links not to work, forms may not
        display or work properly with CSS-P.

        > I believe this is CSS2, so I know not all browsers will handle it. I
        > found a link at work today that lays out what CSS tags for which version
        > of CSS are supported in what browser, but I forgot to email myself the
        > link.

        I've found that sometimes it's certain combinations of styles that cause
        problems in N4 so even tho the chart may say something works in N4, it may
        not if you're using some other particular element. It also depends on what
        DOCTYPE you have (or don't have) in your webpage and whether or not the
        DOCTYPE includes a url), all that affects how N4 handles CSS as well.

        alice ttlg

        --
        Me, Blog/LJ, Links, Whatever:
        http://koyaa.nisqatsi.org/

        Advice would be more acceptable if it didn't always conflict with our
        plans.
        - Anonymous
      • Larry Hamilton
        ... I tried these settings and it did not make any difference. Maybe I have the syntax wrong, or the other browsers do not support it. I will have to check the
        Message 3 of 18 , May 22, 2003
        • 0 Attachment
          loro wrote:
          > padding- and margin-left would work if you applied it to each item in
          > the right column. It's easier to add a little margin-right to your
          > .leftnav rule, I think.
          >
          >> I realise that for browsers that do not support tables or CSS I will
          >> need a browser sniffer to direct to the appropriate substitue page.
          >> I am just trying to get this right before I go too far.
          >
          > I wouldn't go there. The page looks perfectly fine without CSS and
          > browser sniffers are never perfect. I would just @import the CSS, at
          > least part of it, to hide it from Netscape 4 et al.

          I tried these settings and it did not make any difference. Maybe I have the
          syntax wrong, or the other browsers do not support it. I will have to check
          the CSS browser comparison site when I get to work.

          If you think of anything else, let me know.

          I got started on this, and now I have stayed up past 3 AM. I'm gonna feel
          this "tomorrow". ;-)

          Thanks!

          Larry
        • loro
          ... Maybe I don t understand what you want to do. Didn t you want a little distance between the body text and the right border of the nav? margin-right in
          Message 4 of 18 , May 22, 2003
          • 0 Attachment
            Larry Hamilton wrote:
            > > padding- and margin-left would work if you applied it to each item in
            > > the right column. It's easier to add a little margin-right to your
            > > .leftnav rule, I think.
            >
            >I tried these settings and it did not make any difference. Maybe I have the
            >syntax wrong, or the other browsers do not support it. I will have to check
            >the CSS browser comparison site when I get to work.

            Maybe I don't understand what you want to do. Didn't you want a little
            distance between the body text and the right border of the nav?
            'margin-right' in the '.leftnav' rule gives you this. It's easier to show -
            here is what I *think* you mean. :-)

            <http://w1.181.telia.com/~u18109800/ntb/hamilton.html>
            (I'll take it down when you've looked)

            If you don't want the text in the nav div to fit so snuggly against the
            borders use padding-left and/or padding-right in the '.leftnav' rule.

            Lotta
          • hugo_paulissen
            Larry, Loro, Would this work? div.body { position: absolute; left: 220px; margin-top: 50px; height:450px; background-color:#FFFFFF; border-right:1px solid
            Message 5 of 18 , May 22, 2003
            • 0 Attachment
              Larry, Loro,

              Would this work?

              div.body {
              position: absolute;
              left: 220px;
              margin-top: 50px;
              height:450px;
              background-color:#FFFFFF;
              border-right:1px solid #000000;}

              In the original css the body-div "disappears" underneath the left.nav
              div. So it actually starts at the lefthand side of the screen -
              that's why your left-paddings and margins didn't work, I guess. If
              you define an absolute position, you can set the left-margin of that
              element. (And it should start after 200px - since the leftnav is that
              wide...)

              Works in Mozilla 1.4a

              Hugo
            • loro
              ... That s why it s better/easier (in this case) to use margin-right on the float. If you use margin on .body you have to compensate for the width of the float
              Message 6 of 18 , May 22, 2003
              • 0 Attachment
                hugo_paulissen wrote:
                >In the original css the body-div "disappears" underneath the left.nav
                >div. So it actually starts at the lefthand side of the screen -
                >that's why your left-paddings and margins didn't work, I guess

                That's why it's better/easier (in this case) to use margin-right on the
                float. If you use margin on .body you have to compensate for the width of
                the float (200px) and use something like 'margin-left: 210px'. I think it
                looks nicer if the padding/margin it relative to the font size. 10 pixels
                (or whatever) will be large for some and small for some.

                padding-left on .body would also work and may in fact be better. Actually,
                I didn't see that the .body div existed when I first answered and said
                Larry would have to pad each item. Padding on .body and margin on .leftnav
                would look the same as the page is styled now. But if Larry changes the
                background color for .body so it differs from the whole page's background
                color padding on body is probably preferable, else there will be a white
                gap between the two divs.

                Lotta
              • loro
                ... Amen to that. IE6 does use a correct box model in Standards Mode though. Right or wrong doesn t matter much in this case since .body doesn t have width. If
                Message 7 of 18 , May 22, 2003
                • 0 Attachment
                  >Mozilla, Opera and Netscape 7 follow web standards in regard to padding
                  >(white space inside the box) and margin (white space outside the box) but
                  >IE does not, it does strange things, so you just kind of have to play with
                  >it till you get something that looks decent in both IE and Mozilla. Also
                  >IE5 and IE6 have some differences in how they handle CSS as well, iirc.

                  Amen to that. IE6 does use a correct box model in Standards Mode though.
                  Right or wrong doesn't matter much in this case since .body doesn't have
                  width. If .leftnav is padded it will look a little thinner in IE Quirks
                  than in standard compliant browsers but everything will still fit.

                  >I've found that sometimes it's certain combinations of styles that cause
                  >problems in N4 so even tho the chart may say something works in N4, it may
                  >not if you're using some other particular element. It also depends on what
                  >DOCTYPE you have (or don't have) in your webpage and whether or not the
                  >DOCTYPE includes a url), all that affects how N4 handles CSS as well.

                  Hey Alice, don't glorify the old thing. ;-) It doesn't know one DTD from
                  another. IE6 Win, IE5 Mac, Netscape 6+ and everything else Moz, Safari and
                  ridiculously enough Opera 7+ use doctype switching. Opera even tried to
                  emulate the IE6 bug that makes the browser go into Quirks Mode when an XML
                  declaration is present in the first release he-he!

                  Lotta
                • lmh@hamiltongensociety.org
                  Lotta, Hugo, Grant, Jorma, ...., Thanks. I figured it out when I got to work. I was just too tired. If I add padding in the .body tag - padding:7px 20px it
                  Message 8 of 18 , May 22, 2003
                  • 0 Attachment
                    Lotta, Hugo, Grant, Jorma, ....,

                    Thanks. I figured it out when I got to work. I was just too tired.

                    If I add padding in the .body tag - padding:7px 20px it gives nice whitespace
                    around the body in IE. From what all the other emails say, this should work.

                    If things are slow today, I will download Mozilla and check it out.

                    Thanks for all the suggestions.

                    I had not gotten into positioning with stylesheets until I ran across this
                    article on TechRepublic. The way the top nav bar works, I can just get rid of
                    the current javascript navigation bar. I can also take the side navigation bar
                    to all my pages. I also figured out how simple it is to put the side bar on the
                    right, just change the value of float: to right, then move the body border from
                    right to left. This can all be in my main.css to make it even simpler. I am
                    thinking of ways to randomize what css file is called, so I can have the navbar
                    on different sides. Perhaps even let the user set a cookie to set what side
                    they want to see the side bar.

                    Now that I am getting this layout figured out, I will be working on ways to
                    automate many other things on the HNGS site, and on my personal site.

                    I have sure learned a lot, all because I read one online article that helped it
                    all make sense.

                    It is even better to share this with the group. Expecially since there has not
                    been any activity for a while.

                    Thanks to All!

                    Larry

                    Quoting loro <loro@...>:

                    > Larry Hamilton wrote:
                    > > > padding- and margin-left would work if you applied it to each item in
                    > > > the right column. It's easier to add a little margin-right to your
                    > > > .leftnav rule, I think.
                    > >
                    > >I tried these settings and it did not make any difference. Maybe I have the
                    > >syntax wrong, or the other browsers do not support it. I will have to check
                    > >the CSS browser comparison site when I get to work.
                    >
                    > Maybe I don't understand what you want to do. Didn't you want a little
                    > distance between the body text and the right border of the nav?
                    > 'margin-right' in the '.leftnav' rule gives you this. It's easier to show -
                    > here is what I *think* you mean. :-)
                    >
                    > <http://w1.181.telia.com/~u18109800/ntb/hamilton.html>
                    > (I'll take it down when you've looked)
                    >
                    > If you don't want the text in the nav div to fit so snuggly against the
                    > borders use padding-left and/or padding-right in the '.leftnav' rule.
                    >
                    > Lotta
                    >
                    >
                    >
                    >
                    >
                    >
                    > Your use of Yahoo! Groups is subject to http://docs.yahoo.com/info/terms/
                    >
                    >
                    >
                  • Jeffrey Morrison
                    ... helped it ... What was the one article? Gotts link? Jeff
                    Message 9 of 18 , May 22, 2003
                    • 0 Attachment
                      > I have sure learned a lot, all because I read one online article that
                      helped it
                      > all make sense.

                      What was the one article? Gotts link?

                      Jeff
                    • Don Passenger
                      Larry, It is pretty easy to randomly vary your styles. See: http://www.bestfoot.com/developer/javascript/css_rotate/ which loads a random stylesheet. Also you
                      Message 10 of 18 , May 22, 2003
                      • 0 Attachment
                        Larry,

                        It is pretty easy to randomly vary your styles. See:
                        http://www.bestfoot.com/developer/javascript/css_rotate/ which loads a
                        random stylesheet.

                        Also you can offer a choice:
                        http://www.bestfoot.com/developer/javascript/stickystyles/ via cookies.
                        Most of the skin type sites out there use php, perl or another server side
                        language. These rely entirely on javascript/jscript.

                        I hope you find the examples (done in notetab btw) to be helpful for what
                        you are up to.


                        --

                        Don Passenger

                        If you need an html fix visit
                        http://www.htmlfixit.com

                        html/perl/php/xhtml/javascript presented
                        in easy tutorials with live help and forums
                        to fix your problems
                        ----- Original Message -----
                        From: <lmh@...>
                        To: <ntb-html@yahoogroups.com>
                        Sent: Thursday, May 22, 2003 10:15 AM
                        Subject: Re: [NH] Multiple Browser CSS


                        > Lotta, Hugo, Grant, Jorma, ....,
                        >
                        > Thanks. I figured it out when I got to work. I was just too tired.
                        >
                        > If I add padding in the .body tag - padding:7px 20px it gives nice
                        whitespace
                        > around the body in IE. From what all the other emails say, this should
                        work.
                        >
                        > If things are slow today, I will download Mozilla and check it out.
                        >
                        > Thanks for all the suggestions.
                        >
                        > I had not gotten into positioning with stylesheets until I ran across this
                        > article on TechRepublic. The way the top nav bar works, I can just get rid
                        of
                        > the current javascript navigation bar. I can also take the side navigation
                        bar
                        > to all my pages. I also figured out how simple it is to put the side bar
                        on the
                        > right, just change the value of float: to right, then move the body border
                        from
                        > right to left. This can all be in my main.css to make it even simpler. I
                        am
                        > thinking of ways to randomize what css file is called, so I can have the
                        navbar
                        > on different sides. Perhaps even let the user set a cookie to set what
                        side
                        > they want to see the side bar.
                        >
                        > Now that I am getting this layout figured out, I will be working on ways
                        to
                        > automate many other things on the HNGS site, and on my personal site.
                        >
                        > I have sure learned a lot, all because I read one online article that
                        helped it
                        > all make sense.
                        >
                        > It is even better to share this with the group. Expecially since there has
                        not
                        > been any activity for a while.
                        >
                        > Thanks to All!
                        >
                        > Larry
                      • lmh@hamiltongensociety.org
                        Don, ... Thanks for the links, I will check them out. I have Perl and Php available. I want to try and get away from javascript, but most browsers that support
                        Message 11 of 18 , May 22, 2003
                        • 0 Attachment
                          Don,

                          Quoting Don Passenger <dpasseng@...>:

                          > Larry,
                          >
                          > It is pretty easy to randomly vary your styles. See:
                          > http://www.bestfoot.com/developer/javascript/css_rotate/ which loads a
                          > random stylesheet.
                          >
                          > Also you can offer a choice:
                          > http://www.bestfoot.com/developer/javascript/stickystyles/ via cookies.
                          > Most of the skin type sites out there use php, perl or another server side
                          > language. These rely entirely on javascript/jscript.
                          >
                          > I hope you find the examples (done in notetab btw) to be helpful for what
                          > you are up to.

                          Thanks for the links, I will check them out.

                          I have Perl and Php available. I want to try and get away from javascript, but
                          most browsers that support CSS should also handle javascript, so it should not
                          be a big issue.

                          Larry
                        • lmh@hamiltongensociety.org
                          Hugo, ... This must be the box bug in IE that Grant mentioned. IE handles the .body style as it is displayed, rather than as a layer . What works in Mozilla
                          Message 12 of 18 , May 22, 2003
                          • 0 Attachment
                            Hugo,

                            Quoting hugo_paulissen <H.Paulissen@...>:

                            > Larry, Loro,
                            >
                            > Would this work?
                            >
                            > div.body {
                            > position: absolute;
                            > left: 220px;
                            > margin-top: 50px;
                            > height:450px;
                            > background-color:#FFFFFF;
                            > border-right:1px solid #000000;}
                            >
                            > In the original css the body-div "disappears" underneath the left.nav
                            > div. So it actually starts at the lefthand side of the screen -
                            > that's why your left-paddings and margins didn't work, I guess. If
                            > you define an absolute position, you can set the left-margin of that
                            > element. (And it should start after 200px - since the leftnav is that
                            > wide...)
                            >
                            > Works in Mozilla 1.4a

                            This must be the box bug in IE that Grant mentioned. IE handles the .body style
                            as it is displayed, rather than as a "layer". What works in Mozilla makes a
                            whitespace area the size of the sidebar. This would be an interesting effect
                            for simulating a newspaper, or other column text.

                            I did not even catch on that there were "layers" here. Thanks for pointing it
                            out!

                            I love this list!

                            Larry
                          • Don Passenger
                            In that case Larry, See: http://www.domesticat.net/skins/ http://www.domesticat.net/skins/howto.php Seems to be the mother page of many skinning projects.
                            Message 13 of 18 , May 22, 2003
                            • 0 Attachment
                              In that case Larry,

                              See: http://www.domesticat.net/skins/
                              http://www.domesticat.net/skins/howto.php
                              Seems to be the mother page of many skinning projects.

                              Javascript is widely supported these days, but nothing beats a server side
                              language.



                              --

                              Don Passenger

                              If you need an html fix visit
                              http://www.htmlfixit.com

                              html/perl/php/xhtml/javascript presented
                              in easy tutorials with live help and forums
                              to fix your problems
                              ----- Original Message -----
                              From: <lmh@...>
                              To: <ntb-html@yahoogroups.com>
                              Sent: Thursday, May 22, 2003 12:17 PM
                              Subject: Re: [NH] Multiple Browser CSS


                              > I have Perl and Php available. I want to try and get away from javascript,
                              but
                              > most browsers that support CSS should also handle javascript, so it should
                              not
                              > be a big issue.
                              >
                              > Larry
                            • lmh@hamiltongensociety.org
                              Don, Thanks! I ll take a look. Larry
                              Message 14 of 18 , May 22, 2003
                              • 0 Attachment
                                Don,

                                Thanks! I'll take a look.

                                Larry

                                Quoting Don Passenger <dpasseng@...>:

                                > In that case Larry,
                                >
                                > See: http://www.domesticat.net/skins/
                                > http://www.domesticat.net/skins/howto.php
                                > Seems to be the mother page of many skinning projects.
                                >
                                > Javascript is widely supported these days, but nothing beats a server side
                                > language.
                              • lmh@hamiltongensociety.org
                                ... Sorry, I forgot to bookmark it. It is on builder.com, a sister site to techrepublic. http://builder.com.com/article.jhtml?id=u00220030414shm01.htm Larry
                                Message 15 of 18 , May 22, 2003
                                • 0 Attachment
                                  Quoting Jeffrey Morrison <moros@...>:

                                  > > I have sure learned a lot, all because I read one online article that
                                  > helped it
                                  > > all make sense.
                                  >
                                  > What was the one article? Gotts link?

                                  Sorry, I forgot to bookmark it.

                                  It is on builder.com, a sister site to techrepublic.

                                  http://builder.com.com/article.jhtml?id=u00220030414shm01.htm

                                  Larry
                                • Larry Hamilton
                                  Lotta, ... Your example is exactly what I meant. After having more time to review the page you did, I see my error, I was mixing wrong items in the wee hours.
                                  Message 16 of 18 , May 22, 2003
                                  • 0 Attachment
                                    Lotta,

                                    loro wrote:
                                    > Maybe I don't understand what you want to do. Didn't you want a little
                                    > distance between the body text and the right border of the nav?
                                    > 'margin-right' in the '.leftnav' rule gives you this. It's easier to
                                    > show - here is what I *think* you mean. :-)

                                    Your example is exactly what I meant.

                                    After having more time to review the page you did, I see my error, I was
                                    mixing wrong items in the wee hours. Your version looks fine in Opera 3.62,
                                    Opera 6, Mozilla 1.3, and IE 6.

                                    I messed up my working stylesheet, so I have some clean up to do. I did
                                    something that flaked out both versions of Opera that I have. I will have to
                                    re-build my working stylesheet from backup and stop when I figure out what
                                    broke it.

                                    > If you don't want the text in the nav div to fit so snuggly against
                                    > the borders use padding-left and/or padding-right in the '.leftnav'
                                    > rule.

                                    That's good to know too.

                                    THANKS!!

                                    Larry
                                  • Larry Hamilton
                                    Hugo, ... Thanks! That really makes it clear. This makes the other browsers behave the way that IE behave by default, and it makes IE work like the others. I
                                    Message 17 of 18 , May 22, 2003
                                    • 0 Attachment
                                      Hugo,

                                      hugo_paulissen wrote:
                                      > Would this work?
                                      >
                                      > div.body {
                                      > position: absolute;
                                      > left: 220px;
                                      > margin-top: 50px;
                                      > height:450px;
                                      > background-color:#FFFFFF;
                                      > border-right:1px solid #000000;}
                                      >
                                      > In the original css the body-div "disappears" underneath the left.nav

                                      Thanks! That really makes it clear. This makes the other browsers behave the
                                      way that IE behave by default, and it makes IE work like the others.

                                      I will have to remember this absolute value. I think it may help with some
                                      other oddities.

                                      One more tool in the belt!

                                      THANKS!

                                      Larry
                                    • Larry Hamilton
                                      Alice, ... Thanks for this tip! Your explanation of padding and margin really clarify things. THANKS! Larry
                                      Message 18 of 18 , May 22, 2003
                                      • 0 Attachment
                                        Alice,

                                        alice ttlg - koyaanisqatsi wrote:
                                        > In your body class, specify padding, that puts whitespace inside the
                                        > boxes.
                                        >
                                        > padding: 5px;
                                        >
                                        > will put 5px all the way around inside the box. Or specify only
                                        > padding on the left inside of the box:
                                        >
                                        > padding-left: 5px;
                                        >
                                        > Mozilla, Opera and Netscape 7 follow web standards in regard to
                                        > padding (white space inside the box) and margin (white space outside
                                        > the box) but IE does not, it does strange things, so you just kind of
                                        > have to play with it till you get something that looks decent in both
                                        > IE and Mozilla.

                                        Thanks for this tip! Your explanation of padding and margin really clarify
                                        things.

                                        THANKS!

                                        Larry
                                      Your message has been successfully submitted and would be delivered to recipients shortly.