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
    View Source
    • 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
      ... 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 2 of 18 , May 22, 2003
      View Source
      • 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 3 of 18 , May 22, 2003
        View Source
        • 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 4 of 18 , May 22, 2003
          View Source
          • 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 5 of 18 , May 22, 2003
            View Source
            • 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 6 of 18 , May 22, 2003
              View Source
              • 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 7 of 18 , May 22, 2003
                View Source
                • 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 8 of 18 , May 22, 2003
                  View Source
                  • 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 9 of 18 , May 22, 2003
                    View Source
                    • 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 10 of 18 , May 22, 2003
                      View Source
                      • 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 11 of 18 , May 22, 2003
                        View Source
                        • 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 12 of 18 , May 22, 2003
                          View Source
                          • 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 13 of 18 , May 22, 2003
                            View Source
                            • 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 14 of 18 , May 22, 2003
                              View Source
                              • 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 15 of 18 , May 22, 2003
                                View Source
                                • 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 16 of 18 , May 22, 2003
                                  View Source
                                  • 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.