HTML - Problem With Setting Width 100%

Hi there.
I am working on this site. There is a problem with a table column spacing though...

if this is what it looks like in Firefox
(the way its supposed to be...)


and this is what happened to it in IE.
(dear lord...)


the left menu and the content on the right are two adjacent cells of a table.
how do i fix this ?

it seems ie is giving equal width to both the cells. which explains the gap.

i've tried using:
Code:

<td width=180>

and also:
Code:

<colgroup span="2">
<col width="180"></col>
<col width="500"></col>
</colgroup>

but none of them work.
please help me out..

the page is available at >
http://ramniquesingh.googlepages.com/index.html

the .css file is available at >
http://ramniquesingh.googlepages.com/default_style.css

thanks.

Here is my current code:

<TABLE width="215" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><TABLE width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> VARIABLE TEXT </td>
<td align="left"> IMAGE </td>
</tr>
</TABLE></td>
</tr>
<tr>
<td> random text that is lengthy </td>
</tr>
</TABLE>

My problem is that I want the image to be displayed right next to the variable text . but since the variable can be any length, it is not getting displayed right next to the image. It is turning out to have a large gap in between the variable and the image. The variable can be any length... it could be "hi" or "hellooooooooo" but the image still needs to be displayed exactly to the right of it. How can I fix this?

Until I die, I will never quite understand tables - if someome could shed some light on this it would allow me to keep what little hair I have left.

I have a Table with some form inputs in it as outlined below, the problem is this, there is what looks like a 15px space on the right side and I don't know why its there.

Two questions: Size="18" - 18 what? I read that these are the size of a space, but if it is, what is the size of a space? Second, width="50" - 50 what? I am assuming pixels, but with all the problems I seem to have with tables, I'm not sure.

<fieldset style="width: 260px"><LEGEND class="legend">
<table width="260">
<tr>
<td width="240"><input type="text" size="18" etc.>
<td width="20 align="right">There is a 10 x 10 graphic here</td>
</tr>
</table>
</fieldset>

Hope I made sense, any help or guidlines that could ease my life with tables would be appreciated.

Thx

I have found what seems to be a rather big problem in the HTML canvas

When drawing circles, and I presume all shapes, the size of the circle is different based on whether one is filling it, or sketching it.

If we have a circle of radius 10 and line width k, and we decide to fill it, that line width will be evenly dispersed about the perimeter of the circle such that half the line width is inside the circle, and half is outside the circle.

If, however, the same circle is sketched, the line width will still be the same, but it will now be dispersed entirely on the outside of the circle, thus making it larger.

If I am wrong, and this is how figures are supposed to be drawn, or if I am simply not using the right settings, please let me know =)

Hello Everyone! (hoping for quick reply.. lol)

I am not sure if this should go here, or in the design section. I chose here, because it is a problem in the code itself.

I have introduced myself in the introductory section, if you want to know a little bit more about what I am doing this for.

I made a template design in The Gimp photo editor. I sliced it up, and opened up the HTML file in the editor Kompozer. It opened up just like it should, but I wanted a liquid type layout, so I turned the cell's widths into the corresponding percentages, though Kompozer rounded them off. (Shown below) However, when I previewed the file this time, it appeared as if it skipped every other cell, leaving a blank white space in its spot. Not even in the right percentages. I think I know what I've done wrong, looking back now that I am writing this thread. Can someone please point me in the right direction?
EDIT: Code posted as comment, due to lack of character room.

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

Morning all,
I am workign on a small intranet for my department at work. In creating it, this project has slowly snowballed into a larger project. Like most anything we do in life
The issue I am having, in the front screen, they would like to show our monitoring software, so at first glance you can tell if any servers are up or not etc. using iframes in design mode, it looks great. But when I view the page, the website I am calling in the iframe takes over the whole page. Below is the code, is there any fix or even so a better way of doing this?

Code:

table border="0" width="97%" id="table1" cellspacing="0" cellpadding="0">
	<tr>
		<td width="1063">

<table border="0" cellspacing="5" cellpadding="5" align="left" style="border-left-width: 0; border-top-width: 0; border-bottom-width: 0; width: 74%;" id="table2" height="412">
	<tr>
		<td style="border-right-style: solid; border-right-width: 1; border-left-style:none; border-left-width:medium; border-top-style:none; border-top-width:medium; border-bottom-style:none; border-bottom-width:medium; width: 90%;" valign="top">
		<p class="MsoNormal" align="left">&nbsp;
		<iframe src="https://btdhcp" height="400" width="800" frameborder="0" scrolling="yes"></iframe></p></td>
	</tr>
	</table>

Any assistance or guidance would be greatly appreciated.

Orion

Hi all, I'd really appreciate some help on this one.

I have a program which outputs very long strings of text to a HTML page. At the moment the text stays on one line resulting in an annoying horizontal scrollbar.

How do I get the page to automatically format the text so that it all fits within a standard width, and so there's no horizontal scrollbar?

Regards,

Ruth

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

Link to site for reference: http://www.ante-up.org/v2/

Okay, this may be kind of a doozy, but after some thought, I've come to a point where I am looking into using php inc instead of an iframe for my content display, and I want to know how I could go about using divs to set up the site to look exactly the same with php inc. (EDIT: Minus the scrollbar from the iframe of course)

Like if I stuck the Navigation and the Login section into one php file, the 'stats' and miniblog section into a second php file, the header and footer each in their own php file, how would I go about aligning the divs so that I could just php inc everything?

I'm first off assuming that this would be the correct way to do it. Any suggestions are welcome so long as they're not about my table usage I'm aware that many don't prefer them, but I've made them work across five popular browsers, so I'm happy with it.

TIA for any who can offer some insight.

PS: I suppose I should also add that I'm pretty much an ignorant incompetent when it comes to div layers, so bear with me

Hey. I'm new here, and I've recently taken some webmastering classes (needed them a lot more than I thought. I just love programming.), and I have had some concerns about what to do with alpha-transparency.

See, what I want to do is have a background image (using a <div> tag and some basic CSS for this image alone), and that's all I will have. Is there any way to set the alpha of a background color so that it is transparent? Afterward, is there a way to set the alpha to text so that it is not transparent, either? I want a golden color background (FFCC00), with black text. Will this take another layer of CSS, or is this even possible? (Even with the classes, I'm still an absolute total newb.)

Thank you very much in advance.

Please look at this page:
http://www.midwestbookreview.com/links/othr_rev.htm

I would like to be able to have a format for a page like this with one blank column on the left and one blank column on the right (so I could just fill in my links).
I would like the page blank the middle like it is now so I could add my main links. Can someone give me the basic html format on setting this up? Thanks.

I'm a beginner at html, this class is online and my teacher doesn't really keep in touch....So any help what so ever would be greatly appreciated, just a direction to go in...I'm lost.

This is supposed to be a sudoku puzzle, doesn't work, but just displays a puzzle. The book kinda confused me when it asked for sub tables. Mainly, I'm just not sure how I need to layout the nested tables. I included the code for the table and a pic of what it's supposed to look like. (I inserted the "5's" just to help me try to see what I was doing)




Here's the instructions:
http://books.google.com/books?id=4-BlHT9Xb1oC&pg=PA334&lpg=PA334&dq=the+japanese+puzzle+factory+html&source=bl&ots=yCVllJjfgL&sig=pPsbW dc01C5rjY6vAgTIBLzg3P0&hl=en&ei=Fo34S7bONoH48Aah-9X9Cg&sa=X&oi=book_result&ct=result&resnum=5&ved=0CCAQ6AEwBA#v=onepage&q&f=false

HTML Code:

<table class="spuzzle"> 
   
   <caption>Sudoku</caption>
   
   <thead>
		<tr>
			<th></th>
			<th>1</th>
			<th>2</th>
			<th>3</th>
			<th>4</th>
			<th>5</th>
			<th>6</th>
			<th>7</th>
			<th>8</th>
			<th>9</th>
		</tr>
   </thead>
   
   <tbody>
		<tr>
			<th>A</th>
			<td class="greenbox" rowspan="3" colspan="3">
				<table class="sub">
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
					
				</table>
			</td>
			<td class="goldbox" rowspan="3" colspan="3">
				<table class="sub">
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
				</table>
			</td>
			<td class="greenbox" rowspan="3" colspan="3">
				<table class="sub">
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<th>B</th>
		</tr>
		<tr>
			<th>C</th>
		</tr>
		<tr>
			<th>D</th>
			<td class="goldbox" rowspan="3" colspan="3">
				<table class="sub">
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
				</table>
			</td>
			<td class="greenbox" rowspan="3" colspan="3">
				<table class="sub">
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
				</table>
			</td>
			<td class="goldbox" rowspan="3" colspan="3">
				<table class="sub">
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<th>E</th>
		</tr>
		<tr>
			<th>F</th>
		</tr>
		<tr>
			<th>G</th>
			<td class="greenbox" rowspan="3" colspan="3">
				<table class="sub">
				    <tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
				</table>
			</td>
			<td class="goldbox" rowspan="3" colspan="3">
				<table class="sub">
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
				</table>
			</td>
			<td class="greenbox" rowspan="3" colspan="3">
				<table class="sub">
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
					<tr>
						<td>5</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<th>H</th>
		</tr>
		<tr>
			<th>I</th>
		</tr>
   </tbody>
   
   </table>