The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS SOLVEDPage displaying differently across different browsers

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #25558

    Dear all,

    The page above displays differently on IE and Mozilla browsers and on different OS. In Mozilla (Windows and Mac), everything is fine. However with IE, both Mac and Win version displays them differently (and wrongly!).

    IE gives a lot of problem:
    1. Step-down menu but that has been fixed with Chris advice (although not updated yet in the server) (Mac IE and Win IE shows different things – its okay on Mac IE but step down on Win IE)
    2. Content of index.html is not aligning properly like in Mozilla (Mac IE and Win IE shows different things)
    3. Services.html is also not displaying properly (Mac IE and Win IE shows different things)

    What are we missing here? I don’t understand what’s going on. Any advice is greatly appreciated!



    the "id" is used once per page, if you want to use it more than once, use "class"

    are you using a "css reset" to standardize tag values between browsers? if not, you should.



    on IE7, the content on the Contact page does not show up,
    to see it, the clear div needs to be moved inside the content box


    Tenggarong Office:

    Jl. Belida No. 60
    East Kalimantan
    Ph: +62 (811) 582748
    Contact Person: Ir. Mardiono

    when it is positioned outside the content box, it does not clear the floats inside the content box correctly.

    good luck, I like the look of the site



    Thank you for pointing them out Al, I appreciate your help!

    I’ve made sure that id="list" is now class="list". Thank you also for pointing out the </div> that should’ve been outside the content box. It’s pretty obvious I’m new to CSS, I got no idea what a "reset css" is and after googling it up, I’ve grabbed Erics CSS (Thanks Eric!) Reset at … -reloaded/ :

    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;
    /* remember to define focus styles! */
    :focus {
    outline: 0;
    body {
    line-height: 1;
    color: black;
    background: white;
    ol, ul {
    list-style: none;
    /* tables still need ‘cellspacing=”0″‘ in the markup */
    table {
    border-collapse: separate;
    border-spacing: 0;
    caption, th, td {
    text-align: left;
    font-weight: normal;
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: “”;
    blockquote, q {
    quotes: “” “”;

    But how exactly do I implement a CSS Reset? I just paste the code above in my stylesheet and all the elements changed! I thought it would just reset everything without affecting later-defined properties.

    Ikthius, I will change the doctype to strict and pray! Thanks for the display:inline advice!

    I have uploaded them and will only be able to view the changes on a Windows machine later on in the evening. By the way I notice the following are absolutely horrifying on IE (Mac):
    1. Modal window does not work
    2. Tables look like hell
    3. Tons of alignment issues across every link
    4. There’s a horizontal scrollbar at the bottom of index.html (no idea why).

    Thanks again for your advice and comment guys! I will post updates in the evening after getting access of IE in Win.



    So here’s the latest scoop, I just previewed the updated file in IE on a Win platform.

    I’m wondering what I’m doing wrong. I’ve specified display:inline for #nav but it’s still stepping down. It’s really confusing me :roll: They’re all set to strict html now by the way.

    Thanks again guys for whatever advice/suggestions you can share with me.


    Hi Apostrophe,

    Thank you for your advice.

    I’ve included #nav li { to the stylesheet now but will only be able to preview it in a PC later on. I will post my observation here later on.

    Regarding the reset CSS, I used Eric Meyers ( ) and paste his code at the very top of my stylesheet – but the result is unpredictable. It messed up the elements on my page.

    Also tried using a separate stylesheet but the result also messed up tons of my elements (ie. h1, h2, space after, etc). Notice that all headers and spaces after/before text disappears even though there’s also set styles for those elements.
    UPDATE: Okay my mistake, I think I just have to set those styles ‘manually’ now. Am I correct? Anyway I’ll be working on them soon and will post further progress here.

    View the page with reset here: (only the first page).

    Thank you everyone for your suggestions/advice! <-previewable here


    My mistake, thanks for pointing it out to me. Now I gotta look over the code a-z… quite tedious actually but it’s the only way.


    Hi again,

    This is the latest preview:

    Thank you for everyone’s advice and tips & tricks! Thanks to Chris too for this community as this wouldn’t be possible without him!

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.