Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Control <span> width in IE and FF

Posted on 2010-08-15
3
Medium Priority
?
427 Views
Last Modified: 2012-06-21
I'm editing someone else's code to insert headings on colored rectangle backgrounds, that are 3 rows deep and NOT to go the full width of the table cell.

As the code below shows, I've used <span> and multiple &nbsp; to complete the create this effect. It seems an amateurish way to go about it [I'm not a CSS expert] but it works in IE8. The right hand sides of each row line up nicely. However, in FireFOX the same code produces a ragged right hand side to the rectangle with each row a different length. [Apple Safari could be a problem too.]

As an alternative I've tried using a <div> style but I have trouble limiting its height, and limiting its width to less than the table cell width.
<td width="311" class="column2">
      <table border="0" cellspacing="0" cellpadding="0" width="301">
         <tr> 
          <td height="50" align="left" valign="top" bgcolor="#ffcc00"> 

	<p><span style="color: #FFFFFF; background: #666666; height:17">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
              <b>TOP OVERALL</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;			  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </span></p>

Open in new window

0
Comment
Question by:NEILPH
3 Comments
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 1000 total points
ID: 33442550
Is this anywhere close to what you want?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
</head>
<body>

      <table border="0" cellspacing="0" cellpadding="0" width="301">
         <tr> 
          <td style="background-color: #ffcc00;height: 50px;padding: 16px;"><b>TOP OVERALL</b></td></tr>
</table>
</body>
</html>

Open in new window

0
 
LVL 7

Assisted Solution

by:jhp333
jhp333 earned 1000 total points
ID: 33442632
How about this?
<!DOCTYPE html>
<table><tr>
	<td style="width:311px;background-color:#ffcc00;vertical-align:top" class="column2">
		<p style="width:95%;color:#FFFFFF;background:#666666;text-weight:bold">
			<br>
			TOP OVERALL<br>
			<br>
		</p>
	</td>
</tr></table>

Open in new window

0
 

Author Closing Comment

by:NEILPH
ID: 33442905
Thanks guys. Below is what I ended up doing. It's a bit from both of you plus allowing for other factors on the page.

     
         
         
                  TOP OVERALL

               

 
0

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

971 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