SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot ChrisOSX's Avatar
    Join Date
    May 2002
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to do this without tables?

    If you wouldn't mind doing the following:

    Go to: http://www.rpgme.com and then click "About" and then click "FAQ" you'll see the example I'm talking about. I'm sorry I can't give you a direct link but you have to visit the home page first in order to get a session initiated or the FAQ page won't compile. (We're working on correcting that.)

    If you look at the faq.jsp page on NS6.2 or above, you'll see the desired effect which is a FAQ tab with a blue line 1px high running out from the right side to the end of the div.

    On IE6.0 the blue line is on a new line seperated by white space.

    Normally I would position that blue line to line up right next to the tab image using exact positioning with a table.

    Is there anyway to get the NS6 effect in IE6 using style tags?

    Here is the simple code:
    Code:
    <img src="../images/faqTab.gif" /><img src="../images/003366dot.gif" width="100%" height="1">

  2. #2
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    perhaps IE is giving the images a default margin?

    you could try <img style="margin: 0px; padding: 0px;" ...etc

  3. #3
    SitePoint Zealot ChrisOSX's Avatar
    Join Date
    May 2002
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks randem but that didn't make any difference.

    I made a quick sample page that can be linked to directly:

    http://www.rpgme.com/cssdev/testimg.html

  4. #4
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The quick and dirty answer is... "you're doing it wrong."

    Unfortunately, I can't think of a better way off-hand.

    I believe that you're getting stuffed up because of the two images next to each other with one set to 100%. In fact, I'm quite sure that the 100% is the major malfunction.

    What happens if you just toss in a "clear: left;" into the style on the second image?

  5. #5
    SitePoint Zealot ChrisOSX's Avatar
    Join Date
    May 2002
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heh. That much I know!

    Here is the code as is now, which you can see on the above example hasn't made any difference:

    Code:
    <div class="centerbox">
      <div class="content">
        <img src="../images/faqTab.gif" 
    style="height:20px;margin:0;padding:0;line-height:20px;verticle-align:bottom;" />
        <img src="../images/003366dot.gif" 
    style="width:100%;height:1;margin:0;padding:0;line-height:1px;verticle-align:top;" />
        <br />
        <br />
        This is the content area.
      </div>
    </div>

  6. #6
    SitePoint Zealot ChrisOSX's Avatar
    Join Date
    May 2002
    Posts
    104
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I feel like a ninny but the problem, as you can clearly see in the above code snippet is that I apparently don't know how to spell vertical...

    When I fixed that, everything rendered as I wanted.

  7. #7
    SitePoint Enthusiast rreames's Avatar
    Join Date
    Jun 2002
    Location
    Iowa
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    heh, Maybe thats the Englishe spelling.
    Apathetic Activist.
    reames.org

  8. #8
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aha! Then my suggestion is to get yourself a syntax highlighting editor.

    After having used one (UltraEdit) for some time now, I immediately know something is wrong when I don't see my words change color as I type them.

    It may help to prevent this in the future.


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
  •