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

Re: [NH] Multiple Browser CSS

Expand Messages
  • 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 1 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
    • 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 2 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 3 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 4 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 5 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 6 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 7 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 8 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 9 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 10 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 11 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 12 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 13 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 14 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.