August 9, 200818 yr Hey, I've been playing with it for a while but can't figure the problem! Can anyone advise why http://www.hoctordesgin.com/index.aspx won't display my pictures aligned right and my text on the same line. Thanks Denis
August 9, 200818 yr You could try floating the #main to the left and see what happens? Also, the widths of your divs plus padding adds up to exaclty 800px which is the specified width of the parent div. If I remember correctly, IE6 does not approve of this. Try trimming 3px or so off the main and sidebar div and see if that works.
August 10, 200818 yr Author Thanks for the input notbanksy. I've had no luck with that though. I have borders on the divs for easier viewing now. I can't get IE6 to put the images to the right with float!
August 10, 200818 yr Thanks for the input notbanksy. I've had no luck with that though. I have borders on the divs for easier viewing now. I can't get IE6 to put the images to the right with float! Start using firebug or web developer so you don't need to add borders in .css as often the extra pixel width causes problems.
August 10, 200818 yr OK - I've found a solution for you. There are two problems with your existing code: 1 - the sidebar will not float right because it cannot clear the drop down menu, and 2 - the divs are too wide to sit side by side in IE6. I've amended your code. Wrap the #main and #sidebar divs in another div (I've called it #sideandmainwrap) Remove the border statement from your html for these two divs, and change your css to: #sideandmainwrap { clear:both; } div#main { width: 478px; min-height: 450px; padding: 30px 5px 10px 20px; } div#sidebar { position: relative; line-height: 16px; float: right; width: 278px; height: 350px; padding: 30px 15px 10px 0px; } Good luck. If you get any problems with this, give me a shout.
August 10, 200818 yr Author Mesa - I just started using firebug but I don't have a way to show the borders in IE5/6/7. What is Web Developer? Notbanksy - Thanks for that code. I implemented it and all that changes is the alignment of the images(#sidebar) goes to the left in IE6 and IE7 where it was centered with the previous code in IE6 and right aligned in IE7, FF3 stays the same. Anymore idea whats going on? Denis
August 10, 200818 yr Mesa - I just started using firebug but I don't have a way to show the borders in IE5/6/7. What is Web Developer? Notbanksy - Thanks for that code. I implemented it and all that changes is the alignment of the images(#sidebar) goes to the left in IE6 and IE7 where it was centered with the previous code in IE6 and right aligned in IE7, FF3 stays the same. Anymore idea whats going on? Denis Hi Denis - no idea what's going on... I just looked at your site and it's not displaying correctly in my browser anymore (Opera 9.5). Did you change anything else apart from my suggestions? The version I have on my hard disk displays correctly in Opera, Firefox and IE6. Here it is, if it's any use.... html <!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><title> Ambassador Recruitment - Home </title> <meta name="Description" /><meta name="Keywords" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta name="Distribution" content="Global" /><meta name="Author" content="Denis Hoctor - denishoctor@gmail.com" /><meta name="Robots" content="noindex,nofollow" /><link href="global.css" rel="stylesheet" type="text/css" /><link href="App_Themes/Menu.css" rel="stylesheet" type="text/css" /><link href="App_Themes/MenuStyle.css" rel="stylesheet" type="text/css" /> <!--[if lte IE 6]> <link href="App_Themes/IEMenu6.css" rel="stylesheet" type="text/css" /> <![endif]--> <style type="text/css"> .ctl00_ctl00_Menu1_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; } .ctl00_ctl00_Menu1_1 { text-decoration:none; } .ctl00_ctl00_Menu1_2 { } </style></head> <body> <form name="aspnetForm" method="post" action="index.aspx" id="aspnetForm"> <div> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTcwODg1MTE2Ng9kFgJmD2QWAmYPZBYCAgQPZBYCAgUPZBYCZg8QDxYCHgtfIURhdGFCb3VuZ GdkEBUHDUFjY29tbW9kYXRpb24LQmFjayBPZmZpY2UDQmFyDkZyb250IG9mIEhvdXNlB0tpdGNoZW4KT W FuYWdlbWVudApSZXN0YXVyYW50FQcNYWNjb21tb2RhdGlvbgtiYWNrIG9mZmljZQNiYXIOZnJvbnQgb2 Y gaG91c2UHa2l0Y2hlbgptYW5hZ2VtZW50CnJlc3RhdXJhbnQUKwMHZ2dnZ2dnZ2RkGAEFEWN0bDAwJGN 0 bDAwJE1lbnUxDw9kBQRIb21lZO7s/qZkylPWZWXivXibL83P/cP1" /> </div> <script src="/JavaScript/AdapterUtils.js" type="text/javascript"></script> <script src="/JavaScript/MenuAdapter.js" type="text/javascript"></script> <div id="wrap" style="border: 1px solid rgb(0, 0, 0);"> <div id="header"> <div class="PrettyMenu"> <div class="AspNet-Menu-Horizontal"> <ul class="AspNet-Menu"> <li class="AspNet-Menu-Leaf"> <a href="/index.aspx" class="AspNet-Menu-Link" title="Ambassador Recruitment - Home"> Home </a> </li> <li class="AspNet-Menu-WithChildren"> <a href="/jobseekers.aspx" class="AspNet-Menu-Link" title="Ambassador Recruitment - Jobseekers"> Jobseekers </a> <ul> <li class="AspNet-Menu-Leaf"> <a href="/jobseekers/submitcv.aspx" class="AspNet-Menu-Link" title="Ambassador Recruitment - Jobseekers - Submit CV"> Submit CV </a> </li> <li class="AspNet-Menu-WithChildren"> <a href="/jobseekers/careerzone.aspx" class="AspNet-Menu-Link" title="Ambassador Recruitment - Jobseekers - Career Zone"> Career Zone </a> <ul> <li class="AspNet-Menu-Leaf"> <a href="/jobseekers/career/cvtips.aspx" class="AspNet-Menu-Link" title="Ambassador Recruitment - Jobseekers - Career Zone - CV Tips"> CV Tips </a> </li> <li class="AspNet-Menu-Leaf"> <a href="/jobseekers/career/skills.aspx" class="AspNet-Menu-Link" title="Ambassador Recruitment - Jobseekers - Career Zone - Assess Your Skills"> Assess Your Skills </a> </li> <li class="AspNet-Menu-Leaf"> <a href="/jobseekers/career/consultation.aspx" class="AspNet-Menu-Link" title="Ambassador Recruitment - Jobseekers - Career Zone - Consultation"> Consultation </a> </li> </ul> </li> <li class="AspNet-Menu-Leaf"> <a href="/jobseekers/joblistings.aspx" class="AspNet-Menu-Link" title="Ambassador Recruitment - Jobseekers - Job Listings"> Job Listings </a> </li> </ul> </li> <li class="AspNet-Menu-WithChildren"> <a href="/employers.aspx" class="AspNet-Menu-Link" title="Ambassador Recruitment - Employers"> Employers </a> <ul> <li class="AspNet-Menu-Leaf"> <a href="/employers/reviewcandidates.aspx" class="AspNet-Menu-Link" title="Ambassador Recruitment - Employers - Review Candidates"> Review Candidates </a> </li> <li class="AspNet-Menu-Leaf"> <a href="/employers/subitjob.aspx" class="AspNet-Menu-Link" title="Ambassador Recruitment - Employers - Subit Job Listing"> Subit Job Listing </a> </li> <li class="AspNet-Menu-Leaf"> <a href="/employers/services.aspx" class="AspNet-Menu-Link" title="Ambassador Recruitment - Employers - Client Services"> Client Services </a> </li> <li class="AspNet-Menu-WithChildren"> <a href="/employers/tandc.aspx" class="AspNet-Menu-Link" title="Ambassador Recruitment - Employers - Terms & Conditions"> Terms & Conditions </a> <ul> <li class="AspNet-Menu-Leaf"> <a href="/employers/tandc_print.aspx" class="AspNet-Menu-Link" title="Ambassador Recruitment - Employers - Terms & Conditions"> T & C Printable </a> </li> </ul> </li> </ul> </li> <li class="AspNet-Menu-WithChildren"> <a href="/specialistdivisions.aspx" class="AspNet-Menu-Link" title="Ambassador Recruitment - Specialist Divisions"> Divisions </a> <ul> <li class="AspNet-Menu-Leaf"> <a href="/divisions/management.aspx" class="AspNet-Menu-Link" title="Ambassador Recruitment - Specialist Divisions - Management"> Management </a> </li> <li class="AspNet-Menu-Leaf"> <a href="/divisions/frontoffice.aspx" class="AspNet-Menu-Link" title="Ambassador Recruitment - Specialist Divisions - Front Office"> Front Office </a> </li> <li class="AspNet-Menu-Leaf"> <a href="/divisions/accommodation.aspx" class="AspNet-Menu-Link" title="Ambassador Recruitment - Specialist Divisions - Accommodation"> Accommodation </a> </li> <li class="AspNet-Menu-Leaf"> <a href="/divisions/consultancy.aspx" class="AspNet-Menu-Link" title="Ambassador Recruitment - Specialist Divisions - Consultancy"> Consultancy </a> </li> <li class="AspNet-Menu-Leaf"> <a href="/divisions/restaurant.aspx" class="AspNet-Menu-Link" title="Ambassador Recruitment - Specialist Divisions - Restaurant"> Restaurant </a> </li> <li class="AspNet-Menu-Leaf"> <a href="/divisions/barstaff.aspx" class="AspNet-Menu-Link" title="Ambassador Recruitment - Specialist Divisions - Bar Staff"> Bar Staff </a> </li> <li class="AspNet-Menu-Leaf"> <a href="/divisions/chefs.aspx" class="AspNet-Menu-Link" title="Ambassador Recruitment - Specialist Divisions - Chefs"> Chefs </a> </li> <li class="AspNet-Menu-Leaf"> <a href="/divisions/industrialcatering.aspx" class="AspNet-Menu-Link" title="Ambassador Recruitment - Specialist Divisions - Industrial Catering"> Industrial Catering </a> </li> <li class="AspNet-Menu-Leaf"> <a href="/divisions/cruiseships.aspx" class="AspNet-Menu-Link" title="Ambassador Recruitment - Specialist Divisions - Cruise Ships"> Cruise Ships </a> </li> </ul> </li> <li class="AspNet-Menu-Leaf"> <a href="/links.aspx" class="AspNet-Menu-Link" title="Ambassador Recruitment - Useful Links"> Useful Links </a> </li> <li class="AspNet-Menu-Leaf"> <a href="/aboutus.aspx" class="AspNet-Menu-Link" title="Ambassador Recruitment - About Us"> About </a> </li> <li class="AspNet-Menu-Leaf"> <a href="/contactus.aspx" class="AspNet-Menu-Link" title="Ambassador Recruitment - Contact Us"> Contact </a> </li> </ul> </div> </div> </div> <!-- header ends here--> <div id="content-wrap" style="border: 1px solid rgb(255, 0, 0);"> <div id="strip"> <p id="search" class="bold"> <span class="search-box"> <select name="ctl00$ctl00$ContentPlaceHolder_Main$Dropdownlist1" id="ctl00_ctl00_ContentPlaceHolder_Main_Dropdownlist1"> <option value="accommodation">Accommodation</option> <option value="back office">Back Office</option> <option value="bar">Bar</option> <option value="front of house">Front of House</option> <option value="kitchen">Kitchen</option> <option value="management">Management</option> <option value="restaurant">Restaurant</option> </select> </span> </p> <p id="breadcrumbs"> <span id="ctl00_ctl00_ContentPlaceHolder_Main_Sitemappath1"><a href="#ctl00_ctl00_ContentPlaceHolder_Main_Sitemappath1_SkipLink"><img alt="Skip Navigation Links" height="0" width="0" src="/WebResource.axd?d=o6-prdUD3jbOY71gWriSlw2&t=633363040378379010" style="border-width:0px;" /></a><span><a></a></span><span> > </span><span>Home</span><a id="ctl00_ctl00_ContentPlaceHolder_Main_Sitemappath1_SkipLink"></a></span> </p> </div> <div id="sideandmainwrap"> <div id="sidebar"> <ul class="sidemenu"> <li> <img src="images/image1.jpg" width="115" height="115" alt="Catering Image" class="border" /> <img src="images/image2.jpg" width="115" height="115" alt="Catering Image" class="border" /> </li> <li> <img src="images/image3.jpg" width="115" height="115" alt="Catering Image" class="border" /> <img src="images/image4.jpg" width="115" height="115" alt="Catering Image" class="border" /> </li> <li> <img src="images/image5.jpg" width="115" height="115" alt="Catering Image" class="border" /> <img src="images/image6.jpg" width="115" height="115" alt="Catering Image" class="border" /> </li> </ul> </div> <!-- sidebar ends here--> <div id="main"> <h1>Welcome to Ambassador Recruitment……</h1> <p>Ambassador Recruitment, a leader in the Recruitment arena for over 22 years (since 1986).</p> <p>We are the premier recruiters for Hospitality Management, recruiting for the leading Hotel and Event Companies in Ireland with strong links to Companies in the UK, USA and Austtralia.</p> <p>We are also the exclusive Irish Agent for Cunard, Seabourn and PO Cruise Lines.</p> <p class="bold">Our mission is to provide a 5* service to Clients and Candidates achieving quality opportunities for quality people.</p> </div> <!-- main ends here--> </div> <!-- sideandmainwrap ends --> </div> <!-- content-wrap ends here--> <div id="footer" class="t-small t-right"> Ambassador Recruitment | 3 Abbeydale Gardens, Lucan, Dublin, Ireland<br /> Tel: +353 1 6100201 | Fax: +353 1 6100204 | <a href="mailto:info@ambassador-recruit.com">info@ambassador-recruit.com</a> </div> <!-- footer ends here--> </div> <!-- Wrap ends here --> <div id="site-designer" class="t-small"> Design by: <a href="mailto:denishoctor@gmail.com">Denis Hoctor</a> | Valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> </div> <!-- site-designer ends here --> <!-- google analytics code ends here --> <div> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCAKtwtm5DgLomPncBwK3i9mVCQLE05abBwLt6MmzDgKn8M+VAgL+vISCCQLb3objDdbv59h9gNdET ejeySXt8FGuMhl9" /> </div></form> </body> </html> css /***************************************************** AUTHOR: Denis Hoctor WEBSITE: [url="http://ambassador-recruit.com"]http://ambassador-recruit.com[/url] VERSION: 1.0 ****************************************************/ /******************************************* HTML ELEMENTS *******************************************/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } body { font: .80em/1.9em Verdana, Tahoma, Helvetica, sans-serif; color: #1576BD; text-align: left; background: #cee1f0 url(../images/bg.gif) 0 0 repeat-x; } /* links */ a { color: #4284B0; background-color: inherit; text-decoration: none; } a:hover { color: #9EC068; background-color: inherit; } /* headers */ h1, h2, h3 { font: bold 1em 'Trebuchet MS', Arial, Sans-serif; color: #1576bd; } h1 { font-size: 1.5em; } h2 { font-size: 1.2em; } h3 { font-size: 1.0em; } /* body format */ p, h1, h2, h3 { margin: 10px 1px; } p { line-height: 16px; margin: 20px 1px; } ul { padding: 0px 0px 0px 0px; } li { padding-top: 0px; } ul.links { list-style: none; margin:10px 0 10px 15px; padding:0; } ul.cruise li { margin-bottom: 40px; } ul.other li { margin-bottom: 50px; } ul.clients li { margin-bottom: 75px; } ul.aboutus { list-style: none; margin:10px 0 10px 15px; padding:0; } ul.aboutus li { margin-bottom: 60px; } /* images */ img { border: none; margin: 0px auto; } .border { border: 2px solid #CCC; padding: 1px; margin: 4px; } img.float-right { margin: 5px 0px 5px 15px; } img.float-left { margin: 5px 15px 5px 0px; } /******************************************* LAYOUT *******************************************/ div#wrap { width: 800px; margin: 30px auto; padding: 5px; text-align: left; background-color: #FFF; } div#header { width: 100%; height: 300px; background: url(../images/header.jpg); } div#content-wrap { background: url(../images/content_wrap_bg.jpg) 0 0 no-repeat; width: 800px; clear: both; } /* Strip */ #strip { padding:2px 10px 4px 10px; color:#1576bd; } #strip p { margin:0; } #strip a { color:#1576bd; } #strip a:hover { color:#192666; } /* Strip - breadcrumbs */ #strip #breadcrumbs { width:500px; margin:0; padding:0; } /* Strip - RSS */ #strip #search { float:right; width:250px; height: 20px; margin:0; padding-left:25px; background: url(../images/btn_search.gif) no-repeat top left; color: #FFF; } #sideandmainwrap { clear:both; } div#main { width: 478px; min-height: 450px; padding: 30px 5px 10px 20px; } div#sidebar { position: relative; line-height: 16px; float: right; width: 278px; height: 350px; padding: 30px 15px 10px 0px; } div#footer { width: 100%; background: url(../images/rline.gif) no-repeat top right; } div#site-designer { width: 800px; margin: 0 auto; } /******************************************* CLASSES *******************************************/ /* Quick Search */ .search-box { padding-left:120px; } /* Sidebar */ #sidebar ul.sidemenu { list-style: none; margin:10px 0 10px 15px; padding:0; } #sidebar ul.sidemenu li { margin-bottom:1px; } /* About Us */ .aboutusdrop { height: 125px; } /* Floating */ .f-left { float: left; } .f-right { float: right; } .f-clear { clear: both; } /* Text alignment */ .t-left { text-align: left; } .t-center { text-align: center; } .t-right { text-align: right; } /* Text Sizing */ .t-small { font-size: 80%; } /* Text Other */ .bold { font-weight: bold; } .italics { font-style: italic; } .red { color: Red; } #singlecolumnpadding { padding: 30px 20px 10px 20px; } #contact { padding-left: 50px; } I think an error may have crept in somewhere?
August 11, 200818 yr Author Got it! Thanks for all the help. When I went back through the code I found what was missing.
Create an account or sign in to comment