1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

css problem with internet explorer

Discussion in 'CSS' started by cri8bat, Sep 3, 2009.

  1. #1
    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
     
    cri8bat, Sep 3, 2009 IP
  2. gumape

    gumape Peon

    Messages:
    30
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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):
     
    gumape, Sep 8, 2009 IP
  3. jordanthegreat

    jordanthegreat Active Member

    Messages:
    390
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    58
    #3
    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.
     
    jordanthegreat, Sep 8, 2009 IP
  4. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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?
     
    wd_2k6, Sep 8, 2009 IP
  5. codventure

    codventure Guest

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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...
     
    codventure, Sep 8, 2009 IP
  6. kjb

    kjb Greenhorn

    Messages:
    55
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #6
    Yeah, dirty, dirty tables are a thing of the past or only to display tabular data.
     
    kjb, Sep 9, 2009 IP
  7. cri8bat

    cri8bat Well-Known Member

    Messages:
    1,459
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    160
    #7
    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 :)

     

    Attached Files:

    cri8bat, Sep 9, 2009 IP
  8. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #8
    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.
     
    wd_2k6, Sep 9, 2009 IP