Forums

Give help. Get help.

  • # July 25, 2009 at 9:00 am

    Dear all,

    http://www.daveatwork.com/pt_bpp/index.html

    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!

    Dave

    # July 25, 2009 at 11:48 am

    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.

    Al

    # July 25, 2009 at 4:26 pm

    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

    Code:

    Tenggarong Office:

    Jl. Belida No. 60
    Tenggarong
    East Kalimantan
    Indonesia
    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

    Al

    # July 27, 2009 at 3:29 am

    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 http://meyerweb.com/eric/thoughts/2007/ … -reloaded/ :

    Code:
    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.

    Regards.

    # July 27, 2009 at 5:02 am

    So here’s the latest scoop, I just previewed the updated file in IE on a Win platform.
    [attachment=2]index.gif[/attachment]
    [attachment=1]index2.gif[/attachment]
    [attachment=0]services.gif[/attachment]

    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.

    # July 27, 2009 at 11:55 pm

    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 ( http://meyerweb.com/eric/tools/css/reset/index.html ) 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: http://www.daveatwork.com/pt_bpp/index2.html (only the first page).

    Thank you everyone for your suggestions/advice!

    http://www.daveatwork.com/pt_bpp/index.html <-previewable here

    # July 31, 2009 at 1:19 am

    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.

    # July 31, 2009 at 4:12 am

    Hi again,

    This is the latest preview:
    http://www.daveatwork.com/pt_bpp/reset/index.html

    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)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag