5 Replies Latest reply on May 5, 2010 12:23 PM by thuy.copeland

    display different Firefox & IE

    poorlostsoul

      Could someone give tell me what to look for in my stylesheet to get IE and Firefox to behave similarly. When I look at my form in Firefox the positioning is how I want it to display but in IE the form is positioned to the far right edge of the screen. I haven't been able to ge them to match up. What should styles should I change?

       

       

       

      #form_rightside {

       

      font-family: Verdana, Geneva, sans-serif;

       

      font-size: 10px;

       

      font-style: normal;

       

      font-weight: normal;

       

      background-color: #CCC;

       

      float: left;

       

      position: relative;

       

      margin-left: 20px;

       

      margin-top: 20px;

       

      border:3px solid #903;

       

      color: #903;

       

      clear: none;

       

      }

        • 1. Re: display different Firefox & IE
          thuy.copeland Level 2

          Can you post the HTML too? Your CSS looks correct.


          1 person found this helpful
          • 2. Re: display different Firefox & IE
            poorlostsoul Level 1

            I noticed that my div named "container" which holds the content within the entire page has a green squiggly line and when you hover over it the error message says that "Any content that doesn't fit in a fix width or height box causes the box to expand to fit the content rather than letting the content overflow.  I've set the width of the entire page to 791px but I don't see where I'm infringing on that. Do you still want me to post the html or can you see what I'm doing wrong from the style sheet?

             

            #container {
            width: 791px;
            background-image: url(assets/wood_background.jpg);
            }
            #contact_leftside {
            float:left;
            margin-bottom: 50px;
            clear: right;
            font-size: 12px;
            position: relative;
            }
            #form_rightside {
            font-family: Verdana, Geneva, sans-serif;
            font-size: 10px;
            font-style: normal;
            font-weight: normal;
            background-color: #CCC;
            float: left;
            position: relative;
            margin-left: 20px;
            margin-top: 20px;
            border:3px solid #903;
            color: #903;
            clear: right;
            }

            #contact_leftside {
            font-family: Verdana, Geneva, sans-serif;
            background-image: url(assets/wood_background.jpg);
            font-size: 16px;
            font-style: normal;
            line-height: 22px;
            font-weight: bold;
            color: #009;
            background-color: #FFF;
            padding-bottom: 50px;
            float: left;
            clear: none;
            }
            .backgroundcolor1 {
            background-color: #d6d6d6;
            }
            .backgroundcolor2 {
            background-color: #CCCCCC;
            }

            • 3. Re: display different Firefox & IE
              thuy.copeland Level 2

              Please post your HTML. It's difficult for me to tell where the problem is without it. HTML is like the walls and foundation to your house - the CSS is more like the wall paper and furniture arrangements. Posting just the CSS is like asking, "Why is there a water stain on my wallpaper?" and not examining the roof for a leak.

              1 person found this helpful
              • 4. Re: display different Firefox & IE
                poorlostsoul Level 1

                Ok, will this help?

                 

                **** UPDATE I think I fixed, I'm not sure what I did exactly but it had something to do with the width of the form and the width of the div that the form was in. I gave the div a new width and then I dragged the leftside of the form table to the left and it seemed to correct the positionioning.

                 

                Thanks for your help.

                 

                <div id="contact_leftside">
                  <p>For any additional information
                    about our services, or if you<br/>
                    have a general inquiry, please<br />
                    contact us at:
                  </p>
                  <p class="center">
                    Bikes In Miami<br />
                    619 South Java Road<br/ >
                    Miami, FL 33146<br />
                    Ph: 958-429-1146
                    </p>
                  <span>
                    Or simply fill out the form to<br />
                    the right and we'll be happy<br />
                    to respond to your questions.
                    <br />
                    <br />
                   
                    Winter Business Hours:<br />
                    <br />
                    <span class="center">Tuesday through Friday<br />
                    12 pm to 5 pm.<br />
                    Saturday<br />
                  10 am to 5 pm.</span> </span></div>
                <!-- end #contact_leftside -->
                 
                <div id="form_rightside"  >
                  <form id="feedback" name="feedback" method="post" action="">
                    <table width="100%" border="0" cellspacing="0" cellpadding="1">
                      <tr align="left" valign="top" bgcolor="#CCCCCC" bordercolor="#FFFFFF">
                        <td colspan="2" align="left" bgcolor="#CCCCCC"> <font face="Verdana, Arial, Helvetica, sans-serif"><font size="3"><strong>Name:</strong></font> <font color="#0C3727"><b><font color="#0C3727"><br>
                          <input type="text" name="name" size="25">
                          </font></b></font></font></td>
                        <td width="42%"> </td>
                        </tr>
                      <tr align="left" valign="top" bgcolor="#d6d6d6" bordercolor="#FFFFFF">
                        <td colspan="2" align="left"> <font face="Verdana, Arial, Helvetica, sans-serif" size="3"><strong>Address:</strong></font><font color="#0C3727"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="3"><br>
                          </font></b>
                          <input name="address" type="text" id="address" size="25">
                          </font></td>
                        <td> </td>
                        </tr>
                      <tr align="left" valign="top" bgcolor="#FFFFFF" bordercolor="#FFFFFF">
                        <td width="35%" bgcolor="#CCCCCC"> <font face="Verdana, Arial, Helvetica, sans-serif" size="3"><strong>City:</strong></font>          <font color="#0C3727">                                         
                            <input type="TEXT" name="city" size="25">
                          </font></td>
                        <td width="28%" bgcolor="#CCCCCC"><div align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="3"><strong>State:</strong></font><font color="#0C3727"><br>
                          <input type="TEXT" name="state" size="3">
                          </font></div></td>
                        <td width="32%" bgcolor="#CCCCCC"><font face="Verdana, Arial, Helvetica, sans-serif" size="3"><strong>Zip
                          Code:</strong></font><font color="#0C3727"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="3"><br>
                            </font></b>
                            <input type="TEXT" name="zip" size="10">
                          </font></td>
                        </tr>
                      <tr bgcolor="d6d6d6">
                        <td colspan="2" align="LEFT" bgcolor="#d6d6d6"><font face="Verdana, Arial, Helvetica, sans-serif"><font size="3"><strong>Email:</strong></font></font><font color="#0C3727"><br>
                          <input type="text" name="email" size="25">
                          </font></td>
                        <td align="LEFT"><font face="Verdana, Arial, Helvetica, sans-serif"><font size="3"><strong>Phone:<br>
                          </strong></font></font>          <font color="#0C3727">
                            <input type="text" name="phone" size="15">
                            </font></td>
                        </tr>
                      <tr align="left" valign="top" bgcolor="#CCCCCC" bordercolor="#FFFFFF">
                        <td colspan="3" align="left">
                          <div align="center"><font face="Verdana, Arial, Helvetica, sans-serif"><font size="3"><strong>Comments:</strong></font><font color="#0C3727"><br>
                            <textarea name="comments" rows="7" cols="35"></textarea>
                            </font></div>
                          </td>
                        </tr>
                      <tr align="left" valign="top" bordercolor="#FFFFFF" bgcolor="d6d6d6">
                        <td colspan="3" align="left" valign="top">
                          <p align="center">
                            <input type="submit" name="Submit" id="Submit" value="Submit" />
                            <input type="reset" name="Reset" id="button" value="Reset" />
                            </p>
                          </td>
                        </tr>
                      </table>
                    </form>
                </div><!-- end #form_rightside -->
                </span>

                <img src="assets/gradient.png" width="583" height="8" class="horizontalrule" />
                <!-- end #maincontenFormPage -->
                <p class="textnavlinks"><a href="index.html" class="textnavlinks">HOME</a> | <a href="bicycle.html" class="textnavlinks">BICYCLES</a> | <a href="accessories.html" class="textnavlinks">ACCESSORIES</a> | <a href="services.html" class="textnavlinks">SERVICES</a> | <a href="choosing_a_bike.html" class="textnavlinks">CHOOSING A BIKE</a> | <a href="bikelinks.html" class="textnavlinks">LINKS</a> | <a href="form.html" class="textnavlinks">CONTACT US</a></p>
                <div id="footer">
                <br /><!-- #BeginLibraryItem "/Library/contact_info.lbi" --><style type="text/css">
                <!--
                .contact_color {
                color: #FFF;
                font-size: 14px;
                font-style: normal;
                line-height: normal;
                font-family: Arial, Helvetica, sans-serif;
                font-weight: bold;
                }
                -->
                </style>
                <span class="contact_color">Bikes In Miami<br />
                Bikes In Miami<br />
                619 South Java Road<br/ >
                Miami, FL 33146<br />
                Ph: 958-429-1146<br />
                Email:</span> <span class="email_color">bikesinmiami@cypress.net</span><!-- #EndLibraryItem --><br />
                <br /><!-- #BeginLibraryItem "/Library/copyright_info.lbi" -->
                <span class="copyright_color" style="font-size: x-small; color: #FFF;">©2010</span><!-- #EndLibraryItem --><br />
                </div><!-- end #footer -->
                </div><!-- end #container -->
                </body>
                </html>

                • 5. Re: display different Firefox & IE
                  thuy.copeland Level 2

                  Good job figuring it out!