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