Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

[Question] What am I Doing Wrong? IMGs and Tables

One issue is that the table cells need to be top aligned,
Code: 
td {
 vertical-align: top;
}
You should also make the .sleeve have a 334px width, and have the margin set for '0 auto.' That should get you closer. I was tweaking the site using Firefox and got it pretty close to what you are wanting. I didn't mess with background colors though and not sure how you want the header and the content after the iPhone to appear.
 
angelwatt said:
One issue is that the table cells need to be top aligned,
Code: 
td {
 vertical-align: top;
}
You should also make the .sleeve have a 334px width, and have the margin set for '0 auto.' That should get you closer. I was tweaking the site using Firefox and got it pretty close to what you are wanting. I didn't mess with background colors though and not sure how you want the header and the content after the iPhone to appear.
Click to expand...

Thanks ! I edited the CSS but I'm still having some problems with the tables

/*
Theme Name:Monotone
Theme URI:http://monotonedemo.wordpress.com/
Description:A photo blogging theme. Colors change to match the photo.
Version:1.1
Author:Noel Jackson / eight6
Author URI:http://eight6.com
Tags:photoblogging,one column,fixed width,custom colors
*/
/* --------------------------------------------------------------
* Resets default browser CSS.
Based on work by Eric Meyer:* meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
-------------------------------------------------------------- */
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,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
td {
vertical-align: top;
}
/* remember to define focus styles! */
:focus{outline:0;}
body{line-height:1;color:black;background:white;}
ol,ul{list-style:none;}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,
q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
/* Tables still need 'cellspacing="0"' in the markup. */
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:400;}
/* Remove possible quote marks (") from <q>,<blockquote>. */
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
a img{border:none;}
/************* END RESET RELOADED *************************/
body{font:normal 75%/1.6em "Lucida Sans","Lucida Grande","Trebuchet MS",Georgia,Helvetica,sans-serif;color:#444;background-color:white;}
a,a:link,a:visited,a:active{color:#333;text-decoration:none;}
a:hover{color:#666;}
h1,h2,h3,h4,h5,h6{ font-family:"Lucida Fax",Georgia,Helvetica,sans-serif; }
h2{ font-size:1.5em;line-height:1;font-weight:bold;margin-bottom:.25em;color #333; }
h2,h2 a,h2 a:link,h2 a:visited,h2 a:active{ color:#6c6c6c;font-weight:bold;text-decoration:none;letter-spacing:-.02em; }
h2 a:hover{}
h3{line-height:1em;padding-bottom:5px;font-size:1.2em;font-weight:bold;color:#6e6e6e;}
h4{}
ul, dl, ol { margin-left: 20px; }
li { list-style: square; }
strong{font-weight:bold;}
blockquote,em, cite, q {font-style:italic;}
/* Structure */
#page{width:334px;margin:0px auto 35px auto;background-color:white;}
.archive #page{width:334px;}
.vertical #page{width:560px;}
/* Header */
#header{clear:both;}
h1{font-size:1.5em;line-height:2.666em;float:left;letter-spacing:-.02em;margin-left:10px;}
h1 a,h1 a:link,h1 a:visited,h1 a:active{color:#333;text-decoration:none;font-weight:bold;}
h1 a:hover{}
.archive h1{margin-left:0;}
.description{float:left;line-height:4em;margin-left:1em;font-style:italic;padding-left:1em;color:#444;}
#menu{float:right;margin-right:10px;}
.archive #menu{margin-right:0;}
#menu li{display:block;float:left;}
#menu li a,#menu li a:link,#menu li a:visited,#menu li a:active{height:4em;line-height:4em;display:block;float:left;font-weight:normal;letter-spacing:normal;margin-left:10px;text-transform:uppercase;}
#menu li.first a{border-left:0;}

/* Content */
#content{clear:both;}
.sleeve{
margin: 0 auto;
width: 334px;
}
#content .sleeve{margin:0;}
.vertical #container{clear:both;margin:0 0 0 10px;}
#content h2{color:#333;margin-left:210px;margin-top:10px;}
.archive #content h2{margin-left:0;margin-bottom:10px;}
.image{float:left;text-align:center;position:relative;width:334px;}
.image img{margin:0;padding:0 0 10px 0;max-width: 278px;max-height: 416px;width: expression(this.width > 278 ? "278px" : true);height: expression(this.height > 416 ? "416px" : true);}
.vertical .image{width:560px;clear:both;float:none;}
.thumbnails{margin:0 auto;width:860px;margin-left:-5px;clear:both;}
.thumbnails li{float:left;display:block;width:133px;height:85px;margin-left:5px;margin-bottom:5px;list-style:none;}
a .thumbnail,a:link .thumbnail,a:visited .thumbnail,a:active .thumbnail{float:left;display:block;width:133px;height:85px;background:#c4c4c4;text-align:left;}
a:hover .thumbnail{background:#919191;}
.thumbnail{float:left;display:block;width:133px;height:85px;}
.thumbnail img{max-width:123px;margin:5px 5px 0 5px;padding:0 0 5px 0;max-height:75px;border:0;}
#container{clear:both;margin:0 0 0 10px;padding-top:5px;}

/* Post Layout */
#post{float:left;margin:0 20px 0 0;width:334px;border-top:1px solid #ccc;font-size:1.1em;}
.vertical #post{margin:0;}
#post .sleeve{border-top:2px solid #ccc;padding:10px;display:block;position:none;}
#postmetadata .sleeve{padding:10px;}
#postmetadata,.commentlist li .metadata{font-size:.92em;line-height:1.45em;width:200px;float:left;border-top:1px solid #ccc;}
#postmetadata cite,
#postmetadata small{clear:both;}
#post p{margin-bottom:1.5em;}
.navigation{font-family:"Courier New","Lucida Grande",Tahoma,"Trebuchet MS",sans-serif;width:260px;font-size:100px;line-height:.5em;float:left;}
.vertical .navigation{margin:0px;width:540px;}
.navigation div{float:left;display:block;width:50%;}
.navigation div.prev{text-align:left;}
.navigation div.next{float:right;text-align:right;}
.vertical .navigation div.prev{text-align:right;}
.vertical .navigation div.next{float:right;text-align:left;}

/* Comments list */
.commentlist{clear:both;width:540px;}
.commentlist li{border-bottom:1px solid #ccc;}
.commentlist li .metadata{border:0;margin:10px 0;width:148px;float:left;}
.commentlist li .gravatar{float:left;width:32px;margin:10px;}
.commentlist li cite,
.commentlist li small{font-weight:bold;clear:both;display:block;}
.commentlist li .content{padding:10px;float:left;clear:right;width:287px;}
.commentlist li .clear{clear:both;}
#content .commentlist .comment p{font-weight:normal ;}

/* Comment Form */
h3#respond,h3#comments{width:334px;margin:0;padding:0 0 5px 10px;clear:both;border-bottom:1px solid #afb1b2;padding-top:20px;}
#comments{border-bottom:2px solid #afb1b2;}
#commentform{width:334px;margin-bottom:10px;}
#commentform p{padding:10px;}
#commentform small{display:inline;}
#commentform .sleeve{margin:10px;}
#commentform label{width:200px;display:block;float:left;font-size:.96em;line-height:2em;}
#commentform label{margin:0px;margin-bottom:10px;}
#commentform p input{float:left;margin:0;border:none;width:310px;padding:3px;margin-bottom:10px;}
#commentform input#submit{width:15em;height:2em;margin-left:10px;}
#commentform textarea,#commentform input{font-family:"Lucida Grande",Tahoma,"Trebuchet MS";font-size:1.2em;}
#commentform p{clear:both;border-top:1px solid #ccc;line-height:1.6em;}
#commentform textarea{:10px;width:520px;}

/* Footer */
#footer{clear:both;height:42px;padding-top:20px;margin:0px 10px 0px 10px;width:820px;}
.archive #footer{margin:0;}
.vertical #footer{width:540px;}
#footer .info{clear:both;float:left;width:50%;height:32px;display:block;line-height:32px;position:relative;padding-left:42px;}
#footer .info img{position:absolute;margin-left:-42px;}
#searchform{float:right;}
#searchform #s{width:150px;}
.archive{margin:0 auto;}
#filters{clear:both;height:2em;margin-bottom:1em; margin-left: 0;}
#filters li{ list-style: none; margin-left: 0; float:left;margin-right:2em;}
a:hover .nav_over{background-color:#afb1b2;}
.image .nav{position:absolute;width:50%;height:100%;z-index:1000;}
.image .nav a,.image .nav a:link,.image .nav a:visited,.image .nav a:active{width:100%;height:100%;display:block;position:absolute;text-indent:-1000em;}
.prev{left:0;width:50%;}
.next{top:0;left:50%;width:50%;}
.nav_over{position:absolute;top:50%;margin-top:-1em;display:block;z-index:1000;color:#fff;width:1em;height:1em;line-height:1em;text-align:center;font-size:2em;}
Click to expand...
 
The following width is causing the issue with the right side hanging off.
Code: 
.image {
...
 width: 334px;
}
As a note, I've been using the Firebug add-on to track down the issues.
 
angelwatt said:
The following width is causing the issue with the right side hanging off.
Code: 
.image {
...
 width: 334px;
}
As a note, I've been using the Firebug add-on to track down the issues.
Click to expand...

Thanks ! I appreciate it. How do I use that Fire-Bug add-on?

I removed the width, and the right side has shortened, but I still see a separation between the middle and right side and the bottom as well.

Sorry, I'm completely lost on what to do next =\.
 
Explaining Firebug is a little difficult. Once you have it installed and activated (by opening from the Tools menu or from the icon in the status bar area) you'll want to be on the HTML tab. From there you can select on HTML tags in your source. As you do, you'll get CSS info on that element on the right sidebar. You can disable/edit/add CSS properties too. You just have to kind of play around with it.

As for that space I changed the height of a td tags from 416 to 414. It's in the table row just above where the gap is occurring. It's hard to describe exactly where it's at. The td also has a width of 278, which will help you track it down.
 
angelwatt said:
Explaining Firebug is a little difficult. Once you have it installed and activated (by opening from the Tools menu or from the icon in the status bar area) you'll want to be on the HTML tab. From there you can select on HTML tags in your source. As you do, you'll get CSS info on that element on the right sidebar. You can disable/edit/add CSS properties too. You just have to kind of play around with it.

As for that space I changed the height of a td tags from 416 to 414. It's in the table row just above where the gap is occurring. It's hard to describe exactly where it's at. The td also has a width of 278, which will help you track it down.
Click to expand...

I just noticed the pictures I posted were not to scale. By uploading a "scaled" image, the right gap disappeared, but there is still a gap at the bottom.

Is it coming from

<?php the_image(); ?>
Click to expand...
 
OK, do as I said before about the 416 to 414, the also in the CSS find,
Code: 
.image img {
...
 padding: 0 0 10px;
}
and get rid of the 10px;
 
angelwatt said:
OK, do as I said before about the 416 to 414, the also in the CSS find,
Code: 
.image img {
...
 padding: 0 0 10px;
}
and get rid of the 10px;
Click to expand...

That worked perfectly ! Thank you so much, and sorry for asking so many questions. I really appreciate it
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back