CSS solve-me-do Page 6

  • Deleted user 31 May 2011 15:37:58
    AS, can you check this link and see if that's any better?

    Thanks.
  • magicpanda 31 May 2011 15:46:08 14,845 posts
    Seen 10 hours ago
    Registered 15 years ago
    It will be the PNG files. Older IEs dont like PNG images. There is a fix knocking around somewhere on the internets.

    That site is an SEO disaster but I'm sure you knew that.
  • askew 31 May 2011 15:50:47 19,116 posts
    Seen 8 hours ago
    Registered 14 years ago
    IE6 spazzes out with transparent PNGs. There's a proprietary CSS filter you can add which will help, but I've a feeling there are some JS hacks which will help.
  • magicpanda 31 May 2011 15:54:19 14,845 posts
    Seen 10 hours ago
    Registered 15 years ago
    Personally, I'd get that nice little bit of code in there that tells people with IE6 to fuck themselves and download a proper browser.
  • Deleted user 31 May 2011 15:55:21
    MagicPanda - yeah I know it is. I'm getting paid peanuts and they're insisting on all kinds of stupid stuff that I would never choose to implement - 100% horizontal headers and footers, 100% vertical side bar, 100% background - no matter what size the browser.

    I've spent so much time fucking about with itthat I can't be arsed embedding the fonts.
  • AcidSnake 31 May 2011 15:56:12 8,137 posts
    Seen 4 hours ago
    Registered 13 years ago
    Managed to take a screenshot

    Still that problem, though the floating footer seems ok now...

    If you are using PNGs I believe one of the DXimageFilters from Microsoft should fix it...
  • magicpanda 31 May 2011 15:57:25 14,845 posts
    Seen 10 hours ago
    Registered 15 years ago
    Fair play. You'll be wanting that IE6 update thing then. Save you a load of grief :)

    http://ie6update.com/
  • Deleted user 31 May 2011 16:01:33
    The scaling background can go behind the text on a small window which makes the text quite hard to read. Maybe a white box with fade off behind the text would help?
  • Deleted user 31 May 2011 16:11:31
    Mr-Brett - I agree with you completely, but alas, I'm building it as per the provided PSD file.
  • Deleted user 31 May 2011 16:26:14
    I'd just put a rather subtle one in then and not mention it to the client :)
  • Deleted user 31 May 2011 16:28:10
    Oh yeah, sorry I misunderstood your suggestion initially but now it makes perfect sense.

    :)
  • Deleted user 31 May 2011 16:32:08
    Oh ok, I thought there was something a little strange about your reply :)
  • Deleted user 2 September 2011 11:30:31
    Can anyone see what the problem here is?

    I can't figure out why the 6 - 11 is floating off to one side.
  • agparrot 2 Sep 2011 11:35:45 11,901 posts
    Seen 5 years ago
    Registered 16 years ago
    Hmm, have you tried just bunging a line break in ahead of the 6 - 11?
  • sport 2 Sep 2011 11:39:31 14,996 posts
    Seen 7 hours ago
    Registered 14 years ago
    hmm - that is a bit weird - hack fix was to put a " " between the "11" and "September"

    EDIT: Obviously remove any "real" spaces between them too.
  • AcidSnake 2 Sep 2011 11:40:04 8,137 posts
    Seen 4 hours ago
    Registered 13 years ago
    Very odd...the code seems fine...
    Try eliminating the space between the 11 and september and seeing what it does...
  • Deleted user 2 September 2011 11:41:58
    Ha. Well done Sport. I have no idea why it was doing that but your 'hack' worked.

    Thanks mate.
  • warlockuk 2 Sep 2011 11:47:16 19,492 posts
    Seen 15 hours ago
    Registered 15 years ago
    Weird. If you take float:left; out of header_content it fixes it.
  • sport 2 Sep 2011 11:48:27 14,996 posts
    Seen 7 hours ago
    Registered 14 years ago
    I think we should alert the W3C immediately!!! To the CSS mobile!!!
  • warlockuk 2 Sep 2011 13:34:32 19,492 posts
    Seen 15 hours ago
    Registered 15 years ago
    Nana nana nana nana style-sheet!
  • AcidSnake 2 Sep 2011 13:56:59 8,137 posts
    Seen 4 hours ago
    Registered 13 years ago
    Holy padding (0px)!

    Look at the display (block) CSSMan! To the left (10px) of that color (#ff0000) lighthouse!
    Someone's floating (left) unconscious! We must clear (both) him of the water before he drowns in the overflow (hidden)...

    I'll stop now...
  • Deleted user 5 October 2011 21:13:50
    Working on this at the moment.

    3 things I need to solve.

    1 - Why aren't the words ENGLISH | FRENCH in their div box?
    2 - How can I create a DIV that fills from underneath the bottom of the grey footer to the very bottom of the page no matter what size the browser. The scaling background image should only be visible in the bar across the top under the logo.
    3 - The one pixel gap underneath the white toolbar containing the buttons.
  • sam_spade 5 Oct 2011 21:31:45 15,744 posts
    Seen 7 months ago
    Registered 17 years ago
    border: medium solid #000000;
    left: 700px;
    overflow: hidden;
    padding: 5px 10px;
    position: relative;
    top: 105px;
    width: 110px;

    fixes the English| French in Firefox.
  • sam_spade 5 Oct 2011 21:31:47 15,744 posts
    Seen 7 months ago
    Registered 17 years ago
    Post deleted
  • sam_spade 5 Oct 2011 21:39:34 15,744 posts
    Seen 7 months ago
    Registered 17 years ago
    #button_bar {
    background-color: #FFFFFF;
    height: 33px;
    width: 100%;
    }

    will make the background of your button bar white, so you don't need an image.
  • Deleted user 5 October 2011 21:41:40
    Thanks Sam. That's 1 down, 2 to go.

    I hate these projects. The designer has an idea in her head of how she wants it, but I, as the coder have other ideas.
  • sam_spade 5 Oct 2011 21:41:54 15,744 posts
    Seen 7 months ago
    Registered 17 years ago
    same for the footer bar

    #footer_bar {
    background-color: #efefef;
    height: 50px;
    width: 100%;
    }
  • Deleted user 5 October 2011 21:44:35
    Just twigged that what I was using as the repeatable background was probably one pixel shorter than what I actually needed.
  • Deleted user 5 October 2011 21:47:25
    Oh and Sam, what was wrong with the English|French div?
  • sam_spade 5 Oct 2011 22:58:52 15,744 posts
    Seen 7 months ago
    Registered 17 years ago
    I can't remember, you've changed it since I looked - it does look better without.

    Overflow:hidden will compress a box to the perfect size when there isn't a defined height. Which makes using overflow incorrect, but it does serve a purpose.
Log in or register to reply

Sometimes posts may contain links to online retail stores. If you click on one and make a purchase we may receive a small commission. For more information, go here.