happybattles

Big love! Thank you!!

I'd like to use a background image so I can put text on top if it if needed. Here's the CSS and HTML. CSS table td#logo { background-image: url("images/logo.png"); height: 120px; width: 136px; } HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" href="template.css" type="text/css"> </head> <body style="margin: 0;"> <table border=1 bordercolor="red" width="100%"> <tr> <td class="logo"></td> </tr> </table> </body> </html> I'm sure it's just a CSS fix, but I can't find any resources that go this deep online, except, of course, here. Thanks in advance!

External css would be better, i know, but assigning a class to a <td> doesn't seem to work. So, if that's the case, I'll settle for in-line css since the <td> isn't going to change. I have links within that specific <td> that I do not want to match the color of all the rest of the links on the page. So here's what I've tried, code snippets: <td style="a:link:color: #FFFFFF; color: #FFFFFF;"> test </td> <td style="a link color: #FFFFFF; color: #FFFFFF;"> test </td> <td style="a.link color: #FFFFFF; color: #FFFFFF;"> test </td> I've looked around, but to no avail. The non <a> text shows up as white, no problem, but I can't get the links to display as white to overrule the body css.

This works perfectly in Firefox. I have a tab-style menu that sits horizontally. The PHP auto-generates new tabs. The tabs sit at the bottom of the <td>... at least they're supposed to. In Firefox it works fine. When I open the same page in IE, the menu items render correctly, but they float near the middle of the td and don't touch the bottom. Here's a sample of what I'm doing in the HTML output. <html> <head> <link rel="stylesheet" href="/winderrealty/templates/winderrealty_template/css/template.css" type="text/css"> </head> <body style="margin: 0;"> <table width="100%" cellpadding="0" cellspacing="0"> <tr valign="top"> <td height="79" width="159" style="padding-left: 8px; padding-top: 8px;"><img src="/winderrealty/templates/winderrealty_template/images/logo.png"></td> <td width="35"></td> <td width="195" valign="bottom"><address>123 Sales St.</address><address>Prescott, AZ 86301</address><address>(928) 555-1212 <br /></address></td> <td width="*" valign="bottom" border="1" bordercolor="black"><ul id="mainlevel-nav"><li><a href="/winderrealty/index.php?option=com_content&view=article&id=25&Itemid=28" class="mainlevel-nav" >About Joomla!</a></li><li><a href="/winderrealty/index.php?option=com_content&view=article&id=22&Itemid=29" class="mainlevel-nav" >Features</a></li><li><a href="/winderrealty/index.php?option=com_newsfeeds&view=newsfeed&id=1&feedid=1&Itemid=18" class="mainlevel-nav" >News</a></li><li><a href="/winderrealty/index.php?option=com_content&view=article&id=27&Itemid=30" class="mainlevel-nav" >The Community</a></li></ul></td> </tr> <tr valign="top"> <td bgcolor=#2e367d colspan="4" height="33"> </tr> </table> <table border=0 bordercolor="pink" width="100%" height="2000px"cellpadding="0" cellspacing="0"> <tr valign="top"> <td width="*" bgcolor="orange">left</td> <td width="155px" bgcolor="aqua">Right</td> </tr> <tr valign="top"> <td colspan=2> <center>©WinderSites.com</center> </td> </tr> </table> </body> </html> Here's the CSS table td ul#mainlevel-nav li { display: inline; /* display: block; */ height: 33px; width: 125px; list-style: none; list-style-image: none; list-style-type: none; } table td ul#mainlevel-nav li a { background: url('../images/tabs.png') no-repeat; display: block; float: left; width: 125px; height: 33px; line-height: 42px; list-style: none; text-align: center; font-family: sans-serif; color: #FFFFFF; font-size: 12px; text-decoration: none; } table td #mainlevel-nav li { list-style:none; }

ul#mainlevel-nav li { display: inline; height: 49px; width: 130px; list-style: none; list-style-image: none; list-style-type: none; } ul#mainlevel-nav li a { background: url('../images/tabs.png') no-repeat; display: block; float: left; width: 130px; height: 49px; line-height: 42px; list-style: none; } And the html: <div id="menuarea"> <ul id="mainlevel-nav"> <li><a href="/practicesite/index.php?option=com_content&view=article&id=25&Itemid=28" class="mainlevel-nav" >About Me!</a></li> <li><a href="/practicesite/index.php?option=com_content&view=article&id=22&Itemid=29" class="mainlevel-nav" >Features</a></li> <li><a href="/practicesite/index.php?option=com_newsfeeds&view=newsfeed&id=1&feedid=1&Itemid=18" class="mainlevel-nav" >News</a></li> <li><a href="/practicesite/index.php?option=com_content&view=article&id=27&Itemid=30" class="mainlevel-nav" >The Community</a></li> </ul> </div>

I'd like it to work on both IE and Firefox. Here's what I've tried: ul li { list-style: none; } doesn't work... any ideas? Also, how would I replace the default disc or circle with an image?

Booya! Wow - you people are wonderful!

That worked - sort of. I do, however, need this... my fault for not being descriptive enough. I need the right div to be a fixed width. I need the left div to be a variable width, but to fill-up all of the empty space on the left.

In my first post I did just that, and it didn't work.

Well... I do need the div on the right to stick to the right of the browser window. If you can tell what I mean, like this: |[11111111111111111111111111111111111111][222222222222]| And I need two to stay an exact width while one can change depending on the visitor's browser width.

<html> <body> <div> <div style="height: 600px; float: left; width: 100%; margin-right: 450px; background-color: #446655;">one test test test test test</div> <div style="height: 600px; width: 450; background-color: #555555;">two</div> </div> </body> </html> I need these two tables to be left and right of each other.

Holy hell it worked!!! So, I can just adjust the margin, when I get rid of the borders, to the new distance from the left, correct? So when all the borders are gone the new margin will be 320?

Here's the code I have: <html> <body> <div> <div style="width: 120; height: 120; border: 2px dotted #000000; float: left; margin: 0;"> one </div> <div> <div style="width: 200; height: 120; border: 2px dashed #FF66FF; float:left;"> two </div> <div style="width: auto; height: 120; border: 2px solid #66FF66;"> three </div> </div> </div> </body> </html> Here's what I need it to do: <table> <tr> <td>one</td> <td>two</td> <td>three</td> </tr> </table> The results are not what I expected. Div three is consuming one and two. I need it to fit to the right of the others and fill up all of the empty space on the right all the way across the browser window, regardless of the width of the browser. Thank you in advance.