Treehouse: Grow your CSS skills. Land your dream job.

Vigilantism on IE is justified..

  • # April 1, 2012 at 4:39 pm

    Im using a Social WP plugin for my site

    and i guess by default theres an issue with its position, but only on the front page..
    so i fixed that, no biggy with
    .home #wdsb-share-box {left:130px !important;}

    but now, im IE8 and IE9 the thing is pushed on top of my content.

    i added an IE9 specific style sheet.. changed the css for it, and it seems like something is covering it..
    i added a z-index:999 to it.. but nothing happened..
    if you go to my site on IE9 youll see on the far left of the content, a floating social bar thats almost half cut..
    any ideas preas?

    thank you

    PS: this appears to be the same for IE7 8 & 9

    # April 1, 2012 at 6:54 pm

    First of all: forcing a left position of 130 pixels looks great! ….if you have a screen resolution width of about 1366 pixels. Any smaller resolution, and the box will be closer to the middle. Any larger resolution, and the box will not be touching your main block.

    And then it causes the troubles you mention above (which makes sense because positioning it “fixed” conflicts with the image carousel at the top).

    So….don’t fix it that way, cause although it may solve one problem, it creates a couple of new ones.

    That’s not IE’s fault, it’s the code itself that’s funky — the Share box code is placed within the carousel on the home page. I’m not sure if that’s what the plugin did or if you placed it there, but it needs to be moved out of the carousel and (probably) somewhere in the CONTENT div (that’s where it is on all other pages, where it does work).

    # April 1, 2012 at 7:07 pm

    wow.. its wonderful when one pays for something and they do dumb stuff like this. i see what you mean about it being in the carousel, and i notice the mygallery visibility is hidden.. will get right on it.

    im going to take a nab at the other thing too, this always happense to me i forget about width.. i notice when i shrink my browser, the box stays put and is now on top of content .
    could you point me in the right direction on that ?

    # April 1, 2012 at 7:10 pm

    [ edit ]
    Took too long to compose this post. Sorry for the re-hash!

    Also, I would imagine #mygallery has overflow: hidden on purpose – you’ll see scrollbars, otherwise.

    It would seem you have a similar issue in Chrome and Firefox…


    Is there a reason you decided to put the “share box” inside the stepcarousel? I would recommend placing it somewhere separate (first/last child of #wrapper, maybe), so positioning would be easier to deal with.

    in any case, where do you want the bar to appear?

    If you used fixed position, it will always appear “on top of” (or “underneath”) your main content when the browser window is too narrow, unless you position it dynamically via javascript.

    If you position it absolutely, it would be a lot easier to keep “off to the side,” but it wouldn’t be fixed to the viewport (it would scroll up/down with the page).

    # April 1, 2012 at 7:25 pm

    i didnt manually place the sharebox there, i installed this plugin and thats just where it put it.. so i just looked around and have no clue how to remove it from the carousel.
    so i just installed a different plugn and it appears to work fine now.

    would you guys/gals? tell me what you see now just so im certain? i appreciate it

    thank you particularly traq for the huge efforts with the screen cap and all that good stuff i greatly appreciate it.

    err EDIT
    ok so when i shrink my browser while on a POST/Game the new social box stacys attached. good..
    but on the home page it does now.. wth.. :(

    # April 1, 2012 at 10:51 pm

    I get the feeling this is just a conflict between the carousel and the share plugins. Disable the carousel, just to see if the social sharing plugin works fine on the home page.

    # April 2, 2012 at 1:18 am

    it was a conflict wit hthe carousel so i tried a different social plugin, and it works now. only when i try to resize the browser, the box stays put and hovers over content. but only on the home page

    # April 2, 2012 at 7:18 am

    You still have these strange hacks, maybe you should remove that:

    .home #wdsb-share-box {
    left:130px !important;
    left:100px !important9;
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.