Web Analytics Made Easy -
StatCounter Buttons displaying incorrectly in IE - CodingForum

Announcement

Collapse
No announcement yet.

Buttons displaying incorrectly in IE

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Buttons displaying incorrectly in IE

    On my photo gallery page, the arrow buttons are supposed to show up so that there's one arrow on the left and one arrow on the right. Both should be at the very top of the page. It works fine in Firefox, but in Internet Explorer, the button to the right is down too far. This is the coding:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en">
      <head>
    
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
        <title>{taste of chicago - 2004}</title>
    
        <style type="text/css">
          * {
            margin: 0;
            border-width: 0;
            padding: 0;
            }
          html {
            background-image: url("http://img.photobucket.com/albums/v259/chococatlover43/555531.png");
            color: #fbf7e9;
            font: 12px Verdana, sans-serif;
            }
          h1 {
            font-size: 12px;
            }
          p:last-child, ul:last-child { /* no IE6/7RC1 support for last-child pseudo-element */
            margin-bottom: 0 !important;
            }
          #container {
            width: 510px;
            height: 550px;
            margin: 0 auto;
            padding: 0px 0px 0px;
            background-image: url("http://img.photobucket.com/albums/v259/chococatlover43/gallerybanner.png");
            background-position: top center;
            background-repeat: no-repeat;
            }
          #buttons1 ul, #buttons2 ul, #images ul {
            margin-bottom: 0;
            }
          #buttons1, #buttons2 {
            width: 68px;
            height: 0;
            margin: 0 0 0 0;
            }
          #buttons2 {
            float: right;
            }
          #images {
            margin: 64px 0 0 0;
            }
          #images ul {
            margin-bottom: 1em;
            }
        </style>
      </head>
      <body>
    <div id="container">
          <div id="buttons1">
    <a href="http://www.freewebs.com/brooke-music/taste2004_5.htm"><img src="http://img.photobucket.com/albums/v259/chococatlover43/prev.png"></a>
          </div>
          <div id="buttons2">
    <a href="http://www.freewebs.com/brooke-music/taste2004_2.htm"><img src="http://img.photobucket.com/albums/v259/chococatlover43/next.png"></a>
          </div>
          <div id="images">
    <center><img src="http://freewebs.com/brooke-music/tasteofchicago2004_1.png">
    <h1>Brooke performing on the Comcast Stage</h1>
    </center>
          </div>
          </div> 
      <!-- --><script type="text/javascript" src="/i.js"></script></body>
    </html>
    Here is the page URL: http://www.freewebs.com/brooke-music/taste2004_1.htm

    Can anyone help me fix this problem? Thanks
    "Where words fail, music speaks."
    - Hans Christian Andersen

  • #2
    Try this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="ImageToolBar" content="no">
    <title>{taste of chicago - 2004}</title>
    <style type="text/css">
    * {
    border:0;
    margin:0;
    padding:0;
    }
    
    html,body {
    background:#FFF url(http://img.photobucket.com/albums/v259/chococatlover43/555531.png);
    color:#fbf7e9;
    font:12px Verdana, sans-serif;
    }
    
    h1 {
    font-size:12px;
    }
    
    #container {
    width:510px;
    background:url(http://img.photobucket.com/albums/v259/chococatlover43/gallerybanner.png) top center no-repeat;
    margin:auto;
    }
    
    #buttons1,#buttons2 {
    width:68px;
    line-height:0;
    font-size:0;
    float:left;
    }
    
    #buttons2 {
    float:right;
    }
    
    #images {
    text-align:center;
    clear:both;
    margin:64px 0 0;
    }
    
    #images ul {
    margin-bottom:1em;
    }
    
    .clear {
    clear:both;
    font-size:0;
    line-height:0px;
    }
    </style>
    </head>
    <body>
    <div id="container">
    	<div id="buttons1"> <a href="taste2004_5.htm"><img src="http://img.photobucket.com/albums/v259/chococatlover43/prev.png" width="68" height="44" alt=""></a> </div>
    	<div id="buttons2"> <a href="taste2004_2.htm"><img src="http://img.photobucket.com/albums/v259/chococatlover43/next.png" width="68" height="44" alt=""></a> </div>
    	<div class="clear">&nbsp;</div>
    	<div id="images"> <img src="tasteofchicago2004_1.png" width="434" height="352">
    		<h1>Brooke performing on the Comcast Stage</h1>
    	</div>
    </div>
    </body>
    </html>
    You needed to float the first button or move #buttons2 before #buttons1.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

    Comment


    • #3
      I tried your code on a testing page, and it still did the same thing =/ Plus in your code you gave #blog2 two different floats, a left and a right, but even when I fixed that, it still didn't do anything.
      "Where words fail, music speaks."
      - Hans Christian Andersen

      Comment


      • #4
        I tried the code I gave you and it gave me the same thing in IE and FF. Post a screenshot of what you see. This is what I see with the code above.

        Firefox 1.5.0.7

        IE 6.0


        You don't even have an element with id="blog2" on your page so I'm not sure what you are talking about there.
        ||||If you are getting paid to do a job, don't ask for help on it!||||

        Comment


        • #5
          Sorry about that, I meant buttons2. And nevermind, I think my cookies were causing problems with what I was seeing, and it's working now. Thanks
          "Where words fail, music speaks."
          - Hans Christian Andersen

          Comment


          • #6
            Don't use the center tag. Its deprecated. CSS should be used instead. Notice in the example I gave you I got rid of the center tag and used text-align:center; in CSS. Also you should put alt attributes on all of your images. They can be empty if you like.
            ||||If you are getting paid to do a job, don't ask for help on it!||||

            Comment


            • #7
              Okay, thanks But why do I need alts on all of my images, even if I don't want anything there?
              "Where words fail, music speaks."
              - Hans Christian Andersen

              Comment

              Working...
              X