SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS issue - IE 5.0 vs IE 6.0

    Hey peeps, am working on a new design for a site for myself, sort fo an online resume, but am having trouble implementing CSS to design the page... Was working on it at work where I only have IE 5.0 and everything looked perfect, but got home and in IE 6 it does not seem to work ok...

    Here is the address: http://members.optusnet.com.au/wizardx8/

    And I'll post both the xHTML and CSS pages here...

    CSS:

    PHP Code:

    body
    {
    background-color#dcdcdc
    }

    table#main
    {
    background-color#f8f8f8;
    border-color#000000;
    border-stylesolid;
    border-width1px;
    height60%;
    width60%
    }

    table#inner
    {
    height100%;
    width100%;
    margin-top0px;
    margin-bottom0px;
    margin-left0px;
    margin-right0px;
    }

    tr#content
    {
    height100%;
    }

    div#centering
    {
    positionrelative;
    top15%;
    left20%
    }

    div#heading
    {
    margin-left0px;
    font-familyverdana;
    font-size40px
    }

    div#body
    {
    margin-left10px;
    margin-top10px;
    font-familyverdana;
    font-sizesmall
    }

    div#title
    {
    margin-left5px;
    font-familyverdana;
    font-size30px;
    color#d00000
    }

    a.nav:link
    {
    font-familyverdana;
    font-sizex-small;
    text-decorationnone;
    color#000000
    }

    a.nav:visited
    {
    font-familyverdana;
    font-sizex-small;
    text-decorationnone;
    color#000000
    }

    a.nav:hover
    {
    font-familyverdana;
    font-sizex-small;
    text-decorationunderline;
    color#d00000
    }

    a.nav:active
    {
    font-familyverdana;
    font-sizex-small;
    text-decorationunderline;
    color#d00000
    }

    div#dots
    {
    font-familyverdana;
    font-sizex-small;
    text-decorationnone;
    color#000000


    And the xHTML

    PHP Code:
    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    >

    <
    html>

    <
    head>
    <
    title>Jordan WindebankHome</title>
    <
    link rel="stylesheet" type="text/css" href="styles.css" />
    </
    head>

    <
    body>
    <
    div id="centering">
    <
    div id="heading">Jordan Windebank</div>
    <
    table id="main">
    <
    tr>
    <
    td>
    <
    table id="inner">
    <
    tr>
    <
    td>
    <
    div id="title">Welcome</div>
    </
    td>
    </
    tr>
    <
    tr id="content">
    <
    td valign="top">
    <
    div id="body">Body Text Here...</div>
    </
    td>
    </
    tr>
    <
    tr>
    <
    td align="center">
    <
    div id="dots">
    <
    class="nav" href="index.html">Home</a> : 
    <
    class="nav" href="skills.html">Skills</a> :  
    <
    class="nav" href="portfolio.html">Portfolio</a> :  
    <
    class="nav" href="personal.html">Personal</a> :  
    <
    class="nav" href="employment.html">Employment</a> :  
    <
    class="nav" href="print.html">Printable Resume</a> :  
    <
    class="nav" href="referees.html">Referees</a> :  
    <
    class="nav" href="contact.html">Contact</a></div>
    </
    td>
    </
    tr>
    </
    table>
    </
    td>
    </
    tr>
    </
    table>
    </
    div>
    </
    body>

    </
    html
    Now, you can see in the CSS file that the Table with the ID "main" should have height: 60% and in IE 5.0 this looks fine, but not in 6, in 6 it squashes it all up...

    Also, while I am at it, can anyone make any suggestion to make the coding a little better, or is this fine? I have done my best to use CSS for all of the layout, but a had to use a few tables as I just could not find a way to do it without them...

    Thanks guys (& gals)

    ~ Wiz

  2. #2
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone, I am lost here...

  3. #3
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i haven't had a chance to test your code, but i'll assume this is due to the fact that IE 5 doesn't use the "correct" CSS box model, whereas IE 6 now does. have a read through http://www.alistapart.com/stories/journey/4.html and see if that is indeed the case.
    hope this helps.
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  4. #4
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks redux, given me something to work from...

  5. #5
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the problem is that setting the height of a table as a percentage is not part of the CSS standard - this is a complete guess though and I may be wrong.

    Your site design just cries out to be done in pure CSS - there's nothing there that can't be done with CSS, in fact the design is simple enough that it might even be possible in NS4 compatible CSS

    I suggest the following HTML within the <body></body> tag:
    Code:
    <div id="header">
      <h1>Jordan Windebank</h1>
    </div>
    
    <div id="mainbox">
      <h2>Welcome</h2>
      Body text here...
    
      <div id="footer">
        <a class="nav" href="index.html">Home</a> : 
        <a class="nav" href="skills.html">Skills</a> :  
        <a lass="nav" href="portfolio.html">Portfolio</a> :  
        ... etc
      </div>
    </div>
    That's all the markup you need Then the basic CSS would look like this:
    Code:
    body {
      font-family: Verdana, Helvetica, arial, sans-serif; /* Provide alternative fonts */
      font-size: small; /* Set base font size */
      color: black; 
      background-color: whatever;
    }
    #header {
      width: 60%;
      margin-left: auto;  /* These center the div on the page */
      margin-right: auto;
    }
    #header h1 {
      font-size: 40px;
    }
    #mainbox {
      width: 60%;
      height: 60%;
      margin-left: auto;  /* These center the div on the page */
      margin-right: auto;
      border: 1px solid black;
      padding: 5px;
    }
    #footer {
      font-size: x-small;
      text-align: center;
    }
    That should get you started. Post here if you run in to any problems.

  6. #6
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Skunk, thank you, this has explained what I needed to know regarding layout via CSS, it was the one thing doing my head in, how to make boxes and the like, but this explains it perfectly...

    The problem now, is that it seems IE5 does not support the auto margins as it is centering everything to the left, as can now be seen at: http://members.optusnet.com.au/wizardx8

    I think I am also going to run into trouble soon with a few things, the main one being resolution...

    At 1024 x 768 and larger this looks perfect, but even as low as 800 x 600 things start to look stupid, especially the bottom links, as they drop to 2 lines, any ideas how I can combat this?

    Also as for IE6 not supporting height in %, is there any other way to make that box the same height on every page regardless of content? I am think that there is not, but then this entirely kills the concept of this design, which was a clean, centered layout... I know I could get away with it using iframes or possibly dhtml, but was hoping to find a sollution completely using xHTML and CSS

    If anyone can offer any suggestions I'm all ears...

    Thanks for the help so far,

    ~ Wiz

  7. #7
    SitePoint Addict
    Join Date
    Feb 2001
    Posts
    302
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem now, is that it seems IE5 does not support the auto margins as it is centering everything to the left, as can now be seen at:
    Put text-align:center in the body tag in your style sheet and this should center your divs in I.E 5.0, you will also have to put text-align:left in your parent divs like header and mainbox or all the text will be center aligned aswell.

  8. #8
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Neill, thank you, that did the trick...

    Have a few more hiccups only in IE that I would like to deal with before worrying about other browsers *gulps*

    Seems IE 5 does not like the font-size: x-small; as it keeps iot at the normal font size, though in IE6 it looks ok...

    Besides that I am pretty happy with it so far, now just need to work on cross browesr compatability, and more importantly, cross resolution...

  9. #9
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're working just in CSS/HTML, and it looks OK in IE6 in strict rendering mode, you should do just fine in Opera and Mozilla + siblings. Standards are good like that.

    (checks)

    Looks fine in a recent mozilla nightly.

    On the downside, you'll have your work cut out making it look good in netscape 4...

  10. #10
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK guys, getting there, but a new question, thisd layout has got me absolutely stumped...



    This is the layout I want, and this is the layout I currently have... Can anyone suggest how I do this in CSS so that it looks ok from 800x600 and higher? I would prefer it to be completely static, ie. not liquid, as it would make it look like any other web page out there...

    In that screenshot, the red bars on the side will be images... the grey in the background is the bgcolor, and the rest is plain text...

    Thanks for all the advice so far guys...

    ~ Wiz

  11. #11
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ^ bump ^

  12. #12
    My precious!!! astericks's Avatar
    Join Date
    Mar 2002
    Location
    Vancouver, BC
    Posts
    1,971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


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
  •