Grow your CSS skills. Land your dream job.

help with css

  • # August 22, 2009 at 3:12 am

    I have a calendar, the calendar displays a box with the description of an event on the days that there are events. In firefox, the box pops up on the left, in I.E, it pops up on the right. This means that the box gets clipped because it’s sticking half way outside the parent element. I put display: visible on the description box, and that allows it to display properly, but it also collapses my page. anyone know why this would happen? How could display: visible do this? How do you get around a problem like this?

    Rob
    # August 22, 2009 at 6:08 am

    can you link us? :D

    I am not sure there is a "display:visible" – its either block, inline, inline-block or hidden for the main ones (along with lists and table options…)

    # August 22, 2009 at 1:38 pm

    Oops, I meant overflow: visible

    sorry. I can’t link to it because the site is live and I don’t want to break it so you can see it. The issue is that the calendar sits in a box. When I mouse over an event, another box pops open next to the mouse to display a description of that event, the box that pops up gets clipped when it leaves the posting area, When I put overflow: visible on the post box, it collapses the page.

    I guess you can see it working to get an idea. I have removed the sidebar and extended the post area to generically fix it for right now, but I want to fix it properly by putting the sidebar back in and using the overflow property.

    http://www.mtscottchog.org

    there is .narrowcolumn then .post_container then .post

    Code:
    .narrowcolumn {float:left; display:inline; width:650px;overflow:hidden;padding:0; font-size:1.2em; margin:0;}
    .post_container {margin:0 0 30px; background: url(‘images/post_tile.jpg’);border:1px solid #a6a38c; border-top:1px solid #f1f0e4;}
    .post {padding: 30px 42px 40px; background: url(‘images/post_top.jpg’) repeat-x top; }
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".