HTML - Ie8 Cell Width Issue...me No Likey

I'm a beginner in HTML. I would like to make a row with two cells, the first one being 200 pixels wide and the second cell stretching out to fill up the rest of the horizontal space... I thought that putting in width=100% in that <td> tag would do it but if I do that, that cell covers up my first cell (the 200 px one).

How can I go about doing that?

Thanks!!

I have a table that looks like this:

Code:

<table style="height: 100%;" cellspacing=0 cellpadding=0 border=1>

<tr><td colspan=2 style="height: 100px;">
<center>
<span style="font-size: 24pt; text-align: center;">
<img src="H&R banner.jpg" border=0></span></center></td></tr>

<tr>

<td style="width: 200px;">
<center>
<span style="text-align: center;">
MARGIN<br>
(latest news)<br>
(possibly links)
</span>
</center>
</td>

<td>
<table style="width: 100%; height: 100%" cellspacing=0 cellpadding=0 border=1>
<tr>
<td style="height: 50px;">
<center>
<span style="font-size: 14pt;">menu bar</span>
</center></td>
</tr>
<tr>
<td>
<center>
<span style="font-size: 24pt; text-align: center;">
CONTENT
</span>
</center>
</td>
</tr>
</table>
</td>

</tr>
</table>

I'm having trouble controling the width of the first bolded table cell. This happens in IE9. I have it set to 200px, but for some reason it wants to be wider than that (I can tell because the text seems to be centering within the first 200px of its width, but it's not centered within the whole cell). I can fix this by specifying a % width (as in style="width: 25%;"), but I'd prefer to stay away from percentages. I can also fix the problem by specifying the width of the next cell (to its right, in bold above) to some specific value, but then this fixes the size of the whole table, and I would like to keep it variable.

Does anyone know why the width likes to increase to more than I specified, and if so, how do I fix this problem?

Hi all, I am a totally new to html, "yesterday I could not even spell it".
I am working on a simple project where I have used a table to store page information (text and pictures), I read it somewhere it is the best way to do it.
I figured out how to set the context width in the cell (<td width="20">) but how do set the width of the cell?
Remember, I am not building "The Windsor Castle" just a little cuby house in the back so everything should be as simple aspossble, not necessarily the fastets and most versatile.
Thanks in advance.

I actually feel a bit ridiculous because i can't solve a problem that will probably be as easy as hell...

anyway, i have a table with some collspans and rowspans in it, but i can't seem to be able to set the width for the site in IE...

Here's a simple representation of the table, since it's generated dynamically with PHP, so the number of rows and columns is not always the same...but the structure is:

HTML Code:

<table>
 <tr>
  <th rowspan=2 style="min-width=120px;">left column header</th>
  <th colspan=2 style="min-width=120px;">column 1 title</th>
  <th colspan=2 style="min-width=120px;">column 2 title</th>
 </tr>
 <tr>
  <td style="min-width=60px;">value1</td>
  <td style="min-width=60px;">value2</td>
  <td style="min-width=60px;">value1</td>
  <td style="min-width=60px;">value2</td>
 </tr>
 <tr>
  <td>row1 name</td>
  <td>row1 col1 value1</td>
  <td>row1 col1 value2</td>
  <td>row1 col2 value1</td>
  <td>row1 col2 value2</td>
 </tr>
</table>

So it should look a bit like this:
Code:

-------------------------------
|  120px  |  120px  |  120px  |
|         |---------|---------|
|         |60px|60px|60px|60px|
|---------|----|----|----|----|
|rowname1 |val1|val2|val1|val2|
|---------|----|----|----|----|
|rowname2 |val1|val2|val1|val2|
-------------------------------

there can be more rows with rowname, and more columns with the colspans...

now in mozilla firefox this works just fine, but not in IE...even worse, if one of the values in the columns that are supposed to be 60px wide is negative, IE inserts a break between the '-' symbol and the numbers...

i'm using HTML 4.01 Strict by the way...

I have a very simple table that I cannot simply get to render correctly across IE, Firefox, and Opera.

At first, I was using CSS to define the cell widths/heights - when that was giving me issues I got rid of all the CSS and attempted to use plain HTML. The problem persisted.

Here's the code - it doesn't get much simpler than this:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD>
	<TITLE> New Document </TITLE>
	</HEAD>

	<BODY>
	<table cellspacing="0" cellpadding="0" border="1">

		<tr>
			<td width="15" height="33">a</td>
			<td>b</td>
			<td>c</td>
			<td width="15" height="33">d</td>
		</tr>
		<tr>
			<td colspan="4" rowspan="1">Lorem ipsum 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.</td>
		</tr>
	</table>
	</BODY>
</HTML>

Appearance in Opera
Appearance in IE7
Appearance in Firefox (this is what I want it to look like in all browsers)

I haven't done HTML seriously in 7-8 years or so but I don't really remember having these problems with IE/Netscape.

The fix I found for IE was to use style="table-layout: fixed" for the table:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD>
	<TITLE> New Document </TITLE>
	</HEAD>

	<BODY>
	<table cellspacing="0" cellpadding="0" border="1" style="table-layout: fixed">

		<tr>
			<td width="15" height="33">a</td>
			<td>b</td>
			<td>c</td>
			<td width="15" height="33">d</td>
		</tr>
		<tr>
			<td colspan="4" rowspan="1">Lorem ipsum 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.</td>
		</tr>
	</table>
	</BODY>
</HTML>

Now IE works fine, Firefox didn't break, but Opera's cells still are not 15 pixels.

IE7 Appearance fixed

Here's my attempt at getting Opera to display it properly by mixing CSS and HTML:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD>
	<TITLE> New Document </TITLE>
	</HEAD>

	<BODY>
	<table cellspacing="0" cellpadding="0" border="1" style="table-layout: fixed">

		<tr>
			<td style="width: 15px; height: 33px" width="15" height="33">a</td>
			<td style="height: 33px">b</td>
			<td style="height: 33px">c</td>
			<td style="width: 15px; height: 33px" width="15" height="33">d</td>
		</tr>
		<tr>
			<td style="width: 100%" width="100%" colspan="4" rowspan="1">Lorem ipsum 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.</td>
		</tr>
	</table>
	</BODY>
</HTML>

Opera looks even worse now

This seems like such a simple table. I really don't understand why I'm having such a hard time. I believe the second row - using colspan is causing the issue.

Please don't answer with - "dont use tables" or something silly like that

Thank you
-TableTrTd

I'm having an issue with Google Chrome. It's not able to display an embedded web page. What am I doing wrong?

Page: http://ob-kc.com/runhike.html

Code:

<!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"><!-- InstanceBegin template="/Templates/obkc.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Ocean Beach - Kelly's Cove Running & Hiking Trail Guide | San Francisco, CA</title>
<!-- InstanceEndEditable -->
<link href="obkc.css" rel="stylesheet" type="text/css" /><!--[if IE]>
<style type="text/css">

...

<!-- InstanceBeginEditable name="Main Content" -->
<div id="mainContent">
<object data=http://ob-kc.com/running.html width="100%" height="3000"> <embed src=http://ob-kc.com/running.html</embed> Error: Embedded data could not be displayed. </object><br />
<br /><!-- begin htmlcommentbox.com -->
...
<!-- end #mainContent -->
</div>
<!-- InstanceEndEditable -->
<div id="footer">
<!-- end #footer --></div>
<!-- end #container --></div>
</script>
</body>
<!-- InstanceEnd --></html>

Hi guys I have a website that is driving me crazy with this problem.

The layout and several pages have tables (I know i shouldn't be doing a table-based layout but my CSS skills aren't close enough to do what the site requires). The tables work fine w/o the DOCTYPE declaration which makes the browser work in Quirks Mode, but I don't want a site without the doctype of course. The problem is, when I use any kind of doctypes (and I've tried them all) my table cells go crazy.

Check it out:

Without doctype: http://smpt.comuf.com/index3.htm (correct view)
With doctype: http://smpt.comuf.com/index2.htm (layout error)

Another error:

Normal: http://smpt.comuf.com/index3.htm?pagina=downloadr
With doctype: http://smpt.comuf.com/index2.htm?pagina=downloadr.

To make things simpler, I remade the menu part accordingly to the CSS rules and the height property in Dreamweaver 8 I even validated the page ( http://validator.w3.org/check?uri=ht...00=1;verbose=1 - 0 errors).
In the editor, the page appears as follow:



But when you see it in a browser, the problem still happens:

http://smpt.comuf.com/indexe2.htm


This is just because the doctype is present, but I made everything according to the rules, but still the same error...

So, any ideas? =/

I have various div's inside a wrapper div (#wrapper). I have set the width of wrapper div to 900px and one of the inside div (#content) to 650px. but the inner div is not getting shrinked to 650px.

I am using dreamweaver and eric mayer reset before applying my custom CSS.


Here is the code:


HTML Code:

Code:

<!DOCTYPE html>

<html>

	<head>
        <link href="css/styles.css" rel="stylesheet" type="text/css" media="screen>
        <title>Shears Design Website</title>
        
	</head>
    	
        <body>
    
			<div id="outer">
    				
                 <div id="wrapper">
                        
				<div id="shears-logo">
                  	   <img src="images/logos/ShearsDesign.jpg"/>
				</div> 
        
				<div id="top-nav">

					<ul>
            	
                        <li> <a href="index.html">Home</a></li>
                        <li> <a href="about.html">About</a></li>
                        <li> <a href="courses.html">Courses</a></li>
                        <li> <a href="tutorial.html">Tutorial</a></li>
                        <li> <a href="contact.html">Contact Us</a></li>
              			<li> <a href="imp-links.html">Important Links</a></li>
                       
         			</ul>
        		</div>
        
        		
        
        		<div id="content">
			
            		<h1> About Shears Design</h1>
            
        			<p> Shears Design is a small web design and training studio. We have worked as a freelance designer since 2006 and have been creating websites since then.Thewebsites we design have a clean professional layout and appearance with easy to understand navigation and clean, easy to read typography so your site visitors find what they are looking for and have a positive experience visiting your site. We believe in using straightforward well tested design methods which produce sites that are pleasant to visit and easy to maintain and expand when the time comes. Our websites are based on a standard layout grid which gives our clients the ability to visualize their sites in an organized way and provides a framework to quickly and efficiently create dependable and clean websites.</p>
           
				</div>
       
            
       			<div id="right-side">
        
        			<h2> Learning resources </h2>
                  	
        			<p> For more learning resources, please refere the tutorial link at the top of the page. </p>
            
            		<h3> Shears Design Frameswork </h3>
            
           			<p> This is the framework we use to create websites in the training videos for Adobe Dreamwewaver, Microsoft Expression Web and the learning HTML and CSS courses. It includes the completed project templates created in the videos. The purpose of this framework is to provide you with a starting set of tools for creating websites, which you can customized to fit your needs and style. Its the toolkit we use everyday when creating websites. It works great for us and we hope it can be the start of something great for you. </p>
            
            		<p> <a href="contact.html"> Contact us for more information </a> <p>
            
            		<h3> Small Business SEO Guide </h3>
            
            		<p> SEO Guide will go over what SEO is, Keyword Research, External Link Building and OnPage Optimization techniques as well as a discussion of "Black Hat" techniques to avoid. The guide will conclude with information on adding your site to Google and Bing, working with XML sitemaps and installing Google Analytics. The videos will demonstrate the On Page SEO Techniques discussed in the guide and the procedure for adding your site to Google and Bing, creating search engine site maps and adding Google Analytics to your site.</p>
            
            		<p> <a href="contact.html"> Contact us for more information </a> <p>
        
       			</div>
        
        		<div id="social-media-icons">
        
        			<ul>
            	
                		<li> <a href="http://www.facebook.com"> <img src="images/logos/facebook-64x64.png"/> </a> </li>
               			<li> <a href="http://www.twitter.com"> <img src="images/logos/twitter-64x64.png"/> </a> </li>
                		<li> <a href="https://plus.google.com"> <img src="images/logos/google-64x64.png"/> </a> </li>
                		<li> <a href="http://www.youtube.com"> <img src="images/logos/youtube-64x64.png"/> </a> </li>
                		<li> <a href="http://www.yahoo.com"> <img src="images/logos/yahoo-64x64.png"/> </a> </li>
                          
           			</ul>
        
        		</div>
        
        		<div id="footer">
        
        			<p> &copy;2011 Shears Design | All Rights Reserved </p>
            		<p> Terms and Conditions </p>
        
        		</div>

     	</div>
    </div>
    
 	</body>
    

</html>

---------------------------------------------------------------------------------------------------


CSS code:



Code:

/* Reset */

html, body { margin: 0; padding: 0; border: 0;  background: transparent; font-size:10px; }

div, span, article, aside, footer, header, hgroup, nav, section,
h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li, 
table, tr, th, td, tbody, tfoot, thead {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	background: transparent;
	}

img 	{ margin:0; padding:0; border:0; }

table, tr, th, td, tbody, tfoot, thead {
	margin: 0; padding: 0; border: 0;
	vertical-align: baseline;
	background: transparent;
	}
	
table { border-collapse: collapse; border-spacing: 0; }
	
input, select, textarea, form, fieldset {
	margin: 0; padding: 0; border: 0;
	}

article, aside, dialog, figure, footer, header, hgroup, nav, section { 
	display:block; }

h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, b, i, u, strike { 
	font-family: Arial, Helvetica, sans-serif;
	font-size:100%;
	font-weight: normal;
	font-style: normal;
	line-height: 100%; 
	text-indent: 0;
	text-decoration: none;
	text-align: left;
	color: #000;
	}

ol, ul { list-style: none; }




/* Headings */

h1, h2, h3, h4, h5, h6 { font-weight: bold; }

h1 { font-size:24px; color:#3CF;
		padding-bottom:15px; border-bottom:1px #ccc solid; margin-bottom:15px;  }
h2 { font-size:20px; }
h3 { font-size:16px; margin-bottom:5px; }
h4 { font-size:14px; }
h5 { font-size:14px; }
h6 { font-size:14px; }




/* Text Elements */

p           	{ color:#000; font-size:12px; line-height:150%;
					margin:15px 0;  }
a           	{   }
a:link			{ color: #00f;  }
a:visited		{ color: #0f0;  }
a:active		{ color: #000;  }
a:focus			{ color: #666;  }
a:hover     	{ color: #f00;  }




/*id styles*/


body {background-color:#D1F4FC; }

#wrapper {width:900px; margin:0px auto; background-color:#FFF;}


#shears-logo {padding-top:20px; float:left;
				margin-bottom:20px;}

			
#top-nav {  clear:both; 
			
			}				
				
#top-nav ul li a {text-decoration:none;}

#top-nav ul li {display:inline;
				
				}


#content { width:650; margin:10px; float:left;}

hi,
i have a jsp page, in this page i am displaying data retrieved from mysql database. Now the problem is i must color table cell based on cell value. how to implement this.please give me an sample or working code foe this problem.( any code is accepted) preferably html or javascript.
i.e
if cell value is "late" then display that cell in red color
else
display the cell in green color
please help me.

Thanks ad Regards
Akash

What is wrong with this table. My table is not showing correctly. The column on the right side is sticking out a little to much. Please help thx.

Code:

<table width="122" border="0" cellspacing="0" cellpadding="0">
  					<tr>
    					<td width="122" height="30" colspan="3" background="http://findacreditsolution.com/images/left_blue_title.gif">
						</td>
  					</tr>
  					<tr>
    					<td width="1" background="http://findacreditsolution.com/images/left_mid_bg.gif">
						</td>
						
							
    								<td align="center">some code here</td>
								
						<td width="1" align="left" background="http://findacreditsolution.com/images/right_mid_bg.gif">
						</td>
  					</tr>
  					<tr>
    					<td align="center" valign="top" colspan="3" width="122" height="10"  background="http://findacreditsolution.com/images/left_bot_bg.gif">
						</td>
  					</tr>
				</table>

im creatinh a box containing a text. The box must be wide enough to fill a text.

menu.style.width = tekst.length - this functioin gives the number of letters in text. So if the text is "hello" then the width is 5 pixels. But i need the widith of pixels needed to fit the text in a box. How can i do that?

Hi,

Is there away to force my website to fit an Iphone screen when viewed on the iphone. At the moment the width doesn't full span the Iphones screen so it looks bad.

http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5

Thanks alot
Joe

Hi,

Is there anyway to script in such a way that if i never enter a specify to a cell, and give it 100% instead, my cell below will go all the way to the bottom by putting my whole table as 100% too?

|--------------------------|
| |
| 100% |
| |
|--------------------------|
| 50px |
| |
|--------------------------|

something like that. well, it actually work in firefox and not IE, and i cant solve the problem.

Thanks in advance.

Hello,

I am using a template to make a webpage. The background for one of the cells is not covering the entire area. I have looked and looked at this and can not figure it out. Therefore I thought I would ask some pros.
Thanks!!