9 Replies Latest reply on Oct 12, 2006 10:00 AM by OscarSSS

    I need help with div id tags

    OscarSSS
      Can you take a look to my website , I cannot it to display correctly on on firefox or safari. On IE looks the way I want to, but onthe other two browser it don't. this is the wesite www.thecooltown.com , and I am attaching the css code so you can see whats is wrong.
      I will really appresiate your help.
      Thanks!!!
        • 1. Re: I need help with div id tags
          Level 7
          I tried to view your site but the overly-loud, annoying music drove me away.


          "OscarSSS" <webforumsuser@macromedia.com> wrote in message
          news:egj27m$f9l$1@forums.macromedia.com...
          > Can you take a look to my website , I cannot it to display correctly on
          > on
          > firefox or safari. On IE looks the way I want to, but onthe other two
          > browser
          > it don't. this is the wesite www.thecooltown.com , and I am attaching the
          > css
          > code so you can see whats is wrong.
          > I will really appresiate your help.
          > Thanks!!!
          >
          >
          > body {
          > margin: 0;
          > padding: 0;
          > text-align: center;
          > background-image: url(../images/bg.jpg);
          > }
          > #wrapper {
          > width: 800px;
          > position: relative; /*we need to position this relatively to contain our
          > absolutely positioned nav div*/
          > text-align: left; /*re-aligns the text after the hack on the body*/
          > background-image: url(../images/bg_image.gif);
          > background-repeat: repeat-y;
          > height: 200px;
          > margin-top: 20px;
          > margin-right: auto;
          > margin-bottom: 0;
          > margin-left: auto;
          > }
          >
          > #nav {
          > position: static;
          > top: 0;
          > left: 0;
          > width: 100px;
          > height: auto;
          > float: left;
          > padding-right: 20px;
          > }
          > #leftcontent {
          > float: left;
          > width: 480px;
          > padding-left: 0px;
          > }
          > leftmenu {
          > height: auto;
          > width: 125px;
          > }
          >
          >
          >
          > #content {
          > width: 771px;
          > margin-top: 0;
          > margin-right: 0px;
          > margin-bottom: 0;
          > margin-left: 0px;
          > clip: rect(auto,auto,auto,auto);
          > background-image: url(../images/00-home_bigger_bar.gif);
          > background-repeat: repeat-y;
          > padding-top: 15px;
          > height: 800px;
          > background-color: #BA0000;
          > }
          > #leftcolumn {
          > background-color: #BA0000;
          > float: left;
          > height: auto;
          > width: 100px;
          > margin-left: 3px;
          > }
          >
          > #wrapper2 {
          >
          > width: 800px;
          > position: relative; /*we need to position this relatively to contain our
          > absolutely positioned nav div*/
          > text-align: left; /*re-aligns the text after the hack on the body*/
          > background-image: url(../images/bg_image.gif);
          > background-repeat: repeat-y;
          > height: 400px;
          > margin-top: 20px;
          > margin-right: auto;
          > margin-bottom: 0;
          > margin-left: auto;
          > }
          > #wrappertop {
          > width: 800px;
          > position: relative; /*we need to position this relatively to contain our
          > absolutely positioned nav div*/
          > text-align: left;
          > height: 30px;
          > margin-top: 20px;
          > margin-right: auto;
          > margin-bottom: 0;
          > margin-left: auto;
          > background-image: url(../images/home_top.gif);
          > }
          > #rightcontent {
          > float: right;
          > width: 245px;
          > margin-top: 0px;
          > padding-right: 65px;
          > border-left-style: solid;
          > padding-left: 5px;
          > border-left-width: 1px;
          > border-left-color: #8F6C01;
          > }
          >
          > #wrappermain {
          > width: 800px;
          > position: relative; /*we need to position this relatively to contain our
          > absolutely positioned nav div*/
          > text-align: left;
          > height: 266px;
          > margin-top: 0px;
          > margin-right: auto;
          > margin-bottom: 0;
          > margin-left: auto;
          > background-image: url(Villa%20Urquiza);
          > }
          > #wrappernav {
          > width: 771px;
          > position: relative; /*we need to position this relatively to contain our
          > absolutely positioned nav div*/
          > text-align: left;
          > height: 30px;
          > margin-top: 0px;
          > margin-right: auto;
          > margin-bottom: 0;
          > margin-left: auto;
          > }
          > #wrappercontent {
          > width: 800px;
          > position: relative; /*we need to position this relatively to contain our
          > absolutely positioned nav div*/
          > text-align: left;
          > height: 600px;
          > margin-top: 0px;
          > margin-right: auto;
          > margin-bottom: 0;
          > margin-left: auto;
          > visibility: inherit;
          > }
          > #wrapperbottom {
          > width: 771px;
          > position: relative; /*we need to position this relatively to contain our
          > absolutely positioned nav div*/
          > text-align: left;
          > height: 20px;
          > margin-top: 0px;
          > margin-right: auto;
          > margin-bottom: 0;
          > margin-left: auto;
          > background-image: url(../images/00-home_bigger_bottom.gif);
          > float: left;
          > }
          > #wrappercontent_top {
          > width: 770px;
          > height: 18px;
          > }
          >
          > #rightcolumn {
          > position: relative;
          > width: 200px;
          > height: auto;
          > margin-left: 0px;
          > left: 450;
          > }
          > #gallerycontent {
          >
          > float: left;
          > width: 480px;
          > padding-left: 80px;
          > }
          > #rightcontent_galleries {
          > float: right;
          > width: 262px;
          > margin-top: 0px;
          > padding-right: 0px;
          > border-left-style: solid;
          > padding-left: 5px;
          > border-left-width: 1px;
          > border-left-color: #8F6C01;
          > clear: right;
          > margin-right: auto;
          > }
          > #rightcontent_galleries_bottom {
          >
          >
          > float: right;
          > width: 145px;
          > margin-top: 0px;
          > padding-right: 0px;
          > border-left-style: solid;
          > padding-left: 5px;
          > border-left-width: 1px;
          > border-left-color: #8F6C01;
          > }
          > #leftcontent2 {
          > float: left;
          > width: 220px;
          > padding-left: 10px;
          > font-family: Verdana, Arial, Helvetica, sans-serif;
          > font-size: 70%;
          > color: #ffa800;
          > background-repeat: no-repeat;
          > background-position: center bottom;
          > }
          > #leftcontent3 {
          > float: left;
          > width: 460px;
          > font-family: Verdana, Arial, Helvetica, sans-serif;
          > font-size: 70%;
          > color: #FFA500;
          > margin-right: 20px;
          > margin-left: 20px;
          > margin-top: 10px;
          > }
          > #leftcontent3_more {
          > float: right;
          > width: 150px;
          > font-family: Verdana, Arial, Helvetica, sans-serif;
          > font-size: 70%;
          > color: #FFA500;
          > margin-right: 10px;
          > margin-left: 60px;
          > margin-top: 0px;
          > }
          > #leftcontent_pic {
          > float: left;
          > width: 180px;
          > font-family: Verdana, Arial, Helvetica, sans-serif;
          > font-size: 70%;
          > color: #FFA500;
          > margin-right: 20px;
          > margin-left: 20px;
          > margin-top: 0px;
          > border: thin solid #FFA500;
          > height: 180px;
          > }
          > #leftcontent_pic2 {
          > float: left;
          > width: 180px;
          > font-family: Verdana, Arial, Helvetica, sans-serif;
          > font-size: 70%;
          > color: #FFA500;
          > margin-right: 20px;
          > margin-left: 20px;
          > margin-top: 0px;
          > border: thin solid #FFA500;
          > height: 180px;
          > }
          > #leftcontent4_more {
          >
          > float: right;
          > width: 150px;
          > font-family: Verdana, Arial, Helvetica, sans-serif;
          > font-size: 70%;
          > color: #FFA500;
          > margin-right: 10px;
          > margin-left: 60px;
          > margin-top: 0px;
          > }
          > #leftcontent1 {
          >
          > float: left;
          > width: 480px;
          > padding-left: 0px;
          > }
          > #rightcolumn1 {
          >
          > background-color: #BA0000;
          > float: right;
          > height: auto;
          > width: 100px;
          > margin-left: 3px;
          > }
          > #leftcontent1_0 {
          > float: left;
          > width: 470px;
          > padding-left: 0px;
          > margin-left: 10px;
          > }
          > a:link {
          > color: #FFFF00;
          > }
          > a:visited {
          > color: #FFA800;
          > }
          > a:hover {
          > color: #FFFF80;
          > }
          > #wrappercontent_top_welcome {
          > width: 770px;
          > height: 30px;
          > background-image: url(../images/welcome.gif);
          > background-repeat: no-repeat;
          > background-position: left;
          > background-color: #BA0000;
          > }
          > #leftcontent1_date {
          > float: left;
          > width: 200px;
          > padding-left: 0px;
          > margin-left: 10px;
          > font-family: Verdana, Arial, Helvetica, sans-serif;
          > font-size: 80%;
          > color: #FFA800;
          > padding-top: 5px;
          > margin-top: 5px;
          > }
          > #wrappercontent_top_clubs {
          >
          > width: 770px;
          > height: 55px;
          > background-image: url(../images/clubs_graph.gif);
          > background-repeat: no-repeat;
          > background-position: left;
          > }
          > #leftcontent_double {
          >
          > float: left;
          > width: 120px;
          > padding-left: 10px;
          > font-family: Verdana, Arial, Helvetica, sans-serif;
          > font-size: 70%;
          > color: #ffa800;
          > }
          > #leftcontent_double2 {
          >
          >
          > float: left;
          > width: 120px;
          > padding-left: 10px;
          > font-family: Verdana, Arial, Helvetica, sans-serif;
          > font-size: 70%;
          > color: #ffa800;
          > }
          > #wrappercontent_top_eatdrink {
          >
          >
          > width: 770px;
          > height: 65px;
          > background-image: url(../images/eatNdrink_graph.gif);
          > background-repeat: no-repeat;
          > background-position: left;
          > }
          > #wrappercontent_top_articles {
          >
          >
          >
          > width: 770px;
          > height: 65px;
          > background-image: url(../images/articles_n_more.gif);
          > background-repeat: no-repeat;
          > background-position: left;
          > }
          > #wrappercontent_top_horoscope {
          >
          >
          >
          >
          > width: 770px;
          > height: 65px;
          > background-image: url(../images/horoscope.gif);
          > background-repeat: no-repeat;
          > background-position: left;
          > }
          > #leftcontent1_zodi {
          >
          > float: left;
          > width: 250px;
          > padding-left: 70px;
          > margin-left: 10px;
          > }
          > #leftcontent1_zodi_content {
          > float: left;
          > width: 460px;
          > padding-left: 20px;
          > font-family: Verdana, Arial, Helvetica, sans-serif;
          > font-size: 80%;
          > color: #ffa800;
          > }
          > #leftcontent1_eat_content {
          >
          > float: left;
          > width: 350px;
          > padding-left: 20px;
          > font-family: Verdana, Arial, Helvetica, sans-serif;
          > font-size: 80%;
          > color: #ffa800;
          > }
          > #leftcontent1_circles {
          >
          >
          > float: left;
          > width: 480px;
          > padding-left: 0px;
          > }
          >


          • 3. Re: I need help with div id tags
            OscarSSS Level 1
            Please, I need help from somebody that does not mind noisy-loud websites.
            • 4. Re: I need help with div id tags
              Level 7
              Short of doing a major overhaul of the whole page, you might try just
              fussing with the left margin (maybe loosing the padding first?) of the DIV
              containing the text that is overlapping the OUR POLLS box in Firefox. It
              probably won't look exactly the same in IE, but at least you won't get the
              overlapping.


              • 5. Re: I need help with div id tags
                Level 7
                Sorry Oscar, I didn't mean to be flippant.
                You need better info than I give you, but try adding margin-left to your
                #leftcontent2 (play with the number)

                #leftcontent2 {
                float: left;
                width: 220px;
                padding-left: 10px;
                font-family: Verdana, Arial, Helvetica, sans-serif;
                font-size: 70%;
                color: #ffa800;
                margin-left: 50px; <--- ADD A MARGIN HERE

                Like I say though, it's worth waiting for somebody else

                --
                Jo




                "OscarSSS" <webforumsuser@macromedia.com> wrote in message
                news:egjkkn$7tv$1@forums.macromedia.com...
                > Please, I need help from somebody that does not mind noisy-loud
                > websites.


                • 6. Re: I need help with div id tags
                  OscarSSS Level 1
                  There is not problem, actually thanks for taking your time to check my website. The problem with the overlapping is solve thanks to your suggestion on the left margin of the div #leftcontent2 ; however, I have a problem with the graph o the botton it displays no were it should be, and if you see on every page the wrapper does not resize automaticly as it does in EI, instead, it is like if it has a set height. Can you help me with that.
                  Thanks!!!
                  • 7. Re: I need help with div id tags
                    OscarSSS Level 1
                    I am really worry about my website note being able to display correctly, can anybody help me with the div tags.
                    Thanks You
                    • 8. Re: I need help with div id tags
                      Level 7
                      Sorry Oscar, you need somebody better than I, but I think you need to clear
                      some floats. I'll have a look but hope somebody comes along to sort you
                      out.
                      Your page, as Alan Smithee Jr said, does unfortunately need a major
                      overhaul.

                      --
                      Jo



                      "OscarSSS" <webforumsuser@macromedia.com> wrote in message
                      news:egjnu3$biv$1@forums.macromedia.com...
                      > There is not problem, actually thanks for taking your time to check my
                      > website.
                      > The problem with the overlapping is solve thanks to your suggestion on the
                      > left
                      > margin of the div #leftcontent2 ; however, I have a problem with the graph
                      > o
                      > the botton it displays no were it should be, and if you see on every page
                      > the
                      > wrapper does not resize automaticly as it does in EI, instead, it is like
                      > if it
                      > has a set height. Can you help me with that.
                      > Thanks!!!
                      >


                      • 9. Re: I need help with div id tags
                        OscarSSS Level 1
                        I see, thank you for checked it out!!