SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with tableless design

    okay, what i am trying to accomplish here is have 1 div tag that holds the navigation for my site, i have 5 buttons algned to the left, but i also want 1 image aligned to the right, i have got it to look perfect in Opera, but IE is putting the image on the right on a new line, wich is something i dont want!

    heres the html i have at the moment
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
    xml:lang="en" lang="en">
    <head>
    <title>playpen</title>
    <link rel="stylesheet" href="/common/design.css" type="text/css">
    </head>
    <body>
    <div class="header"></div>
    <div class="navigation"><img src="/common/images/button-menu.gif" alt="" height="15" width="27"/><img src="/common/images/button-tutorials.gif" alt="" height="15" width="45"/><img src="/common/images/button-resources.gif" alt="" height="15" width="51"/><img src="/common/images/button-portfolio.gif" alt="" height="15" width="45"/><img src="/common/images/button-contact.gif" alt="" width="43" height="15"/><img class="floatright" src="/common/images/head-nav-right.gif" alt="" width="2" height="15"/></div>
    </body>
    </html>
    and the css
    body { background-color: EEEEEE; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px}
    div.header { border: #000000 solid; visibility: visible; clip: rect( ); width: 100%; border-width: 1px 1px 0px; height: 60px}
    div.navigation { width: 100%; background-image: url(/common/images/head-nav-bg.gif); background-repeat: repeat; border: #000000; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
    .goright { text-align: right}
    .floatright { float: right; margin: 0px; padding: 0px;}


    can anybody see why it is displaying properly in opera and not in IE? or does anybody know how i should be doing this?

    Thanks :0)screenshot
    Last edited by iTec; Apr 1, 2002 at 08:00.

  2. #2
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    problem solved! special thanks to cybercodeur

    the solution;
    <span style="float: left;"><img src="/common/images/button-menu.gif" alt="" height="15" width="27"/><img src="/common/images/button-tutorials.gif" alt="" height="15" width="45"/><img src="/common/images/button-resources.gif" alt="" height="15" width="51"/><img src="/common/images/button-portfolio.gif" alt="" height="15" width="45"/><img src="/common/images/button-contact.gif" alt="" width="43" height="15"/></span><span style="float: right;"><img src="/common/images/head-nav-right.gif" alt="" width="2" height="15"/></span>
    </div>
    IE was getting confused so it was putting the head-nav-right.gif on a new line, put the other images in that line in a span tag and align it to the left and then put the last image in a seperate tag and align it to the right... problem solved (thanks cyber)

  3. #3
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As tableless designs are becoming more and more recommended by the W3C and the fact that there really are so many gotchas, I liked this essay on CSS layouts. Definitely good reading:
    http://www.thenoodleincident.com/tut...son/index.html

    Especially take note of the box lessons.

    Sketch
    Aaron Brazell
    Technosailor



  4. #4
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Sketch
    http://www.thenoodleincident.com/tut...son/index.html

    Sketch
    wooow thats freaky! i read that very article about half an hour ago..

  5. #5
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    heh heh. On the same wavelength, eh? Now if I could get your graphics abilites we'd be set....oh and yeah...you'd need to ditch ASP for PHP.

    Sketch
    Aaron Brazell
    Technosailor



  6. #6
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Sketch
    heh heh. On the same wavelength, eh? Now if I could get your graphics abilites we'd be set....oh and yeah...you'd need to ditch ASP for PHP.

    Sketch
    *pases sketch my garphic abilities*
    and i started learning php a while ago, but um it never eventuated anywhere (its to confusing compared to asp)


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
  •