Problem with css. <br> being added to text.

breeze351
breeze351 used Ask the Experts™
on
I'm creating a restaurant menu.  I would like the entree name in one font/color and the price on the same line with a different font/color.
I'm using a table but the problem is after the entree name, the price drops to the 2nd line.

This is the code in question:
<table id="Appps" border="0" cellspacing="0" cellpadding="2" width="100%" style="height: 25px;">
	<tr>
	<td>
	<div id="Green_Text" align ="center">
    Appetizers and Soups
	</div>
	</td>
	</tr>
<tr>
	<td width = 50%><div id = "Entree">Millie's Chili</div><div "Price"> crock 6 </div>
    Topped with chopped onions & melted pepper jack cheese, served with Nacho chips
  </td> 

Open in new window


The css is
#Entree
{
 	font-size: 18px;
	color: #BF5940;
}

#Price
{
 	font-size: 18px;
	color: #FFFFFF;
}

Open in new window


Only other question is how do I bold the price?

Thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Chinmay PatelChief Technology Ninja
Distinguished Expert 2018

Commented:
Something like this?
http://jsfiddle.net/v5cns6eu/

HTML
<table id="Appps" border="0" cellspacing="0" cellpadding="2" width="100%" style="height: 25px;">
  <tr>
    <td>
      <div id="Green_Text" align="center">
        Appetizers and Soups
      </div>
    </td>
  </tr>
  <tr>
    <td width=50%>
      <div id="Entree">Millie's Chili</div>
    </td>
    <td>
      <div id="Price"> crock 6 </div>
    </td>
    <tr>
      <td>
        Topped with chopped onions & melted pepper jack cheese, served with Nacho chips
      </td>
    </tr>

Open in new window


CSS
#Entree {
  font-size: 18px;
  color: #BF5940;
}

#Price {
  font-size: 18px;
  color: #FF0000;
  font-weight:bold;
}

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Either change your <div>'s to <span>'s
OR
Declare your <div> classes display: inline;

<span> would be my preference
Your code has several problems though
1. You are using an id for your Entree - if this page is going to have more than one row with an Entree in it then this is INVALID. ID's MUST be unique - only one per page. Rather use a class
2. Your second <div> just has "Price" with no attribute name - assuming that should be a class
Corrected code using <span>
<td width = 50%>
   <span class= "Entree">Millie's Chili</span> <span class="Price"> crock 6 </span>
    Topped with chopped onions & melted pepper jack cheese, served with Nacho chips
</td>

Open in new window

Change ID's to classes

.Entree
{
 	font-size: 18px;
	color: #BF5940;
}
.Price
{
 	font-size: 18px;
	color: #FFFFFF;
}

Open in new window

If you need the Entree / Price to be on its own line then simply wrap them in a <div> like this
<td width = 50%>
    <div><span class= "Entree">Millie's Chili</span> <span class="Price"> crock 6 </span></div>
    Topped with chopped onions & melted pepper jack cheese, served with Nacho chips
</td>

Open in new window

Author

Commented:
Julian
I followed your suggestions, but the "crock 6" disappears.

I changed the source to read:
<td width = 50%><span class= "Entree">Millie's Chili</span><span class="Price"> crock 6 </span><br>
    Topped with chopped onions & melted pepper jack cheese, served with Nacho chips

Open in new window


I changed the css to read
.Entree
{
 	font-size: 18px;
	color: #BF5940;
}

.Price
{
 	font-size: 18px;
	color: #FFFFFF;
}

Open in new window


If you want to look the url is:
http://seabreezesoftware.com/Joes/Menu.php
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Web Application Developer
Commented:
It's still on the page but hard to see because you've defined a white font on a light background. change the color: #000000 in .price to something that sticks out more.

Author

Commented:
Joe thanks, I always get white and black backwards.
JoeWeb Application Developer

Commented:
Glad you solved the problem! I don't know if you can but please accept Julian's answer. I just saw this and chimed in. Perhaps you can just mark my comment as useful. I don't want to hijack somebody's original useful answer. Thanks.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Just checking in here.

Based on the link you posted you appear to have used the <span> solution and yet did not mark that post as a solution?

I am confused.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial