SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot shiftless's Avatar
    Join Date
    Mar 2005
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy IE float and layer problem

    I'm trying to fix my page so that it works in IE. It looks fine in Firefox:

    http://www.clubspaces.com/all-stars-new.htm


    The problem between the two is the area where the 3 customers are displayed (down left side of page). As you can see in FF, the border around the quotation underlaps the screenshot image. In IE, I can't get the image and the div containing all the text to overlap. This is the relevant CSS:

    Code:
    .allstar-container {width: 437px; margin: 10 0 20 72;}
    .allstar-container img {position: relative; z-index: 150; margin: 0; padding: 0;}
    
    .allstar-container-text {width: 299px; margin-left: 137px; border: none;}
    
    .allstar-quote {background-image: url(../images/allstar_framebg.gif); background-repeat: repeat-y; margin: 10 0 0 0;}
    .allstar-quotetext {padding: 15 15 5 25;background-image: url(../images/allstar_frametop.gif); background-position: top center; background-repeat: no-repeat;}
    and here is the relevant HTML (for just one of those sections):


    Code:
    <div class="allstar-container">
         <img src="images/allstar_lewisville.gif" align="left" />
         <div class="allstar-container-text">
             <span class="congrats">Congratulations!</span><br />
             <span class="clubname">Greater Lewisville Moms and More</span><br />
             <span class="allstarhead">Community Administrator:</span> <span class="allstartext">Liz B.</span><br />
             <span class="allstarhead">Online Since:</span> <span class="allstartext">November 2006</span>
             <div class="allstar-quote">
                   <div class="allstar-quotetext">
                      <span class="allstarquote">"The best feature of our website is the ability to instantly update information on any page of the site. Our events often get moved or cancelled due to sick kids and being able to post something quickly is a real life-saver!"</span>
                   </div>
                   <img src="images/allstar_framebottom.gif" />
              </div>
        </div>
    </div>
    I've tried various combinations of position: relative, and display: inline, but nothing seems to work. My brain is fried so any help would be appreciated.
    Last edited by shiftless; Mar 2, 2007 at 18:28. Reason: typo in CCS sample- ; should have been :

  2. #2
    SitePoint Zealot shiftless's Avatar
    Join Date
    Mar 2005
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    solved

    well, adding this IE rule seems to have worked, but I'd still like to know if it can be done better:

    * html .allstar-container img {margin-right: -15px;}

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I can't tell if its anything to do with your problem because you have taken the page down but you have omitted the units from your dimensions which some browsers will treat as zero.

    e.g.

    Code:
    .allstar-container {width: 437px; margin: 10 0 20 72;
    You must specify the unit (e.g. px)

    Also that section of html code is a semantic mess and there is not one normal html element in there as you have used only divs and spans and also used far too many of them. It looks like a list would be more semantic and I'm sure some of those nestings could be eliminated to make way for some cleaner code.

    You are also mixing in deprecated presentational mark up such as align="left" on your image when you should be floating the image instead.


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
  •