SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member byss's Avatar
    Join Date
    Sep 2002
    Location
    Central Kentucky, USA
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry can't make IE work

    I'm working for a website as an intern through my local community college. For the area (central KY), I'm fairly advanced in CSS, but to any real standard, I'm somewhere around intermediate level.

    The website is at :http://kyrail.rrhistorical-2.com/
    The CSS code is at: http://kyrail.rrhistorical-2.com/sitewide.css

    If you look at the site through Mozilla / Firebird / Netscape 6, it looks exactly as I intended. In Opera, almost everything works except the railway running vertically as a border of the main content area, which I don't like but can live with. In AOL and IE, however, it gets all shot to hell. The right column is way off the screen, the layout is adjusted wrongly, and nothing looks good.

    Anyone know of a workaround that will still let the site look like I want it to (ie, via Mozilla)? I suck at workarounds and hacks when the CSS code fails due to my lack of understanding or the lack of browser compatibility.

    Thanks for any help.
    Caution: Slow Children At Play -->

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2003
    Location
    Northern CA, USA
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For starters, use a complete DOCTYPE:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    More on that here:
    http://www.alistapart.com/articles/doctype/

    You also need to clear your floats. Put this is your CSS:

    div.clear {
    clear: both;
    height: 0;
    margin: 0;
    line-height: 0;
    font-size: 1px; /* keeps IE from applying extra space below */
    }

    and this in your HTML: <div class="clear">

    immediately after <!-- right nav --> and before your last </div>

    Also, take a look at your: DIV#content. Your width and margins don't match the rest of your dimensions.

    HTH

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I notice you have used absolute positioniong and floats also in the same style. You can't have both ! Either its floated or its not.

    I've adjusted your css to absolutely position the left and right columns (and added a doctype as mentioned by Albion7 above).

    I've also corrected the width issues and the gaps between the image and text. The resulting css will look the same in firefox/mozilla and ie6.

    As there ar no floats you don't need to clear anything as all the changes are in the css.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Kentucky Railway Museum</title>
    <style type="text/css">
    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    background-color: #FF0000;
    padding:0;
    margin:0;
    }
    div#leftnav {
    position: absolute;
    height: auto;
    width: 120px;
    left: 0px;
    top: 0px;
    background-color: #FF0000; 
    }
    div#header{
    margin-left: 120px;
    position: relative;
    height: 140px;
    background-color: #FF0000; }
    div#content{
    margin-left: 120px;
    position: relative;
    width: 510px;
    padding:0 20px;
    background-color: #FFFFFF;
    background-image: url(http://kyrail.rrhistorical-2.com/images/track_bg2.png);
    background-repeat: repeat-y;
    background-position: center;
    }
    div#header{ }
     
    div#block{ }
    img.header {
    text-align: center;
    vertical-align: top;
    }
    div#rightnav{
    position:absolute;
    width: 120px;
    left:690px;
    top:0px;
    background-color: #FF0000;
    }
    a.nav {
    color: #000000;
    font-variant: small-caps;
    font-size: 13px;
    font-weight: bold;
    }
    hr {
    color: #FFFF00;
    height: 1px;
    width: 70%;
    }
    a.nav:hover {
    color: #FFFF00;
    font-variant: small-caps;
    font-size: 13px;
    font-weight: bold;
    }
    #header img {display:block}
    </style>
    </head>
    <body>
    Add the rest of your page to the above and the page should display as you want.

    (If you want to change the left and right columns to floats then you will need to change your code around to accomodate it as floated content must come before the content that is to wrap around it. Or alternatively float all columns but then the columns will drop when the screen is resized.)

    Paul

  4. #4
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [QUOTE=byss]I'm working for a website as an intern through my local community college. For the area (central KY)QUOTE]


    byss,

    where at in central Kentucky do you work? I am living in Lexington right now and would love to do some work design or work for somewhere doing web design. Any openings where you are at by any chance?




    -Deron

  5. #5
    SitePoint Member byss's Avatar
    Join Date
    Sep 2002
    Location
    Central Kentucky, USA
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, HTH & Paul. THANKS!!

    I knew about the DOCTYPES, but just forgot to update it. I use the XHTML 1.0 Transitional, however, not HTML 4.01.

    Now I have one more problem, though. With IE6, using the code Paul gave me for CSS, the header image runs too much to the right as it is. If I delete the
    #header img {display:block}
    he added, the image aligns correctly, but there is a pixel sized gap running horizontally between the header and the content.

    The files have been moved, so use these, please:

    http://kyrail.rrhistorical-2.com/index.html http://kyrail.rrhistorical-2.com/ref/sitewide.css


    Deron, I live near Elizabethtown, about 1.5 hours west at the opposite end of Bluegrass Parkway.

    There's a couple of web design firms here, but from the bit of research I've done so far, they're not very good. They use table and image based layouts, and barely meet even HTML standards, more or less more modern ones. I don't know if they're hiring or contracting out though. Try your yellow pages for either web design or internet, and then just start searching "Lexington KY websites" on Google and see if any need improvements so you can get your foot in the door, so to speak.
    Last edited by byss; Apr 19, 2004 at 14:42. Reason: file moved
    Caution: Slow Children At Play -->

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Try this instead (although the other style should have worked ok but I didn't have time to check again).

    Code:
    #header img {vertical-align:bottom}
    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •