SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Obsessive designer Infizi's Avatar
    Join Date
    May 2004
    Location
    North Pole
    Posts
    450
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Weird rendering in IE/CSS

    Hey guys,

    Ive just finished redoing all my css and added drop shadows to this project (http://www.youwillknowmyname.com/template.php).

    Now, in Firefox its fine (shock horror....). There are 2 main problems in IE which i cannot seem to fix.

    1)IE has added its 3px margin, but i cant find where (i can see it just cannot fix it) ?!?! i tried using ma\rgin-top:-3px; but it doesnt seem to work......?

    2)This really confuses me. The top box has no bottom border, while the exact same box below using the exact same css doesnt seem to render the bottom border (done using background-image:uel() repeat-x bottom

    Any help would really be apreciated. I just cannot work out wht IE renders the same thing different.
    New Design - PHP Slowly flowing in!

    Infizi Studio's

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    You shouldn't use the '\' hack to deliver styles to IE6< use the '* html' hack instead..

    I would simplify your structure for your rounded box and use background images rather than inline ones.
    Code:
    <div class="rounded">
      <div class="top"></div>
      <div class="middle">
        <!-- Content goes here -->
      </div>
      <div class="bottom"></div>
    </div>

  3. #3
    Obsessive designer Infizi's Avatar
    Join Date
    May 2004
    Location
    North Pole
    Posts
    450
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, probably sounding dum but using your structure (which seems logical, and was my first choice) how do i add my images as the background> (one for each corner??)

    The box needs to be able to change size, so there is no set width or height to use a full background image with?
    New Design - PHP Slowly flowing in!

    Infizi Studio's

  4. #4
    Obsessive designer Infizi's Avatar
    Join Date
    May 2004
    Location
    North Pole
    Posts
    450
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, i added a border to my outer container, and if you look in IE the bottom border is at the top? (almost?!) Why is IE so stupid?
    New Design - PHP Slowly flowing in!

    Infizi Studio's

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    If you need the box to be flexible then you would need
    Code:
    <div class="rounded">
      <div class="top"><span></span></div>
      <div class="middle">
        <!-- Content goes here -->
      </div>
      <div class="bottom"><span></span></div>
    </div>
    The you could style something like..
    Code:
    .top {
      height: 14px;
      background: #AEB0B3 url(tl.gif) no-repeat top left;
      overflow: hidden; /* for ie */
    }
    .top span {
      background: transparent #AEB0B3 url(tr.gif) no-repeat top right;
    }
    yeah?


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
  •