Strange Spacing Problem

Question

LogicWeb 0 Junior Poster in Training

13 Years Ago

I cannot figure out where there is this gap between the 4 pricing images and the 4 rows below it. The html is:

<table cellpadding="0" cellspacing="0" style="width: 90%;margin:auto;">
                <tr>
                    <td>&nbsp;</td>
                    <td style="width:136px">
                    <img alt="Budget Web Hosting" src="images/tag-pro.png" width="136" style="margin-bottom:auto" /></td>
                    <td style="width:136px">
                    <img alt="Budget Web Hosting" src="images/tag-pro.png" width="136" style="margin-bottom:auto" /></td>
                    <td style="width:136px">
                    <img alt="Budget Web Hosting" src="images/hot.png" width="136" style="margin-bottom:auto"  /></td>
                    <td style="width:136px">
                    <img alt="Budget Web Hosting" src="images/tag-pro.png" width="136" style="margin-bottom:auto"  /></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td class="hot-dark">&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td class="hot-light">&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td class="hot-dark">&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td class="hot-light">&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
            </table>

CSS

/* ========================== CSS Reset ========================== */
* {
    border: 0 none;    
    font-family: Helvetica, Arial, sans-serif;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

/* ========================== General Styles ========================== */

td 
{
    height:38px;
}

.hot-light
{
    background:url('../images/row-hot-light.png') no-repeat top left;    
}

.hot-dark
{
    background:url('../images/row-hot-dark.png') no-repeat top left;    
}

.gradient-row
{
    background:url('../images/gradient-row.png') no-repeat top left;
}

web-design

5 Contributors
30 Replies
213 Views
5 Days Discussion Span
Latest Post 13 Years Ago Latest Post by Dandello

All 30 Replies

Dandello 8 Posting Whiz in Training

13 Years Ago

Well, with the background in place we still can't see what's actually happening with the table - One graphic moved down by about the amount of the original gap. That says the issue is with the table itself. Put the vertical-align:bottom into each of the top TDs. If there is still a gap, play with negative margins - either negative bottom margins on the top TDs or negative top margins in the second row of TDs. That should tighten it up.

Edited 13 Years Ago by Dandello because: n/a

Dandello 8 Posting Whiz in Training

13 Years Ago

see http://www.st-vidicon.net/test/test.html

remove the

img margin-bottom:15px

tag in the main css.
add to each img in the table:

style="vertical-align:bottom;"

Dandello 8 Posting Whiz in Training

13 Years Ago

All this:

style="vertical-align:bottom; margin-bottom:-18px;"

is doing is overriding the

img {margin-bottom: 18px;}

in the main css
Instead override it in the head of the document with:

<style type="text/css">
img {margin-bottom:0px;}
</style>

This works! see: http://www.st-vidicon.net/test/test.html

Edited 13 Years Ago by Dandello because: n/a

Dandello 8 Posting Whiz in Training

13 Years Ago

You didn't close a tag properly somewhere.

Using a copy of the CSS file you posted here as test.css:

Here is the HTML for the code that works:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1' />
<meta http-equiv='Content-Style-Type' content='text/css' />
<title>CSS test</title>
<link rel="stylesheet" href="test.css" type="text/css" />
<style type="text/css">
img {margin-bottom:0px;}
td 
{
    height:38px; vertical-align:bottom;
}

.hot-light
{
    background:#F0F7DD url('../../images/row-hot-light.png') no-repeat top left;    
}

.hot-dark
{
    background:#D9e4B6 url('../../images/row-hot-dark.png') no-repeat top left;    
}
.border {border-style: solid;  border-color: #000033; border-width: thin;}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" style="width: 90%">
                <tr>
                    <td>&nbsp;</td>
                    <td style="width:135px; ">
                    <img alt="Budget Web Hosting" src="01.png" width="135" style="width:135px; vertical-align:bottom;" /></td>
                    <td style="width:135px;">
                    <img alt="Budget Web Hosting" src="01.png" width="135" style="width:135px; vertical-align:bottom;" /></td>
                    <td style="width:135px; margin-bottom:-3px">
                    <img alt="Budget Web Hosting;" src="02.png" width="135" style="width:135px; vertical-align:bottom;"  /></td>
                    <td style="width:135px;">
                    <img alt="Budget Web Hosting" src="01.png" width="135" style="width:135px; vertical-align:bottom;" /></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td class="hot-dark" style='margin-top:-3px'>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td class="hot-light">&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td class="hot-dark">&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td class="hot-light">&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
            </table>

</body>
</html>

I added background colors to .hot-light and .hot-dark so I wouldn't have to bother with the background graphic in those cells. The other graphics were cut from the .png you posted so the widths are a little off.

Without seeing actual full-page code (on the web somewhere so it can render) to see how other things are interacting...

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Dandello 8 Posting Whiz in Training · Answer 1 · 2010-09-24T11:07:06+00:00

What happens if you take out the 'margin-bottom:auto' in the other td's?

LogicWeb 0 Junior Poster in Training · Answer 2 · 2010-09-24T20:11:27+00:00

Doesn't change anything, see screenshot. Actually, gap is a bit bigger now. The margin auto was specifically for those 4 images to make them bottom aligned vertically.

http://pingy.us/?v=im.png

Dandello 8 Posting Whiz in Training · Answer 3 · 2010-09-24T20:27:38+00:00

screen shots don't help me much because I can't see the underlying code or move it to a test-bed to play with it.

BUT : instead of margin:auto, have you tried 'vertical-align:bottom; margin-bottom:0'?

You can also set that bottom margin to a negative number.

LogicWeb 0 Junior Poster in Training · Answer 4 · 2010-09-24T21:08:20+00:00

;vertical-align:bottom; margin-bottom:0 didn't fix it either

I provided the html and css in my original post :)

JRM 107 Practically a Master Poster · Answer 5 · 2010-09-24T21:25:15+00:00

JRM 107 Practically a Master Poster

13 Years Ago

Maybe there is a border built into the images?

Dandello 8 Posting Whiz in Training · Answer 6 · 2010-09-24T21:45:30+00:00

Well, without the graphics and the rest of the code THIS is what you get : http://www.st-vidicon.net/page.gif

Try adding border='1' to the table for diagnostic purposes - that will let you see that is actually happening in the cells.

ko ko 97 Practically a Master Poster · Answer 7 · 2010-09-25T14:30:06+00:00

The inline-element doesn't has the vertical margin, and the image has not vertical margin while it was not specified by the css 'display: block'.

For example: 'margin-bottom: auto/ x-px' and 'margin-top: auto/ x-px' is ignore to inline elements.

It may be the table cell vertical alignment. You can set the vertical alignment for each table-cell both HTML (valign=bottom) and CSS (vertical-align: bottom).

LogicWeb 0 Junior Poster in Training · Answer 8 · 2010-09-27T19:26:34+00:00

It may be the table cell vertical alignment. You can set the vertical alignment for each table-cell both HTML (valign=bottom) and CSS (vertical-align: bottom).

Please explain, like an example. I'm not a web designer by trade nor CSS pro but learning.

Thank you ;)

JRM 107 Practically a Master Poster · Answer 9 · 2010-09-27T19:54:10+00:00

I noticed that you have set a margin "in line" for each of your images. Auto allows the browser to set the margins. If you didn't want a space, why did you put a bottom margin there? Remove that style code from all of the images.

LogicWeb 0 Junior Poster in Training · Answer 10 · 2010-09-27T23:05:49+00:00

I noticed that you have set a margin "in line" for each of your images. Auto allows the browser to set the margins. If you didn't want a space, why did you put a bottom margin there? Remove that style code from all of the images.

I was trying to bring them close to the colored rows below them. That's why. Even when I remove that code, the gap is still there.

Dandello 8 Posting Whiz in Training · Answer 11 · 2010-09-28T00:02:48+00:00

Okay - remove all the css and in the table, add border='1'

border='1'

This will let you see how the table itself is behaving. Then put the tags back in one by one starting the table. My bet is there is a attribute given for the img tag that is not in the code you copied here.

LogicWeb 0 Junior Poster in Training · Answer 12 · 2010-09-28T00:57:51+00:00

Okay - remove all the css and in the table, add border='1'
border='1'
This will let you see how the table itself is behaving. Then put the tags back in one by one starting the table. My bet is there is a attribute given for the img tag that is not in the code you copied here.

Gap still there, very odd :X

http://pingy.us/?v=gap.png

CSS:

td 
{
    height:38px;
}

.hot-light
{
    background:url('../../images/row-hot-light.png') no-repeat top left;    
}

.hot-dark
{
    background:url('../../images/row-hot-dark.png') no-repeat top left;    
}

HTML for Table:

<p>&nbsp;</p>
            <table cellpadding="0" cellspacing="0" style="width: 90%;border='1'">
                <tr>
                    <td>&nbsp;</td>
                    <td style="width:136px;">
                    <img alt="Budget Web Hosting" src="images/tag-pro.png" width="136" /></td>
                    <td style="width:136px;">
                    <img alt="Budget Web Hosting" src="images/tag-pro.png" width="136" /></td>
                    <td style="width:136px;">
                    <img alt="Budget Web Hosting" src="images/hot.png" width="136"  /></td>
                    <td style="width:136px;">
                    <img alt="Budget Web Hosting" src="images/tag-pro.png" width="136"  /></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td class="hot-dark">&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td class="hot-light">&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td class="hot-dark">&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td class="hot-light">&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
            </table>
            <p>&nbsp;</p>

Dandello 8 Posting Whiz in Training · Answer 13 · 2010-09-28T01:43:41+00:00

What about any css pertaining to the body tag? (It has to be there, your body background is set to black.) Anything giving margins or padding that might be inherited. There is nothing I can see in the code given that would do this - therefore the problem comes from something else. Turn off the black background so you can see the table borders. (for diagnostic purposes?)

LogicWeb 0 Junior Poster in Training · Answer 14 · 2010-09-28T11:11:30+00:00

Getting close. So below is the main css of the site:

/* ========================== CSS Reset ========================== */
* {
    border: 0 none;    
    font-family: Helvetica, Arial, sans-serif;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

/* ========================== General Styles ========================== */
body {
    background: #16171a url("images/body.png") no-repeat 50% 0%;
}

.wrapper {
    margin: 0 auto;
    width: 965px;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

p, li {
    color: #67747f;
    font-size: 12px;
    line-height: 18px;
    margin-bottom: 15px;
}

li {
    margin-bottom: 2px;
}

h1 {
    color: #fff;
    font-size: 28px;
    font-weight: normal;
    margin-bottom: 22px;
    text-decoration:underline;
}

h2 {
    color: #fff;
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 15px;
}


h3, h4 {
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 15px;
}

h4 {
    font-size: 13px;
}

img {
    margin-bottom: 15px;
}

img.left {
    margin-right: 15px;
}

img.right {
    margin-left: 15px;
}

ul {
    list-style: none;
}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

.clear {
    clear: both;
    overflow: hidden;
}

.divider {
    background: url("images/divider.jpg") repeat-x top left;
    height: 2px;
    margin: 25px 0;
}

.left {
    float: left;
}

.right {
    float: right;
}

I removed line 11 (vertical-align) and all 3 img classes (lines 70, 74, 78). Now, this is the result:

[img]http://pingy.us/images/gapqzq.png[/img]

This is the html code at this time:

<table cellpadding="0" cellspacing="0" style="width: 90%">
                <tr>
                    <td>&nbsp;</td>
                    <td style="width:136px;">
                    <img alt="Budget Web Hosting" src="images/tag-pro.png" width="136" /></td>
                    <td style="width:136px;">
                    <img alt="Budget Web Hosting" src="images/tag-pro.png" width="136" /></td>
                    <td style="width:136px;">
                    <img alt="Budget Web Hosting" src="images/hot.png" width="136"  /></td>
                    <td style="width:136px;">
                    <img alt="Budget Web Hosting" src="images/tag-pro.png" width="136"  /></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td class="hot-dark">&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td class="hot-light">&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td class="hot-dark">&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td class="hot-light">&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
            </table>

Dandello 8 Posting Whiz in Training · Answer 15 · 2010-09-28T11:28:43+00:00

#
img {
#
margin-bottom: 15px;
#

Um, there's a 15px margin set for the bottom of each image?

LogicWeb 0 Junior Poster in Training · Answer 16 · 2010-09-28T11:31:43+00:00

#
img {
#
margin-bottom: 15px;
#
Um, there's a 15px margin set for the bottom of each image?

Right. And my last post, I said this

I removed line 11 (vertical-align) and all 3 img classes (lines 70, 74, 78).

LogicWeb 0 Junior Poster in Training · Answer 17 · 2010-09-28T11:52:41+00:00

Thanks, but unfortunately that did not work either. I'm baffled about this as much as you are.

Dandello 8 Posting Whiz in Training · Answer 18 · 2010-09-28T12:07:58+00:00

The negative bottom margins in the img tag?

As I indicated, you may have to play with it, -1px, -2px, etc. You may also have to put margin:0 or negative margins on the upper TD bottom and the 2nd row TD top.

teedoff 3 Posting Pro · Answer 19 · 2010-09-28T20:59:59+00:00

Remember, any inline styling will take precedence over embedded and then external style sheets. Also, where possible, all style rules should be left to external style sheets. html pages are for coding, style sheets are for presentation. As jrm suggests, first remove your inline styles for your images.

Dandello 8 Posting Whiz in Training · Answer 20 · 2010-09-28T21:13:54+00:00

If all else fails - put a matching background color in the affected cell. At least then if the graphic isn't perfectly aligned, the proper color is showing in the gap.

LogicWeb 0 Junior Poster in Training · Answer 21 · 2010-09-29T05:19:57+00:00

Ok, here's the entire main css stylesheet:

/* ========================== CSS Reset ========================== */
* {
    border: 0 none;    
    font-family: Helvetica, Arial, sans-serif;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}

/* ========================== General Styles ========================== */
body {
    background: #16171a url("images/body.png") no-repeat 50% 0%;
}

.wrapper {
    margin: 0 auto;
    width: 965px;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

p, li {
    color: #67747f;
    font-size: 12px;
    line-height: 18px;
    margin-bottom: 15px;
}

li {
    margin-bottom: 2px;
}

h3, h4 {
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 15px;
}

h4 {
    font-size: 13px;
}

img {
    margin-bottom: 15px;
}

img.left {
    margin-right: 15px;
}

img.right {
    margin-left: 15px;
}

ul {
    list-style: none;
}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

.clear {
    clear: both;
    overflow: hidden;
}

.divider {
    background: url("images/divider.jpg") repeat-x top left;
    height: 2px;
    margin: 25px 0;
}

.left {
    float: left;
}

.right {
    float: right;
}

/* ========================== Buttons Styles ========================== */
.button {
    background: url("images/buttons.png") no-repeat top left;
    color: #fff;
    display: block;
    font-size: 13px;
    font-weight: bold;
    height: 15px;
    padding: 8px 10px;
    text-shadow: 0px 1px 0px #222;
    width: 114px;
}

.button:hover {
    text-decoration: none;
}

.button.left {
    margin-right: 15px;
}

.button.right {
    margin-left: 15px;
}

.button[title=Follow] {
    background-position: 0 -31px;
}

.button[title=Facebook] {
    background-position: 0 -62px;
}

.button[title=Contact] {
    background-position: 0 -93px;
}

.button[title=Tour] {
    background-position: 0 -124px;
}

.button[title=Store] {
    background-position: 0 -155px;
}

.button[title=Job] {
    background-position: 0 -186px;
}

.button[title=CaseStudy] {
    background-position: 0 -217px;
}

.button[title=Testimonials] {
    background-position: 0 -248px;
}

.button[title=Support] {
    background-position: 0 -279px;
}

.button[title=Examples] {
    background-position: 0 -310px;
}

#slider .light, #slider .dark {
    background: url("images/slider_buttons.png") no-repeat top left;
    color: #92a2b1;
    float: left;
    height: 30px;
    line-height: 30px;
    margin: 20px 10px 0 0;
    padding: 0;
    text-align: center;
    text-shadow: none;
    width: 102px;
}

#slider .dark {
    background-position: bottom left;
    color: #fff;
}

/* ========================== Forms Styles ========================== */
#contactForm .half {
    width: 45%;
}

#contactForm input {
    background: url("images/input_large.jpg") no-repeat top left;
    height: 32px;
    width: 534px;
    line-height: 32px;
}

#contactForm .half input {
    background: url("images/input_half.jpg") no-repeat top left;
    height: 34px;
    width: 232px;
    line-height: 34px;
}

#contactForm > div {
    margin-bottom: 20px;
}

#contactForm textarea {
    background: url("images/textarea.jpg") no-repeat top left;
    width: 526px;
    height: 175px;
    padding: 8px 0;
}

#contactForm textarea, #contactForm input {
    color: #ddd;
    font-size: 11px;
    padding-left: 8px;
}

#contactForm #submit {
    height: 31px;
    width: 77px;
    background: url("images/send.jpg") no-repeat top left;
    display: block;
    text-indent: -9999px;
}

/* ========================== Header Styles ========================== */
#header {
    height: 64px;
    padding-top: 40px;
}

#header img, #header h1 {
    float: left;
}

#header p {
    color: #a6aab3;
    float: left;
    font-size: 14px;
    margin: 2px 0 0 6px;
}

#header ul {
    float: right;
    position: relative;
}

#header ul li {
    float: left;
    margin-left: 25px;
    position: relative;
    z-index: 50;
}

#header ul li a {
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
}

#header ul li a:hover, #header ul li.active a {
    color: #ddd;
    text-decoration: none;
}

#header ul li a[title="Home"] {
    background: url("images/home.png") no-repeat top left;
    display: block;
    height: 40px;
    margin-top: -8px;
    text-indent: -9999px;
    width: 40px;
}

#header ul li ul {
    display: none;
    position: absolute;
    top: 20px;
    left: 0;
    background: url("images/submenu.png") top left no-repeat;
    width: 151px;
    padding: 15px 0;
}

#header ul li:hover ul {
    display: block;
}

#header ul li ul li {
    margin: 0;
    background: #4e5054;
    padding: 5px 15px 5px 15px;
    width: 121px;
}

#header ul li ul li:last-child {
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-bottomleft: 3px;
    -moz-border-radius-bottomright: 3px;
}

#header ul li ul li a {
    text-transform: none;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
}

#header ul li.active ul li a {
    color: #fff;
}

#header ul li ul li a:hover {
    color: #a6bccc;
}

/* ========================== Intro Styles ========================== */
#intro {
    background: url("images/intro.jpg") no-repeat top left;
    height: 61px;
    margin-bottom: 30px;
    overflow: hidden;
}

#intro h2, #intro p {
    float: left;
}

#intro form {
    float: right;
}

#intro h2 {
    color: #fff;
    font-size: 21px;
    margin: 17px 10px 0 15px;
    text-transform: uppercase;
}

#intro p {
    color: #6f7380;
    font-style: italic;
    font-weight: bold;
    margin-top: 21px;
    text-shadow: 0px 1px 0px #ddd;
}

#intro input {
    background: url("images/search.jpg") no-repeat top left;
    color: #eee;
    float: left;
    font-size: 11px;
    height: 23px;
    padding: 5px;
    width: 144px;
    line-height: 23px;
}

#intro button {
    background: url("images/search_button.jpg") no-repeat top left;
    float: left;
    height: 33px;
    text-indent: -9999px;
    width: 31px;
}

#intro form {
    margin: 15px 15px 0 0;
    width: 185px;
}

/* ========================== Content Styles ========================== */
#content {
    margin-bottom: 35px;
    overflow: hidden;
}

.box {
    border-top: 1px solid #54585c;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.boxHeader, .box li {
    color: #fff;
    background: #37393d;
    padding: 10px 15px;
    overflow: hidden;
    margin-bottom: 0;
    font-size: 12px;
}

.box li {
    border-bottom: 1px solid #383b3f;
    border-top: 1px solid #494c50;
}

.box li span, .box a {
    color: #d4d4d4;
}

.box li:last-child {
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
}

.boxHeader {
    background: #2d2f33;
}

.boxHeader h3 {
    margin-bottom: 0;
    text-transform: uppercase;
    font-size: 12px;
}

.box .button {
    margin: 0 6px 0 0;
    color: #fff;
}

/* ========================== Tagline Styles ========================== */
#tagline {    
    background: url("images/tagline.jpg") no-repeat top left;
    color: #fff;
    font-size: 28px;
    font-style: italic;
    height: 46px;
    margin-bottom: 35px;
    padding-top: 13px;
    text-align: center;
    width: 965px;
}

/* ========================== Boxes Styles ========================== */
.boxes {
    margin-bottom: 35px;
    overflow: hidden;
}

.boxes > div {
    float: left;
    margin-right: 20px;
    padding-bottom: 15px;
    padding-right: 20px;
    padding-top: 15px;
    width: 295px;
}

.boxes > div.last {
    margin-right: 0;
    padding-right: 0;
}

.boxes > div p {
    margin-bottom: 22px;
}

.primary.boxes > div {
    background: url("images/primary_boxes.jpg") repeat-y top right;
}

.primary.boxes > div.last {
    background: none;
}

#secondary {
    background: url("images/secondary_pattern.jpg") repeat top left;
    border-top: 1px solid #3a4048;
    border-bottom: 1px soild #252629;
}

#secondary .wrapper {
    background: url("images/secondary.jpg") no-repeat 50% 0%; 
}

#secondary .boxes > div {
    margin-right: 38px;
    width: 270px;
}

.content_225 {
    float: left;
    margin-right: 21px;
    margin-top: 40px;
    width: 225px;
}

.content_225.last {
    margin-right: 0;
}

.content_225 p:last-child {
    margin-bottom: 0;
}

.content_225 h4 {
    margin-bottom: 4px;
}

#mainContent {
    float: left;
    width: 630px;
}

#sidebar {
    float: right;
    width: 310px;
}

#mainContent h3, #folio h3 {
    margin-bottom: 4px;
    text-transform: uppercase;
}

#mainContent p {
    line-height: 20px;
}

/* ========================== Portfolio Styles ========================== */
#folioCats {
    background: url("images/cats.jpg") no-repeat top left;
    height: 38px;
    margin-bottom: 25px; 
    padding-left: 35px;
}

#folioCats ul li {
    float: left;
    padding: 0 15px;
}

#folioCats ul li.active {
    background: url("images/cats_hover.jpg") repeat-x top left;
}

#folioCats ul li a {
    color: #fff;
    line-height: 38px;
    text-transform: uppercase;
}

#folioCats ul li a:hover {
    text-decoration: none;
}

.projects {
    margin-top: 25px;
}

.projects li {
    float: left;
    margin-bottom: 25px;
    margin-right: 26px;
    width: 304px;
}

.projects li.last {
    margin-right: 0;
}

.projects h4 {
    margin-bottom: 4px;
    text-transform: uppercase;
}

.projects img {
    margin-bottom: 10px;
}

/* ========================== Slider Styles ========================== */
#slider {
    background-color: #202227;
    border-bottom: 1px solid #282a31;
    border-top: 1px solid #282a31;
    padding: 15px 0;
}

#slider .wrapper {
    background: url("images/slider.jpg") no-repeat top left;
    width: 941px;
    height: 394px;
    overflow: hidden;
    position: relative;
}

#slider #sliderImgs {
    position: absolute;
    left: 422px;
    top: 30px;
    height: 310px;
    width: 480px;
    overflow: hidden;
}

#slider p {
    color: #42474f;
    font-size: 16px;
    margin-bottom: 0;
    text-shadow: 0px 1px 0px #ddd;
}

#slider h2 {
    color: #2a2a2a;
    font-size: 42px;
    margin-bottom: 0;
    text-shadow: 0px 1px 0px #ddd;
}

#slider .subtitle {
    color: #828a95;
}

.sliderContent {
    position: absolute;
    top: 150px;
    left: 42px;
}

#sliderNav {
    bottom: 25px;
    overflow: hidden;
    position: absolute;
    left: 415px;
}

#sliderNav a {
    background: url("images/slider_buttons.jpg") no-repeat bottom left;
    display: block;
    float: left;
    height: 12px;
    margin: 0 0 0 7px;
    text-indent: -9999px;
    width: 12px;
}

#sliderNav a.activeSlide {
    background-position: top left;
}

#folioSlider {
    width: 544px;
    margin-right: 15px;
    float: left;
    position: relative;
    height: 260px;
    margin-bottom: 20px;
}

#folioSliderNav {
    position: absolute;
    bottom: 15px;
    right: 15px;
    z-index: 9999;
}

#folioSliderNav a {
    background: url("images/folio_dots.png") no-repeat bottom left;
    float: left;
    display: block;
    height: 7px;
    width: 7px;
    text-indent: -9999px;
    margin-left: 8px;
}

#folioSliderNav a.activeSlide {
    background-position: top right;
}

/* ========================== Tabs Styles ========================== */
#tabs {
    background: url("images/tabs.jpg") no-repeat top left;
    height: 61px;
    margin: 25px 0;
}

#tabs li {
    float: left;
}

#tabs a {
    display: block;
    color: #6f7380;
    font-style: italic;
    font-weight: bold;
    text-shadow: 0px 1px 0px #ddd;
    font-size: 13px;
    width: 163px;
    height: 49px;
    text-align: center;
    padding-top: 12px;
}

#tabs a.first {
    width: 153px;
}

#tabs a span {
    text-transform: uppercase;
    color: #fff;
    font-style: normal;
}

#tabs a:hover, #tabs a.active {
    background: url("images/tabs_hover.jpg") repeat top left;
    text-shadow: none;
    text-decoration: none;
}

#tabs a.first:hover, #tabs a.first.active {
    background: url("images/tabs_first.jpg") no-repeat top left;
}

/* ========================== Newsletter Styles ========================== */
#newsletter {
    background: url("images/newsletter.jpg") no-repeat top left;
    height: 44px;
    margin-bottom: 35px;
    overflow: hidden;
    padding-left: 80px;
    padding-top: 21px;
}

#newsletter h3 {
    float: left;
    margin-right: 10px;
    text-transform: uppercase;
}

#newsletter p {
    color: #fff;
    float: left;
    font-style: italic;
}

#newsletter form {
    float: right;
    margin: -5px 15px 0 0;
    overflow: hidden;
}

#newsletter input, #newsletter button {
    float: left;
    height: 33px;
}

#newsletter input {
    background: url("images/newsletter_input.jpg") no-repeat top left;
    color: #eee;
    font-size: 11px;
    margin-right: 10px;
    padding-left: 10px;
    width: 230px;
    line-height: 33px;
}

#newsletter button {
    background: url("images/newsletter_button.jpg") no-repeat top left;
    text-indent: -9999px;
    width: 79px;
}

/* ========================== Blog Styles ========================== */
.blogPosts {
    background-color: #25292e;
    border: 1px solid #353b42;
    border-bottom: none;
    padding: 20px;
    padding-bottom: 0;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
}

.blogPosts li {
    clear: left;
    margin-bottom: 20px;
}

.blogPosts li.last {
    margin-bottom: 0;
}

.blogPosts .commentsLink {
    background: url("images/comments.jpg") no-repeat top left;
    color: #7b8188;
    float: right;
    font-size: 18px;
    font-weight: bold;
    height: 27px;
    padding: 8px 8px 0 0;
    text-align: right;
    text-shadow: 0px 1px 0px #fff;
    width: 82px;
}

.commentsLink:hover {
    text-decoration: none;
}

#content .blogPosts h3 {
    font-size: 18px;
    text-transform: none;
}

#content .blogPosts h3 a {
    color: #fff;
}

.blogPosts p {
    color: #b2c1ce;
}

.blogPosts a {
    color: #e3eef7;
}

.meta {
    font-size: 11px;
}

.blogPosts img {
    margin-left: -20px;
}

.postButtons {
    background: url("images/postButtons.jpg") repeat-x top left;
    margin-left: -20px;
    margin-right: -20px;
    overflow: hidden;
    padding: 12px 20px 14px 20px;
}

#postsNav {
    background: url("images/postsNav.jpg") no-repeat top left;
    height: 30px;
    overflow: hidden;
    padding: 12px 20px;
}

#postsNav .prev, #postsNav .next {
    background: url("images/postsNav_buttons.jpg") no-repeat top left;
    color: #fff;
    display: block;
    float: left;
    font-size: 13px;
    font-weight: bold;
    height: 30px;
    line-height: 27px;
    text-align: center;
    width: 108px;
}

#postsNav .next {
    float: right;
}

#postsNav .prev:hover, #postsNav .next:hover {
    background-position: bottom left;
    text-decoration: none;
}

#sidebar.blogSidebar {
    background-color: #363c44;
    border-left: 1px solid #4d5661;
    border-top: 1px solid #4d5661;
    padding: 15px;
    width: 278px;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

#sidebar.blogSidebar .rss {
    background: url("images/button_rss.jpg") no-repeat top left;
    color: #2a2f36;
    display: block;
    font-size: 16px;
    font-weight: bold;
    height: 34px;
    padding: 15px 0 0 25px;
    text-shadow: 0px 1px 0px #eee;
    width: 252px;
}

.rss:hover {
    text-decoration: none;
}

#subscribe {
    background: url("images/subscribe.jpg") repeat-x top left;
    height: 48px;
    margin: 15px -15px;
    overflow: hidden;
    padding: 10px 0 0 15px;
}

#sidebar.blogSidebar #subscribe img {
    margin-right: 10px;
}

#subscribe input {
    background: url("images/subscribe_input.jpg") no-repeat top left;
    color: #fff;
    float: left;
    font-size: 11px;
    height: 33px;
    margin-right: 5px;
    margin-top: 1px;
    padding: 0 10px;
    width: 175px;
    line-height: 33px;
}

#subscribe button {
    background: url("images/subscribe_button.jpg") no-repeat top left;
    float: left;
    height: 33px;
    text-indent: -9999px;
    width: 33px;
}

#sidebar.blogSidebar img.left {
    margin-right: 8px;
}

#sidebar.blogSidebar p {
    color: #fff;
}

#sidebar.blogSidebar p.left {
    margin-right: 25px;
}

ul.half {
    float: left;
    margin-right: 30px;
    width: 35%;
}

#sidebar.blogSidebar a {
    color: #fff;
}

.widget {
    background: #2b3037 url("images/widget.jpg") repeat-x top left;
    border-bottom: 1px solid #414852;
    clear: left;
    margin: 0 -15px;
    overflow: hidden;
    padding: 0 15px;
    padding-bottom: 15px;
}

.widget h4 {
    background: url("images/widget_title.jpg") repeat-x top left;
    font-size: 12px;
    height: 34px;
    line-height: 32px;
    margin: 0 -15px;
    margin-bottom: 10px;
    padding: 0 15px;
    text-transform: uppercase;
}

#sidebar.blogSidebar #wtabs a {
    color: #c1e0f0;
}

.listPosts li {    
    background: url("images/recent.jpg") repeat-x bottom left;
    margin-bottom: 15px;
    padding-bottom: 5px;
}

#wtabsNavigation {
    background: url("images/tabsNav.jpg") repeat-x top left;
    height: 42px;
    margin: 0 -15px;
    padding: 0 15px;
    padding-top: 12px;
}

#wtabsNavigation li {
    float: left;
}

#sidebar.blogSidebar #wtabs #wtabsNavigation a {
    color: #fff;
    font-weight: bold;
    margin-right: 15px;
    padding: 8px;
}

#sidebar.blogSidebar #wtabs #wtabsNavigation a.selected, #sidebar.blogSidebar #wtabs #wtabsNavigation a:hover {
    background-color: #363c44;
    text-decoration: none;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.share {
    background: url("images/share.jpg") repeat-x top left;
    height: 70px;
    margin: 0 -20px;
    padding: 0 20px;
}

.share a {
    background: url("images/share_buttons.png") no-repeat top left;
    display: block;
    float: left;
    height: 45px;
    margin-right: 25px;
    margin-top: 8px;
    text-indent: -9999px;
    width: 115px;
}

.share a.bookmark {
    background-position: -155px 0;
    width: 133px;
}

.share a.saveDigg {
    background-position: -327px 0;
    width: 102px;
}

.share a.likeFacebook {
    background-position: -468px 0;
    width: 118px;
}

.addComment {    
    background: url("images/addComment.png") no-repeat top left;
    display: block;
    height: 33px;
    text-indent: -9999px;
    width: 151px;
}

.commentsHeader h3 {
    margin-top: 6px;
}

.commentInfo {    
    float: left;
    width: 110px;
}

#commentsList {
    margin: 20px 0;
}

#commentsList > li {
    margin-bottom: 15px;
    overflow: hidden;
}

.commentInfo img, .commentInfo p {
    margin: 0;
}

.commentContent {
    background: #1e2125;
    border: 1px solid #2c3137;
    float: right;
    padding: 10px;
    width: 455px;
}

.commentContent a[title="Reply"] {
    background: url("images/reply.jpg") no-repeat top left;
    display: block;
    float: right;
    height: 26px;
    text-indent: -9999px;
    width: 58px;
}

#commentsForm {
    background: url("images/commentsForm.jpg") repeat-x top left;
    margin: 0 -20px;
    overflow: hidden;
    padding: 20px 20px 0;
}

#content #commentsForm h3 {    
    font-size: 14px;
    margin-bottom: 0;
    text-transform: uppercase;
}

#commentsForm form > div {
    float: left;
    width: 241px;
}

#commentsForm form > div.textarea {
    float: right;
    width: 341px;
}

#commentsForm input {
    background: url("images/commentsForm_input.jpg") no-repeat top left;
    display: block;
    height: 23px;
    margin-bottom: 22px;
    width: 231px;
    line-height: 23px;
}

#commentsForm textarea {
    background: url("images/commentsForm_textarea.jpg") no-repeat top left;
    display: block;
    height: 133px;
    width: 331px;
}

#commentsForm input, #commentsForm textarea {
    color: #fff;
    font-size: 11px;
    padding: 5px;
}

#commentsForm input:last-child {
    margin-bottom: 0;
}

#commentsForm button {
    background: url("images/commentsForm_send.jpg") no-repeat top left;
    display: block;
    height: 31px;
    margin: 15px 0;
    text-indent: -9999px;
    width: 77px;
}

#postsNav.single {
    margin-top: -20px;
}

/* ========================== Footer Styles ========================== */
#footer {    
    background-color: #16171a;
    border-top: 1px solid #232429;
    padding: 20px 0;
}

#footer .wrapper {
    overflow: hidden;
}

.links {
    border-right: 1px solid #2e2e33;
    float: left;
    margin-right: 25px;
    width: 110px;
}

#footer a, #footer p {
    color: #9ea3b0;
}

.colophon img {
    margin-top: 30px;
}

#footer .colophon a {
    color: #fff;
}

This is the current table html code:

<table cellpadding="0" cellspacing="0" style="width: 90%">
                <tr>
                    <td>&nbsp;</td>
                    <td style="width:136px;">
                    <img alt="Budget Web Hosting" src="images/tag-pro.png" width="136" /></td>
                    <td style="width:136px;">
                    <img alt="Budget Web Hosting" src="images/tag-pro.png" width="136" /></td>
                    <td style="width:136px;">
                    <img alt="Budget Web Hosting" src="images/hot.png" width="136"  /></td>
                    <td style="width:136px;">
                    <img alt="Budget Web Hosting" src="images/tag-pro.png" width="136"  /></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td class="hot-dark">&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td class="hot-light">&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td class="hot-dark">&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td class="hot-light">&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
            </table>

And this is the tables css code:

td 
{
    height:38px;
}

.hot-light
{
    background:url('../../images/row-hot-light.png') no-repeat top left;    
}

.hot-dark
{
    background:url('../../images/row-hot-dark.png') no-repeat top left;    
}

Dandello 8 Posting Whiz in Training · Answer 22 · 2010-09-29T07:04:21+00:00

Okay, the

img {
margin-bottom: 15px;
}

has to go.

Then - does everything validate? (I mean the whole page AND the style sheet.) Fix that.

Then, if the gap is still there, add to the TD style for the cells where the images are:

vertical-align:bottom; margin-bottom:0

THEN is there is still a gap change it to

vertical-align:bottom; margin-bottom:-2px

(That negative number should be adjusted for the table in question.)

If that STILL doesn't work... see my previous suggestion - put background colors in the TDs that matches the color of the bottoms of the graphics in question because setting the margin to 0 or a negative number should do it and there's something wrong elsewhere on the page that's interfering with how the graphics are being positioned.

LogicWeb 0 Junior Poster in Training · Answer 23 · 2010-09-29T09:43:08+00:00

This is odd.

I added this to the 4 images:

style="vertical-align:bottom; margin-bottom:-18px;"

That works. However, I noticed without the fix, the table showed fine in IE8 with images bottom aligned. WITH the fix, the first green row (below images) is now crushed due to the margin setting.

This is the IE css:

#secondary {
    height: 354px;
    overflow: hidden;
}

#newsletter {
    margin-top: 35px;
}

#newsletter form {
    width: 330px;
}

#sidebar.blogSidebar #wtabs #wtabsNavigation a.last {
    margin-right: 0;
}

#content .blogPosts h3 {
    float: left;
}

.postHeader p {
    clear: left;
}

http://pingy.us/?v=ie.png

LogicWeb 0 Junior Poster in Training · Answer 24 · 2010-09-29T21:49:17+00:00

All this:
style="vertical-align:bottom; margin-bottom:-18px;"
is doing is overriding the
img {margin-bottom: 18px;}
in the main css
Instead override it in the head of the document with:
<style type="text/css">
img {margin-bottom:0px;}
</style>
This works! see: http://www.st-vidicon.net/test/test.html

Maybe I'm misunderstanding you.

I removed:

style="vertical-align:bottom; margin-bottom:-18px

I added in head:

<style type="text/css">
img {margin-bottom:0px;}
</style>

That did not correct it.

Results:

IE:
http://pingy.us/?v=iekrk.png

Chrome/Firefox:
http://pingy.us/?v=chrome.png

LogicWeb 0 Junior Poster in Training · Answer 25 · 2010-09-29T22:28:45+00:00

This worked out perfectly fine! Thank you very much Dandello.

Appreciate your kind effort and not giving up ;)

Strange Spacing Problem

Recommended Answers Collapse Answers

All 30 Replies

Recommended Answers