Table Cell Stretching Strangely?

Warptweet · July 16, 2007

I need help on this, take a look...

www.warptweet.com/developzone

Thats an in-construction website design I'm making.

You'll notice that for the cell that has "navigation bar goes here navigation bar goes here" as text inside for some reason pushes itself to the left side, leaving about 40 pixels of space to the right side of the cell. How can I prevent the table cell from making so much space? Is there a way to force the table cell to be a certain size, and allow the text to cover the entire thing?

Daniel0 · July 17, 2007

I don't see any problems (FF 2.0.0.4). Besides, you shouldn't use tables for that.

soycharliente · July 17, 2007

Make the cell width 100%.

Warptweet · July 18, 2007

Thanks for trying to help out, I'll try it out now.

Also, tables are an easy way to keep the text in order, and to keep the layout of my simple website design in order. This is a very simple website, the reason why it isn't advanced is because I'm being very careful on making it 100% HTML and CSS valid from w3.org

Daniel0 · July 18, 2007

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home - Warptweet.com</title>
<link rel='stylesheet' href='style.css' type='text/css' />
<!--[if IE]>
<link rel='stylesheet' href='iefix.css' type='text/css' />
<![endif]-->
</head>
<body>

<div id='container'>
<div id='header'>
	<h1>Home - Warptweet.com</h1>
</div>

<div id='nav-top'>
	<ul>
		<li><a href='#'>Home</a></li>
		<li><a href='#'>Flash Portal</a></li>
		<li><a href='#'>Contact Us</a></li>
		<li><a href='#'>Submit Content</a></li>
	</ul>
</div>

<div id='content'>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus quis eros.
	Maecenas ultrices commodo erat. Morbi lacus. Vestibulum nonummy fringilla sem.
	Pellentesque eu leo. Donec erat erat, hendrerit eu, condimentum a, porta id,
	mauris. Pellentesque a quam in mauris commodo aliquam. Proin eget nisi. Fusce
	ut nibh malesuada felis scelerisque pretium. Aenean semper consequat ligula.
	Nunc molestie, justo et lacinia ornare, dolor tortor facilisis arcu, sit amet
	euismod turpis tortor ac dolor. Nulla pulvinar leo ac sem. Sed vulputate neque.</p>

	<p>In a lacus. Nullam mollis libero quis ligula. Cras eget massa eget orci
	sodales faucibus. Vivamus pellentesque, erat eget ornare pulvinar, arcu lacus
	ultricies eros, in mollis urna erat vitae est. Fusce pretium dictum justo. Praesent
	ante est, consequat placerat, sodales id, cursus a, nisi. Praesent eget ante a
	ante bibendum congue. Proin et dolor eget dui lacinia sodales. Duis egestas laoreet 
	dui. Praesent dictum dui at lorem. Nulla lacus metus, volutpat eget, pharetra eu,
	eleifend fringilla, mauris. Duis augue nisi, vestibulum quis, mollis quis, lacinia
	eget, eros. Nullam eget dolor. Proin nec ante a dui viverra hendrerit. Vivamus
	viverra massa nec lorem. Vivamus quam. Aliquam erat volutpat. Nam nec quam. Vivamus
	sapien neque, convallis eget, tincidunt eget, imperdiet ut, risus. In sapien tortor,
	aliquam in, consequat sit amet, tincidunt ac, arcu.</p>
</div>

<div id='right'>
	<ul>
		<li><a href='#'>Link 1</a></li>
		<li><a href='#'>Link 2</a></li>
		<li><a href='#'>Link 3</a></li>
		<li><a href='#'>Link 4</a></li>
	</ul>
</div>
</div>

</body>
</html>

style.css:

* {
margin: 0;
padding: 0;
}

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 95%;
background: #F1F1F1;
}

#container {
margin: 10px auto;
width: 687px;
}

/* HEADER */
#header {
height: 97px;
background: url(http://www.warptweet.com/developzone/images/fpheader.jpg);
}

#header h1 {
text-indent: -2000px;
}

/* TOP NAVIGATION */
#nav-top {
padding: 3px;
}

#nav-top li {
display: inline;
margin-left: 15px;
}

#nav-top li a:link,
#nav-top li a:visited {
color: black;
font-size: 120%;
text-decoration: none;
}

/* RIGHT NAVIGATION */
#right {
background: #B2D95E;
padding: 10px;
min-height: 600px;
}

#right li {
display: block;
text-indent: 10px;
}

/* CONTENT */
#content {
background-color: #ffffff;
padding: 10px;
width: 75%;
min-height: 600px;
float: left;
}

#content p {
margin-bottom: 15px;
}

iefix.css:

#right, #content {
height: expression(this.scrollHeight > 600 ? "auto" : "600px");
}

#right li {
text-indent: 0;
}

index.html is valid XHTML 1.0 Strict and style.css is valid CSS. iefix.css does not validate because expression is something IE specific and is therefore not in the specification.

It is tested in FF 2.0.0.4, Opera 9.21 and IE 7.

[attachment deleted by admin]

Warptweet · July 18, 2007

Sorry, but none of your peoples suggestions worked.

Any other ideas?

Daniel0 · July 18, 2007

How doesn't it work? Telling us that it doesn't work doesn't help us particularly much. Post a screenshot of the page "not working".

It [the code I posted] works for me in four browsers: FF, IE, Opera and Safari.

Firefox 2.0.0.5

Opera 9.21

Internet Explorer 7

Safari 3.0.2

Daniel0 · July 18, 2007

Hmm... I wrote the above code based on how I saw your page in FF, but apparently it didn't show the top navigation bar correctly (at least not like other browsers did). Fortunately it's just a matter of changing the background color for #nav-top in the CSS.

style.css with fix for above-mentioned problem:

* {
margin: 0;
padding: 0;
}

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 95%;
background: #F1F1F1;
}

#container {
margin: 10px auto;
width: 687px;
}

/* HEADER */
#header {
height: 97px;
background: url(http://www.warptweet.com/developzone/images/fpheader.jpg);
}

#header h1 {
text-indent: -2000px;
}

/* TOP NAVIGATION */
#nav-top {
padding: 3px;
background: #6CAF2F; /* this line added */
}

#nav-top li {
display: inline;
margin-left: 15px;
}

#nav-top li a:link,
#nav-top li a:visited {
color: black;
font-size: 120%;
text-decoration: none;
}

/* RIGHT NAVIGATION */
#right {
background: #B2D95E;
padding: 10px;
min-height: 600px;
}

#right li {
display: block;
text-indent: 10px;
}

/* CONTENT */
#content {
background-color: #ffffff;
padding: 10px;
width: 75%;
min-height: 600px;
float: left;
}

#content p {
margin-bottom: 15px;
}

It should now look like this:

Warptweet · July 21, 2007

I tried your method, and the content part works, but the side bar isn't fixed yet.

I circled the part of the website that seems to be the problem. Apparently, the words in the navigation column aren't filling the entire cell, it's as if there is an invisible barrier blocking the words from appearing any further than about 50 pixels of width.

Warptweet · July 21, 2007

I'd like to point out another thing I noticed.

After switching to your own CSS code, I noticed that the navigation bar constantly changed it's width by stretching itself accordingly to the text in the content box, how can I force the navigation bar to be a specific 125 pixels wide?

Warptweet · July 25, 2007

Bump =)

I still need help. I'm dying with my websites table cells stretching it's width to different sized. I told it to be a certain amount of pixels, and it just does whatever it feels like.

Warptweet · August 11, 2007

Okay, I got my stretching problem solved after about another 15 tries of editing.

Now I have a different problem.

http://www.warptweet.com/developzone

As you can see, the content bar and the right navigation bar with the links are different heights. I know a working solution for this, but uses an IE only function, and I'm making this website design 100% w3 html and css valid therefore, I forbid myself to use it.

Does anyone know an html+css valid way of making both the content+right navigation bar heights meet together?

wildteen88 · August 11, 2007

You could use faux-columns. Basically you'll create an image (1px high by however wide your site is) of what your columns looks like. You'll apply the image as a background for the container div and repeat it vertically (repeat-y). That way you'll get the effect the columns are equal heights even though they're not. This technique should be cross browser compatible.

Warptweet · August 11, 2007

I'll try to understand what your saying ???

If anyone else has a more surefire way instead of using images, I'd really appreciate it.

BTW I heard using that image technique can be dangerous. If it loads wrongly, then a large X image appears and can repeat itself over and over again, screwing up the entire layout.

wildteen88 · August 11, 2007

This is what I mean by fux columns. Its is not a large image.

Alternatively doing a quick google search I found this site. Choose a site layout from there and see how it looks in different browsers. The one you like most apply your design to it.

Warptweet · August 11, 2007

I'm somewhat understanding it.

I looked at that website where it gives live examples and downloads of the exact same template as my css layout is. Although, mine is quite different because somebody helped me make my CSS layout, and I have absolutely no clue where to implement what into my css! :'(

Would you mind taking a moment to implement the proper thing to do this "faux column" trick? I'm really confused. Thanks for trying though.

Location for 1x1 image: images/fpfaux.gif

MY CSS: (style.css)

* {
margin: 0;
padding: 0;
}


body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 95%;
background: #F1F1F1;
}


#container {
margin: 10px auto;
width: 747px;
}


#header {
height: 97px;
background: url(http://www.warptweet.com/developzone/images/fpheader.jpg);
}


#faux {
margin-bottom: 10px;
overflow: auto;
width: 100%
}


#header h1 {
text-indent: -2000px;
}


/* TOP NAVIGATION */
#nav-top {
padding: 3px;
background: #6CAF2F;
}


#nav-top li {
display: inline;
margin-left: 15px;
}


#nav-top li a:link,
#nav-top li a:visited {
color: black;
font-size: 120%;
text-decoration: none;
}


/* RIGHT NAVIGATION */
#right {
background: #B2D95E;
padding: 10px;
min-width: 125px;
}


#right li {
display: block;
text-indent: 10px;
}


/* CONTENT */
#content {
background-color: #ffffff;
padding: 10px;
width: 75%;
min-height: 600px;
float: left;
}


#content p {
margin-bottom: 15px;
}


A:link {
text-decoration: none; color: black;
}
A:visited {
text-decoration: none; color: black;
}
A:active {
text-decoration: none; color: black;
}
A:hover {
text-decoration: underline; color: black;
}

Sign In

Table Cell Stretching Strangely?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information