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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Float Issue (spot the error?:s)

    Please help if someone could point out the mistake it would really be appreciated, ive been working on this but.. i have a floated right nav bar at the end of the page, problem is, now when i view in firefox the nav bar float (right) drops to the bottom of the page. I realise this may be caused because of the width of my container and the div widths inside may be bigger, but ive searched through it over and over and just cant find out where the problem lies.
    [html]



    body {
    background: #CCCCCC;
    color: #000000;
    }

    #wrapper {
    position: relative;
    margin: 0 auto;
    width: 950px;
    padding: 5px;
    background: #FFFFFF;
    color: #000000;
    }



    <body>
    <div id="wrapper">

    <div id="header">
    <div id="span"></div>


    <div id="logo"><img src="images/logo.gif" alt="" /></div>

    </div>

    <div id="topnav">

    <ul>
    <li><a href="default.asp">Home</a></li>
    <li id="login_button"><a href="#" onclick="mw_logout(); return false;">Log Out</a></li>
    <li><a href="update-profile.asp">My Profile</a></li>

    <li><a href="blog.asp">Bradley's Blog</a></li>

    <li><a href="forum.asp">Forums</a></li>
    <li><a href="about.asp">About Us</a></li>
    </ul>

    <div id="endbox"></div>
    </div>


    <div id="contentwrapper">

    <div id="content">




    <div id="main">

    <div class="singlecolheader"></div>
    <div class="singlecolwrapper">
    <div class="col">
    <h1 style="color:#000000;">MI Group Advertising Details</h1>
    <div style="float:left; border:1px solid black;height:auto; width:740px;">

    <h2>Link with Banners</h2>
    </p>
    <div style="width:369px;height:auto;float:left;">
    <p><img style="margin:5px 5px 5px 5px;float:left;width:312px;height:40px;" src="images/features/link-to-us/approvedbanner8.jpg"border="1" /></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>
    <textarea name="textarea" style="width:150px; height:100px; text-align:left ;float:left; overflow-x:hidden"><a href="" alt="" title="Join us " width="460" height="60" style="margin:5px;"><img src="g"/></a></textarea>
    <span class="wrap"> This banner is 468 by 60 px.</span></p>

    </div>



    <div style="width:369px;height:auto;float:left;">
    <p><img style="margin:5px 5px 5px 5px;float:left;width:312px;height:40px;" src="" /></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>
    <textarea name="textarea" style="width:150px; height:100px; text-align:left ;float:left; overflow-x:hidden;"> <<a href="" alt="J" title="Join us " width="460" height="60" style="margin:5px;"><img src="g"/></a></textarea>
    <span class="wrap"> This banner is 468 by 60 px.</span></p>

    </div>



    <div style="width:369px;height:auto;float:right;">
    <p><img style="margin:5px 5px 5px 5px;float:left;width:312px;height:40px;" src="" /></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>
    <textarea name="textarea" style="width:150px; height:100px; text-align:left ;float:left; overflow-x:hidden;"> <a href="" alt="" title="Join us " width="460" height="60" style="margin:5px;"><img src="g"/></a></textarea>
    <span class="wrap"> This banner is 468 by 60 px.</span></p>

    </div>


    <div style="width:369px;height:auto;float:right;">
    <p>
    <img src="ig" width="316" height="45" style="margin:5px 5px 5px 5px;float:left;width:312px;height:40px;" />
    <p>&nbsp;</p><p>&nbsp;</p>

    <textarea name="textarea" style="width:150px; height:100px; text-align:left ;float:left; overflow-x:hidden;"><a href="" alt="Join us at " title="J" width="460" height="60" style="margin:5px;"><img src=""/></a></textarea>
    <span class="wrap"> This banner is 468 by 60 px</span></p>
    </div>


    <h1>Link With Buttons</h1>


    <div class="seperator"></div>
    <h2>Buttons</h2>
    <div style="width:200px;height:auto;float:left;">
    <img style="margin:5px 5px 5px 5px;width:120px;height:60px;" src="images/features/link-to-us/MI-Link-120-60.jpg" />
    <p>
    <textarea name="textarea2" style="width:150px; height:60px;overflow-x:hidden"><a href="pg" alt="" title="J" width="460" height="60" style="margin:5px;"><img src=""/></a></textarea>
    </p>
    </div>
    <div style="width:200px;height:auto;float:left;padding-left:80px;">
    <img style="margin:5px 5px 5px 5px;width:120px;height:60px;" src="images/features/link-to-us/BS-Link-120-60-V1.jpg" />
    <p>
    <textarea name="textarea2" style="width:150px; height:60px;overflow-x:hidden"><a href="g" alt="Join usg" title="Join us rking" width="460" height="60" style="margin:5px;"><img src=""/></a></textarea>
    </p>
    </div>
    <div style="width:200px;height:auto;float:right;">
    <img style="margin:5px 5px 5px 5px;width:120px;height:60px;" src="ima/ukeastamp.gif" border="1"/>
    <p>
    <textarea name="textarea2" style="width:150px; height:60px;overflow-x:hidden"><a href="" alt="J" title="king" width="460" height="60" style="margin:5px;"><img src=""/></a></textarea>
    </p></div>


    <div style="width:200px;height:auto;float:left;">
    <img style="margin:5px 5px 5px 5px;width:160px;height:146px;" src="images/features/link-to-us/approved.jpg" target="_blank"/>
    <p><textarea style="width:150px; height:60px;overflow-x:hidden"><a href="" alt="" title="Jg" width="460" height="60" style="margin:5px;"><img src=""/></a></textarea></p>
    </div>




    <div style="width:200px;height:auto;float:left;padding-left:80px;padding-top:10px;">
    <img style="margin:5px 5px 5px 5px;width:120px;height:120px;" src="images/features/link-to-us/BS-Link-120-120-V2.jpg" />
    <p>
    <textarea name="textarea2" style="width:150px; height:60px;overflow-x:hidden"><a href="" alt="" title="J" width="460" height="60" style="margin:5px;"><img src=""/></a></textarea>
    </textarea>
    </p>
    </div>


    <div style="width:200px;height:auto;float:right;padding-left:50px;padding-top:10px;">
    <img style="margin:5px 5px 5px 5px;width:120px;height:120px;" src=".gif" />
    <p>
    <textarea name="textarea2" style="width:150px; height:60px;overflow-x:hidden"><a href="" alt="Join us " title="J" width="460" height="60" style="margin:5px;"><img src=""/></a></textarea>
    </textarea>
    </p>
    </div>






    <div class="seperator"></div>
    <h2>Skyscraper Advertisers</h2>



    <div style="padding-left:20px;width:200px;height:auto;float:left;">
    <img style="margin:5px 5px 5px 10px;width:120px;height:600px;align:center;" src="images/features/link-to-us/skyscraperapproved.jpg" />
    <p><textarea style="width:120px; height:60px;overflow-x:hidden"><a href="" alt="g" title="Jg" width="120px" height="600px" style="margin:5px;"></textarea></p>
    </div>


    <div style="width:200px;height:auto;float:left;"padding-left:50px;>
    <img src="images/features/link-to-us/BS-Skyscraper447x120.jpg" align="middle" style="margin:5px 5px 5px 10px;width:120px;height:600px" />
    <p><textarea style="width:120px; height:60px;overflow-x:hidden"><a href="" alt="Jng" title="Jorking" style="margin:5px;"></textarea></p>

    </div>
    <div style="width:200px;height:auto;float:left;">
    <img style="margin:5px 5px 5px 10px;width:120px;height:600px;" src="images/features/link-to-us/MI-120-600.jpg" />
    <p><textarea style="width:120px; height:60px;overflow-x:hidden"><a href="hto-us/MI-120-600.jpg" alt="J" title="" width="120px" height="600px" style="margin:5px;"></textarea></p>

    </div>


    <div class="seperator"></div>
    <div style="padding-left:20px;">
    <h2>Text Links</h2><br/>
    <br/>
    <textarea style="width:150px; height:40px; overflow-x:hidden ;"><a href="wm"></a></textarea> <br/>
    We are listed ons<br/>
    <textarea style="width:150px; height:40px; overflow-x:hidden ;"><a href="www.om">We are listed </a></textarea> <br/>
    We are a part of the UKEA Join Us <br/>
    <textarea style="width:150px; height:40px; overflow-x:hidden ;"><a href="http://www.">We are a part of the join Us</a></textarea> <br/>

    </div>


    <div class="seperator"></div>
    <h2>Not finding one that takes your fancy?</h2>
    <p>We will create an Advertisement, whether it be a button or a banner for you to put on your website, so that its tailored for your site. We understand how important it is for your website to look its best, so thats why we will create a different banner, button or advert, so that you can be a proud member without having to alter the look of your own page!<br/>
    <a href="mailto:Kelly"><img src="images/features/link-to-us/mail.gif" alt="Email" width="80" height="80" border="0" align="absmiddle" />Email: <a href="mailto:Km">m</a></p>
    </div>




    </div>
    </div>




    <div style="clear:both;"></div>



    <div id="navcolumn">


    <ul>
    <li><a href="member-benefits.asp">Member Benefits</a></li>
    <li><a href="member-spotlight.asp">Member Spotlight</a></li>
    <li><a href="members.asp">Member Database</a></li>
    <li><a href="mitube.asp">I Tube</a></li>
    <li><a href="coming-soon.asp?page=Mi%20Chat">MI Chat</a></li>

    <li><a href="angels-den.asp">Angels Den</a></li>
    <li><a href="news.asp">News</a></li>
    <li><a href="coming-soon.asp?page=Jobs">Mi Jobs</a></li>
    <li><a href="future.asp">Future</a></li>
    <li><a href="business-sos.asp">Business SOS</a></li>
    <li><a href="business-pr.asp">Business PR</a></li>

    <li><a href="coming-soon.asp?page=Business%20For%20Sale">Business For Sale</a></li>
    <li><a href="http://om" target="_blank">r</a></li>
    <li><a href="http:/om" target="_blank">r</a></li>
    <li><a href="http://www.n.com" target="_blank">UKEA</a></li>
    <li><a href="contact.asp">Contact Us</a></li>
    </ul>


    <div id="magazine">

    </div>

    <div id="newsletter">
    <div id="newsletterheader"></div>
    <div id="newsletterbody">
    <h2>Newsletter</h2>

    <p>Keep up to date with the latest developments with the newsletter. Find out what&rsquo;s new, read what our members are talking about and view our spotlight section. To receive our monthly newsletter, simply enter your name and e mail address.</p>

    <form action="newsletter.asp" method="post" enctype="application/x-www-form-urlencoded" name="frmNewsletter" id="frmNewsletter">
    <label for="frmN_Name">Name:</label>
    <input name="frmN_Name" type="text" id="frmN_Name" value="" />
    <label for="frmN_Email">Email:</label>
    <input name="frmN_Email" type="text" id="frmN_Email" value="" />

    </form>
    <p class="hidden" id="newslettermessage">&nbsp;</p>
    <div class="wrap"><a href="#" id="subscribebutton" onclick="mw_subscribe();return false;">Subscribe</a></div>

    </div>
    <div id="newsletterfooter"></div>
    </div>

    </div>
    <div style="clear:both;"></div>

    </div>

    <div id="columnend"></div>

    <div id="footer">
    <div id="copyright">

    <p>&copy; <a href="docs/PrivacyPolicy.pdf">Privacy Policy</a> | <a href="about.asp">About Us</a> | <a href="docs/tandc.pdf">Terms &amp; Conditions</a> | <a href="investor-relations.asp">Investor Relations</a> | <a href="recommended-sites.asp">Recommended Sites</a> | <a href="advertise.asp">Advertise With Us</a>

    <!-- | Jobs e--></p>
    <p>Company Registration : </p>
    </div>
    </div>
    </div>
    </body>
    </html>
    [/html]
    Last edited by kelly3330; 11-19-2008 at 10:24 PM.

  • #2
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    A game of spot the error...? Er... no thanks!

    You should have posted only the salient code. Posting everything is irritatingly unnecessary.

    I can't tell from this, which the element in question is, which is dropping out. Is it "topnav"? There's no style attached to that element, that I can see.

    The clear command is probably what you want in there (somewhere), but without a link to the live site and without proper information, plus all that to trawl through, I don't think I can help you.

    Sorry.

    Last edited by Doctor_Varney; 11-20-2008 at 12:43 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    You do not have a DOCTYPE

    You do also have errors here.

    And more here.

    I have put the page on my site for convenience.

    Frank
    Last edited by effpeetee; 11-20-2008 at 11:17 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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