Cannot remove border. Cannot fix proportions.

[tilleya]

Hello, I am having troubles fixing a few small issues. I have provided both the html and the css, as well as a screenshot. Here are the issues.

I like the photo’s on the page but I don’t want the images at the top to have a border.

I like the size of the photo thumbnails, but the flickr ones are distorting. I don’t mind if there is clipping, but I want to keep that size.

I assume that if both these are fixed than the distorted header images will be fixed by default, but if not than I need them to be sized appropriately.

I also would like to have everything center a little nicer.

Thanks for any help.

[img]http://s3.amazonaws.com/scrnshots.com/screenshots/205113/screen_shot_2009-10-25_at_41529_pmpng_large[/img]

CSS

Code:

/*
Chris Coyier
https://css-tricks.com
*/

* {
margin: 0;
padding: 0;
}
html, body, #bg, #bg table, #bg td {
height:100%;
width:100%;
overflow:hidden;
}
#bg {
position: fixed;
}
#bg div {
height:200%;
left:-50%;
position:absolute;
top:-50%;
width:200%;
}
#bg td {
text-align:center;
vertical-align:middle;
}
#bg img {
margin:0 auto;
min-height:50%;
min-width:50%;
}
#cont {
position:absolute;
top:0;
left:0;
z-index:70;
overflow:auto;
}
.box {
margin: 0 auto;
padding: 50px;
}
body {
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
}
.clear {
clear: both;
}
a {
outline: none;
}
img, a img {
border: none;
}
h1 {
font-weight: normal;
border: none;
}
p {
font-weight: normal;
font-style: italic;
font-size: 10px;
color: #FFF;
}
#page-wrap {
min-width: 800px;
}
#twitter, #flickr, #scrnshots {
width: 25%;
float: left;
padding: 20px;
min-width: 200px;
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 12px;
font-weight: normal;
color: #666;
}
img.profile-pic {
float: left;
padding: 5px;
}
#flickr img, #scrnshots img, #twitter img {
height: 100px;
width: 100px;
margin: 7px;
clear: both;
border: 3px solid white;
}
.tweet {
width: 250px;
padding: 10px;
margin: 5px 0;
background: url(images/transpBlack50.png);
}
a:link {
color: #09F;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #C93;
}
a:hover {
text-decoration: none;
color: #06C;
}
a:active {
text-decoration: none;
color: #09F;
}

HTML

Code:

[Historical Forums User]

Do you mean the solid white, 3px border around the flickr, twitter and scrnshots images?

If so, remove following rule from your CSS:
border: 3px solid white;

So that it looks like this:

Code:

#flickr img, #scrnshots img, #twitter img {
height: 100px;
width: 100px;
margin: 7px;
clear: both;
}

[dcp3450]

some browsers will default an image to have a border (I’ve run into it before) you may want to change that to border: none; instead of removing the border declaration altogether.

[Author]

Posts