Grow your CSS skills. Land your dream job.

Sidebar spilling over with IE 7 and different res

  • # December 14, 2009 at 6:38 am

    Hi,

    While at uni I noticed my website has messed up.. Am currently on IE7 with a resolution of 1280×1024.

    The icons on my sidebar are spilling over into a new row..(skype icon) It is messinng up my widget below it as well..

    There is also a problem with the footer..my intense debate thingy is on the left when it shoould be on the right…

    Code:
    #content #sidebar {
    float: right;
    width: 280px;
    }
    #content #sidebar p {
    font-size: 15px; /* dontate button) */
    line-height: 22px;
    color: #FFFFFF;
    }
    #content #sidebar p a {

    color: #FFFFFF; /* dontate button) */
    text-decoration: none;
    }
    #content #sidebar p a:link {
    color: #FFFFFF;
    text-decoration: none;
    }
    #content #sidebar p a:hover {
    color: #FF9933;
    text-decoration: none;
    }
    #content #sidebar h1 {

    color: #FFFFFF; /* feedburner button) */
    font-size: 10px;
    }
    #content #sidebar h2 {
    color: #FFFFFF; /* categories button) */
    font-size: 15px;
    }
    #content #sidebar h3 {
    font-size: 15px;
    color: #FFFFFF;
    }
    #content #sidebar h3 a {

    color: #FFFFFF;
    font-size: 17px;
    text-decoration: none;
    }
    #content #sidebar h3 a:hover {
    color: #FF9933;
    text-decoration: none;
    }
    #content #sidebar h2 a {
    color: #FFFFFF;
    font-size: 15px; /* Subscribe button) */
    text-decoration: none;
    }
    #content #sidebar h2 a:hover {
    color: #FF9933;
    font-size: 15px;
    text-decoration: none;
    }
    #content #sidebar li {
    color: #FF9933; /* Bullet point of posts button) */
    line-height: 20px;
    }
    #content #sidebar li a {
    color: #FFFFFF; /* posts button) */
    font-size: 15px;
    text-decoration: none;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    }
    #content #sidebar li a:link {
    font-size: 15px;
    color: #FFFFFF; /* seconds posts button) */
    text-decoration: none;
    }
    #content #sidebar li a:hover {
    color: #FF9933;
    text-decoration: underline;
    }
    #content #sidebar a {
    color: #000000;
    }

    #subfooter {
    margin:0 auto;
    color: #FFFFFF;
    width:720px;
    height:250px;
    background-color:#00000;
    clear:both;
    }

    #subfooter .widget {
    width:240px;
    float:left;
    }

    #subfooter .widget .inner {
    width:240px;
    padding:10px;

    }

    #subfooter li {
    width:220px;
    list-style-type: none;
    list-style-image: none;
    }

    #subfooter li ul {
    width:200px;
    padding-left:0px;
    color:#FF9933;
    font-size:14px;
    }

    #subfooter li {
    padding: 5px;
    }
    width:90%;
    text-decoration:none;
    clear:both;
    color:#FF9933;
    display:block;
    }

    #subfooter a:hover {
    background-color:#000000;
    color:#FFFFFF;
    }

    #footer {
    float: left;
    width: 100%;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #FFFFFF;
    margin-top: 10px;
    }

    #footer #meta {
    float: left;
    width: 40%;
    }

    #footer #sponsorship {
    margin-left: auto;
    margin-right: auto;
    }

    #footer #copyright {
    float: right;
    width: 25%;
    text-align: right;
    }
    #footer #website {
    margin-left: auto;
    margin-right: auto;
    }

    #footer a {
    color: #FFFFFF;
    text-decoration: underline;
    }
    #footer a:link {
    color: #FFFFFF;
    text-decoration: underline;
    }
    #footer a:hover {
    color: #FFFFFF;
    text-decoration: none;
    }

    My first thoughts were to just expand the width of the sidebar but am not sure if this is the correct way given that its a resolution issue

    Code:
    < ?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('subfooterleft') ) : ?>
    < ?php endif; ?>
    < ?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('subfootercenter') ) : ?>
    < ?php endif; ?>
    < ?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('subfooterright') ) : ?>
    < ?php endif; ?>

    < ?php wp_footer(); ?>

    thanks

    http://www.leehughes.co.uk

    # December 14, 2009 at 3:21 pm

    Your intense debate thinger is being floated to the left, so there’s no surprise there.

    As for the icons… there’s probably just not enough width on the sidebar for IE7 (it does some wild things sometimes). I would simply just make the icons a few pixels smaller each.

    # December 14, 2009 at 3:39 pm

    Thank god it’s simple.. Av added an extra 20 pixels on the sidebar and reduced the main area to 650px.. Will have to check 2moz to see if it has worked :)

    Can you point me to the css for intense debate? am not sure which float am trying to edit.. I can’t really see it on firebug.. Is it just the footer left?

    Thanks again :)

    # December 14, 2009 at 3:49 pm

    The icons are still dropping to a new line.

    The CSS for the debate is showing:

    #IDWidget5 {
    float:left;
    min-width:0;
    width:auto;
    }

    But it’s being pulled externally:

    http://www.intensedebate.com/wCSS.php?widget=3

    # December 14, 2009 at 4:06 pm

    Ahhh of course!! I forgot intense debate had their own!

    Thanks..

    Well av added another 20px on.. I know the images are 64px x 64px and av added 40px now so hopefully that should be ok now..

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

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