No replies
ddazedangel
Offline
newbie
Last seen: 3 years 18 weeks ago
Timezone: GMT-5
Joined: 2011-07-16
Posts: 1
Points: 2

In my browsers the layout displays like this:
http://i55.tinypic.com/eiv0us.png

But in a friends browser, perhaps of a higher resolution, the layout displays like this:
http://i.imgur.com/LOwbP.png

I would like to know what changes I need to make to the code to make my design look like the first screen capture across all browsers and screen resolutions. Help?

The design is live at webs.com so you can source it:
http://varves.webs.com/hurriedoutcome.htm

The part of the code that (I'm pretty sure) needs to be focused on has to do with the sidebar. I made it float at the top with a width:auto; to span the whole top of the page.

/* FORMAT THE SIDEBAR ------------------ */
 
#sidebar { 
width:auto;
padding-top:15px;
background-attachment:fixed; 
background-image:url("http://i55.tinypic.com/2074vp4.png");
font: normal 11px "Georgia", serif;
color: #606060; 
list-type: block;
min-height: 210px;
text-align: auto; 
margin:0; }
 
div#sidebar a, div#sidebar a:link,  div#sidebar a:visited, li.sbaritem a, li.sbaritem a:link, li.sbaritem a:visited, li.sbaritem a:active{ 
text-align: center; text-transform: lowercase;  padding: 2px;color: #ffffff; font: italic 12px "Trebuchet MS", serif; letter-spacing:0px;}
 
div#sidebar a:hover  { 
color: #ffffff; 
letter-spacing:1px;}
 
 
.sbarbody{padding: 20px; }
 
.sbarbody2{position: relative; float:left; max-height: 350px; margin-bottom:50px; margin-left:275px; width:auto; padding: 5px; color: #545454; width: 240px; line-height: 1.5em; }
 
ul.sbarlist{
padding-left: 0px;
margin-left: 0px;
display:block;
list-style-type: none;
}
 
li.sbaritem { width: 190px; max-height: 350px;padding:3px;margin:4px; background-color: #FFC851;margin-right:265px;
}
 
li.sbaritem a:hover  { 
letter-spacing:1px;
}
 
#sidebar_linklist  {
color: #ffffff;
position: relative; 
float:right;
display:block;
}
 
.sidebar-links {}
 
li.sbaritem a{text-align: center; font-size: 10px;letter-spacing: 1px;  list-style-type: none;}
 
.defaultuserpic{display:none;}
 
.sbarcalendar {
background-color:#DFE364; 
padding: 5px; color:#ffffff;
max-height: 350px;
}
 
.sbarbody#sidebar_calendar{
position: relative; 
float:left; 
margin: 0 0px 0 0; 
width: 180px; 
display:block;
}
 
.sbarbody#sidebar_tags, .sbarbody#sidebar_summary, 
.sbarheader, li.sbartitle {display:none;}

Any ideas, however minor, would be appreciated. Big smile