hi all I am developing and designing this website for a client and having probems with internet explorer it works nicely with firefox but not with IE http://alturl.com/oy8m the admission and course finder menus not working properly on IE need help urgently thank you Smit
Use table elements instead of floating division elements on your site, it will resolve your problem. The following sample code shows how to implement it. After that modification you need to change your style settings (remove float: left and float:right and modify some other settings for the new structure). <body> <table align="center"> <tr> <td id="header"> <img src="images/lchrm_header.png" border="0" title="LCHRM Header" alt="LCHRM Header" width="800" height="141"/> </td> </tr> <tr> <td> <table> <tr> <td id="main_links"> <ul> <li><a href="http://lchrmeducation.org.uk"onmouseOver="document.getElementById('homepage_page_image').src = 'images/home_page_header.jpg';" title="LCHRM Education Page">home</a></li> <li><a href="about_us/about_us.html"onmouseOver="document.getElementById('homepage_page_image').src = 'images/about_us_page_header.jpg';" title="LCHRM Education About Us">about us</a></li> <li><a href="accreditations.html"onmouseOver="document.getElementById('homepage_page_image').src = 'images/accreditations_page_header.jpg';" title="LCHRM Education Accreditations">accreditations</a></li> <li><a href="courses.html"onmouseOver="document.getElementById('homepage_page_image').src = 'images/courses_page_header.jpg';" title="LCHRM Education Courses">courses</a></li> <li><a href="admissions/admissions.html"onmouseOver="document.getElementById('homepage_page_image').src = 'images/admissions_page_header.jpg';" title="LCHRM Education Admissions">admissions</a></li> <li><a href="facilities.html"onmouseOver="document.getElementById('homepage_page_image').src = 'images/facilities_page_header.jpg';" title="LCHRM Education Facilities">facilities</a></li> <li><a href="life_in_london.html"onmouseOver="document.getElementById('homepage_page_image').src = 'images/life_in_london_page_header.jpg';" title="LCHRM Education Life In London">life in london</a></li> <li><a href="staff.html"onmouseOver="document.getElementById('homepage_page_image').src = 'images/staff_page_header.jpg';" title="LCHRM Education Staff">staff</a></li> <li><a href="jobs.html"onmouseOver="document.getElementById('homepage_page_image').src = 'images/jobs_page_header.jpg';" title="LCHRM Education Jobs">jobs</a></li> <li><a href="contact_us/contact_us.html"onmouseOver="document.getElementById('homepage_page_image').src = 'images/contact_us_page_header.jpg';" title="LCHRM Education Contact Us">contact us</a></li> </ul> <br /> <br /> <br /> <!--Notice Board--> <div id="notice_board"> <h3>notice board</h3> <p>This is the notice board</p> </div> </td> <td> <table> <tr> <td id="header_image"> <img src="images/home_page_header.jpg" id="homepage_page_image" width="551" height="327" alt="LCHRM Education" title="LCHRM Education" /> </td> </tr> <tr> <td id="marquee"> <marquee>This is text will rotate forever!</marquee> </td> </tr> <tr> <td> <table> <tr> <td id="admissions"> <h3>admissions</h3> <ul> <li><a href="#" title="course finder">course finder</a></li> <li><a href="#" title="online application">online application</a></li> <li><a href="how_to_apply.html" title="how to apply">how to apply</a></li> <li><a href="#" title="downloads">downloads</a></li> <li><a href="about_us/why_study_in_lchrm.html" title="why LCHRM">why LCHRM</a></li> <li><a href="entry_requirments.html" title="entry requirments">entry requirments</a></li> <li><a href="faq.html" title="faq">faq</a></li> </ul> </td> <td id="course_finder"> <h3>course finder</h3> <ul> <li><a href="#" title="business management">business management</a></li> <li><a href="#" title="accounting and finance">accounting and finance</a></li> <li><a href="#" title="computing and IT">computing and IT</a></li> <li><a href="#" title="english language">english language</a></li> <li><a href="#" title="tourism and hospilality">tourism and hospitality</a></li> </ul> </td> <td id="intro_text"> <h3>about LCHRM</h3> <p>LCHRM is situated in Greater London, where there exists a warm environment and world class facilities to enjoy. The social life in London is second to none in one of the world most vibrant and exciting places.</p> <p>Additionally, it also has world class study facilities, with numerous and museums. Our centre is within easy reach of all this and we are located near the peace and quiet of Valentines Park. This tranquil place will allow you to reflect on your learning and experience, to wonder and dream.</p> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td id="footer"> <p>Design by: Smit Mukesh Chacha</p> </td> </tr> </table> </body> Code (markup):
First, please ignore gumape's request to use tables rather than divs. Now, I don't see any problem in the Admissions and Course Finder menus apart from the border is a little different in IE. Is that the problem you are talking about? Be a bit more descriptive and I will help you out.
Do you realise how backwards this is. The new approach is to use floats instead of tables, so you better get learning otherwise you'll get left behind As for the problem as Jordan said I can't directly see any problem, what is the exact problem, and what version of IE?
Put this type of code in your CSS file .ie #signin_menu { margin-left: 8px; } .ie7 #signin_menu { margin-left: 8px; } .ie6 #signin_menu { border: 1px solid #ddeef6; width: 190px; } That is for IE for 5,6,7 version...
thank you all who replied to this thread I could reply you guys because I went for a mini break and arrive yesterday. I respect everyones opinion the problem I was mentioning is on IE 6 and maybe on IE7 the links below admissions and course finder are getting too much padding or margin. and the footer is overlapping the links I attached a screenshot for this css problem. (from browsershots.org) one with firefox and the other is with IE6. I would be glad if you guys could help me fixing this issue thank you
Ermmm first try removing the height from #admissions, you've set it at 220px yet it's larger than that, just let it expand auto or set a larger height if you really need.