Grow your CSS skills. Land your dream job.

SOLVEDPage displaying differently across different browsers

  • # 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 26, 2009 at 5:32 am

    use a strict doctype, if you use transitional, IE just makes it look like shit. so change your doctype first see if that makes a difference.

    your nav, display inline

    # 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 6:15 am
    Quote:
    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.

    The idea is that you start with a reset, that way you have a level playing field across all browsers.

    This will take care of your nav:

    Code:
    #nav li {
    float: left;
    display: inline;
    }

    If I had built the page I would have had a left content div as well as a right content, then it would be simple to line them up.
    The rest can be taken care of with the css reset.

    Oh, and nobody bothers with iemac so don’t worry about that.

    # 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 28, 2009 at 5:29 am
    Quote:
    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.

    I’ll say it again. The idea is to start with a reset.
    It’s not the reset that is messing up your page, it is your code. If you start with a reset and then apply positioning, margins, padding etc. then your pages will look the same in all browsers.

    # 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 2:31 am

    very top of your css should be

    Code:
    *
    {
    padding:0;
    margin:0;
    }

    thats your reset….. think of resetting any small bugs from any random browser to your blank canvas, then you can tell it to pad or margin to whatever you like.

    Also use the strict doctype, as IE can be funny

    # 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 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".