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

CSS in the real world! (WAS: RE: [NH] FireFox Equivalent to Which version of Netscape)

Expand Messages
  • Greg Chapman
    Hi Ray, ... I m certainly no expert on CSS, but you might care to look at a couple of my sites for some inspiration on how to do some of the beginner things -
    Message 1 of 6 , Mar 14, 2005
      Hi Ray,

      > All this good discussion of CSS has finally got me trying to
      > learn to use it.
      > As I work through an on-line tutorial, I test each new line of
      > code in MSIE 6.0, FireFox 1.0 and Netscape 7.1.

      I'm certainly no expert on CSS, but you might care to look at a couple of my
      sites for some inspiration on how to do some of the beginner things - like
      arrange a menu down the left side without using a table.

      The experts can comment on how I might improve things! (I do know that they
      fall over in lots of browsers! TopStyle tells me that!)

      One feature of both the sites mentioned below is to use more than one style
      sheet, so that printed versions of the site come out different to the screen
      versions. Using a second style sheet ensures that those who print your
      pages don't have to have the menu and other navigation junk on the printed
      version.

      On a site with a horizontal menu, using slightly different heading styles,
      enabled me to replace the menu with a border on the printed version. This
      helps to retain the design of the screen version whilst removing the
      unneeded navigation material.

      See:
      http://www.seahawk17.plus.com/
      and
      http://www.eastwalton.fsworld.co.uk/

      Greg
    • loro
      ... If your copies of Netscape, Firefox and Mozilla are built on the same Gecko version they should render pages the same. I don t know, but I don t think
      Message 2 of 6 , Mar 14, 2005
        R Shapp wrote:
        >Does Firefox render web pages exactly the same as Netscape? The answer
        >probably depends on which version of Netscape is being used.

        If your copies of Netscape, Firefox and Mozilla are built on the same Gecko
        version they should render pages the same. I don't know, but I don't think
        there is a Netscape version based on the same Gecko as Firefox 1.0. But
        maybe there is. I just get the Mozzies.

        You can see the Gecko version on the Help | About screen and also in the UA
        string.

        Mozilla 1.7.5
        Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.5) Gecko/20041217

        Lotta
      • R Shapp
        Hi Greg, I visited the two sites mentioned in your posting. The menu in http://www.eastwalton.fsworld.co.uk/ is very appealing. Would you please show me the
        Message 3 of 6 , Mar 17, 2005
          Hi Greg,

          I visited the two sites mentioned in your posting.

          The menu in http://www.eastwalton.fsworld.co.uk/ is very appealing. Would you
          please show me the relevant style definitions that permit your menu to act
          like a segmented map? IOW, the words "HOME", WHAT'S NEW", etc. don't run all
          together, and they display alternate background when the cursor hovers over
          them.

          A copy of the HTML is included below so others can follow.

          I hope you get plenty of opportunity to enjoy your SeaHawk!

          Thank you for the help.

          Ray Shapp

          *********html snippet*********

          <DIV class="menu">
          <DIV class="button">
          <A class="leftbutton" href="index.htm">HOME</A><A
          href="whatsnew.htm">WHAT'S NEW</A><A href="albums.htm">PHOTO ALBUMS</A><A
          href="history/index.htm">HISTORY</A><A
          href="memories/index.htm">MEMORIES</A><A href="feedback.htm">FEEDBACK</A>
          </DIV>
          </DIV>
        • Greg Chapman
          Hi Ray, ... You ll see from the line: that the css file in in the same folder as the index.htm
          Message 4 of 6 , Mar 18, 2005
            Hi Ray,

            > The menu in http://www.eastwalton.fsworld.co.uk/ is very
            > appealing. Would you
            > please show me the relevant style definitions that permit your menu to act
            > like a segmented map? IOW, the words "HOME", WHAT'S NEW", etc.
            > don't run all together, and they display alternate background when the
            > cursor hovers over them.

            You'll see from the line:

            <LINK rel="stylesheet" href="eastwalton.css" type="text/css">

            that the css file in in the same folder as the index.htm file, so you could
            just enter http://www.eastwalton.fsworld.co.uk/eastwalton.css into the
            address bar of your browser and it should be downloaded for you. (In my
            case TopStyle opens and displays it, as it is the program I use for editing
            my CSS files.)

            As you've seen the site, it should also be hanging about in the folder:

            Documents and Settings\{UserName}\Local Settings\Temporary Internet Files

            and you could open it from there.

            > A copy of the HTML is included below so others can follow.

            > *********html snippet*********
            >
            > <DIV class="menu">
            > <DIV class="button">
            > <A class="leftbutton" href="index.htm">HOME</A><A
            > href="whatsnew.htm">WHAT'S NEW</A><A href="albums.htm">PHOTO ALBUMS</A><A
            > href="history/index.htm">HISTORY</A><A
            > href="memories/index.htm">MEMORIES</A><A href="feedback.htm">FEEDBACK</A>
            > </DIV>
            > </DIV>


            CSS snippet*****************


            .button a:link {
            background-color : #0066FF;
            border-right : 1px solid #0000FF;
            color : #FFFFFF;
            padding : 2px 20px;
            text-decoration : none;
            }

            .button a:visited {
            background-color : #0066FF;
            border-right : 1px solid #0000FF;
            color : #FFFFFF;
            padding : 2px 20px;
            text-decoration : none;
            }

            .button a:hover {
            background-color : #00FFFF;
            color : #000000;
            }

            .leftbutton {
            border-left : 1px solid #0000FF;
            }

            .menu {
            background-color : #0066FF;
            border : 1px solid #0000FF;
            color : #000000;
            font-family : Arial, sans-serif;
            font-size : .7em;
            font-weight : bold;
            padding : 2px 20px;
            }


            > I hope you get plenty of opportunity to enjoy your SeaHawk!

            Thanks! It's almost thirty years old. I only bought it last year and its
            now due a serious overhaul before too much of the season is lost! A
            neighbour is currently doing some welding work on the trailer. I then have
            to remove all the fittings before stripping all the paint to prepare both
            hull and superstructure for re-painting. Whoever said boating was fun! :-)

            Greg Chapman
            http://www.seahawk17.plus.com
            Celebrating the SeaHawk!
          Your message has been successfully submitted and would be delivered to recipients shortly.