Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jun 2008
    Location
    Normal, IL
    Posts
    45
    Thanks
    3
    Thanked 3 Times in 3 Posts

    Unhappy IE Floating Problems Images & Links

    Hi,

    I was almost done with this site I'm working on when I realized I had numerous compatibility issues with IE, which happens to me often because I dont have IE on my computer.

    I originally had all the images on my sub-pages positioned using float:right; clear:left which worked fine until I put in a couple of my IE fixes that were, or so I thought, completely unrelated and now the images site right in FF but not in IE, as shown here..

    The HTML for one of the pages having these problems is as follows:
    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Veterans Terrace at Echo Park: Weddings</title>
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    </head>
    
    <body>
    <center>
    <div id="header">
    </div>
    <div id="hmenu">
    <ul>
    <li><a href="aboutus.html">About Us</a></li>
    <li><a href="ourfacility.html">Our Facility</a></li>
    <li>Weddings</li>
    <li><a href="events.html">Events</a></li>
    <li><a href="catering.html">Catering</a></li>
    <li><a href="../photogallery/index.html">Photo Gallery</a></li>
    <li><a href="../contact/index.php">Contact</a></li>
    </ul>
    </div>
    <div id="precontent">
    <div id="lmenu">
    <ul>
    <li><a href="../index.html">Home</a></li>
    <li><a href="donate.html">Donate</a></li>
    <li><a href="../brickform/buyabrick.html">Buy a Brick</a></li>
    </ul>
    </div>
    <img src="../images/pictures/ring.png" />                     
    </div>
    <div id="content">
    <div id="pageheading">
    <p>Weddings</p>
    </div>
    <p><img class="right" src="../images/pictures/vetswed1.jpg" /><img class="right" src="../images/pictures/vetswed2.jpg" /><img class="right" src="../images/pictures/vetswed4.jpg" /><img class="right" src="../images/pictures/vetswed5.jpg" /></p>
    <p><strong>Weddings</strong><br />Tie the knot! It&rsquo;s your special day, so we make your wedding celebration one you&rsquo;ll remember fondly forever. We make sure that every detail is perfect. Though the Veterans Terrace is a new facility, our staff has years of experience in wedding planning. Our preferred caterers are located in Burlington with years of experience making each couple&rsquo;s wedding a splendid occasion. No detail is left to chance. So, relax. Be a guest at your own wedding.<br /><br />Please call us at 262.763.9400. We love weddings! And you&rsquo;ll love your wedding at Veterans Terrace. (Imagine . . .&nbsp; a ceremony on the shore of beautiful Echo Lake surrounded by all the people you love&hellip; a perfect day to start the perfect marriage!)<br /><br /><strong>Wedding Catering</strong><br />Our preferred caterers are the very best in the business of creating the exceptional service your wedding deserves. Whether you&rsquo;re looking for elegant fare for a few or casual appetizers for a crowd, you&rsquo;ll find just the right fit.</p>
    <p><strong>Preferred Caterers </strong><br />
    Four local caterers have been selected for preferred status at the Veterans Terrace. If you're planning your wedding or other event, contact them by following the links.</p>
    <p><a href="http://www.charcoalgrill.com/pdfs/Catering_Menu.pdf">Charcoal Grill</a></p>
    <p><a href="gooseberries.html">Gooseberries</a></p>
    <p><a href="http://www.napoliburlington.com/catering.html">Napoli</a></p>
    <p><a href="stowells.html">Stowells</a><br /><br />We also have suggestions for:<br />Florists &amp; Decorators<br />Photographers<br />Music<br />Accommodations<br />Dresses<br />Formal wear<br />&nbsp;Accessories<br />Hair Stylists and Beauty Consultants<br />Honeymoons<br />Rings and Jewelry<br />Invitations<br />Cakes</p>
    <p style="float:none;clear:both;"></p>
    </div>
    <div id="footer">
    <p>262.763.9400 - 589 Milwaukee Avenue, Burlington, Wisconsin 53105 - <a href="mailto:wmsmitz@veteransterrace.com">Email</a></p>
    </div>
    <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-8630076-1"); pageTracker._trackPageview(); } catch(err) {}</script>
    </body>
    </center>
    </html>

    My Css is as follows:
    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    * {margin:0; padding:0;}
    
    body{
    font-family: Myriad Web, Myriad Pro, Calibri, Arial, Verdana;
    font-size:12px;
    color:#333;
    background: url(../images/bg.jpg) repeat-y center top;
    background-attachment:fixed;
    margin-top:0;
    margin-left:0;
    margin-bottom:0;
    margin-right:0;
    text-align:center;}
    
    body a{
    color:#003399;
    text-decoration:none;}
    body a:hover{
    color:#0033CC;
    text-decoration:underline;}
    body a:active{
    text-decoration:none;}
    body a:visited{
    text-decoration:none;}
    
    #header{
    height:183px;
    width:713px;
    background: url(../images/header.jpg) no-repeat;
    line-height:0px;}
    
    #hmenu{
    height:38px;
    width: 713px;
    background: url(../images/menu.jpg) repeat-y center top;
    text-align:left;
    color:#99CCFF;
    margin:0;
    padding:0;
    }
    
    #hmenu a{
    color:#FFF;
    display:block;
    height:15px;
    text-decoration:none;}
    #hmenu a:hover{
    color:#663333;
    text-decoration:underline;}
    #hmenu a:visited{
    color:#fff;}
    #hmenu a:active{
    color:#fff;}
    
    #hmenu ul{
    list-style: none;
    width: 99%;
    margin: 0;
    margin-left:25px;
    padding: 0;
    font-size:14px;
    }	
    #hmenu ul li{
    float: left;
    width: 92px;
    text-align: center;
    padding-top:10px;
    }
    
    #precontent{
    width:713px;
    height:300px;
    background:#fff;
    margin:0px;
    clear:none;
    border-bottom:solid 9px #006633;
    }
    
    #lmenu{
    float:left;
    clear:right;
    width:152px;
    height:300px;
    background:#660000;
    color:#FFF;
    display:block;
    margin:0;
    text-align:left;
    }
    
    #lmenu a{
    color:#FFF;
    display:block;
    text-decoration:none;}
    #lmenu a:hover{
    color:#663333;
    text-decoration:underline;}
    #lmenu a:visited{
    color:#fff;}
    #lmenu a:active{
    color:#fff;}
    
    #lmenu ul{
    list-style: none;
    width: 99%;
    margin: 0;
    margin-top:25px;
    margin-left:35px;
    padding: 0;
    font-size:14px;
    }	
    #lmenu ul li{
    float: left;
    width: 92px;
    height:15px;
    padding-top:8px;
    }
    /* For ie ONLY */
    * html #lmenu{
    height:15px;
    margin-bottom:0px;
    } 
    /* For ie ONLY */
    * html #content{
    margin-top:0px;
    height:auto;
    } 
    #content{
    width:713px;
    height:auto;
    min-height:300px;
    text-align:left;
    margin:0px;
    background:#fff;
    padding-bottom:20px;
    padding-top:0px;}
    
    #content p{
    margin-left:35px;
    margin-right:35px;
    text-align:justify;
    padding-top:10px;
    padding-bottom:10px;
    height:auto;
    }
    
    #content ul{
    margin-left:10px;}
    
    #content ul li{
    margin-right:35px;
    margin-left:35px;
    padding:0px 0px 5px 0px;
    text-align:justify;
    line-height:14px;
    color:#333;}
    
    #content img{
    	border:none;
    	}
    	
    #content img.right{
    	display:block;
    	float:right;
    	clear:left;
    	margin-right:0px;
    	padding-left:25px;
    	border:none;
    	margin-bottom:10px;
    	width:300px;
    	}
    	
    #content img.center{
    	display:block;
    	float:none;
    	clear:none;
    	margin-bottom:25px;
    	width:auto;}
    	
    #content img.left{
    	float:left;
    	clear:right;
    	margin-left:0;
    	padding-right:25px;
    	padding-left:0px;
    	width:auto;}
    	
    #content img.thumb{
    	margin-bottom:25px;
    	margin-left:12px;
    	margin-right:12px;
    	width:auto;}
    	
    #content table{
    margin-left:35px;
    margin-bottom:25px;}
    
    #contactform{
    margin-left:35px;
    margin-top:25px;
    margin-bottom:25px;
    }
    fieldset { border:0;margin:0;padding:0; }
    label { display:block; }
    input.text,textarea { width:300px;font:10px/10px;color:#333;padding:3px;margin:1px 0;border:1px solid #ccc; }
    .formbutton{
    color:#666;
    border:none 0px;
    margin-top:10px;
    background:url(../images/submit.png) no-repeat;
    width:110px;
    height:39px;
    }
    
    #content p.subheading{
    margin-left:35px;
    margin-bottom:5px;
    font-size:18px;
    color:#003366;
    }
    #content p.subheading2{
    margin-left:55px;
    margin-bottom:15px;
    margin-top:-3px;
    font-size:16px;
    color:#003366;
    }
    
    #pageheading{
    background: url(../images/h1.png) repeat-y center top;
    height: 45px;
    width:713px;
    text-align:left;
    
    }
    
    #pageheading p{
    margin-left:25px;
    padding-top:12px;
    font-size:22px;
    color:#003399;
    text-align:left;
    margin-right:0px;
    }
    
    #headinglinks{
    float:right;
    clear:left;
    display:inline;
    position:relative;
    height:45px;
    width:300px;
    text-align:right;
    margin-right:35px;
    font-size:12px;
    color:#99CCFF;
    padding-top:10px;}
    
    #headinglinks a{
    color:#FFF;
    font-size:12px;
    text-decoration:none;}
    #headinglinks a:hover{
    color:#0099FF;
    text-decoration:underline;}
    #headinglinks a:visited{
    color:#fff;}
    #headinglinks a:active{
    color:#fff;}
    
    
    #bottomcontent{
    background: #fff;
    width:713;
    height:255px;
    border-top:solid 9px #006633;
    vertical-align:bottom;}
    
    #bottomcontent{
    font-size:11px;}
    
    #blue{
    background: url(../images/bluebox.jpg) no-repeat;
    width:345px;
    height:255px;
    float:right;
    clear:left;
    display:block;
    margin:0px;
    padding:0px;
    margin-left:35px;
    font-size:14px;
    color:#fff;}
    
    #footer{
    height:40px;
    width:713px;
    background:#fff;
    border-top:solid 8px #003366;
    margin:0px;}
    
    #footer p{
    margin-top:10px;}
    I also am having a problem with links in the sub-header of three pages (which only need them because they don't have a left menu) sitting wrong. Again, they work perfectly in FF but in IE they are surrounded by a ton of white space which shouldn't be there, because the links are supposed to sit in the pageheading div, not on top of it. One of the pages having this problem can be found here.

    The HTML for one of the pages having this problem is as follows:
    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Veterans Terrace at Echo Park: Buy A Brick</title>
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <script language="javascript" type="text/javascript" src="niceforms.js"></script>
    <link rel="stylesheet" type="text/css" media="all" href="brick.css"  />
    </head>
    
    <body>
    <center>
    <div id="header">
    </div>
    <div id="hmenu">
    <ul>
    <li><a href="../pages/aboutus.html">About Us</a></li>
    <li><a href="../pages/ourfacility.html">Our Facility</a></li>
    <li><a href="../pages/weddings.html">Weddings</a></li>
    <li><a href="../pages/events.html">Events</a></li>
    <li><a href="../pages/catering.html">Catering</a></li>
    <li><a href="../photogallery/index.html">Photo Gallery</a></li>
    <li><a href="../contact/index.php">Contact</a></li>
    </ul>
    </div>
    <div id="content">
    <span id="headinglinks"><a href="../index.html">Home</a> | <a href="../pages/donate.html">Donate</a> | Buy a Brick</span>
    <div id="pageheading">
    <p>Buy A Brick</p></div>
    <p><img class="right" src="../images/pictures/bricks.png" /></p>
    <p class="subheading">Memorialize loved ones!</p>
    <p class="subheading2">Honor your favorite Veteran!</p>
    <p>Now you can memorialize love ones, honor the veterans in your family, or create a lasting memory for a special event. Anniversaries, birthdays, wedding days, all can be memorialized indefinitely by purchasing an engraved brick.</p>
    <p>These special bricks will be placed along the Memorial Terrace of Veterans Terrace at Echo Park. They will be installed along the retaining wall overlooking the White River in Burlington, Wisconsin; a beautiful setting for this permanent display.</p>
    <p>You can order online or use our <a href="../downloads/brickform.pdf">printable form</a></p>
    <div id="pageheading"><p>Order Online</p></div><br />
    <div id="container">
    <form class="niceform" action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_xclick"/>
    <input type="hidden" name="currency_code" value="USD"/>
    <input type="hidden" name="business" value="info@veteransterrace.com"/>
    <input type="hidden" name="item_name" value="Personalized Brick">
    <fieldset>
        	<legend>Brick Information</legend>
            <dl>
            	<dt>
            	  <label for="brick">Choose One:</label><input type="hidden" name="on0" value="Brick Type"/>
            	</dt>
    
                </dl><dl><dt>
                    <input type="radio" value='Memorial Brick: 4" x 8" (3 lines) - $125.00' id="memorialbrick" name="os0" class="NFhidden"/></dt><dd><label for="memorialbrick" class="opt">Memorial Brick: 4" x 8" (3 lines) - $125.00</label></dd></dl>
                    <dl><dt><input type="radio" value='Border Brick: 8" x 8" (6 lines) - $500' id="borderbrick" name="os0" class="NFhidden"/></dt><dd><label for="borderbrick" class="opt">Border Brick: 8" x 8" (6 lines) - $500</label></dd></dl>
                    <dl><dd><p>All lines will be centered.  Spaces and punctuation count as characters. <br />Lines 4-6 are for Border Bricks Only</p></dd></dl>
           
                <dl>
            	<dt><label for="line1">First Line:</label><input type="hidden" name="on1" value="Line 1"/></dt>
    
                <dd><input type="text" name="os1" id="line1" size="32" maxlength="32" /></dd>
            </dl>
             <dl>
            	<dt><label for="line2">Second Line:</label><input type="hidden" name="on2" value="Line 2"/></dt>
                <dd><input type="text" name="os2" id="line2" size="32" maxlength="32" /></dd>
            </dl>
             <dl>
            	<dt><label for="line3">Third Line:</label><input type="hidden" name="on3" value="Line 3"/></dt>
    
                <dd><input type="text" name="os3" id="line3" size="32" maxlength="32" /><br />
                </dd>
            </dl>
                  <dl>
            	<dt><label for="line4">Fourth Line:</label><input type="hidden" name="on4" value="Line 4"/></dt>
                <dd><input type="text" name="os4" id="line4" size="32" maxlength="32" /></dd>
            </dl>
             <dl>
    
            	<dt><label for="line5">Fifth Line:</label><input type="hidden" name="on5" value="Line 5"/></dt>
                <dd><input type="text" name="os5" id="line5" size="32" maxlength="32" /></dd>
            </dl>
             <dl>
            	<dt><label for="line6">Sixth Line:</label><input type="hidden" name="on6" value="Line 6"/></dt>
                <dd><input type="text" name="os6" id="line6" size="32" maxlength="32" /><br />
                </dd>
            </dl>
    
        <dl><dd><p>
    After you submit this form you will be taken to the PayPal page where you will enter your billing information and that will complete the order process. Thank you for your donation!</p></dd></dl>
    </fieldset>
    		<input type="hidden" name="option_select0" value='Memorial Brick: 4" x 8" (3 lines) - $125.00'/>
            <input type="hidden" name="option_select1" value='Border Brick: 8" x 8" (6 lines) - $500'/>
            <input type="hidden" name="option_amount0" value="125.00"/>
            <input type="hidden" name="option_amount1" value="500.00"/>
        <fieldset class="action">
            <input type="submit" name="submit" id="submit" value="Submit" />
    
        </fieldset>
    <input type="hidden" name="return" value="http://beelinecomputer.info/Kristin/VetsTerrace/brickform/confirmation.html"/>
            <input type="hidden" name="cancel_return" value="http://beelinecomputer.info/Kristin/VetsTerrace/brickform/cancel.html"/>
            </form>
    </div>
    <p style="float:none;clear:both;"></p>
    </div>
    <div id="footer">
    <p>262.763.9400 - 589 Milwaukee Avenue, Burlington, Wisconsin 53105 - <a href="mailto:wmsmitz@veteransterrace.com">Email</a></p>
    </div><script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-8630076-1"); pageTracker._trackPageview(); } catch(err) {}</script>
    </body>
    </html>
    I realize that these are issues I should be able to take care of but I have been pulling hair out over this for the past two days, scouring google results. Previously I had different issues but fixing those just caused these new ones.

    Any help would be really appreciated.
    Thanks,

    Kristin

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Fix the errors in your markup first, see http://validator.w3.org/check?uri=ht...Inline&group=0

    Don't use deprecated tags like <center> in your layout. You could center your layout by wrapping them all inside a container div and applying margin:0 auto; to it.

    Now, your issue might be due to the box model issue of IE. Conside reducing the width or left-right margin/paddings from the column elements.
    Last edited by abduraooft; 06-16-2009 at 09:23 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jun 2008
    Location
    Normal, IL
    Posts
    45
    Thanks
    3
    Thanked 3 Times in 3 Posts

    Question Still stuck

    Thanks for the recommendations,

    I ran validation on all of the pages on my site and now almost all of them, including the weddings.html passes. Im having some validation errors with tables on one page and with my embedded flash on the index page but neither of those pages are giving me the problems described above.

    I also went ahead and centered the page using a wrapper div and css instead of the <center > tag, which I should've done anyway.

    I looked over the IE Box Model Bug information you linked me as well as doing some googling of it myself and none of the fixes when applied seem to fix either of my two issues, so I'm really lost here.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Try
    Code:
    <img src="path of image/ring.png" alt="weddings" width="550">
    Code:
    #precontent img{
    display:block;
    }
    #lmenu ul{
    list-style: none;
    /*width: 99%;*/
    margin: 0;
    margin-top:25px;
    margin-left:35px;
    padding: 0;
    font-size:14px;
    }	
    #lmenu ul li{
    /*float: left;
    width: 92px;*/
    height:15px;
    padding-top:8px;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Jun 2008
    Location
    Normal, IL
    Posts
    45
    Thanks
    3
    Thanked 3 Times in 3 Posts

    Exclamation

    Those are not actually the ones I'm having problems with.

    The #pre-content and #lmenu sit fine as far as I can see in IE.

    It's actually the following that aren't working:

    #content img.right{
    display:block;
    float:right;
    clear:left;
    margin-right:0px;
    padding-left:25px;
    border:none;
    margin-bottom:10px;
    width:300px;
    }

    These sit fine and to the right in FF but in IE they sit on top of each other on the left and right side. This is shown on the wedding page best but also occurs on other pages.


    The second problem is:

    #pageheading{
    background: url(../images/h1.png) repeat-y center top;
    height: 45px;
    width:713px;
    text-align:left;

    }

    #pageheading p{
    margin-left:25px;
    padding-top:12px;
    font-size:22px;
    color:#003399;
    text-align:left;
    margin-right:0px;
    }

    #headinglinks{
    float:right;
    clear:left;
    display:block;
    width:300px;
    height:25px;
    text-align:right;
    margin-right:35px;
    font-size:12px;
    color:#99CCFF;
    padding-top:10px;
    padding-bottom:-25px;}

    #headinglinks a{
    color:#FFF;
    font-size:12px;
    text-decoration:none;}
    #headinglinks a:hover{
    color:#0099FF;
    text-decoration:underline;}
    #headinglinks a:visited{
    color:#fff;}
    #headinglinks a:active{
    color:#fff;}


    There are three pages that do not have the #precontent div or #lmenu and instead of having these left menu links they have text links that are supposed to sit beneath the horizontal menu and just float right so that they sit on top of the #pageheading div, which works fine in FF but in IE they push #pageheading down and I can not get them to sit correctly. Example.



    Sorry for the confusion.
    I really appreciate your help.

    Thanks

    Kristin

  • #6
    New Coder
    Join Date
    Jun 2008
    Location
    Normal, IL
    Posts
    45
    Thanks
    3
    Thanked 3 Times in 3 Posts

    Exclamation One problem eliminated

    So, as far as the second half of my problem went, relating to the pageheading links, Ive worked around it by putting a subhorizontal menu div in instead of what I was trying to do before. Problem solved.

    My other problem, with the floating right images in the content div of all my sub-pages ... still is driving me bananas.. as shown here: http://beelinecomputer.info/Kristin/.../weddings.html but only shown in IE.

    PLEASE PLEASE HELP!

    thanks

    kristin

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Hi Kristin

    Have a try with:

    Code:
    #content img.right{
    display:block;
    float:right;
    clear:right;
    margin-right:0px;
    padding-left:25px;
    border:none;
    margin-bottom:10px;
    width:300px;
    }

  • Users who have thanked SB65 for this post:

    kristingish (06-18-2009)

  • #8
    New Coder
    Join Date
    Jun 2008
    Location
    Normal, IL
    Posts
    45
    Thanks
    3
    Thanked 3 Times in 3 Posts

    Smile Thanks !

    Thanks so much that solved my problem completeyl!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •