Sidebar spilling over with IE 7 and different res

[leehughes]

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:

Meta Data

SPONSORSHIP LOGOS GO HERE

Copyright © Lee Hughes

Designed by Lee Hughes

thanks

http://www.leehughes.co.uk

[TheDoc]

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.

[leehughes]

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 :)

[TheDoc]

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

[leehughes]

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..

[Author]

Posts