Vertical line sizing

See the vertical line on my site between my main content and the 3 images on the right? What's the easiest way to arbitrarily tweak the height of that line? I want to move it down some, and then have the bottom of the line not go quite as far down.

The css I'm using for the line is inside a table: <td width="10" style="border-right: 1px solid gray; padding: 5px;"></td>

Thanks!
LVL 11
SweatCoderAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

remorinaCommented:
Although there is no easy way to get vertical lines to work as intended without some extensive CSS the below a workaround in your case.

For isntance, you're not able to achieve what you want using the table layout for the content section, as there's no way you can control the cell's border independently.

I have worked out your content section in CSS and Divs, using relative position and then placing two absolutely positioned white layers to cover up the unwanted area of the border however, this structure is dependent on the left column containing the images, if the content on the left are shorter than the right column it will end before intended since we're dealing with CSS layers not Table layout.

It also seems your code is outdated and using deprecated elements such as fonts, you might want to look into upgrading your markup into valid w3 and CSS layouts, it might also get better impact on search engine bots.

Replace your entire content section on this page that starts with the following
<center>
<table width="1000">

Open in new window


With the below
<div style="width: 1000px; margin: 0pt auto; overflow: hidden; padding-bottom: 20px;">
        <div style="float: right; width: 225px;">
            <table>
                <tbody>
                    <tr>
                        <td align="center">
                            <a href="https://www.paypal-portal.com/developer/directory/" target="_blank"><img border="0" src="images/paypal_certified_developer.gif" alt="Paypal Certified Developer"></a>
                            <br />
                            <font size="2"><a href="https://www.paypal-portal.com/developer/directory/" target="_blank">Verify Certification</a></font>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <br /><br />
                            <img src="images/creditcard_small.jpg" alt="Paypal Certified Developer - Credit Cards">
                            <br />
                            <font size="2">Accept Credit Cards On Your Site</font>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <br /><br />
                            <img src="images/hundreds_small.jpg" alt="Paypal Certified Developer - Cash">
                            <br>
                            <font size="2">Get Paid Instantly</font>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div style="float: left; width: 745px; padding-right: 10px; border-right: 1px solid gray; position: relative;">
            <div style="position: absolute; width: 10px; top: 0pt; right: -5px; height: 50px; background: none repeat scroll 0% 0% rgb(255, 255, 255);"></div>
            <div style="position: absolute; width: 10px; bottom: 0pt; right: -5px; height: 50px;background: none repeat scroll 0% 0% rgb(255, 255, 255);"></div>
            <h2>
                PayPal Certified Developer: Nathan Jensen</h2>
            <br />
            Welcome to the premium integrator of online PayPal, Credit Card, and eCheck solutions!
            Beginning with a <b>free, no-obligation phone consultation</b>, we will discuss
            your needs, answer questions, and offer options. We can provide a full range of
            online payment integrations and solutions. From full-scale, built-from-scratch online
            shopping carts to minor tweaks of your existing system, we work quickly to provide
            you with the high-quality solution you deserve.
            <br />
            <br />
            Here are a few of the online payment services and solutions we offer:
            <br />
            <br />
            <li><a href="https://merchant.paypal.com/us/cgi-bin/?cmd=_render-content&amp;content_ID=merchant/express_checkout" target="_blank">PayPal Express Checkout</a></li>
            <li><a href="https://merchant.paypal.com/us/cgi-bin/?cmd=_render-content&amp;content_ID=merchant/wp_pro" target="_blank">Website Payments Pro (PayPal invisible)</a></li>
            <li><a href="https://merchant.paypal.com/us/cgi-bin/?cmd=_render-content&amp;content_ID=merchant/payment_gateway" target="_blank">PayFlow Payment Gateway (use your own Bank, PayPal invisible)</a></li>
            <li><a href="https://merchant.paypal.com/cgi-bin/marketingweb?cmd=_render-content&amp;content_ID=merchant/wp_standard" target="_blank">Website Payments Standard (by PayPal)</a></li>
            <li><a href="https://www.paypal.com/us/cgi-bin/webscr?cmd=_donate-intro-outside" target="_blank">PayPal Donate (any organization)</a></li>
            <li><a href="https://merchant.paypal.com/cgi-bin/marketingweb?cmd=_render-content&amp;content_ID=merchant/political_fundraising" target="_blank">PayPal Political Fundraising</a></li>
            <li><a href="https://merchant.paypal.com/cgi-bin/marketingweb?cmd=_render-content&amp;content_ID=merchant/government_payments" target="_blank">PayPal Government Billing/Payments</a></li>
            <li><a href="https://www.paypal.com/us/cgi-bin/webscr?cmd=xpt/Marketing/general/ProRecurringPayments-outside&amp;bn_r=m" target="_blank">Recurring Payments (PayPal optional)</a></li>
            <li><a href="https://www.paypal.com/us/cgi-bin/webscr?cmd=p/xcl/rec/ipn-intro-outside&amp;bn_r=m" target="_blank">Instant Payment Notification</a></li>
            <li><a href="https://cms.paypal.com/us/cgi-bin/?cmd=_render-content&amp;content_ID=security/seller_protection" target="_blank">Fraud Protection Services</a></li>
            <li><a href="https://www.x.com/community/ppx/adaptive_payments" target="_blank">PayPal Adaptive Payments</a></li>
            <li><a href="https://www.x.com/community/ppx/adaptive_payments" target="_blank">PayPal Split/Parallel Payments</a></li>
            <li><a href="https://merchant.paypal.com/us/cgi-bin/?cmd=_render-content&amp;content_ID=merchant/mass_pay" target="_blank">PayPal Mass Payments</a></li>
            <li><a href="https://www.x.com/community/ppx/embeddedpaymentsexperience" target="_blank">PayPal Embedded Payments</a></li>
            <li><a href="https://merchant.paypal.com/us/cgi-bin/?cmd=_render-content&amp;content_ID=merchant/virtual_terminal" target="_blank">PayPal Virtual Terminal</a></li>
            <li><a href="https://merchant.paypal.com/us/cgi-bin/?cmd=_render-content&amp;content_ID=merchant/online_invoicing" target="_blank">Online/Email Invoicing</a></li>
            <br />
        </div>
    </div>

Open in new window


In order to modify the vertical line overlays, you need to adjust the height property in these two lines in the above code where the first layer is the upper white overlay and the second is the bottom one at the bottom.

<div style="position: absolute; width: 10px; top: 0pt; right: -5px; height: 50px; background: none repeat scroll 0% 0% rgb(255, 255, 255);"></div>
            <div style="position: absolute; width: 10px; bottom: 0pt; right: -5px; height: 50px;background: none repeat scroll 0% 0% rgb(255, 255, 255);"></div>

Open in new window


Hope this was helpful and easy to follow!

Best of luck

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
SweatCoderAuthor Commented:
Thanks, that did it.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.