Two questions about CSS

[sOid]

I've been customizing my delicious template for a while now and it's close to perfect for my use.

I have 2 things that annoy me a bit and I hope one of you guys have the answer

Firs question: The images on my about page have a thick border of something like 5 pixels, I want to get rid of this but I can't find the correct CSS tag to edit.

More importantly, I want the layout to have a fixed width. Is this even possible? The layout is fine with horizontal photo's but it gets too narrow with vertical photo's. If possible, I'd like to leave the menu width with vertical photo's the same as with horizontal ones.

This is my CSS code:
/*
Delicious Template for Pixelpost

Creator: JaySoto
Site: http://www.sotolicious.com/delicious
E-mail: jason.m.soto@gmail.com

Edited by: Jeroen Berkenbosch

*/

/* ========== Universal Elements ========== */

body {
background-color: black;
font: 11px/20px verdana, helvetica, arial, sans-serif;
color:#acacac;
margin:0px;
padding:0px;
background-image:url(../images/bg.jpg);
background-repeat: repeat-x;
background-position: center top;
}

a:link {
color: #eee;
text-decoration: none;
}

a:visited {
text-decoration: none;
color: #eee;
}

a:hover {
color: white;
text-decoration: none;
}

a:active {
text-decoration: none;
color: #eee;
}

p {
padding: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}
h2 {
font-size:18px;
}

h3 {
font-size:16px;
}

h4 {
font-size:14px;
}

h2 h3 h4 {
color:#fff;
}

h5 {
font-size:12px;
color:#3F7795;
color:#ccff00;
padding-top: 0;
margin:0px 0 10px 0;
}
#styleswitcher {
top:0px;
left:0px;
z-index:100;
position:absolute;
width:100%;
text-align:right;
}

#styleswitcher img {
margin:8px 8px 8px 0;
}

#header {
top:0px;
position:absolute;
width:100%;
height:60px;
}
#logo {
height:60px;
position:absolute;
left:0px;
z-index:500;
}

#logo_sub {
width:100%;
position:absolute;
bottom:0;
padding-bottom:7px;
font-size:24px;
letter-spacing: -.05em;
}

#nav {
height:60px;
position:absolute;
right:0px;
z-index:1000;
}

#nav_sub {
position:absolute;
bottom:0;
right:0;
padding:0px;
margin:0px;
color:white;
}

#nav_sub a {
padding:2px;
color:white;
}

#nav_sub a:hover {
color: #ccff00;
}

.current {
color: #ccff00;
font-weight:bold;
}
/* ========== IMAGE Page Specific ========== */

#image_wrapper {
position:relative;
margin-left:auto;
margin-right:auto;
}

#photobox {
text-align:center;
background:#151515 url(../images/loading_d_dark.gif) no-repeat center;
margin-left:-21px;
position:absolute;
top:60px;
margin-bottom:20px;
}

#image_footer {
text-align:center;
float:none;
margin-top:4px;
}

#info {
background-color: black;
text-align: left;
position: absolute;
margin-left:-21px;
top:53px;
z-index: 1000;
filter:alpha(opacity=90);
-moz-opacity:.90;
opacity:.90;
font: 10px/12px verdana, helvetica, arial, sans-serif;
}

#info-in {
position:relative;
padding:15px;
overflow:visible;
}

#title-heading{
font-size: 20px;
font-weight: normal;
color: #ccff00;
text-align: left;
letter-spacing: -1px;
padding-bottom:15px;
}

#title-heading .date {
font-size: 14px;
font-weight: normal;
color: #999;
}

#description {
margin-bottom:15px;
background:#151515;
padding:15px;
}
#notes {
text-align: left;
}

#image-border {
position:relative;
margin:0;
}

#menu_browse{
position: absolute;
margin: 0px;
margin-right:-10px;
padding: 0px;
top: 0px;
left: 0px;
z-index:10;
}
#menu_browse a{
outline: none;
}

#menu_browse_prev, #menu_browse_next{
width: 49.9%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}

#menu_browse_prev {
top: 0px;
left:0px;
float: left;
}
#menu_browse_next {
top: 0px;
right:0px;
float: right;
}

#menu_browse_prev:hover, #menu_browse_prev:visited:hover {
background: url('../images/prevImage.png') no-repeat center center;
cursor: pointer;
}
#menu_browse_next:hover, #menu_browse_next:visited:hover {
background: url('../images/nextImage.png') no-repeat center center;
cursor: pointer;
}

#thumbnails{
text-align: center;
margin:6px 0px 10px 4px;
width:56px;
float:left;
position:absolute;
top:53px;
margin-left:-17px;
}

.thumbnails {
border:1px solid black;
margin:0 1px 2px 1px;
filter:alpha(opacity=25);
-moz-opacity:.25;
opacity:.25;
}

.current-thumbnail{
border:1px solid black;
margin:0 1px 2px 1px;
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}

.thumbnails:hover {
border:1px solid black;
margin:0 1px 2px 1px;
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
.exif {
color: #acacac;
}

/* ========== COMMENTS Specific ========== */

#recentcomments {
margin-bottom:15px;
padding:15px;
background:#151515;
}

#recentcomments ul {
padding:0px;
margin:0px;
list-style:none;
}

#recentcomments li {
color:#666;
margin:0px 0px 15px 0px;
padding-left:16px;
/* padding-right:45px;*/
background: url(../images/comment.gif) no-repeat;
}

#addcomment {
margin-bottom:15px;
padding:15px;
background:#151515;
}
/* ========== COMMENTS FORM Specific ========== */

.comment-button {
border:1px solid #CCC;
}

.input {
border:1px solid #CCC;
width:90%;
}

.textarea {
border:1px solid #CCC;
width:100%;
}

.formfield{
width:250px;
padding:2px;
margin:0px auto;
font:10px verdana, arial, helvetica, sans-serif;
color:#444;
border:1px solid #464646;
background:#white;
}
.formfield:hover, .formfield:focus{
border-top:1px solid #3F7795;
border-bottom:1px solid #3F7795;
border-left:1px solid #3F7795;
border-right:1px solid #3F7795;
background:#464646;
color:yellow;
}
.formbutton{
font:10px verdana, arial, helvetica, sans-serif;
padding:5px;
margin:0px auto;
color:#7D7D7D;
background:#272727;
border:1px solid #464646;
}
.formbutton:hover{
color:#2CCBE9;
background:#272727;
border-top:1px solid #3F7795;
border-bottom:1px solid #3F7795;
border-left:1px solid #3F7795;
border-right:1px solid #3F7795;
}


/* ========== BROWSE Page Specific ========== */

#browse_wrapper {
position:relative;
width:712px;
margin-right:auto;
margin-left:auto;
}

#browse_box {
text-align:center;
position:absolute;
top:60px;
}
#browse_thumbs {
width:540px;
float:left;
text-align:left;
margin-right:2px;
}

#browse_thumbs .thumbnails {
border:none;
margin:0 2px 4px 2px;
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
#browse_thumbs .thumbnails:hover {
border:none;
margin:0 2px 4px 2px;
filter:alpha(opacity=50);

-moz-opacity:.5;
opacity:.5;
}
#browse_categories {
width:150px;
float:right;
text-align:left;
background:#222;
padding:10px;
height:100%;
}

.viewing {
font-size:14px;
font-weight:bold;
color:white;
}
/* ========== ABOUT Page Specific ========== */

#about_wrapper {
position:relative;
width:712px;
margin-right:auto;
margin-left:auto;
}

.announce {
padding: 8px;
text-align: justify;
margin-bottom:10px;
}

#about_box {
text-align: justify;
padding:0px;
margin:0px;
position:absolute;
top:60px;
}

#about_box h3 {
color:white;
}
#about_box img {
margin:0 10px 5px 0;
border:3px solid #444;
}

#footer {
width:100%;
margin-top:12px;
text-align:center;
}

/* ========== END OF FILE ========== */


Thanks alot!

Edit: woops, it might help to give the url to my photoblog! http://photo.berkenbosch.net :)

[codepoit]

For the image border on the about page...I believe the line in your CSS to edit is this one:
#about_box img {
margin:0 10px 5px 0;
border:3px solid #444;

Not sure about your other question, but I'm sure someone else will be by to help with that...

[dakwegmo]

The code that determines the layout width to change is in the image_template.html file. Around line 62 you should see something like this
<div id="image_wrapper" style="width:<IMAGE_WIDTH>px;">
the <IMAGE_WIDTH> tag sets the layout to the same width as the main image displayed that day. You make the layout a fixed width by changing either this line, or removing the style attribute, and adding the width to your style sheet.

I don't know how this will effect the rest of your layout, but this is where you'll need to start to get a fixed width layout.

[sOid]

Great! Works like a charm :D

Thanks a bunch :)

edit: gonna try the width thing now :)

[sOid]

Well, it works, but partly.

The menu stays the same width but the image aligns to the left now. I think it's pretty hard to center vertical photo's, isn't it?

Example: http://photo.berkenbosch.net/index.php?showimage=4

[dakwegmo]

If you're trying to keep the menu a fixed width, but leave the photo and thumbnail bar centered, it might be easier to move the title and menu outside the image_wrapper layer.

[sOid]

Thank you, it's exactly how I want it now! :)

This is what I did:
I left the image_wrapper the same width as the image with the <IMAGE_WIDTH> tag.
I then placed the title+menu bar above the image_wrapper, just below the RSS button thing. After that I made a copy in the CSS file of the image_wrapper and renamed it to menu_wrapper.
The last thing I did was putting the menu in the new menu_wrapper with a fixed width of 800px :)

Thanks again!