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

Re: [NH] Styling problem

Expand Messages
  • Mike Breiding - Morgantown WV
    ... Axel, I am not sure what you mean. -mb
    Message 1 of 24 , Oct 31, 2012
    View Source
    • 0 Attachment
      On 10/31/2012 2:36 PM, Axel Berger wrote:
      > Mike Breiding - Morgantown WV wrote:
      >> You are getting bold?
      >
      > Yes, just tried taking it out and putting in again. You noted that my
      > minmal example does not load any external style and thus is fully
      > self-contained? Axel

      Axel,
      I am not sure what you mean.
      -mb
    • Mike Breiding - Morgantown WV
      Solved: I changed this: Friday, June
      Message 2 of 24 , Oct 31, 2012
      View Source
      • 0 Attachment
        Solved:
        I changed this:
        <p class="date"><strong><a
        href='http://epicroadtrips.us/2010/mich-ont/d1/' target="_blank"
        title="Friday, June 11">Friday, June 11</strong></a></p>

        To this:
        <p class="date"><a href='http://epicroadtrips.us/2010/mich-ont/d1/'
        target="_blank" title="Friday, June 11"><strong>Friday, June
        11</strong></a></p>

        I think I have been here before with Axel.
        But, previously the problem was IE not displaying the title for the link
        unless the URL and text were both wrapped with the formatting tag.

        It happens here also.
        FF displays the title, IE does not.

        My thanks to all!
        -Mike
        ----------------

        On 10/31/2012 12:10 PM, Mike Breiding - Morgantown WV wrote:
        >
        > Greetings!
        > I cannot get what I want from p.date.
        >
        > The margins will not apply and the font styling is lost when I add a
        > link to the date.
        >
        > <p class="date"><strong><a
        > href='http://epicroadtrips.us/2010/mich-ont/d1/' target="_blank"
        > title="Friday, June 11">Friday, June 11</a></strong></p>
        >
        > p.date
        > strong {font: 95% Georgia,'Times New Roman',Times,serif; color:#4F4A4A;
        > font-weight: bold;}
        > p.date em
        > {font:95% Georgia,'Times New Roman',Times,serif; color:grey;margin-left:
        > 10px}
        >
        > p.date
        > {margin-bottom:-10px; margin-top: 10px}
        >
        > http://epicroadtrips.us/2010/mich-ont/betsy_journal/
        > HTML validator - Validates
        >
        > http://validator.w3.org/check?uri=http%3A%2F%2Fepicroadtrips.us%2F2010%2Fmich-ont%2Fbetsy_journal%2F&charset=%28detect+automatically%29&doctype=Inline&ss=1&group=0&user-agent=W3C_Validator%2F1.3
        > -------------------
        > http://epicroadtrips.us/2010/mich-ont/betsy_journal/php-nav-index_style.css
        > CSS validator Does not validate and I cannot see why
        >
        > http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fepicroadtrips.us%2F2010%2Fmich-ont%2Fbetsy_journal%2Fphp-nav-index_style.css&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en#errors
        >
        > Any ideas?
        > -Mike
        > ========
      • Axel Berger
        ... If you view that file in a browser, either locally or after uploading, it will be unaffected by any CSS file you may have. Your symptoms sound as if your
        Message 3 of 24 , Oct 31, 2012
        View Source
        • 0 Attachment
          Mike Breiding - Morgantown WV wrote:
          > I am not sure what you mean.

          If you view that file in a browser, either locally or after uploading,
          it will be unaffected by any CSS file you may have. Your symptoms sound
          as if your test files weren't.

          Axel
        • Mike Breiding - Morgantown WV
          I went off half cocked here. The is resolved, but the margin problem is not. That is: p.date {margin-bottom:-10px; margin-top: 10px} This will not
          Message 4 of 24 , Oct 31, 2012
          View Source
          • 0 Attachment
            I went off half cocked here.
            The <strong> is resolved, but the margin problem is not.
            That is:
            p.date
            {margin-bottom:-10px; margin-top: 10px}
            This will not change the margins.
            -mb
            ========

            On 10/31/2012 3:44 PM, Mike Breiding - Morgantown WV wrote:
            > Solved:
            > I changed this:
            > <p class="date"><strong><a
            > href='http://epicroadtrips.us/2010/mich-ont/d1/' target="_blank"
            > title="Friday, June 11">Friday, June 11</strong></a></p>
            >
            > To this:
            > <p class="date"><a href='http://epicroadtrips.us/2010/mich-ont/d1/'
            > target="_blank" title="Friday, June 11"><strong>Friday, June
            > 11</strong></a></p>
            >
            > I think I have been here before with Axel.
            > But, previously the problem was IE not displaying the title for the link
            > unless the URL and text were both wrapped with the formatting tag.
            >
            > It happens here also.
            > FF displays the title, IE does not.
            >
            > My thanks to all!
            > -Mike
            > ----------------
            >
            > On 10/31/2012 12:10 PM, Mike Breiding - Morgantown WV wrote:
            >>
            >> Greetings!
            >> I cannot get what I want from p.date.
            >>
            >> The margins will not apply and the font styling is lost when I add a
            >> link to the date.
            >>
            >> <p class="date"><strong><a
            >> href='http://epicroadtrips.us/2010/mich-ont/d1/' target="_blank"
            >> title="Friday, June 11">Friday, June 11</a></strong></p>
            >>
            >> p.date
            >> strong {font: 95% Georgia,'Times New Roman',Times,serif; color:#4F4A4A;
            >> font-weight: bold;}
            >> p.date em
            >> {font:95% Georgia,'Times New Roman',Times,serif; color:grey;margin-left:
            >> 10px}
            >>
            >> p.date
            >> {margin-bottom:-10px; margin-top: 10px}
            >>
            >> http://epicroadtrips.us/2010/mich-ont/betsy_journal/
            >> HTML validator - Validates
            >>
            >> http://validator.w3.org/check?uri=http%3A%2F%2Fepicroadtrips.us%2F2010%2Fmich-ont%2Fbetsy_journal%2F&charset=%28detect+automatically%29&doctype=Inline&ss=1&group=0&user-agent=W3C_Validator%2F1.3
            >> -------------------
            >> http://epicroadtrips.us/2010/mich-ont/betsy_journal/php-nav-index_style.css
            >> CSS validator Does not validate and I cannot see why
            >>
            >> http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fepicroadtrips.us%2F2010%2Fmich-ont%2Fbetsy_journal%2Fphp-nav-index_style.css&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en#errors
            >>
            >> Any ideas?
            >> -Mike
            >> ========
            >
            >
            > ------------------------------------
            >
            > Fookes Software: http://www.fookes.com/
            > NoteTab website: http://www.notetab.com/
            > NoteTab Discussion Lists: http://www.notetab.com/groups.php
            >
            > ***
            > Yahoo! Groups Links
            >
            >
            >
            >
            >
          • Axel Berger
            ... It does in my example file. So there must be something specific else wrong your side. Is it just one browser? Is it overridden by another CSS directive?
            Message 5 of 24 , Oct 31, 2012
            View Source
            • 0 Attachment
              Mike Breiding - Morgantown WV wrote:
              > This will not change the margins.

              It does in my example file. So there must be something specific else
              wrong your side. Is it just one browser? Is it overridden by another CSS
              directive?
            • Mike Breiding - Morgantown WV
              ... Sorry, Axel. I hate to appear dense. But I must be. I don t get your meaning. Thanks for your patience! -Mike
              Message 6 of 24 , Oct 31, 2012
              View Source
              • 0 Attachment
                On 10/31/2012 3:48 PM, Axel Berger wrote:
                > Mike Breiding - Morgantown WV wrote:
                >> I am not sure what you mean.
                >
                > If you view that file in a browser, either locally or after uploading,
                > it will be unaffected by any CSS file you may have. Your symptoms sound
                > as if your test files weren't.

                Sorry, Axel. I hate to appear dense.
                But I must be.
                I don't get your meaning.

                Thanks for your patience!
                -Mike

                >
                > Axel
                >
                >
                > ------------------------------------
                >
                > Fookes Software: http://www.fookes.com/
                > NoteTab website: http://www.notetab.com/
                > NoteTab Discussion Lists: http://www.notetab.com/groups.php
                >
                > ***
                > Yahoo! Groups Links
                >
                >
                >
                >
                >
              • Mike Breiding - Morgantown WV
                ... What example file? ... Both FF 16 and IE 8 display this behavior. ... I do have this inline styling:
                Message 7 of 24 , Oct 31, 2012
                View Source
                • 0 Attachment
                  On 10/31/2012 3:57 PM, Axel Berger wrote:
                  > Mike Breiding - Morgantown WV wrote:
                  >> This will not change the margins.
                  >
                  > It does in my example file.

                  What example file?

                  > So there must be something specific else
                  > wrong your side. Is it just one browser?

                  Both FF 16 and IE 8 display this behavior.

                  > Is it overridden by another CSS directive?

                  I do have this inline styling:
                  <p style="text-align: center; margin-bottom:
                  50px">~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</p>

                  <!-- ******** PHOTO LINKS START ********* -->
                  <p style="text-align: center;"><strong>The Journal Of Elizabeth Beal
                  Breiding: 3 weeks in Michigan</strong></p>

                  But, that's is all.
                  -mb
                • Axel Berger
                  ... Alright. You have a separate CSS-file on your site. That file has caused issues, there were problems with comments, it didn t validate at first and so on.
                  Message 8 of 24 , Oct 31, 2012
                  View Source
                  • 0 Attachment
                    Mike Breiding - Morgantown WV wrote:
                    > I don't get your meaning.

                    Alright. You have a separate CSS-file on your site. That file has caused
                    issues, there were problems with comments, it didn't validate at first
                    and so on.

                    My sample file does not use any of that. The only CSS it sees is that
                    enclosed in

                    <STYLE TYPE="text/css"><!--
                    ...
                    --></STYLE>

                    So you can verify it works as intended in every browser you use. I say
                    it does. It seems the very same directives in your CSS-file do not work.
                    As they work of themselves (at least here), it must be that the browser
                    does not see or apply them for some reason. You must find out which
                    styling it sees in their place -- change something in those styles to
                    ridiculous values and watch where they turn up. If you found the culprit
                    you need to find out why it and not the intended one is applied. One
                    thing that often got me is the precedence of the more specific.

                    The main rule here is to isolate the problem from everything that's got
                    nothing to do with it.

                    Axel
                  • Axel Berger
                    ... The one I sent at 18:25 h my time, seems to be 13:25 h yours.
                    Message 9 of 24 , Oct 31, 2012
                    View Source
                    • 0 Attachment
                      Mike Breiding - Morgantown WV wrote:
                      > What example file?

                      The one I sent at 18:25 h my time, seems to be 13:25 h yours.
                    • Mike Breiding - Morgantown WV
                      ... I will start the process of elimination and see where it goes. Thanks, -Mike
                      Message 10 of 24 , Nov 1, 2012
                      View Source
                      • 0 Attachment
                        On 10/31/2012 4:50 PM, Axel Berger wrote:
                        > ...
                        > The main rule here is to isolate the problem from everything that's got
                        > nothing to do with it.

                        I will start the process of elimination and see where it goes.
                        Thanks,
                        -Mike
                      • Mike Breiding - Morgantown WV
                        ... That style was being overridden by the more specific: div#content p { margin: 8px auto; width: 65%; } Using: div#content p.date{margin-bottom:-10px;
                        Message 11 of 24 , Nov 7, 2012
                        View Source
                        • 0 Attachment
                          RE:
                          > I cannot get this declaration to work:
                          > p.date
                          > {margin-bottom:-10px; margin-top: 40px}

                          That style was being overridden by the more specific:

                          div#content p {
                          margin: 8px auto;
                          width: 65%;
                          }

                          Using:
                          "div#content p.date{margin-bottom:-10px; margin-top: 40px}"
                          Solved the problems with the margins not applying.
                          -Mike

                          ======
                          Greetings!
                          I cannot get what I want from p.date.

                          The margins will not apply and the font styling is lost when I add a
                          link to the date.

                          <p class="date"><strong><a
                          href='http://epicroadtrips.us/2010/mich-ont/d1/' target="_blank"
                          title="Friday, June 11">Friday, June 11</a></strong></p>

                          p.date
                          strong {font: 95% Georgia,'Times New Roman',Times,serif; color:#4F4A4A;
                          font-weight: bold;}
                          p.date em
                          {font:95% Georgia,'Times New Roman',Times,serif; color:grey;margin-left:
                          10px}

                          p.date
                          {margin-bottom:-10px; margin-top: 10px}

                          http://epicroadtrips.us/2010/mich-ont/betsy_journal/
                          HTML validator - Validates

                          http://validator.w3.org/check?uri=http%3A%2F%2Fepicroadtrips.us%2F2010%2Fmich-ont%2Fbetsy_journal%2F&charset=%28detect+automatically%29&doctype=Inline&ss=1&group=0&user-agent=W3C_Validator%2F1.3
                          -------------------
                          http://epicroadtrips.us/2010/mich-ont/betsy_journal/php-nav-index_style.css
                          CSS validator Does not validate and I cannot see why

                          http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fepicroadtrips.us%2F2010%2Fmich-ont%2Fbetsy_journal%2Fphp-nav-index_style.css&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en#errors

                          Any ideas?
                          -Mike
                          ========


                          ------------------------------------

                          Fookes Software: http://www.fookes.com/
                          NoteTab website: http://www.notetab.com/
                          NoteTab Discussion Lists: http://www.notetab.com/groups.php

                          ***
                          Yahoo! Groups Links
                        Your message has been successfully submitted and would be delivered to recipients shortly.