HTML - Help! Can't Stop Columns Breaking

Any help with this GREATLY appreciated. Having a problem with my sidebar breaking as I add text to the page.

See he http://www.thebigfootdemo.com/landingpage

Can someone point me in the right direction as to what to look for in the code that might be causing this? I'd like the sidebar (green area) to adjust it's height with the amount of text I put into the page.

We need the height of the child div to go 100% of the parent div in other words.


If I add too much text, the bar breaks as you will see.

Thanks so much in advance,
Jeff

Hi all I had a web site and I added a new google custom search box in it and in the result page the design is breaking can anyone help me out ...

www.karthimx.in this is my website go to this page and search as songs or cricket or something and see de result page header ...

Hello folks,

I'm having trouble with the code for a sliced background image, and am hoping someone can help.

You can see the design at this url: http://www.magicalwonders.com/graphicslice1/

There are two problems that I'm having difficulty with.
1. I have included a repeating background tile for the right hand sidebar, and although the tile is diplaying O.K. my graphic is breaking at the top of the page when there is text overflow.
http://www.magicalwonders.com/graphicslice2/

2. Second problem. Although I have a repeating tile created for the left hand sidebar, I'm not sure how to include it in the code, as I'm already using a background image referenced by CSS. I need the image for the left side bar to be a background image, as I need to add nav buttons to the page.

At the moment, the graphic for the left side bar is just repeating itself, which doesn't look too good as it is a graduated colour.

My html is as follows:
Code:

<table id="Table_01" width="100%" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<img src="images/headerleft.jpg" width="168" height="126" alt=""></td>
		<td>
			<img src="images/headermiddle.jpg" width="456" height="126" alt=""></td>
		<td>
			<img src="images/headerright.jpg" width="166" height="126" alt=""></td>
	</tr>
            </table>

<table width="100%"  border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<img src="images/top_left.jpg" width="147" height="24" alt=""></td>
		<td>
			<img src="images/top_middle.jpg" width="468" height="24" alt=""></td>
		<td>
			<img src="images/top_right.jpg" width="175" height="24" alt=""></td>
	</tr>
	<tr>
		<td id="leftsidebar">
			</td>
		<td valign="top">
			Content goes here...

</td>
		<td id="rightsidebar">
			<img src="images/sidebar_right.jpg" width="175" height="386" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/footer_left.jpg" width="147" height="64" alt=""></td>
		<td>
			<img src="images/footer_middle.jpg" width="468" height="64" alt=""></td>
		<td>
			<img src="images/footer_right.jpg" width="175" height="64" alt=""></td>
	</tr>
</table>
</body>
</html>

And my CSS is:
Code:

#leftsidebar {
background-color: #fead01;
background-image: url(images/sidebar_left.jpg);
}

#rightsidebar {
background-color: #fead01;
background-image: url(images/sidebar_repeat_right.jpg);
background-repeat: repeat-y;
}

Any help or advice would be much appreciated.

Many thanks

Myles

Hello html forum and members'
site error page ---

help !! cant find the < that is breaking my page....
thanks a million....
-tikki-

I have display:inline and its adding in two drop boxes that it shouldnt. After the drop boxes it then stops the inline. Im new to css, have only been trying it for the past couple of days. The two drop down boxes are suppose to be on the left, under the links at the top. Can someone explain to me why inline stops where it does? Thanks. Oh yeah, the links under <li> I know their to the wrong address's.

body {
font-family:georgia,'times new roman',times,serif;
color:#BD0A70;
background-color:#F2F2F2;
}
ul.navbar {
list-style-type: none;
padding:0;
width:32em;
float:left;
}
ul.navbar li {
display:inline;
font-size:125%;
background-color:#007BA7;
margin:.10em;
}
ul.navbar a,ul.navbar a:visited {
color:#ffffff;
text-decoration:none;
}
ul.navbar a:hover {
background:#00008B;
}
form.jump {
/* position: absolute; */
float: left;
}
div.floatright {
/* position: absolute; */
float: right;
}
h1 {
clear:both;
font-family:helvetica,geneva,arial,SunSans-Regular,sans-serif;
}



------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<link rel="stylesheet" href="mystyle.css">
</head>

<body>
<a charset="ISO-8859-1">

<!-- Site navigation menu -->

<ul class="navbar">
<li><a href="index.html">Change email</a>
<li><a href="musings.html">Change Password</a>
<li><a href="town.html">F.A.Q.</a>
<li><a href="town.html">Contact</a>
<li><a href="links.html">Log out</a>
<li>
</li>
</ul>
<form class="jump" action="/reredirect.php" align="left" method="post">
<input type ="text" name="userpage" size="17" value="Jump to user page" onFocus="this.value=''">
<img src="cooltext406694699.png" align="absbottom" onmouseover="this.src='cooltext406694699MouseOver.png';" onmouseout="this.src='cooltext406694699.png';" input type="submit" value="Submit" name="submit"></img>
</form>

<div class="floatright">
<script type="text/javascript"><!--
/* 234x60, created 11/22/08 */
google_ad_slot = "0343255875";
google_ad_width = 234;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<!-- Main content -->

<table>
<tr>
<td>
<form method="post" action="/redirect.php" name="event">
<select name="select" class="breakinline" onChange="this.form.submit()">
<OPTION SELECTED>Select friend
<OPTION value="/users/sharon">name1
<OPTION value="/users/carrie">name2
<OPTION value="/users/capy">name3
<OPTION value="/users/charla">name4
</SELECT>

</FORM>
<td>
<form id="myeventz" method="post" action="/changeevent.php" name="myevent">
<select name="myevent" class="tabletxt" onChange="this.form.submit()">
<OPTION SELECTED=>12/25 Christmas</option>
<OPTION value="0101 Event One">01/01 Event one
<OPTION value=" 0202Eventtwo">Remove this event
<OPTION value=" ">Add a new event
</SELECT>
</FORM>
</td>
</tr>
</table>
<p>Select item's to remove</p>

hi..
i jst noticed tht in a website its flash or its css background can be grabbed very easily.
can any one suggest how to stop the grabbing of css and flas like grabbing is not possible in www.leoburnett.com so whts the technology behind tht website


thanku
ankit gupta

I am using the body onload to open a new window but is it possible to check if the window is already open and if so to not refresh it as I am using it as a music player and hitting the home link starts it off again. Any suggestions and if so as much detail as possible would be greatly appreciated :-)

Thanks,
root.

i have a page with code below

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Pixelate(enabled=false,duration=1,maxSquare=50)" />
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Pixelate(enabled=false,duration=1,maxSquare=50)" />
<script src="http://www.savethedevelopers.org/say.no.to.ie.6.js"></script>
<title>Untitled Document</title>
</head>

<body>
<img src="http://www.sf4stu.com/attachments/month_0804/20080412_7374481915abcecb4439HQ4ovRdyjWnf.gif" />
</body>
</html>

when i test locally, i saw there is a information bar right on my IE browser
how could i stop the information bar?
since i trust my code is save~

Hello. I am currently making a website using tables. Basically I'm collecting php data feeds from an open-source CMS and feeding the data into different table cells via a php tag in each. I'm using a single background image for the whole table as I want that image to stay the same and I can't really use CSS for this. However, I cannot keep my table the same size. Of course, when my table shifts, it knocks all my data out of line and it doesn't sit right with the background image anymore. It is only about 780 pixels wide and I don't want it to resize with browsers etc, the size it is is fine to stay like that all the time. The text that is feeding into it doesn't appear to be wrapping and then just stretches the table, even though I've specified widths etc already.

Any help would be much appreciated. Ta.

I have done this before, but forgot exactly how I forced (and I mean FORCED) it to work in both IE and FireFox. I am creating borders. I clearly set the width and height of the divs that contain the border images. corners do not tile, vertical borders do not tile in the x dimension, and horizontal borders do not tile in the y dimension. Or they're not supposed to. To force IE to act right, I have to add overflow:hidden to the style. Everything works except for the horizontal borders, which tile one extra border. Like this:


Anyway, would someone please examine this simple code and tell me why it isn't working?

By the way... KE is our prefix, B is Border, V is Vertical, H is Horizontal, and C is corner, to help you figure out what the style names are. So, KEBC is a Border Corner which could be top-left, top-right, bottom-left, bottom-right. I MUST use background images for tiling purposes with the vertical and horizontal borders, so please, no lame answers to the effect: "just embed an <img> instead of using backgrounds..." THat doesn't solve the problem. ...In advance...

HTML Code:

<html>
<head>
<style>
    .KEBC
    {
        position:absolute;
        width:5px; height:5px;
        background:no-repeat;
        overflow:hidden;
    }
    .KEBVS
    {
        position:absolute;
        width:5px;
        background:no-repeatx;
        overflow:hidden;
    }
    .KEBHS
    {
        position:absolute;
        height:9px; width:5px;
        background:no-repeaty;
        overflow:hidden;         
    }
    
    
</style>
</head>
<body bgcolor="#000000">
<!-- Make a Framed Container DIV element -->
<!--~FC--><div style="width: 200px; height: 100px; background:#333333; position:absolute;">
        <!-- -- First, do the corners -- -->
        <!-- Top Left Corner (tlc.png) is 5x5 -->
        <!--~TLC--><div class="KEBC" style="left:0px;  top:0px; background:url(tlc.png)"></div><!--TLC~-->
        <!-- Top Right Corner (trc.png) is 5x5 -->
        <!--~TRC--><div class="KEBC" style="left:195px; top:0px; background:url(trc.png)"></div><!--BRC~-->
        <!-- Bottom Left Corner (blc.png) is 5x5 -->
        <!--~BLC--><div class="KEBC" style="left:0px; top:95px; background:url(blc.png)"></div><!--BLC~-->
        <!-- Bottom Right Corner (brc.png) is 5x5 -->
        <!--~BRC--><div class="KEBC" style="left:195px; top:95px; background:url(brc.png)"></div><!--BRC~-->
        
        <!-- -- Next, do the top, sides, and bottom. You must specify width for horizontal borders and height for vertical borders -- -->
        <!-- Top Side (t.png) is 1x5 repeatable, width of container - 10, left = 5, top = 0 -->
        <!--~T--><div class="KEBHS" style="left:5px; top:0px; width:190; background:url(t.png);"></div><!--TLC~-->
        <!-- Right Side (r.png) is 1x5 repeatable, height of container - 10, top = 5 -->
        <!--~R--><div class="KEBVS" style="left:195px; top:5px; height:90; background:url(r.png);"></div><!--BRC~-->
        <!-- Bottom Side (b.png) is 1x5 repeatable, width of container - 10, left = 5 -->
        <!--~B--><div class="KEBHS" style="left:5px; top:95px; width:190; background:url(b.png);"></div><!--BLC~-->
        <!-- Left Side (l.png) is 1x5 repeatable, height of container - 10, top += 5, left += 5 -->
        <!--~L--><div class="KEBVS" style="left:0px; top:5px; height:90; background:url(l.png);"></div><!--BRC~-->
        <!-- -- Next, do the horizontal split. You must specify width for the horizontal border -- -->
    </div><!--FC~-->
</body>
</html>

Hey, I'm buidling a series of webpages and I still don't know what the code is to stop right clicking. Even better, I'd like the person to be redirected to a particular page . Any clues on how to do this?

Hi there, I'm trying to get the pictures he http://profiles.no-nick.com/example/
To look more like this: http://profiles.no-nick.com/pictures/female/

How can I get the gap out from between them?

even though I used clearInterval, it still move forever? why?
How can I stop it?
Code:

var count = 10;
function run() 
   {
        x = window.setInterval("MoveRight()",10);
   }

   function MoveRight()
   {
      count += 5;
      document.getElementById("p2").style.left = count;
<!--p2 is a index of a pragraph-->
      if (document.getElementById("p2").style.left == 400) {
       clearInterval(x);
     }
   }

Thanks!

Is there anyway to stop the page 'jumping to the top' when using a link like the below?

<a href="#">karthi</a>

.. I just want it to stay in the same position on the page & not jump to the top of the page every time a link like that is clicked.

I am trying to use Javascript to stop a web page processing a search when the user hits a cancel button. In Netscape, window.stop() seems to work (in the same way as the Stop button on the browser I guess). However, this does not work in IE. Is there any other method that can be used to get the same result?