4 Replies Latest reply on Nov 20, 2009 11:56 AM by orange carrot

    object displaying (floating?) wrong in Safari_ok in firefox

    orange carrot

      Hi,

      In Sarafi (and in ie browser) I've problems with an object floating too far to the right - you can see it here - http://members.shaw.ca/francinesgraphics/ - the 'what we do' text in the box near the middle of the page. (it's really obvious...:)

      This is my first time working in fireworks, I usually work in print design, this is the first time I've worked with css, so it may be a simple solution, I'm thinking (hoping) the solution may be simple, in the floating settings....?

      I'm pasting the css file below...

      Any advice would be greatly appreciated.

      Francine

      body {
          background-color: #ffffff;
          margin:0px;
          padding:0px;
          background-image: url(images/background_3.jpg);
          background-repeat: repeat;
          background-attachment: scroll;
      }
      .p {
          margin:0px;
          padding:0px;
          font-size: inherit;
          font-family: inherit;
          font-weight: inherit;
          text-align: inherit;
          color: inherit;
          line-height: inherit;
          vertical-align: top;
      }
      p {
          padding-top:0px;
          margin-top:0px;
      }
      img {
          border:0px;
      }
      div {
          margin:0px;
          padding:0px;
          font-family:verdana; font-size:12px;
      }
      .AbsWrap {
          width: 100%;
          position: relative;
      }
      .rowWrap {
          width: 100%;
      }
      .clearfloat {
          clear:both;
          height:0px;
      }
      a:link, a:visited{
          COLOR:inherit;
          text-decoration:inherit;
      }
      #main {

       

          width:1255px;
          margin: 0px auto 0px auto;
          border: 0px solid #f0f0f0;

       

      }
      #prch_btn {
          margin-right:144px;
          margin-top:0px;
          width:105px;
          height:27px;
          margin-bottom:0px;
          float:right;
          display:inline;

       

      }
      #cnt_btn {
          margin-right:16px;
          margin-top:0px;
          width:70px;
          height:27px;
          margin-bottom:0px;
          float:right;
          display:inline;

       

      }
      #flts_btn {
          margin-right:14px;
          margin-top:0px;
          width:55px;
          height:27px;
          margin-bottom:0px;
          float:right;
          display:inline;

       

      }
      #prgm_btn {
          margin-right:13px;
          margin-top:0px;
          width:81px;
          height:27px;
          margin-bottom:0px;
          float:right;
          display:inline;

       

      }
      #abt_btn {
          margin-right:17px;
          margin-top:0px;
          width:154px;
          height:27px;
          margin-bottom:0px;
          float:right;
          display:inline;

       

      }
      #bar_top_hdr {
          margin-left:134px;
          margin-top:0px;
          width:978px;
          height:56px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #colwrap1 {
          float:left;
          width:430px;
          margin-top:0px;
          margin-left:0px;
          border: 0px solid #f0f0f0;

       

      }
      #making_logo {
          margin-left:134px;
          margin-top:0px;
          width:296px;
          height:27px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #logo {
          margin-left:143px;
          margin-top:0px;
          width:287px;
          height:153px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      .news {
          margin-left:153px;
          margin-top:2px;
          width:252px;
          margin-bottom:0px;
          float:left;
          display:inline;
          font-size:11px;
          font-family:'', Arial, Helvetica, sans-serif;
          text-align: left;
          color: #ffffff;
          line-height: 109.09089999999999%;
          padding-top:1px;
          padding-bottom:2px;

       

      }
      #donate_sara {
          margin-right:37px;
          margin-top:45px;
          width:51px;
          height:77px;
          margin-bottom:0px;
          float:right;
          display:inline;

       

      }
      #therm {
          margin-right:1px;
          margin-top:10px;
          width:22px;
          height:112px;
          margin-bottom:0px;
          float:right;
          display:inline;

       

      }
      #sara_pic {
          margin-right:1px;
          margin-top:10px;
          width:153px;
          height:117px;
          margin-bottom:0px;
          float:right;
          display:inline;

       

      }
      #slce_fr_slide_show {
          margin-left:26px;
          margin-top:15px;
          width:280px;
          height:420px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #colwrap2 {
          float:left;
          width:361px;
          margin-top:0px;
          margin-left:0px;
          border: 0px solid #f0f0f0;

       

      }
      #car_w_bckgr {
          margin-left:3px;
          margin-top:0px;
          width:358px;
          height:313px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      .more_trs {
          margin-left:309px;
          margin-top:1px;
          width:46px;
          margin-bottom:0px;
          float:left;
          display:inline;
          font-size:9px;
          font-family:'', Arial, Helvetica, sans-serif;
          text-align: center;
          color: #c9db61;
          line-height: 120%;
          padding-top:1px;
          padding-bottom:2px;

       

      }
      #fst_tk_tx_lnk {
          margin-right:39px;
          margin-top:10px;
          width:154px;
          height:13px;
          margin-bottom:0px;
          float:right;
          display:inline;

       

      }
      #arrow_fst_tk {
          margin-right:5px;
          margin-top:6px;
          width:20px;
          height:19px;
          margin-bottom:0px;
          float:right;
          display:inline;

       

      }
      #warp_bck_w_car {
          margin-right:51px;
          margin-top:6px;
          width:159px;
          height:75px;
          margin-bottom:0px;
          float:right;
          display:inline;

       

      }
      #flag_2 {
          margin-right:1px;
          margin-top:0px;
          width:66px;
          height:77px;
          margin-bottom:0px;
          float:right;
          display:inline;

       

      }
      #who_bckgr {
          margin-left:159px;
          margin-top:0px;
          width:271px;
          height:48px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #what_bckgr {
          margin-left:197px;
          margin-top:0px;
          width:271px;
          height:48px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #left_grn_text_bx {
          margin-left:153px;
          margin-top:0px;
          width:470px;
          height:303px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #colwrap3 {
          float:left;
          width:478px;
          margin-top:0px;
          margin-left:0px;
          border: 0px solid #f0f0f0;

       

      }
      #right_grn_txt_bx {
          margin-left:4px;
          margin-top:0px;
          width:474px;
          height:45px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #colwrap5 {
          float:left;
          width:321px;
          margin-top:0px;
          margin-left:0px;
          border: 0px solid #f0f0f0;

       

      }
      #index_r22_c35 {
          margin-left:4px;
          margin-top:0px;
          width:317px;
          height:82px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #colwrap7 {
          float:left;
          width:314px;
          margin-top:0px;
          margin-left:0px;
          border: 0px solid #f0f0f0;

       

      }
      #index_r23_c35 {
          margin-left:4px;
          margin-top:0px;
          width:166px;
          height:42px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #prchs_btn {
          margin-left:0px;
          margin-top:0px;
          width:144px;
          height:42px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #index_r24_c35 {
          margin-left:4px;
          margin-top:0px;
          width:22px;
          height:134px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #colwrap9 {
          float:left;
          width:179px;
          margin-top:0px;
          margin-left:0px;
          border: 0px solid #f0f0f0;

       

      }
      #rgstr_bx {
          margin-left:0px;
          margin-top:0px;
          width:179px;
          height:37px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #index_r27_c37 {
          margin-left:0px;
          margin-top:0px;
          width:179px;
          height:97px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #index_r24_c52 {
          margin-left:0px;
          margin-top:0px;
          width:109px;
          height:134px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #index_r23_c67 {
          margin-left:0px;
          margin-top:0px;
          width:7px;
          height:176px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #colwrap8 {
          float:left;
          width:139px;
          margin-top:0px;
          margin-left:0px;
          border: 0px solid #f0f0f0;

       

      }
      #trtle_pic {
          margin-left:0px;
          margin-top:0px;
          width:139px;
          height:135px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #index_r25_c68 {
          margin-left:0px;
          margin-top:0px;
          width:139px;
          height:9px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #index_r26_c68 {
          margin-left:0px;
          margin-top:0px;
          width:37px;
          height:114px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #colwrap10 {
          float:left;
          width:86px;
          margin-top:0px;
          margin-left:0px;
          border: 0px solid #f0f0f0;

       

      }
      #wrnty_bx {
          margin-left:0px;
          margin-top:0px;
          width:86px;
          height:35px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #index_r28_c71 {
          margin-left:0px;
          margin-top:0px;
          width:86px;
          height:79px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #index_r26_c83 {
          margin-left:0px;
          margin-top:0px;
          width:16px;
          height:114px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #index_r22_c85 {
          margin-left:0px;
          margin-top:0px;
          width:18px;
          height:258px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #flag_4 {
          margin-left:390px;
          margin-top:0px;
          width:78px;
          height:24px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #tab_mnu_ctn_bckg {
          margin-left:153px;
          margin-top:0px;
          width:112px;
          height:37px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #tab_mnu_scnce {
          margin-left:0px;
          margin-top:0px;
          width:132px;
          height:37px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #tab_mnu_fst_tk {
          margin-left:0px;
          margin-top:0px;
          width:124px;
          height:37px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #tab_mnu_flts {
          margin-left:0px;
          margin-top:0px;
          width:111px;
          height:37px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #tab_mnu_lnks {
          margin-left:0px;
          margin-top:0px;
          width:131px;
          height:37px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #tab_mnu_buy {
          margin-left:0px;
          margin-top:0px;
          width:112px;
          height:37px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #tab_mnu_cnt {
          margin-left:0px;
          margin-top:0px;
          width:138px;
          height:37px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #dlmn_pic {
          margin-left:153px;
          margin-top:0px;
          width:248px;
          height:178px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #glbl_wrm_pic {
          margin-left:0px;
          margin-top:0px;
          width:231px;
          height:178px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #puma_pic {
          margin-left:0px;
          margin-top:0px;
          width:243px;
          height:178px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #trees_pic {
          margin-left:0px;
          margin-top:0px;
          width:227px;
          height:178px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #fst_tk_btm {
          margin-left:143px;
          margin-top:10px;
          width:200px;
          height:54px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #fst_tk_car {
          margin-left:0px;
          margin-top:10px;
          width:81px;
          height:54px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #fst_tk_flts {
          margin-left:0px;
          margin-top:10px;
          width:101px;
          height:54px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #blog {
          margin-left:51px;
          margin-top:25px;
          width:173px;
          height:122px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #social {
          margin-left:968px;
          margin-top:10px;
          width:74px;
          height:6px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #utbe {
          margin-right:171px;
          margin-top:5px;
          width:68px;
          height:30px;
          margin-bottom:0px;
          float:right;
          display:inline;

       

      }
      #fcebk {
          margin-right:14px;
          margin-top:7px;
          width:75px;
          height:29px;
          margin-bottom:0px;
          float:right;
          display:inline;

       

      }
      #questions {
          margin-right:150px;
          margin-top:20px;
          width:210px;
          height:11px;
          margin-bottom:0px;
          float:right;
          display:inline;

       

      }
      #mnu_btm_dwnlds {
          margin-left:196px;
          margin-top:16px;
          width:90px;
          height:22px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #mnu_btm_prgm {
          margin-left:21px;
          margin-top:16px;
          width:79px;
          height:22px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #mnu_btm_abt {
          margin-left:17px;
          margin-top:16px;
          width:65px;
          height:22px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #mnu_btm_cnt {
          margin-left:14px;
          margin-top:16px;
          width:94px;
          height:22px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #mnu_btm_wrnty {
          margin-left:22px;
          margin-top:16px;
          width:76px;
          height:22px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #mnu_btm_prvcy {
          margin-left:23px;
          margin-top:16px;
          width:115px;
          height:22px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #mnu_btm_ste_mp {
          margin-left:25px;
          margin-top:16px;
          width:71px;
          height:22px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #mnu_btm_lnks {
          margin-left:17px;
          margin-top:16px;
          width:50px;
          height:22px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #mnu_btm_gllry {
          margin-left:15px;
          margin-top:16px;
          width:67px;
          height:22px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #mailng {
          margin-left:240px;
          margin-top:11px;
          width:140px;
          height:9px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #mail_addrs {
          margin-left:14px;
          margin-top:10px;
          width:170px;
          height:38px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #main_off {
          margin-left:181px;
          margin-top:10px;
          width:60px;
          height:9px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }
      #cstr_rca_adress {
          margin-left:9px;
          margin-top:10px;
          width:172px;
          height:61px;
          margin-bottom:0px;
          float:left;
          display:inline;

       

      }

        • 1. Re: object displaying (floating?) wrong in Safari_ok in firefox
          pixlor Level 4

          It won't be just the CSS, it will also be the HTML that you are styling with the CSS.

           

          And...practically everything you have is an image. This is not a search engine-friendly Web page. Here is the only text that appears on your page:

          News from the nursery

          New! CO2 Tropical Trees e-book

          12 ways to Reduce Your Carbon Footprint

          download-pdf

          Natural Reserve News;

          Sara - baby jaguar rescued from illegal capitvity

          That's it. The ranking your page will get will be extremely low, because you have such limited text.

           

          I appreciate that coming from the print world you're used to laying out your images and information in a WYSIWYG application and producing a document that faithfully represents your layout. Web design and development is different. You don't go to print, you go to code, then that code is rendered and interpreted by browsers. Since there are multiple ways of coding any design, the ability for a graphics application to produce code is extremely limited. That's why code from Fireworks is referred to as a prototype or a mockup. The expected work flow is design in Fireworks, code in Dreamweaver. But you need to know how to produce the code.

           

          Where you can produce images for a print layout, you want to keep as much textual information as text for a Web page. Humans can read text in images, computers generally don't. Search engines do not. For instance, everything at the bottom of the page starting with "Questions?" can and should be be kept as text. It would probably be a good idea to have your "Fast Track your car" tag line to be in text so that people could find you with it. As it stands now, they won't be able to.

           

          Here are a couple of excellent tutorials on building CSS-based Web pages. You might want to go through them so that you understand the issues you're facing.

          http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-i n-easy-to-understand-steps/ (author uses Photoshop for the graphics, but Fireworks is fine)

          http://articles.sitepoint.com/article/html-css-beginners-guide

           

          Or, you might want to hire a Web developer to translate your design into code for you.

          • 2. Re: object displaying (floating?) wrong in Safari_ok in firefox
            orange carrot Level 1

            Thanks for your message. I do understand that I want to get the text in as text I can make my way around in html, but css is very confusing to me, so that's why I've tried using fireworks...

            I'm thinking that I should be able to take this design through fireworks, making changes so that my text is intact when I take it into dreamweaver.

            Do you think this would be the wrong approach with this 'pretty complex' design? (maybe I'm better off not using fireworks?)

            thanks,

            Francine

            • 3. Re: object displaying (floating?) wrong in Safari_ok in firefox
              pixlor Level 4

              Fireworks isn't going to give you a leg up with CSS. It isn't an HTML/CSS authoring environment. It's a graphics program with HTML/CSS export capability for prototyping purposes. Dreamweaver is the HTML/CSS authoring environment. But it's still Web development and that means you still need to know what you're doing. Dreamweaver has some default CSS layouts. If there's one that's exactly what you want, then great. Otherwise, you're going to have to build from scratch.

               

              I found this book to be nicely written: http://www.sitepoint.com/books/css2/ (Unfortunately for me, I bought the first edition right before they published the second! ) You can get it in PDF format if you want it right away.

               

              I'm not so sure your layout is excessively complicated. Let's see...you need to learn how to make rounded corners. I don't use them, myself, but there are a few methods. Just use your favorite search engine and look for "CSS rounded corners tutorial." Other elements are easily handled by putting background images on divs and text in paragraphs within the divs. Depending on how you do the rounded corners, the blocks under What We Do and Who We Are may need to be in nested divs: a containing div, then a top, middle, and bottom within the containing div. Or, set scrolling on the div so that if the visitor sets the font size larger and it would over flow the box, there's a mechanism.

               

              The whole layout as it is, however, is badly broken. I have a 21" widescreen monitor and if I view this page full screen (Chrome or IE), your content expands horizontally when it should be fixed-width. You really need to trash this code and start over. I strongly recommend working through the nettuts plus tutorial. It's excellent and will cover many of the techniques you need for this design.

               

              Good luck!

              • 4. Re: object displaying (floating?) wrong in Safari_ok in firefox
                orange carrot Level 1

                Okay, thanks a million for your advice!