Jump to content

Images Not Showing up the right size?


joecool

Recommended Posts

Hi all,

 

I have uploaded 3 images to sit at the top of three colums that I have on my home pages, but the images aren't stretching to the full length of the colum.

 

I have uploaded the page I am testing so you can see what I mean.

 

http://tinyurl.com/6cu4u6s

 

The images in question are the three that sit just below the Titles of the colums. i.e. the square people pictures are the ones I am referring to. The width of these are 260px which is the same with as the ones that sit just above them i.e this one: http://tinyurl.com/68x2hjw for example. However on screen they do not look the same size.

 

My css file is below (I am in the proccess of getting rid of a lot of the junk in it :blink: )

 

Start of css file

 

html, body, div, span,

applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

dd, dl, dt, li, ol, ul,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

font-weight: inherit;

font-style: inherit;

font-size: 100%;

line-height: 1;

font-family: inherit;

text-align: left;

vertical-align: baseline;

}

 

table

{

border-collapse: collapse;

border-spacing: 0

}

q:before, q:after,

blockquote:before, blockquote:after {content: ""}

strong {font-weight:bold}

 

 

 

/*#######################

Element Styles

#######################*/

 

body {font-size:12px; font-family:Arial, Verdana, Helvetica, sans-serif; color:#383b47; background:#ffffff}

a {outline:none; color:#0000ff; text-decoration:none}

a:hover {text-decoration:underline}

p {line-height:1.5em; margin:10px 0}

small {font-size:.8em; font-weight:normal}

em {font-style:italic}

img {border:none;}

 

h1 {margin:15px 0; font-size:2.05em; font-weight:bold; color:#383b47}

h2 {margin:15px 0; font-size:1.70em; font-weight:bold; color:#383b47}

h3 {margin:15px 0; font-size:1.25em; font-weight:bold}

h4 {margin:15px 0; font-size:1.25em; font-weight:bold}

h5 {margin-top:15px; font-weight:bold}

 

ol {margin:15px 0 15px 25px; line-height:1.5em; list-style-type:decimal}

ol li {margin:10px 0}

 

/*#######################

General Classes

#######################*/

 

.no_space {margin:0}

 

/*#######################

Layout Styles

#######################*/

 

#wrapper {overflow:hidden; width:918px; margin:0 auto}

 

 

/* ================================================================

This copyright notice must be untouched at all times.

 

The original version of this stylesheet and the associated (x)html

is available at http://www.cssmenus.co.uk

Copyright © 2009- Stu Nicholls. All rights reserved.

This stylesheet and the associated (x)html may be modified in any

way to fit your requirements.

=================================================================== */

 

#headercontainer {margin:0 auto;}

#headercontainer div.logowelcome {float:right;font-size:14px;line-height:2.0em;}

#headercontainer div.logotop {float:left;margin-top:30px;}

#headercontainer div.logobanner {float:right;}

#headercontainer p {font-size:14px; clear:both;}

#headercontainer p.beta {font-size:14px; vertical-align:top; display:inline; color:#4485e6; font-style:italic;}

 

 

 

#horizontalmenu {clear: both; padding:5px 0px 0px 0px; width:918px; list-style:none; height:31px; position:relative; z-index:500; font-size:1.25em; top:0px; margin-left:0px; }

#horizontalmenu li {float:left; width:153px; background: url(../images/NAV1.png) left top no-repeat;}

#horizontalmenu li a {display:block; text-align:center; padding:0 0px; float:left; width: 153px; height:31px; line-height:31px; background-color:transparent; color:#fff; text-decoration:none; font-weight:bold}

#horizontalmenu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

 

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

#horizontalmenu li a:hover {z-index:auto; position:relative; background:transparent url(); color:#fff;}

#horizontalmenu li:hover {position:relative; z-index:auto;}

#horizontalmenu li:hover a {background:url(); color: #F2F2F2;}

#horizontalmenu li:hover a.sub {background:transparent url();}

#horizontalmenu li.current a {background:#4585E7 url(../images/nav_button_hover.png);}

#horizontalmenu li a.home {background-color:transparent;}

#horizontalmenu li a.sub {background:transparent url() no-repeat center right;}

#horizontalmenu li.current a.sub {background:transparent url() no-repeat center right;}

#horizontalmenu :hover ul {left:0; top:31px; width:153px; background-color:transparent;}

 

/* keep the 'next' level invisible by placing it off screen. */

#horizontalmenu ul,

#horizontalmenu :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#horizontalmenu :hover ul li {margin:0}

#horizontalmenu :hover ul li a {width:153px; padding:0; text-align: left; text-indent:20px; font-size:.85em; background:#3A70C2 url(../images/nav_button_hover.png); color: #fff; height:31px; line-height:31px; }

#horizontalmenu :hover ul li a:hover {width:153px; padding:0; text-indent:20px; background-color:#6666FF; color:#ffffff; height:31px; line-height:31px;}

#horizontalmenu :hover ul :hover {background-color:#32a0f3; text-decoration:underline; }

 

 

 

#awards {clear:both; float:left; display:inline; padding:5px 15px 15px 15px; width:888px; background-color:#fff}

#awards h1 {clear:both; margin-top:2px; padding:20px 10px; font-size:1.8em; color:#383b47; background:#fff url(../images/h2_bg.jpg) left bottom repeat-x}

#awards h2 {clear:both; margin-top:2px; padding:20px 10px; font-size:1.4; color:#383b47; background:#fff url(../images/h2_bg.jpg) left bottom repeat-x}

#awards p {text-align:justify; line-height:1.4em; font-family:Arial, Verdana, Helvetica, sans-serif; font-size:1.15em;}

#awards img {display:block; margin-left:auto; margin-right:auto; text-align:center;}

 

 

 

#abovefold {float:left; display:inline; width:908px; padding:5px; background-color:#f6f6f6; border-top:solid; border-top-color:#ffffff; border-top-width:thick;}

#abovefold h2 {margin-top:0px; font-size:1.75em; text-align:center; line-height:1.15em; color:#4485e6;}

#abovefold h2.top {margin-top:0px; font-size:2.25em; text-align:center; line-height:1.15em; color:#4485e6;}

#abovefold h2.left {margin-top:0px; font-size:1.75em; text-align:left; line-height:1.15em; color:#4485e6;}

#abovefold .headblue {color:#4485e6;}

#abovefold h3 {font-size:1.4em; line-height:1.5em; font-weight:bold; color:#444444;}

#abovefold div {float:left; display:inline; margin-right:10px;}

#abovefold img.center {display:block; margin-left:auto; margin-right:auto;}

#abovefold p {line-height:1.4em; font-size:1.15em; font-family:Arial, Verdana, Helvetica, sans-serif;}

 

#abovefold3 {float:left; display:inline; width:908px; padding:5px; background-color:#ffffff; border-top:solid; border-top-color:#ffffff; border-top-width:thick;}

#abovefold3 h2 {margin-top:0px; font-size:1.75em; text-align:center; line-height:1.15em; color:#4485e6;}

#abovefold3 h2.top {margin-top:0px; font-size:2.25em; text-align:center; line-height:1.15em; color:#4485e6;}

#abovefold3 h2.left {margin-top:0px; font-size:1.75em; text-align:left; line-height:1.15em; color:#4485e6;}

#abovefold3 .headblue {color:#4485e6;}

#abovefold3 h3 {font-size:1.4em; line-height:1.5em; font-weight:bold; color:#444444;}

#abovefold3 div {float:left; display:inline; margin-right:10px;}

#abovefold3 img.center {display:block; margin-left:auto; margin-right:auto;}

#abovefold3 p {line-height:1.4em; font-size:1.15em; font-family:Arial, Verdana, Helvetica, sans-serif;}

 

 

#abovefoldclear {clear:both; float:left; display:inline; padding:0px; width:908px; background-color:#fff; margin-top:5px;}

 

#abovefold2 {float:left; display:inline; width:908px; padding:5px 5px 5px 5px; background-color:#f6f6f6}

 

#content {clear:both; float:left; display:inline; padding:5px 15px 15px 15px; width:888px; background-color:#fff}

#content h2 {clear:both; margin-top:0px; padding:0px; background:#fff url(../images/h2_bg.jpg) left bottom repeat-x}

#content h3 {clear:both; margin-top:2px; padding:20px 10px; font-size:1.5em; color:#383b47; background:#fff url(../images/h2_bg.jpg) left bottom repeat-x}

#content h4 {margin:15px 0; font-size:1.5em; font-weight:bold}

#content h5 {margin:15px 0; font-size:1.30em; font-weight:bold}

#content p {text-align:justify; line-height:1.4em; font-family:Arial, Verdana, Helvetica, sans-serif; font-size:1.15em;}

#content .survey {padding:75px 0px 75px 260px; background:url(../images/SAMPLETAB2.png) 0 50% no-repeat}

#content .say {padding:75px 0px 75px 260px; background:url(../images/SAMPLETAB.png) 0 50% no-repeat}

#content .awards {padding:75px 0px 75px 260px; background:url(../images/SAMPLETAB3.png) 0 50% no-repeat}

#content ol {line-height:1.4em; font-family:Arial, Verdana, Helvetica, sans-serif; font-size:1.1em;}

#content ul {line-height:1.4em; font-family:Arial, Verdana, Helvetica, sans-serif; font-size:1.1em; margin-left:15px;}

#content ol li {line-height:1.4em; font-family:Arial, Verdana, Helvetica, sans-serif; font-size:1.1em;}

#content ul li {line-height:1.4em; font-family:Arial, Verdana, Helvetica, sans-serif; font-size:1.1em; margin-left:15px}

 

#content .three_columns {float:left; display:inline; width:282px; margin-right:20px}

#content .no_space {margin-right:0}

 

#generallinks p {line-height:1.3em; font-size:1.1em; font-family:Arial, Verdana, Helvetica, sans-serif; margin:10px;}

#generallinks table {width:900px;margin:auto;}

#generallinks td {padding:0px 0px 50px 0px; vertical-align:middle;}

#generallinks h2 {clear:both; margin-top:2px; padding:20px 10px; font-size:2.25em; color:#383b47; background:#fff url(../images/h2_bg.jpg) left bottom repeat-x}

#generallinks h4 {margin-top:0px; font-size:1.75em; line-height:1.15em; color:#4485e6;}

 

#generallinks2 p {font-weight:bold; line-height:1.5em; font-size:1.2em; font-family:Arial, Verdana, Helvetica, sans-serif; margin:10px;}

#generallinks2 p.smaller {font-weight:normal; line-height:1.4em; font-family:Arial, Verdana, Helvetica, sans-serif; font-size:1.15em;}

#generallinks2 h3 {clear:both; margin-top:2px; margin-left:10px; padding:20px 10px; font-size:1.50em; color:#383b47; background:#fff url(../images/h2_bg.jpg) left bottom repeat-x}

#generallinks2 h4 {margin-left:10px; }

#generallinks2 h5 {margin-left:10px; }

 

#generallinks3 table {width:900px;margin:auto;}

#generallinks3 td {vertical-align:middle;}

#generallinks3 td.tablecolor {background-color:#f6f6f6; border:40px solid white;}

#generallinks3 td.logo {border-bottom:40px solid white;}

#generallinks3 td.h4color {padding-top:40px;}

#generallinks3 p {line-height:1.3em; font-size:1.1em; font-family:Arial, Verdana, Helvetica, sans-serif; margin:10px;}

#generallinks3 h2 {clear:both; margin-top:2px; padding:15px 15px; font-size:2.00em; color:#383b47; background:#fff url(../images/h2_bg.jpg) left bottom repeat-x}

#generallinks3 h3 {clear:both; margin-top:2px; padding:15px 15px; font-size:1.50em; color:#383b47; background:#fff url(../images/h2_bg.jpg) left bottom repeat-x}

#generallinks3 h4 {margin-top:0px; font-size:1.75em; line-height:1.15em; color:#4485e6;}

#generallinks3 h5 {margin-top:0px; font-size:1.50em; line-height:1.35em; color:#383b47;}

 

 

#generallinks5 table {width:888px;margin:auto;}

#generallinks5 td {vertical-align:middle;}

#generallinks5 td.tablecolor {border:40px solid white;}

#generallinks5 td.logo {border-bottom:40px;}

#generallinks5 td.h4color {padding-top:40px;}

#generallinks5 p {line-height:1.3em; font-size:1.1em; font-family:Arial, Verdana, Helvetica, sans-serif; margin:10px;}

#generallinks5 p.top {text-align:justify; line-height:1.4em; font-family:Arial, Verdana, Helvetica, sans-serif; font-size:1.15em;}

#generallinks5 h2 {clear:both; margin-top:2px; padding:15px 15px; font-size:2.00em; color:#383b47; background:#fff url(../images/h2_bg.jpg) left bottom repeat-x}

#generallinks5 h3 {clear:both; margin-top:2px; padding:15px 15px; font-size:1.50em; color:#383b47; background:#fff url(../images/h2_bg.jpg) left bottom repeat-x}

#generallinks5 h4 {margin-top:0px; font-size:1.75em; line-height:1.15em; color:#4485e6;}

#generallinks5 h5 {margin-top:0px; font-size:1.50em; line-height:1.35em; color:#383b47;}

#generallinks5 .under {text-decoration:underline;}

 

 

 

div.linkscolor {background-color:#f6f6f6; border:40px solid white;}

div.linkslogo {border-bottom:40px solid white;}

div.linksh4color {padding-top:40px;}

 

 

 

 

 

#generallinks4 table {width:900px;margin:auto;}

#generallinks4 td {vertical-align:middle;}

#generallinks4 td.tablecolor {background-color:#f6f6f6; border:40px solid white;}

#generallinks4 td.logo { border:40px solid white;}

#generallinks4 p {line-height:1.3em; font-size:1.1em; font-family:Arial, Verdana, Helvetica, sans-serif; margin:10px;}

#generallinks4 h2 {clear:both; margin-top:2px; padding:15px 15px; font-size:2.00em; color:#383b47; background:#fff url(../images/h2_bg.jpg) left bottom repeat-x}

 

 

 

#resource img.center {display:block; margin-left:auto; margin-right:auto; padding-top:5px; clear:both; border:none;}

 

#ie-warning {background: #FFFF00;border: 2px #CC0000;color: #000000;padding: 10px;font-size: 15px;margin-bottom: 10px;}

#ie6-warning a {text-decoration: none;}

 

/* Form Styles */

input, textarea {width:350px}

input#submit {width:auto; font-weight:bold}

 

#footer {clear:both; padding:13px 15px 26px 15px; font-size:1.05em; color:#9696a3; background-color:#f3f2f2;}

#footer a {color:#9696a3; text-decoration:underline}

#footer a:hover {text-decoration:none}

 

 

#footwrap {margin-left:auto; margin-right:auto; display:block;}

#left {float: left; width:150px; padding-left:90px;}

#right {float: right; width:160px; padding-right:100px;}

#mid {padding-left:260px; font-size:1.5em; color:#a6a6a6;} /*no float: left; and no width; margins as image width*/

 

 

a.name {text-decoration:none; font-size:100%; background-color:transparent; color:#000;}

 

a name {text-decoration:none; font-size:100%; background-color:transparent; color:#000;}

 

 

#linkleft {

position: absolute;

width: 210px;

height: 600px;

margin: 0;

margin-top: 50px;

border-right: 1px solid #C6EC8C;

font-weight: normal;

}

 

#linkright {

position: absolute;

width: 210px;

height: 600px;

margin: 0;

margin-top: 50px;

border-right: 1px solid #C6EC8C;

font-weight: normal;

}

 

 

 

 

#mainlinks {margin:0 auto; width:700px; height:400px; position:relative; background-color:#f6f6f6;}

#mainlinks p {text-align:left; line-height:1.5em; font-size:1.2em; font-family:Arial, Verdana, Helvetica, sans-serif; margin:10px;}

#mainlinks .mainresources2 {background-color:#f6f6f6;}

#mainlinks .leftresource1 {position:absolute; top:34px; left:19px;}

#mainlinks .leftresource2 {position:absolute; bottom:34px; left:19px;}

#mainlinks .rightresource1 {position:absolute; top:34px; right:19px;}

#mainlinks .rightresource2 {position:absolute; bottom:34px; right:19px;}

h1.tmainlinks {font-size:2.25em; text-align:center; font-weight:bold; width:700px; background-color:#f6f6f6; margin-left:auto; margin-right:auto; padding-bottom:10px; padding-top:10px;}

 

 

 

 

#story {float:left; display:inline; width:908px; padding-top:5px;}

#story p {line-height:1.4em; font-size:1.15em; font-family:Arial, Verdana, Helvetica, sans-serif;}

#story h1 {margin-top:0px; font-size:1.75em; text-align:center; line-height:1.15em; color:#4485e6;}

#story h2 {margin-top:15px; font-size:1.75em; text-align:left; line-height:1.15em; color:#4485e6;}

#story h3 {margin-top:0px; font-size:1.75em; text-align:center; line-height:1.15em; color:#4485e6;}

#story img {display:block; margin-left:auto; margin-right:auto; clear:both; border:none;}

#story img.imgright {float:right; margin:10px;}

 

.both {clear:both;}

 

.bullet {padding:0px 6px 0px 6px; vertical-align:middle;}

 

.bullet2 {padding:0px 6px 0px 6px; float:left;}

 

.centre {text-align:center; margin:20px 0px 20px 0px;}

 

.centre2 {text-align:center; margin-left:auto; margin-right:auto; padding-top:20px; padding-bottom:30px; display:block;}

 

.centrefoot {text-align:center; margin-left:auto; margin-right:auto; padding-top:20px; padding-bottom:0px; display:block;}

 

.centerpetition {display:block; margin-left:auto; margin-right:auto; padding-top:5px; clear:both; border:none;}

 

.bold {font-weight:bold; color:000000;}

 

img.center {display:block; margin-left:auto; margin-right:auto; text-align:center;}

 

.linkscontainer {width:98%; margin:auto; position:relative;}

 

.linksimg {float:left;width:30%;}

 

.linkstxt {float:right; width:60%; background-color:#f6f6f6; padding:10px; border:40px white solid;}

 

h2.saythanks {margin-top:0px; font-size:2.25em; text-align:left; line-height:1.15em; color:#4485e6;}

 

.grey {clear:both; margin-top:2px; padding:15px 15px; font-size:1.50em; color:#383b47; background:#fff url(../images/h2_bg.jpg) left bottom repeat-x}

 

/*testing stuf*/

 

h3.awards {clear:both; margin-top:2px; margin-left:10px; padding:20px 10px; font-size:1.50em; color:#383b47; background:#fff url(../images/h2_bg.jpg) left bottom repeat-x}

 

 

 

End CSS file

 

Can someone tell me why I am having this problem.

 

Thanks

Link to comment
Share on other sites

Your image is 260px wide and your column 282px - either make you column less wide or your image bigger.

 

If you add a distinct background color to your #content and a different one to .three_columns (not for styling, just inspection) then you can better see what you have going on there.

Link to comment
Share on other sites

Your image is 260px wide and your column 282px - either make you column less wide or your image bigger.

 

If you add a distinct background color to your #content and a different one to .three_columns (not for styling, just inspection) then you can better see what you have going on there.

 

Bingo,

 

That solution actually came to me on my way to work this morning. I got confused because in with firebug it said one of my other images was 260px and that image seemed to span the width I wanted, but on closer inspection, I was looking at the wrong dimensions.

 

Thanks

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...