7 Replies Latest reply on Sep 26, 2008 7:23 AM by Newsgroup_User

    Need some advice about cross-browser display

    Level 7

      Hi, I'm still trying to master css design and having a few problems
      getting my pages to look the same on Opera and FF. I'm not sure where
      I'm going wrong.

      The site looks pretty much how it's meant to in IE (though still in
      draft stage), but all sorts of gaps and spaces appear in the other
      browsers that ruin the look.

      Also in the 'restauraunts' 'shopping' and 'things to do' pages the
      content drops way down on the page and I don't know why that is
      either.

      Any advice would be much appreciated. Be gentle, I know I have lots to
      learn! : ~

      Link:
      http://www.sorrentoquay.com.au/new_index.html

      Here's the CSS:
      body
      {
      background-color:#EDDFD3;
      padding: 0px;
      margin: 0px;
      background-image: url(background_styling_graphics/bodybg.gif);
      background-repeat: repeat-x;
      }

      a
      {
      color: #505E8D;
      text-decoration: none;
      font-family: Verdana, Arial, Helvetica, sans-serif, "Eras Light ITC";
      font-size: 14px;
      text-align:center;
      padding: 10px;
      }

      a:hover
      {
      color: #FF8080;
      }

      body,input
      {
      font-family: Verdana, Arial, Helvetica, sans-serif, "Eras Light ITC";
      font-size: 100%;
      color: #444760;
      }
      #tagline
      {

      width: 100%;
      height: 27px;
      text-align:center;
      background-image: url(background_styling_graphics/tagline.gif);
      background-repeat: repeat-x;
      margin: auto;
      }
      #tagline p
      {
      font-size: 15px;
      color: #808CB7;
      font-family: Verdana, Arial, Helvetica, sans-serif, "Eras Light ITC";
      letter-spacing: 10px;
      padding-top: 5px;
      }



      #header
      {

      position: relative;



      background-repeat: repeat;
      background-color: #89AFC5;
      background-image: url(background_styling_graphics/headerbg.gif);
      background-repeat: repeat-x;

      }


      #summary
      {
      width: 750px;

      margin: auto;



      }

      #summary p
      {
      line-height: 150%;
      padding: 5px;
      color:#FFFFFF;

      font-family: "Times New Roman", Times, serif;
      font-size: 110%;
      font-style: italic;

      letter-spacing: 0.15em;
      }

      #summary a
      {
      color: #FFFFFF;
      text-decoration: none;
      font-family: Verdana, Arial, Helvetica, sans-serif, "Eras Light ITC";
      font-size: 14px;
      text-align:center;

      }

      #summary a:hover
      {
      color: #FF8080;


      }

      #slideshow
      {
      margin: auto;
      background-repeat: no-repeat;
      height: 456px;
      width:800px;
      background-image: url(headerslideshow/flash1.jpg);
      background-color: #89AFC5;

      }

      #wrapper
      {
      width: 830px;
      margin: auto;
      margin-bottom: 0px;
      margin-top: 0px;
      background-color:#CCD9E1;
      background-image:
      url(background_styling_graphics/wrappershadowbg.gif);
      background-repeat: repeat-y;
      background-position: left;



      }

      #wrappershadow
      {
      float: left;

      }

      #main
      {
      float: right;
      background-color:#CCD9E1;
      }


      #topics
      {
      margin-top: 10px;
      padding-top: 10px;
      width: 780px;
      margin: auto;

      }

      #restaurant_topics
      {


      padding-left: 50px;
      padding-top: 20px;
      background-image: url(background_styling_graphics/bgrestaurants.gif);
      background-repeat: repeat-x;
      background-position: top;

      }

      #restaurant_topics h2
      {

      color:#445A9B;
      font-family: "Times New Roman", Times, serif;
      font-size: 200%;
      font-style: italic;
      letter-spacing: 0.2em;
      border-bottom-width: thin;
      border-bottom-style: solid;
      border-bottom-color: #BBC1D9;
      width: 92%;
      }

      topic
      {
      float: left;



      }

      topic p
      {
      width: 200px;
      font-family: "Trebuchet MS", sans-serif;
      font-size: 0.8em;
      font-style: normal;
      line-height: 1.1em;
      background-image: url(main_images/1topic_bg.gif);
      background-repeat: repeat-y;

      margin: 0px;
      padding-top: 0px;
      padding-right: 20px;
      padding-bottom: 20px;
      padding-left: 20px;
      color: #6070A6;
      }

      topic p a
      {
      text-decoration: none;
      color: #FF8080;

      }

      topic h1
      {
      font-family: Verdana, Arial, Helvetica, sans-serif, "Eras Light ITC";
      font-size: 1em;
      color: #505E8D;
      }

      tenant
      {
      float: left;
      border: medium dotted #BBC1D9;
      padding: 20px;
      margin-bottom: 20px;
      width: 650px;
      background-color: #FFFFFF;

      }

      tenant p
      {

      font-family: "Trebuchet MS", sans-serif;
      font-size: 0.8em;
      font-style: normal;
      line-height: 1.1em;
      background-image: url(main_images/1topic_bg.gif);
      background-repeat: repeat-y;

      margin: 0px;
      padding-top: 0px;
      padding-right: 20px;
      padding-bottom: 20px;
      padding-left: 0px;
      color: #6070A6;
      }

      tenant h1
      {
      font-family: Verdana, Arial, Helvetica, sans-serif, "Eras Light ITC";
      font-size: 1em;
      color: #505E8D;
      }

      tenant img
      {
      position: relative;
      float: left;
      padding-right: 20px;
      }

      #footer
      {
      clear: both;
      background-image: url(main_images/footer.jpg);
      height: 247px;
      width: 800px;
      background-repeat: no-repeat;
      margin: auto;

      }
      #footer_base
      {
      clear: both;
      width: 100%;

      text-align:center;
      padding-bottom: 10px;

      }

      #footer_base p
      {
      width: 100%;

      text-align:center;
      font-size: x-small;

      }

      #footer_base a
      {
      text-decoration: none;
      color: #444760;

      }
      #footer_base a:hover
      {
      text-decoration: none;
      color: #505E8D;
      }

      #menu
      {

      height: 65px;
      width: 100%;
      background-color: #505E8D;
      background-image: url(background_styling_graphics/topband.gif);
      background-repeat: repeat-x;
      text-align: center;




      }

      img
      {
      padding: 10px;
      }

      img_center
      {
      display: block;

      margin: auto;
      margin-top: -27px;
      }

      img_center_2
      {
      display: block;

      margin: auto;
      padding-right: 30px;
      }

      #menu ul
      {

      padding: 10px;
      padding-top: 6px;

      }

      #menu ul li
      {
      display: inline;
      background-image: url(main_images/1menu_hover.gif);
      background-repeat: no-repeat;
      background-position: left center;
      color: #CFE3EC;
      }

      #menu ul li a
      {
      color: #FFFFFF;
      text-decoration: none;
      font-family: Verdana, Arial, Helvetica, sans-serif, "Eras Light ITC";
      font-size: 14px;
      padding-top: 5px;
      padding-right: 15px;
      padding-bottom: 5px;
      padding-left: 15px;

      }

      #menu ul li a:hover
      {
      color: #FF8080;
      background-image: url(main_images/1menu_hover.gif);
      background-repeat: no-repeat;
      background-position: left center;



      }

      #menu ul li a.active
      {

      color: #BDC6D7;
      font-style: normal;

      }

      #seagull
      {
      position: absolute;
      left: 960px;
      bottom: -900px;
      width: 220px;
      height: 180px;
      background-image: url(main_images/seagulls.gif);
      background-repeat: no-repeat;


      }

      #seashell1
      {
      position: absolute;
      left: 0px;
      bottom: -800px;
      width: 220px;
      height: 180px;
      background-image: url(main_images/shell1.jpg);
      background-repeat: no-repeat;

      }

      #seashell2
      {
      position: absolute;
      left: 10px;
      bottom: -650px;
      width: 220px;
      height: 180px;
      background-image: url(main_images/shell2.jpg);
      background-repeat: no-repeat;


      }

      #starfish
      {


      position: absolute;
      left: 0px;
      bottom: -950px;
      width: 220px;
      height: 180px;
      background-image: url(main_images/starfish.jpg);
      background-repeat: no-repeat;

      }

      large p
      {
      font-size: large;
      }


        • 1. Re: Need some advice about cross-browser display
          bregent Most Valuable Participant
          > http://www.sorrentoquay.com.au/new_index.html
          >
          >Here's the CSS:

          Please, if you post the url you don't need to also post the CSS. Those of us using the forum have to scroll about a mile to read scan through the threads.
          • 2. Re: Need some advice about cross-browser display
            Level 7

            oops sorry didn't realise... any way to delete the thread and start it
            again?


            • 3. Re: Need some advice about cross-browser display
              malcster2 Level 1
              a good place to start is to nuetralize the cross browser differences. put this at the top of your css file:


              body { /* set everything to normal to define the base format */
              font: normal 13px/normal Geneva, Arial, Helvetica,
              sans-serif;
              color: #000000;
              margin:0;
              margin-top:2px;
              margin-bottom:2px;
              }


              h1 { font-size: 1.5em; margin: 0 .25em 0.65em 0; }
              h2 { font-size: 1.2em; margin: 0 .25em 0.65em 0; }
              h3 { font-size: 1.1em; margin: 0 .25em 0.4em 0; }

              p, td, th, div, blockquote, ul, li, dl, ol { font-size: 1em; }
              p, td, th, blockquote { margin: 0.5em 0;} /* controls spacing
              between elements */
              • 4. Re: Need some advice about cross-browser display
                Level 7
                No.

                --
                Murray --- ICQ 71997575
                Adobe Community Expert
                (If you *MUST* email me, don't LAUGH when you do so!)
                ==================
                http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                ==================


                "jacqui" <jacqui.3gbxun@no-spam-here.com> wrote in message
                news:jacqui.3gbxun@no-spam-here.com...
                >
                > oops sorry didn't realise... any way to delete the thread and start it
                > again?
                >
                >

                • 5. Re: Need some advice about cross-browser display
                  Level 7
                  jacqui wrote:
                  > Hi, I'm still trying to master css design and having a few problems
                  > getting my pages to look the same on Opera and FF. I'm not sure where
                  > I'm going wrong.
                  >
                  > The site looks pretty much how it's meant to in IE (though still in
                  > draft stage), but all sorts of gaps and spaces appear in the other
                  > browsers that ruin the look.
                  >
                  > Also in the 'restauraunts' 'shopping' and 'things to do' pages the
                  > content drops way down on the page and I don't know why that is
                  > either.

                  This is causing your content to appear way down the page. You have an
                  image which is 916px high in a <div> between the top section and your
                  content?

                  <div id="wrappershadow"><img
                  src="background_styling_graphics/wrappershadow2.gif" alt="sorrento quay
                  hilarys boat harbour" width="27" height="916" /> </div>



                  >
                  > Any advice would be much appreciated. Be gentle, I know I have lots to
                  > learn! : ~
                  >
                  > Link:
                  > http://www.sorrentoquay.com.au/new_index.html
                  >
                  > Here's the CSS:
                  > body
                  > {
                  > background-color:#EDDFD3;
                  > padding: 0px;
                  > margin: 0px;
                  > background-image: url(background_styling_graphics/bodybg.gif);
                  > background-repeat: repeat-x;
                  > }
                  >
                  > a
                  > {
                  > color: #505E8D;
                  > text-decoration: none;
                  > font-family: Verdana, Arial, Helvetica, sans-serif, "Eras Light ITC";
                  > font-size: 14px;
                  > text-align:center;
                  > padding: 10px;
                  > }
                  >
                  > a:hover
                  > {
                  > color: #FF8080;
                  > }
                  >
                  > body,input
                  > {
                  > font-family: Verdana, Arial, Helvetica, sans-serif, "Eras Light ITC";
                  > font-size: 100%;
                  > color: #444760;
                  > }
                  > #tagline
                  > {
                  >
                  > width: 100%;
                  > height: 27px;
                  > text-align:center;
                  > background-image: url(background_styling_graphics/tagline.gif);
                  > background-repeat: repeat-x;
                  > margin: auto;
                  > }
                  > #tagline p
                  > {
                  > font-size: 15px;
                  > color: #808CB7;
                  > font-family: Verdana, Arial, Helvetica, sans-serif, "Eras Light ITC";
                  > letter-spacing: 10px;
                  > padding-top: 5px;
                  > }
                  >
                  >
                  >
                  > #header
                  > {
                  >
                  > position: relative;
                  >
                  >
                  >
                  > background-repeat: repeat;
                  > background-color: #89AFC5;
                  > background-image: url(background_styling_graphics/headerbg.gif);
                  > background-repeat: repeat-x;
                  >
                  > }
                  >
                  >
                  > #summary
                  > {
                  > width: 750px;
                  >
                  > margin: auto;
                  >
                  >
                  >
                  > }
                  >
                  > #summary p
                  > {
                  > line-height: 150%;
                  > padding: 5px;
                  > color:#FFFFFF;
                  >
                  > font-family: "Times New Roman", Times, serif;
                  > font-size: 110%;
                  > font-style: italic;
                  >
                  > letter-spacing: 0.15em;
                  > }
                  >
                  > #summary a
                  > {
                  > color: #FFFFFF;
                  > text-decoration: none;
                  > font-family: Verdana, Arial, Helvetica, sans-serif, "Eras Light ITC";
                  > font-size: 14px;
                  > text-align:center;
                  >
                  > }
                  >
                  > #summary a:hover
                  > {
                  > color: #FF8080;
                  >
                  >
                  > }
                  >
                  > #slideshow
                  > {
                  > margin: auto;
                  > background-repeat: no-repeat;
                  > height: 456px;
                  > width:800px;
                  > background-image: url(headerslideshow/flash1.jpg);
                  > background-color: #89AFC5;
                  >
                  > }
                  >
                  > #wrapper
                  > {
                  > width: 830px;
                  > margin: auto;
                  > margin-bottom: 0px;
                  > margin-top: 0px;
                  > background-color:#CCD9E1;
                  > background-image:
                  > url(background_styling_graphics/wrappershadowbg.gif);
                  > background-repeat: repeat-y;
                  > background-position: left;
                  >
                  >
                  >
                  > }
                  >
                  > #wrappershadow
                  > {
                  > float: left;
                  >
                  > }
                  >
                  > #main
                  > {
                  > float: right;
                  > background-color:#CCD9E1;
                  > }
                  >
                  >
                  > #topics
                  > {
                  > margin-top: 10px;
                  > padding-top: 10px;
                  > width: 780px;
                  > margin: auto;
                  >
                  > }
                  >
                  > #restaurant_topics
                  > {
                  >
                  >
                  > padding-left: 50px;
                  > padding-top: 20px;
                  > background-image: url(background_styling_graphics/bgrestaurants.gif);
                  > background-repeat: repeat-x;
                  > background-position: top;
                  >
                  > }
                  >
                  > #restaurant_topics h2
                  > {
                  >
                  > color:#445A9B;
                  > font-family: "Times New Roman", Times, serif;
                  > font-size: 200%;
                  > font-style: italic;
                  > letter-spacing: 0.2em;
                  > border-bottom-width: thin;
                  > border-bottom-style: solid;
                  > border-bottom-color: #BBC1D9;
                  > width: 92%;
                  > }
                  >
                  > topic
                  > {
                  > float: left;
                  >
                  >
                  >
                  > }
                  >
                  > topic p
                  > {
                  > width: 200px;
                  > font-family: "Trebuchet MS", sans-serif;
                  > font-size: 0.8em;
                  > font-style: normal;
                  > line-height: 1.1em;
                  > background-image: url(main_images/1topic_bg.gif);
                  > background-repeat: repeat-y;
                  >
                  > margin: 0px;
                  > padding-top: 0px;
                  > padding-right: 20px;
                  > padding-bottom: 20px;
                  > padding-left: 20px;
                  > color: #6070A6;
                  > }
                  >
                  > topic p a
                  > {
                  > text-decoration: none;
                  > color: #FF8080;
                  >
                  > }
                  >
                  > topic h1
                  > {
                  > font-family: Verdana, Arial, Helvetica, sans-serif, "Eras Light ITC";
                  > font-size: 1em;
                  > color: #505E8D;
                  > }
                  >
                  > tenant
                  > {
                  > float: left;
                  > border: medium dotted #BBC1D9;
                  > padding: 20px;
                  > margin-bottom: 20px;
                  > width: 650px;
                  > background-color: #FFFFFF;
                  >
                  > }
                  >
                  > tenant p
                  > {
                  >
                  > font-family: "Trebuchet MS", sans-serif;
                  > font-size: 0.8em;
                  > font-style: normal;
                  > line-height: 1.1em;
                  > background-image: url(main_images/1topic_bg.gif);
                  > background-repeat: repeat-y;
                  >
                  > margin: 0px;
                  > padding-top: 0px;
                  > padding-right: 20px;
                  > padding-bottom: 20px;
                  > padding-left: 0px;
                  > color: #6070A6;
                  > }
                  >
                  > tenant h1
                  > {
                  > font-family: Verdana, Arial, Helvetica, sans-serif, "Eras Light ITC";
                  > font-size: 1em;
                  > color: #505E8D;
                  > }
                  >
                  > tenant img
                  > {
                  > position: relative;
                  > float: left;
                  > padding-right: 20px;
                  > }
                  >
                  > #footer
                  > {
                  > clear: both;
                  > background-image: url(main_images/footer.jpg);
                  > height: 247px;
                  > width: 800px;
                  > background-repeat: no-repeat;
                  > margin: auto;
                  >
                  > }
                  > #footer_base
                  > {
                  > clear: both;
                  > width: 100%;
                  >
                  > text-align:center;
                  > padding-bottom: 10px;
                  >
                  > }
                  >
                  > #footer_base p
                  > {
                  > width: 100%;
                  >
                  > text-align:center;
                  > font-size: x-small;
                  >
                  > }
                  >
                  > #footer_base a
                  > {
                  > text-decoration: none;
                  > color: #444760;
                  >
                  > }
                  > #footer_base a:hover
                  > {
                  > text-decoration: none;
                  > color: #505E8D;
                  > }
                  >
                  > #menu
                  > {
                  >
                  > height: 65px;
                  > width: 100%;
                  > background-color: #505E8D;
                  > background-image: url(background_styling_graphics/topband.gif);
                  > background-repeat: repeat-x;
                  > text-align: center;
                  >
                  >
                  >
                  >
                  > }
                  >
                  > img
                  > {
                  > padding: 10px;
                  > }
                  >
                  > img_center
                  > {
                  > display: block;
                  >
                  > margin: auto;
                  > margin-top: -27px;
                  > }
                  >
                  > img_center_2
                  > {
                  > display: block;
                  >
                  > margin: auto;
                  > padding-right: 30px;
                  > }
                  >
                  > #menu ul
                  > {
                  >
                  > padding: 10px;
                  > padding-top: 6px;
                  >
                  > }
                  >
                  > #menu ul li
                  > {
                  > display: inline;
                  > background-image: url(main_images/1menu_hover.gif);
                  > background-repeat: no-repeat;
                  > background-position: left center;
                  > color: #CFE3EC;
                  > }
                  >
                  > #menu ul li a
                  > {
                  > color: #FFFFFF;
                  > text-decoration: none;
                  > font-family: Verdana, Arial, Helvetica, sans-serif, "Eras Light ITC";
                  > font-size: 14px;
                  > padding-top: 5px;
                  > padding-right: 15px;
                  > padding-bottom: 5px;
                  > padding-left: 15px;
                  >
                  > }
                  >
                  > #menu ul li a:hover
                  > {
                  > color: #FF8080;
                  > background-image: url(main_images/1menu_hover.gif);
                  > background-repeat: no-repeat;
                  > background-position: left center;
                  >
                  >
                  >
                  > }
                  >
                  > #menu ul li a.active
                  > {
                  >
                  > color: #BDC6D7;
                  > font-style: normal;
                  >
                  > }
                  >
                  > #seagull
                  > {
                  > position: absolute;
                  > left: 960px;
                  > bottom: -900px;
                  > width: 220px;
                  > height: 180px;
                  > background-image: url(main_images/seagulls.gif);
                  > background-repeat: no-repeat;
                  >
                  >
                  > }
                  >
                  > #seashell1
                  > {
                  > position: absolute;
                  > left: 0px;
                  > bottom: -800px;
                  > width: 220px;
                  > height: 180px;
                  > background-image: url(main_images/shell1.jpg);
                  > background-repeat: no-repeat;
                  >
                  > }
                  >
                  > #seashell2
                  > {
                  > position: absolute;
                  > left: 10px;
                  > bottom: -650px;
                  > width: 220px;
                  > height: 180px;
                  > background-image: url(main_images/shell2.jpg);
                  > background-repeat: no-repeat;
                  >
                  >
                  > }
                  >
                  > #starfish
                  > {
                  >
                  >
                  > position: absolute;
                  > left: 0px;
                  > bottom: -950px;
                  > width: 220px;
                  > height: 180px;
                  > background-image: url(main_images/starfish.jpg);
                  > background-repeat: no-repeat;
                  >
                  > }
                  >
                  > large p
                  > {
                  > font-size: large;
                  > }
                  >
                  >
                  • 6. Re: Need some advice about cross-browser display
                    Level 7
                    Osgood" <notavailable@thisaddress.com> wrote in message
                    news:gbik6c$4ok$1@forums.macromedia.com...
                    >
                    > <div id="wrappershadow"><img
                    > src="background_styling_graphics/wrappershadow2.gif" alt="sorrento quay
                    > hilarys boat harbour" width="27" height="916" /> </div>

                    Hey Osgood:
                    Glad I haven't lost my touch since I've been absent, and picked this up in
                    my first look at the page :-)


                    --
                    Nadia
                    Adobe® Community Expert : Dreamweaver
                    ----------------------------------------
                    CSS Templates |Tutorials |SEO Articles
                    http://www.DreamweaverResources.com
                    ~ Customisation Service Available ~
                    http://www.csstemplates.com.au
                    ----------------------------------------------------
                    Spry Widget Examples
                    http://www.dreamweaverresources.com/spry-widgets/
                    ----------------------------------------------------
                    ~ Forum Posting Guidelines ~
                    http://www.adobe.com/support/forums/guidelines.html
                    CSS Tutorials for Dreamweaver:
                    http://www.adobe.com/devnet/dreamweaver/css.html





                    • 7. Re: Need some advice about cross-browser display
                      Level 7
                      Nadia Perre *ACE* wrote:
                      > Osgood" <notavailable@thisaddress.com> wrote in message
                      > news:gbik6c$4ok$1@forums.macromedia.com...
                      >>
                      >> <div id="wrappershadow"><img
                      >> src="background_styling_graphics/wrappershadow2.gif" alt="sorrento
                      >> quay hilarys boat harbour" width="27" height="916" /> </div>
                      >
                      > Hey Osgood:
                      > Glad I haven't lost my touch since I've been absent, and picked this up
                      > in my first look at the page :-)

                      Hi Nadia,

                      Overlooked that in your post. Where ya been these past months?