[Last Call] Learn how to a build a cloud-first strategyRegister Now


Large Spaces Above And Below Text

Posted on 2006-05-11
Medium Priority
Last Modified: 2012-05-05
Heres an example of some code that causes the problem I'm having.

      <tr class="infoboxrow">
        <td colspan="8" align="center"><strong><font color="#0000ff" size="+8">PEUGEOT 206</font></strong></td>

      <tr class="infoboxrow">
        <td colspan="8">Welcome to my Peugeot 206 website. I enjoy driving my Peugeot 206 and wanted a place where I could keep my photos and at the same time show them off. I have included some facts about the Peugeot 206 along with a gallery. I hope it gives you a small introduction to this great reliable car.</td>

When viewing it on First Page it is as I want it. The paragraph is not far from the heading however when actually viewing it on the page through either IE or FF theres massive areas above and below the header and paragraph.

Can someone explain how to get rid of these large areas. Is it <TD> that causes it?
Question by:Ryan Bayne

Expert Comment

ID: 16658295
Could you post the css style for "infoboxrow" ? maybe that could have something to do with it...
LVL 12

Expert Comment

ID: 16660011
Yea, please post the entire table, or at least opening table tag, and the ifnoboxrow style.  Do you have cellpadding and cellspacing set for your table?
LVL 16

Expert Comment

ID: 16660836
in your table tag, set your padding and spacing to 0

<table cellpadding=0 cellspacing=0>

It may also be helpful to you to specify a fixed height for each tr
i.e. <tr height='30px'>

Also if you have paragraphs tags <p> to set the margins on them too.
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

LVL 12

Expert Comment

ID: 16662198
height attribute not supported by all browsers use css style instead

style="height:30px;"  But really it should be able to be accomplished without setting height.

Expert Comment

ID: 16662705
PLease post your css code as well

Author Comment

by:Ryan Bayne
ID: 16663035
Here ya go CSS

* {border: solid 0px; border-collapse:collapse}

a:link {color:blue;}
a:active {color:red; font-weight:bold;}
a:visited {color:blue;}
a {text-decoration:none}
a:hover {color:red;text-decoration:none; font-weight:bold}

.banfla            {height:50px;  text-align:center;}
.texcent      {text-align:center;}
.butrow       {height:50px}
.infoboxrow     {height:25%}

Expert Comment

ID: 16665263
try not to work with % in .infoboxrow... because that can give problems when viewing websites with different screen resolutions... Like large spaces before and after a row for example... Try to define your .infoboxrow in pixels as well. Maybe:

.infoboxrow {height: 20px;}
LVL 12

Accepted Solution

jessegivy earned 800 total points
ID: 16668383
I think the real question is weather or not you really want to set the height of the row?  If you leave the height unspecified (which is generally the convention) then the cells will expand to fit the text.  Is this a dynamic site driven by server side scripting and a database?

Is there a reason you're setting the height?  Try it without and see what you think.  If the text is aligned verticaly in a strange fashion then you could use the valign attribute to set it to top,middle or bottom.

vincent is right the height:25% is what's giving you the whitespace, just delete the height altogether and see what happens, it's my guess that style was intended for use somewhere else?



Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question