CSS - Highlighting Two Table Cells

Hello, I am attempting to have two pieces of text within a table cell that also contains an image. I was able to figure out the first piece of text that I wanted vertically aligned to the top and to the left, but the next piece of text, which I want vertically aligned to the bottom of the cell and aligned right I am having issues with. Here is the example code:
Code:

<td style"vertical-align: bottom;"><img src="image1.jpg" border="0" width="195"><font style="position: absolute;left: 2;background-color: #FFFFFF; color: #000000;font-weight: bold;font-size: 18px;">STYLE#</font><font style="position: absolute;right: ;background-color: #FFFFFF; color: #000000;font-weight: bold;font-size: 18px;">As low as $x.xxfont></td>

Is this possible within the same table cell as the image? Or do I have to place a CSS table within this cell to place text over top of the image? I would have placed the image as the cell background image, however, I am dynamically creating these tables, and not all of my images are of same size. I am specifying the width though, just not the height. Thank you in advance.

Is it not possible to do the following? What is the correct way of aligning a cell if not?

PHP Code:
 TD.theader {
    background-color: #D0D0D0;
    border: 1px solid #000000;
    padding:5px;
    horizontal-align: right;
} 

I'm building a table (for tabular data, of course) and need text within cells centered. However, applying "text-align:center;" to the cells in any other way but inline styles doesn't work.

For example, this does not work:
Code:

td.centercell {
  text-align: center;
}

<table>
  <tr>
    <td class="centercell">Hi!</td>
  <tr>
</table>

But this does:
Code:

<table>
  <tr>
    <td style="text-align:center;">Hi!</td>
  <tr>
</table>

I'd rather not have to put inline styles on every single cell I need centered, as this is most of them.

What's going on?

Hello,

I am working on a site and want to put a thin black line border on individual cells in a table with out putting a border on the whole table.

Im not very experienced with css and would perfer to keep it simple.

any info will help

thanks
Nick Carlevaris

is there a problem with placing div tags inside table cells.

I have a need to do this and it works fine on my FF3 and IE7 but i am told this is bad practice.

is there a problem and/or workaround to using div tags inside a table cell

Hello,
I posted this in the HTML forum too but didnt get any replies so maybe people in here know it.

When you have a table cell with a width of 20%, and you put a very long string in it. Let's say 255 chars long, without spaces in between. The cell will then expand beyond the 20% that was specified. How can you prevent this and make sure the string is broken down and goes further on a next line in the cell when the 20% width is reached?

thanks in advance

I am developing a PHP/CSS database application built for Safari and have run into a very nasty bug.

(Aside: the web application I am building is sort of browser-specific... we are an all-Mac company, so we want people to use Safari. [I'm not even trying to make it work with IE5/Mac. Screw that.] But having said that, I'd also like it to work in IE6/Win and Firefox [Mac/PC] to give people at least a few more options, like if they're on their PC at home... whatever. Just thought I would explain that before I get flamed by those who think I'm crazy for going that route.)

Anyway, I'd like to have tables with cells/columns that are hidden on the screen but visible on printouts and vice versa. But I've discovered that using display:none for table cells in the print style sheet crashes Safari. It does not affect span tags within table cells.

This will crash Safari.
Code:

td { display: none; }

This is okay.
Code:

td span.printhide { display: none; }

This is also okay, but why do this if it's still going to take up the space on the page? Might as well just leave it.
Code:

td { visibility: hidden; }

Now, I've found a workaround that works, but it's a pain. Basically, instead of setting it up like a normal table, like this:

Code:

<table>
<tr>
<td>Cell</td>
</tr>
</table>

You have to set it up like this:

Code:

<span class="table">
<span class="row">
<span class="cell">Cell</span>
</span>
</span>

As long as you give those span tags their respective display attributes, this works when you set this in your print stylesheet, for example:

Code:

span.cell { display: none; }

But the big problem with doing it this way is that you're now completely handcuffed to the stylesheet. At least if the style sheet bonks the old way, you still have a table with tabular data in it. Plus, say if the next version of Safari fixes this problem, then you'd have to go back and fix it on every page that uses these span tags in order to "unlock" the handcuffs, which kind of nullifies the purpose of style sheets in the first place.

So I guess what I'm asking is if anyone knows of a workaround that I can use that does NOT involve converting my <table><tr><td> to <span><span><span>? Thanks for reading.

I'm fighting with this for a while now. I want to change my table layout into div based one, but keeping all the positive features of table design. The layout is based on percents and em (the liquid philosophy)

The problem:
Make div resize like table cell with minimal width equal to width of widest unbreakable element. I don't want my "verylongunnecesaryword" stick out of menu div nor dissapear partaily when resizing the window. I basically want the menu to always stay wide enough to accomodate the longest word and resize dynamically with window and fonts. There is no such problem when using tables, cells automatically resize to fit content and never become so small that content sticks out or disappear.

Setting the min-width with either em, px nor percent is a no go, because it's impossible to tell what size will the biggest element be. No javascript either. Also keeping it IE6 complaint would be good. I still think that tables are the best idea and unless someone shows me how to fix this problem with div and css, I'm just sticking with tables till the end of world.

shortened HTML:
Code:

<div class="menu">
menu here
</div>

<div class="contents">
the rest of page
</div>

shortened CSS:
Code:

.menu
{float: left;
width: 20%;
padding: 1%;
}

.contents
{float: left;
padding: 1%; 
width: 76%; 
}

Seems that if class's are applied to individual TD tags, no matter how i try to implement row highlighing, the TD class will overide the highlighting color.

A simple way to implement row highlighting is:

<TR onmouseover="this.style.backgroundColor='navy';" onmouseout="this.style.backgroundColor='grey';">

however, a TD with a class that set's a DIFFERENT backgroundColor will disregard the TR mouseover.

Any help?

Hey everyone, the admins have implemented a new hack to the
forums, allowing you to post your code with nicely coloured text
rather than just the normal black or the old php stuff.

More details can be found he
http://forums.devshed.com/t279108/s.html

Html code:
[hig hlight=html4strict]your code here[ /highlight]

For example:
html4strict Code:
Original - html4strict Code <?xml version="1.0" encoding="iso-8859-1"?> <!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" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <h1 class="header_text"> Nice One! </h1> <p id="main_content"> <span style="color:red;">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </body> </html>

  

  


 <?xml version="1.0" encoding="iso-8859-1"?>


 <!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" lang="en" xml:lang="en">


 <head>


 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


 <title>Untitled Document</title>


 </head>


  


 <body>


 <h1 class="header_text">


     Nice One!


 </h1>


 <p id="main_content">


     <span style="color:red;">Lorem ipsum</span> dolor sit amet, consectetur


     adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore


     magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco


     laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in


     reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.


     Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia


     deserunt mollit anim id est laborum.


 </p>


 </body>


 </html> 

The same goes for CSS highlighting:
[hig hlight=css]your code here[/high light]
css Code:
Original - css Code /*Comments*/ body { property:value; } body, div { property:value; }

  

  


 /*Comments*/


 body


 {


     property:value;


 }


 body, div


 {


     property:value;


 } 

As you can see from the thread I linked, there are many many
other languages supported, but these three examples are more
likely to be used than any other in this particular forum...

Have fun with it, and please do use this feature, I'm sure it will
make things much easier for us to read/understand, rather than
just posting chunks of code.

Enjoy!

--Jon.

I have created a bit of CSS similar to the way faqs are expanded and contracted by clicking.

It constitutes a list of maxims some of which are further expanded and some of which are not. An example of this is displayed here, http://yogaredux.meripol.net/node/12.

What I am looking for is some kind of CSS which is content depended. If the answer part is filled I want it to have a different colour from when it is empty. Is there any kind of Javascript, CSS or a combination of the two that can implement it?

hi there,

i am currently designing a page for a client, where i use menu highlighting (active, hover, focus). the menu is arranged in a list with two sublevels.

-> menu top 0
-> level 1
-> link 1
-> link 2

etc...

my aim is to let only the currently active menu be in a different color than all the others. what actually happens is that all submenus as well are highlighted.

her is the code:

Code:

#right ul.menu,
#left ul.menu {
   margin: 0;
   padding: 0 0 0;
   list-style: none;
}
#right ul.menu li,
#left ul.menu li {
   margin: 0 !important;
   padding: 0 !important;
   background: none !important;
}
#right ul.menu li a,
#left ul.menu li a {
   padding: 4px 0;
   display: block;
   border-bottom:1px solid #dadada;
   text-decoration: none;
   outline: none;
   color: #666;

}
#right ul.menu li a:hover,
#right ul.menu li a:active,
#right ul.menu li a:focus,
#left ul.menu li a:hover,
#left ul.menu li a:active,
#left ul.menu li a:focus {
   color: #FE642E;
   border-bottom:1px solid #dadada;
   text-decoration: none;
   background:#fff;
}
#right ul.menu li.active,
#left ul.menu li.active {
   color: #FE642E;
   text-decoration: none;
   font-weight:normal;
}
#right ul.menu li.active a,
#left ul.menu li.active a {
   color: #FE642E !important;
   text-decoration: none;
   font-weight:normal;
}
#right ul.menu li ul,
#left ul.menu li ul {
   margin: 0;
   padding: 0;
   list-style: none;
}
#right ul.menu li li,
#left ul.menu li li {
   padding: 0 0 0 10px !important;
   list-style: none;
}
#right ul.menu li li a,
#left ul.menu li li a {
   font-size: 92%;
   font-weight: normal;
   background: url(../images/arrow.png) no-repeat left !important;
   padding-left:10px !important;
   border-bottom:1px solid #dadada;
      color: #666;

}
#right ul.menu li li a:hover,
#right ul.menu li li a:active,
#right ul.menu li li a:focus,
#left ul.menu li li a:hover,
#left ul.menu li li a:active,
#left ul.menu li li a:focus {
   color: #FE642E;
}
#right ul.menu li.active a:hover,
#left ul.menu li.active a:hover {
   color: #FE642E !important;
   text-decoration: none;
   font-weight:normal;
   border-bottom:1px solid #dadada;
   background:#fff;

}

URL
i have added a screenshot to visualize the problem, the only link in orange should be 'Menu A'.

thank you in advance,
sebastian

Hi all,
I am trying to prevent the highlighting of text on my site only on a product description.

I currently employ techniques using the BODY tag, but I believe this is doing more harm than good because it does not allow highlighting/cutting in any other areas.

I have seen some class(es) on other sites where highlighting was not permitting ONLY in the product description (a table)

Is there a way to disable highlighting of text "IN A TABLE" via CSS or JAVA, and without the tricks of transparent layers and IFrames?

Thanks much in advance

I am 99.99999% sure that there is no way to do this in pure CSS but just in case.

I have tabbed navigation. When a user clicks on a link it loads that page from the server (a page refresh). The corresponding nav tab should then be in its active state.

Does CSS support this at all? I am happy to run a server side script to set an item to "current" but I would like to know if there is any way around it.

Thanks.

H all,

I have a horizontal navigation bar which basically looks like this:

Thing0 | Thing1 | Thing2 | Thing34

What I want to do is when I select a link to a new page, I'd like (using CSS) to have that link highlighted so that the user can see which page he is on.

It's either that or hardcoding the name to each page...but since it's already in the Nav bar, I thought highlighting the link on the nav bar serves as a heading as well...

Possible?