SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot mdavis1982's Avatar
    Join Date
    Mar 2004
    Location
    Stoke-on-Trent
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS IE Problem Help!

    Hi all...

    I am currently designing my new web site and am having horrific problems getting something very very simple to work in Internet Explorer 5.5, 6.0 and 7.0 on Windows. It works in FireFox and Safari, but not in IE which is a major pain!

    The site is here: http://www.yellowduckdesign.co.uk/ydd/

    Basically, I have my divs for the design plans all floated left which works like a charm... I have a h5 element in the div which does image replacement for the headings, and gives the box the rounded top corner.

    However, I have put an image right at the bottom of the design plan (the blue 'more information' button) to give the box a nice rounded bottom edge. This should sit flush with the bottom of the box so that no orange is visible underneath it.

    This works in everything except the 3 browser mentioned before (surprise, surprise!). There is a few pixels of orange showing underneath the blue button which makes the site look a mess. Also, specifically in explorer 5.5, it also causes the far right box to move underneath the other floats. This only happened when I put the blue information button in, and looks like the double-float mrgin bug, but I don't think it is.

    If anyone has a fix for this I would be most grateful as I need to get the site up and running really soon!

    Thanks in advance guys... I know you won't fail me!

    Matt

  2. #2
    ~unplugged Ainslie X11's Avatar
    Join Date
    Feb 2005
    Location
    Langley, Virginia
    Posts
    1,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Without looking at the css, the first thing to try it to create a wrapper for the four floats, float it left and position it relatively, then put the four floats inside it. After the fourth float, put in another div with this css

    .clearitup {
    clear: both;
    height: 0px;
    font-size: 0px;
    line-height: 0px;
    }

    After the last float, put in

    <div class="clearitup"></div>

    Put it in, before you terminate the wrapper div.

    Do people still use IE5.5?


    working hard is hard work

  3. #3
    ~unplugged Ainslie X11's Avatar
    Join Date
    Feb 2005
    Location
    Langley, Virginia
    Posts
    1,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I looked at it in IE6, the buttons inside the floats, you are allowed to position absolutely - if you haven't already.

    For IE, use the following hack

    *top: 55px;

    The asterix will work in 6 and 7, not sure about 5.5. The positioning in IE will be different to other browsers.

    h5#bespoke-plan
    {
    height: 58px;
    margin: 0 0 5px 0;
    background: #cf9737 url('../../images/site/headings/bespoke-plan.jpg') top left no-repeat;
    text-indent: -9999px;

    }

    Also, if you want to put text in between a tag, and not display it in the browser, you can use a span

    h5 span {
    display: none;
    }

    <h5 id="bronze-plan"><span>bronze design plan</span></h5>


    working hard is hard work

  4. #4
    SitePoint Zealot mdavis1982's Avatar
    Join Date
    Mar 2004
    Location
    Stoke-on-Trent
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help...

    I've now got this mostly working, apart from one more thing!

    In Internet Explorer 6.0, my left column seems to have too much margin on the left hand side. It looks like the double-float margin bug, but I've applied the { display: inline } fix to get around this...

    It only seems to exhibit the behaviour when I put the images in the column also...

    Is there a quick fix for this?

    Thanks...

    Matt

  5. #5
    SitePoint Zealot mdavis1982's Avatar
    Join Date
    Mar 2004
    Location
    Stoke-on-Trent
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I seem to have fixed this!

    Thanks for all the help anyway!

  6. #6
    ~unplugged Ainslie X11's Avatar
    Join Date
    Feb 2005
    Location
    Langley, Virginia
    Posts
    1,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...sweet


    working hard is hard work


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
  •