Member Avatar for tefflox

I'm using a table with two rows with backround colors for the design element, tho the table "above" the colored design rows is fixed beneath the colored rows in the opera browser. I don't want to merge the tables because it would put some the regular <td> elements against the left border. I guess I could format empty cells to avoid that..

Also, in opera, i don't understand why some tables appear at the top of the page when they're written after other tables so that they should be at the bottom, as they are in firefox, ie, and safari. How can I correct this problem so my pages look right in opera? thanks :-)

  • 3 Contributors
  • 6 Replies
  • 129 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by FC Jamison

Dani AI

Generated

— Opera differences like the ones described are almost always caused by HTML/CSS that other browsers tolerate but Opera handles strictly. The fastest path to a fix is a small, repeatable test case and a short checklist to eliminate common causes.

Start by isolating the problem: build a minimal HTML page that contains only the two colored bars, the table that should sit above them, and the "archive | notes" element. Use a standards DOCTYPE so the browser runs in standards mode, then validate the HTML (unclosed tags and stray markup often break Opera layout while other browsers guess). Temporarily remove all nonessential CSS and reintroduce rules one at a time to see which rule triggers the misplacement.

Common, reliable fixes to try:

  • Normalize table spacing and cell behavior so browsers render consistently.
  • Make sure floats are cleared (use a clearfix or overflow: auto on the container).
  • Avoid using separate tables purely for visual bars; a wrapper div with a background color or positioned pseudo-element is more robust.
  • Check for long unbroken content or oversized images that push elements horizontally.

Helpful CSS to try immediately:

table { border-collapse: collapse; border-spacing: 0; margin: 0; table-layout: auto; }
td { padding: 0.5em; vertical-align: top; }
.container { overflow: hidden; } /* quick clear for floats */
img { max-width: 100%; height: auto; } /* prevents horizontal overflow */

If the "archive | notes" content appears off to the right, inspect for unclosed table/cell tags, floats not cleared, or very long strings (use word-wrap: break-word; when appropriate). Once a minimal test case reproduces the issue, it is safe to paste that HTML here (without PHP) so others like and can debug the exact markup and point to the offending rule.

Recommended Answers

All 6 Replies

Member Avatar for tgreer

Please provide a link so we can see what you're describing. It's hard to visualize.

Are you using CSS and a proper DOCTYPE? Have you set the padding and margin properties for all elements appropriately?

Member Avatar for tefflox

thanks so much for offering to help, but the file is only on my localhost. it won't be published for another week. but anyhow, i checked my hosting reports and did not see any opera users, so i think i will just settle. thanks again for helping. i was up all night working on it, was able to fix a few things in opera, but i'm letting it go for now.

Member Avatar for FC Jamison

You can upload the file here so we can take a look.

Member Avatar for tefflox

Oh, good deal. It's also convenient to analyze because I made a temporary solution for the page to load adequately, though not optimally, in Opera, and that segment is commented, where the table of names and the twin colored rows are one table.

There is also another element, the "archive | notes" element which loads scrolled off to the right, instead of right under the colored bars.

Load it in firefox, it should look fine. Thanks so much for helping. Cheers. :-)

It has php, but no functions on this page. rename it to html and it should load fine. Thanks again.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>




  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="description" content="listenlight 02">
  <meta name="keywords" content="poems, poetry, magazine"><title>listenlight 02</title>

    

   
<style type="text/css">
  
  body {font-family: arial, verdana; background-color: #fff; color: #000000}

  h {font-family: 'lucida sans', arial, verdana}
  h2 {font-family: 'lucida sans', arial, sans; font-size: 120%; }
  
  p {font-size:16px; font-family:'lucida sans', sans}

  a:link    {color: #000; text-decoration: none; outline: none;}
  a:visited {color: #000; text-decoration: none; outline: none;}
  a:active  {text-decoration: none; outline: none;}
  a:hover   {text-decoration: none; outline: none;}

  img { border:none }
  
  table {border:none;}
  td.light {background-color: #945 }
  td.dark  {background-color: #723 }
  
</style></head><body>
<div>

		<br style="line-height: 373px;">

  <table align="right" border="0" cellpadding="0" width="95%">			

  	<tbody><tr>
		<td style="text-align: left;"><a href="http://linux/02/yu"><big>Tim Yu</big></a></td>
		<td style="text-align: left;"><a href="http://linux/02/bramhall"><big>Allen Bramhall</big></a></td>
  		<td style="text-align: left;"><a href="http://linux/02/moore"><big>Katrinka Moore</big></a></td>

  			</tr>
  	<tr>
  		<td>&nbsp;</td>
  			</tr>
	<tr>
		<td style="text-align: left;"><a href="http://linux/02/bach"><big>Glenn Bach</big></a></td>
  		<td style="text-align: left;"><a href="http://linux/02/switaj"><big>Elizabeth Switaj</big></a></td>		
		<td style="text-align: left;"><a href="http://linux/02/shippy"><big>Peter Jay Shippy</big></a></td>
			</tr>
	<tr>
		<td>&nbsp;</td>
			</tr>

  </tbody></table>
    
    <table align="left" border="0" width="80%">
  
	  <tbody><tr>
	  	  <td class="light">&nbsp;</td></tr>
	  <tr>
	      <td class="dark">&nbsp;</td></tr>
	  
	 </tbody></table> 
		

<!--
  <table width="80%" align="left" border="0" cellpadding="0">			

  	<tr>
  		<td>&nbsp;</td>
		<td style="text-align:left;"><a href="/02/yu"><big>Tim Yu</big></a></td>
		<td style="text-align:left;"><a href="/02/bramhall"><big>Allen Bramhall</big></a></td>
  		<td style="text-align:left;"><a href="/02/moore"><big>Katrinka Moore</big></a></td>

  			</tr>
  	<tr>
  		<td colspan="4">&nbsp;</td>
  			</tr>
	<tr>
		<td>&nbsp;</td>
		<td style="text-align:left;"><a href="/02/bach"><big>Glenn Bach</big></a></td>
  		<td style="text-align:left;"><a href="/02/switaj"><big>Elizabeth Switaj</big></a></td>		
		<td style="text-align:left;"><a href="/02/shippy"><big>Peter Jay Shippy</big></a></td>
			</tr>
	<tr>
		<td colspan="4">&nbsp;</td>
			</tr>

	<tr>
	  	<td class="light" colspan="4">&nbsp;</td>
	  		</tr>
	<tr>
	    <td class="dark" colspan="4">&nbsp;</td>
	    	</tr>
	  
	 </table> 
--> 
	    
	<table align="left" border="0" width="75%">
		<tbody><tr>
			<td><p style="text-align: right; font-family: sans; font-size: 85%;"><br style="line-height: 50px;"><a href="http://linux/02/archive">archive</a> | <a href="http://linux/02/notes">notes</a></p></td></tr>
	</tbody></table>
	
</div>

</body></html>
Member Avatar for FC Jamison

It will take me awhile to get to it.

I had a double router meltdown and I was forced to wipe my hard drive.

It takes forever to reload everything.

Member Avatar for FC Jamison

OK...I'm trying to get a handle on this...

Are you trying to place one table on top of another?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.