5 Replies Latest reply on Jul 6, 2011 2:16 PM by Rezu

    browsers treating img differently

    Rezu Level 1

      Greetings,

       

      I have a website with img tabs whose position is being treated differently by the different browsers. Design was tested using Firefox4. As you can see Firefox4 gets it right...IE9 scrunches the tabs down...Opera creates white space under the img tabs (and Opera doesn't seem to pick up the border-radius, but I'm not so worried about that yet):

      examples.png

       

      You can also test differences by going to kavelookout.com/pilchuck.html

      Look for the img tabs labled 'Trail Stats' and 'Amenities'.

       

      Codes I'm using:

       

      HTML w/style

      <?xml version="1.0" encoding="utf-8"?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">

       

      <div id="tableWrapper">
          <div id="tabHelp"><a id="trailstats" href="./pilchuck/graph.html"><img src="imageshtml/trailstatshorz.png" style="border-style: none; margin: 0px;"/></a></div>
          <div id="tabHelp2"><a id="amenities" href="./pilchuck/amenities.html"><img src="imageshtml/amenitieshorz.png" style="border-style: none; margin: 0px;"/></a></div>

       

       

      CSS...(I also have a global style at the beginning of the css         *{ margin:0; padding:0;}     )

       

      #tableWrapper {
          position: relative;
          width: 770px;
          margin: 0 auto;
      }

       

      div#tabHelp img{
          position: absolute;
          top: 344px;
          left: 540px;
          -webkit-border-radius: 10px;
          border-radius: 7px 7px 0px 0px;
          -moz-border-radius-topleft: 7px;
          -moz-border-radius-topright: 7px;
          behavior: url(/PIE.htc);
      }

       

      div#tabHelp :hover {
          background-color: #CCC;
          box-shadow:         5px 3px 10px 5px #000; /*This is for IE*/
          -moz-box-shadow:    5px 3px 10px 5px #000;
          -webkit-box-shadow: 5px 3px 10px 5px #000;
      }

       

      div#tabHelp2 img{
          position: absolute;
          top: 344px;
          left: 645px;
          -webkit-border-radius: 10px;
          border-radius: 7px 7px 0px 0px;
          -moz-border-radius-topleft: 7px;
          -moz-border-radius-topright: 7px;
          behavior: url(/PIE.htc);
      }

       

      div#tabHelp2 :hover {
          background-color: #CCC;
          box-shadow:         5px 3px 10px 5px #000; /*This is for IE*/
          -moz-box-shadow:     5px 3px 10px 5px #000;
          -webkit-box-shadow: 5px 3px 10px 5px #000;
      }

       

       

      So not only do I have a style in the html, but I also have a css style for each img tab. Is this too much?


      Any help you can give to make the img tabs uniform across the different browsers would be greatly appreciated!

       

      Thanks,

       

      kave

        • 1. Re: browsers treating img differently
          MurraySummers Level 8

          I'd guess this has nothing to do with images, and everything to do with positioning.  I believe what you are seeing is that slider falling higher or lower on the page so that more or less of the vertical height of the tabs is seen.  I'm not sure why this is happening yet - would require more time than I have at the moment, but I'm sure someone else will pick up on this....

          1 person found this helpful
          • 2. Re: browsers treating img differently
            Ben M Adobe Community Professional

            I'm seeing the same thing as Murray on this one.  Nothing to do with the images.  My Firefox 5 shows the Opera spacing with the round corners, and speaking of round corners, why is the -moz border radius different from the -webkit?  That makes no sense.

             

            Personally I'd scrap the IDs and swap them out with classes since you could have the same background images and rollover background images for the tabs.  Then change the images to an unordered list with that class.  Put a container around the list and float:right to get the menu to appear on the right hand side.  I can see no reason why you need absolute positioning on that page, everything seems to flow from top to bottom without the need to throw in an absolute position.  Then if you are targeting newer browsers by using the border-radius you could use the @font-face rule to display custom fonts since your visitors should have newer browsers capable of rendering those fonts.  It's just a matter of whether the font you choose has licensing which allows you to use it on your website or whether you need to substitute in a similar font.

             

            You could probably get away with using the Spry menu or any other CSS menu for that matter.  This isn't the best example, but it gives a very basic display of what I am talking about: http://www.w3schools.com/css/tryit.asp?filename=trycss_float5

             

            There are a couple of coding errors on the page as well but nothing related to the menu (eg: deprecated <center> tag, <div> inside <p> and break written as </br> instead of <br /> - for XHTML).

            1 person found this helpful
            • 3. Re: browsers treating img differently
              MurraySummers Level 8

              I think the whole 'hybrid' table/non-table layout is a bit weird.  It just seems a bit awkward to me....

              • 4. Re: browsers treating img differently
                Ben M Adobe Community Professional

                I agree.  I was only taking a very limited view of the website.  There's no real need for the tables on there, the div's for the layout would work fine.

                 

                Personally speaking I'm not fond of the way the credits for the images are in a tooltip popup at the bottom especially since it's only crediting one person for one picture.  I don't feel there's anything wrong with noting copyrights out in the open on a website where it is due.

                • 5. Re: browsers treating img differently
                  Rezu Level 1

                  Thanks Gents for your comments!

                   

                  @SnakEyez02...thanks for your insight...fixed the -webkit-border-radius error, thanks... I couldn't find the <div> in the <p>...

                   

                  Re: absolute positioning, if I take that away, I get the following...the tabs shoot to the top of the page (that probably has to do with the hybrid nature of the page and not following best practices).

                   

                   

                  @ Murray...So if it's a position issue with the CSS for the slider, here is my code for that (I think you'll only need to look at the top 5 or 6).

                  Tho, I wonder if the the properties for div#mainContent or #mainContent p (located in the main.css) might have some influence?

                   

                   

                  /* bottom center */
                  #slider-container1 .ws_bullets {
                      top:0px;
                      right: 0px;
                  }

                   

                  #slider-container1 {
                  /*    overflow: hidden; */
                      zoom: 1;
                      position: relative;
                      width:720px;
                      height:480px;
                      margin:0 auto;
                      padding: 0px 0px 0px 0px;
                      z-index:100;
                  }

                   

                  #slider-container1 .ws_shadow{
                      width:100%;
                      background: url(./shadow.png) left 100%;
                      height:22px;
                      position: absolute;
                      left:0;
                      bottom:-22px;
                      z-index:-1;
                  }

                   

                  #slider-container1 .ws_images{
                      position: absolute;
                      left:0px;
                      top:0px;
                      width:720px;
                      height:480px;
                      overflow:hidden;
                  }

                   

                  #slider-container1 .ws_images a{
                      color:transparent;
                  }

                   

                  #slider-container1 .ws_images img{
                      top:0;
                      left:0;
                      border:none 0;
                  }

                   

                  #slider-container1 a{
                      text-decoration: none;
                      outline: none;
                      border: none;
                  }

                   

                  #slider-container1  .ws_bullets {
                      font-size: 0px;
                      padding: 10px;
                      float: left;
                      position:absolute;
                      z-index:70;
                  }

                   

                  #slider-container1  .ws_bullets div{
                      position:relative;
                      float:left;
                  }

                   

                  #slider-container1 .ws_bullets a {
                      margin-left:4px;
                      width:8px;
                      height:15px;
                      background: url(bullet.png) left 50% no-repeat;
                      float: left;
                      text-indent: -1000px;
                      position:relative;
                  }

                   

                  #slider-container1 .ws_bullets a.ws_selbull, #slider-container1 .ws_bullets a:hover{
                      background-position: right 50%;
                  }

                   

                  #slider-container1 a.ws_next, #slider-container1 a.ws_prev {
                      position:absolute;
                      display:none;
                      top:50%;
                      margin-top:-28px;
                      z-index:60;
                      height: 62px;
                      width: 38px;
                      background-image: url(arrows.gif);
                      border-radius: 7px; /*arrow corners*/
                  }

                   

                  #slider-container1 a.ws_next{
                      background-position: 100% 0;
                      right:-8px;
                  }
                  #slider-container1 a.ws_prev {
                      left:-8px;
                      background-position: 0 0;
                  }

                   

                  #slider-container1 a.ws_next:hover{
                      background-position: 100% 100%;
                  }

                   

                  #slider-container1 a.ws_prev:hover {
                      background-position: 0 100%;
                  }

                   

                  * html #slider-container1 a.ws_next,* html #slider-container1 a.ws_prev{display:block}

                   

                  #slider-container1:hover a.ws_next, #slider-container1:hover a.ws_prev {display:block}

                   

                  /*lower left black title & info box*/
                  #slider-container1 .ws-title{
                      position: absolute;
                      bottom:50px;
                      left: 0;
                      margin-right:5px;
                      z-index: 50;
                      padding:12px;
                      color: #FFF;
                      text-transform:uppercase;
                      background:#000000;
                      font-family: Helvetica,Arial,Verdana,sans-serif;
                      font-size: 18px;
                      border-radius: 10px;
                      opacity: .7;
                  }

                   

                  #slider-container1 .ws-title div{
                      padding-top:5px;
                      font-size: 13px;
                      text-transform:none;
                  }

                   

                  #slider-container1 .ws_bullets  a img{
                      text-indent:0;
                      display:block;
                      top:16px;
                      left:-68px;
                      visibility:hidden;
                      position:absolute;
                      -moz-box-shadow: 0 0 5px #999999;
                      box-shadow: 0 0 5px #999999;
                      border: 5px solid #FFFFFF;
                  }

                   

                  #slider-container1 .ws_bullets a:hover img{
                      visibility:visible;
                  }

                   

                  #slider-container1 .ws_bulframe div div{
                      height:90px;
                      overflow:visible;
                      position:relative;
                  }

                   

                  #slider-container1 .ws_bulframe div {
                      left:0;
                      overflow:hidden;
                      position:relative;
                      width:135px;
                  }

                   

                  #slider-container1 .ws_bullets .ws_bulframe{
                      display:none;
                      top:20px;
                      overflow:visible;
                      position:absolute;
                      cursor:pointer;
                      -moz-box-shadow: 0 0 5px #999999;
                      box-shadow: 0 0 5px #999999;
                      border: 5px solid #FFFFFF;
                  }

                   

                  #slider-container1 .ws_bulframe span{
                      display:block;
                      position:absolute;
                      top:-11px;
                      margin-left:-9px;
                      left:68px;
                      background:url(triangle.png);
                      width:15px;
                      height:6px;
                  }

                   

                   

                   

                  Thank you much for any thoughts you have!

                   

                  kave