SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict Huscy's Avatar
    Join Date
    Jul 2002
    Location
    Newcastle, UK
    Posts
    318
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Easy (i hope) -- how to replace a 2 col,1 row table?

    well, how is this generally done - i have the following code...

    .thumbcont {
    margin-top: 10px;
    border: 1px solid #000;
    }

    .thumb {
    width: 300px;
    vertical-align: top;
    border: 1px solid #000;
    position: relative;
    top: 2px;
    }

    ... ... ... and ... ... ...

    <div class="thumbcont">
    <img src="tutorial_images/thumb_pinkex.gif" width="50" height="50">
    <span class="thumb"> <strong>Shockwave</strong>
    <br>
    This tutorial will teach you how to make an explosion with a sort of shock wave coming from it.
    </span>
    </div>


    but IE and Mozilla put the description (after the <br>) after the IMAE, whereas i want it alongside them (see attachment for what i mean)
    Attached Images Attached Images

  2. #2
    SitePoint Addict
    Join Date
    Sep 2003
    Location
    Europe
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It displays like that because of your <br>. You could do it like this:
    HTML Code:
    <div class="thumb">
    <img src="tutorial_images/thumb_pinkex.gif" alt="thumbnail" />
    <h2>Shockwave</h2>
    <p>This tutorial will teach you how to make an explosion with a sort of shock wave coming from it.</p>
    </div>
    And CSS:
    Code:
    div.thumb { width:360px; border:1px solid #999; }
    img[alt="thumbnail"] { width:50px; height:50px; border:none; float:left; margin: 5px; }
    .thumb p, .thumb h2 { margin-left:60px; }

  3. #3
    SitePoint Addict Huscy's Avatar
    Join Date
    Jul 2002
    Location
    Newcastle, UK
    Posts
    318
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that code works perfectly in firebird, but not in IE, (the text is still underneath the image, not alongside it) - is there a workaround for this because i think that (once again) firebird will be rendering it correctly...

  4. #4
    SitePoint Addict
    Join Date
    Sep 2003
    Location
    Europe
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, maybe the CSS is too advanced for poor old IE. What if you give the img a class="thumbnail" in the html and make the css say img.thumbnail { ... } with the same rules as above, would that work?

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by yngwin
    Okay, maybe the CSS is too advanced for poor old IE. What if you give the img a class="thumbnail" in the html and make the css say img.thumbnail { ... } with the same rules as above, would that work?
    That will work too, although it's not as clean. IE/Windows has trouble with CSS2 (it doesn't understand any of it), and using the attribute selector (the "[alt=]" part of the CSS) won't work in it, but will in most other browsers.

  6. #6
    SitePoint Addict Huscy's Avatar
    Join Date
    Jul 2002
    Location
    Newcastle, UK
    Posts
    318
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks guys that works fine now - damned IE, is it true that ms arent making any more standalone versions of IE? if so does that mean that until people upgrade to the new windows version, css2 will not be supported in IE??

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Huscy
    thanks guys that works fine now - damned IE, is it true that ms arent making any more standalone versions of IE? if so does that mean that until people upgrade to the new windows version, css2 will not be supported in IE??
    Yes and yes, sadly .


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
  •