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

Re: [NH] Multiple Browser CSS

Expand Messages
  • 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 1 of 18 , May 22 7:15 AM
      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 2 of 18 , May 22 7:56 AM
        > 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 3 of 18 , May 22 8:10 AM
          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 4 of 18 , May 22 9:17 AM
            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 5 of 18 , May 22 9:21 AM
              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 6 of 18 , May 22 9:48 AM
                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 7 of 18 , May 22 11:03 AM
                  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 8 of 18 , May 22 2:05 PM
                    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 9 of 18 , May 22 6:30 PM
                      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 10 of 18 , May 22 6:43 PM
                        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 11 of 18 , May 22 6:46 PM
                          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.