Clearer question of my Css problem.

Discussion in 'OT Technology' started by zanyspy_dude, Apr 24, 2008.

  1. zanyspy_dude

    zanyspy_dude King of teh n00bz

    Joined:
    Aug 29, 2002
    Messages:
    4,473
    Likes Received:
    0
    Location:
    Indianapolis, IN
    This is the behavior i desire (and get in Fx beta 3)
    [​IMG]

    this is the undesired behavior i'm getting (in IE 7)
    [​IMG]

    here is the http file: http://silo.cs.indiana.edu:9354/testwebsite/photos.html
    the revelant section...
    Code:
    <div class="gallerycontainer">
        <ul class="gallery">
           <li><a class="thumbnail" href="pictures/photogallery/portfolio 027.jpg">
    			<img src="pictures/photogallery/portfolio 027.jpg" alt="painting 1 green" />
    	   		<span><img src="pictures/photogallery/portfolio 027.jpg" alt="painting 1 green" /><br />mixed media</span></a></li>
           <li><a class="thumbnail" href="pictures/photogallery/portfolio 004.jpg">
           		<img src="pictures/photogallery/portfolio 004.jpg" alt="" />
                <span><img src="pictures/photogallery/portfolio 004.jpg" alt="" /><br />oil on canvas</span></a></li>
    
    ****OMITTED SECTION *****
    
        </ul>
    </div>
    
    here is the css file: http://silo.cs.indiana.edu:9354/testwebsite/screenstyle.css
    with the revelant section:

    Code:
    /* Gallery Code is below */
    
    .gallerycontainer {
      position : relative;
      width : 280px;
      height : 400px;
    }
    
    .gallerycontainer .text {
      font-size : 11px;
      margin-bottom : 10px;
    }
    
    .gallerycontainer a, .gallerycontainer a:link, .gallerycontainer a:visited {
      font-weight : normal;
    }
    
    .gallerycontainer li, .gallerycontainer ul {
      list-style : none;
      margin : 0;
      padding : 0;
    }
    
    .thumbnail img {
      float : left;
      display : block;
      width : 60px;
      height : 60px;
      cursor : pointer;
      border : 2px solid #fff;
      outline : #ddd 1px solid;
      margin-right : 14px;
      margin-bottom : 14px;
      opacity : .5;
    }
    
    .thumbnail:hover img {
      border : 2px solid #999;
      opacity : .99;
    }
    
    .thumbnail span {
      position : absolute;
      left : -2000px;
      visibility : hidden;
      text-decoration : none;
    }
    
    .thumbnail:hover span img {
      margin : 0 0 5px 0;
      border : 0 solid #333;
      height : 390px;
      width : auto;
      opacity : .99;
    }
    
    .thumbnail:hover span {
      visibility : visible;
      top : 0;
      left : 250px;
      z-index : 50;
      font-size : 12px;
      color : #333;
      opacity : .99;
    }
    
    How do i make the behavior consistant across all browsers? What is the problem that makes IE render it incorrectly.

    I am aware that opacity doesn't work on IE yet.

    Thank you for looking at my problem.
     
  2. Peyomp

    Peyomp New Member

    Joined:
    Jan 11, 2002
    Messages:
    14,017
    Likes Received:
    0
    IE is doo doo. Ruins your day, huh? DOWN WITH MICROSOFT. FUCK IE. KILL THEM ALL.
     
  3. migwuk

    migwuk New Member

    Joined:
    Jan 30, 2004
    Messages:
    64
    Likes Received:
    0
    The problem is that IE is not standards compliant. Most web sites are written for IE because that is what most people use. Remember it comes free with Windows. Check the microsoft forums and see if there are any solutions there.
     
  4. Peyomp

    Peyomp New Member

    Joined:
    Jan 11, 2002
    Messages:
    14,017
    Likes Received:
    0
    1) Does it validate?

    Whenever I've asked for help on IRC, they first make me make the HTML and CSS validate. And then they go from there. So, I would recommend that you make it validate first before debugging it any further.
     
  5. zanyspy_dude

    zanyspy_dude King of teh n00bz

    Joined:
    Aug 29, 2002
    Messages:
    4,473
    Likes Received:
    0
    Location:
    Indianapolis, IN
    it validates :(
     
  6. Peyomp

    Peyomp New Member

    Joined:
    Jan 11, 2002
    Messages:
    14,017
    Likes Received:
    0
    This is really hard, because there is no FireBug DOM Inspector for IE 7, is there? But there are some tools, right? When I have this issue in Firefox, I inspect the DOM element that is fucking up, and that usually tells me what is wrong. I read about some MS web tool plugins for IE7 recently. What are you using to debug?
     
  7. Nocera

    Nocera ...

    Joined:
    Aug 9, 2000
    Messages:
    1,307
    Likes Received:
    0
    Location:
    Long Island, NY
    Try moving "float: left" to .gallerycontainer LI instead of having it in .thumbnail IMG.
     
  8. deusexaethera

    deusexaethera OT Supporter

    Joined:
    Jan 27, 2005
    Messages:
    19,712
    Likes Received:
    0
    My guess is you have <br /> tags between the images. I've seen that same behavior before, and it was caused by that. Use &nbsp; instead.

    EDIT: Let's try that again, this time with me paying attention. Get rid of the implicit line breaks in the anchor tags, like so:

    <li><span><a class="thumbnail" href="pictures/photogallery/portfolio 027.jpg"><img src="pictures/photogallery/portfolio 027.jpg" alt="painting 1 green" /></a></span></li>
     
  9. wizziebaldwin

    wizziebaldwin New Member

    Joined:
    Nov 30, 2007
    Messages:
    60
    Likes Received:
    0
    i have had similar problems ... most of the time i can solve them with using absolute positioning ... now this is NOT always the recommended solution because of different screen resolutions ... but i have found that i can place things where i want them to be.

    Code for 1024/768 and you will have a fairly decent result.

    It is unfortunate for the entire world that Microsoft, the world's leading disappointment in software design, architecture and implementation somehow got to be the largest vendor in the the world.

    If i could go back in time ... Bill Gates would have been born in Afghanistan.
     
  10. Peyomp

    Peyomp New Member

    Joined:
    Jan 11, 2002
    Messages:
    14,017
    Likes Received:
    0
    I still resort to tables for shit like this sometimes, because otherwise IE won't display it right.
     
  11. wizziebaldwin

    wizziebaldwin New Member

    Joined:
    Nov 30, 2007
    Messages:
    60
    Likes Received:
    0
    yeah ... tables is a LAST resort for me too
     
  12. deusexaethera

    deusexaethera OT Supporter

    Joined:
    Jan 27, 2005
    Messages:
    19,712
    Likes Received:
    0
    Tables are fine when done right. Don't blame the tool for the user's inability to use it right.
     
  13. Peyomp

    Peyomp New Member

    Joined:
    Jan 11, 2002
    Messages:
    14,017
    Likes Received:
    0
    Don't blame the tool? IE Sucks for web development. Its a piece of shit tool. MS did this intentionally to discourage open web development. This is not the user's fault. Fortunately, IE is at least improving.

    Or did you mean tables? As IE is not standards compliant, you often have to use tables when you shouldn't be, just to satisfy IE. Thats not the user's fault either.
     

Share This Page