CSS - Ie Table Not Extending 100%?

I have a div that has a table inside of it. Even though the table expands with content added, the div does not.

It's important to me that the div extend with the table because this div in question has a background shadow border for the table.

Here is the CSS:

Code:

#right {
  float: right;
  width: 80%;
  height: 100%;
}

#rt_brdr {
 height: 100%;
 width: 100%;
 padding-bottom:5px;
 padding-right: 10px;
 margin-bottom: 5px;
 vertical-align: bottom;
 background: url(img/r_brdr.gif) repeat-y right;
}

My HTML:

Code:

<div id="right">
   <div id="rt_brdr">
    <table border="0" align="left" width="100%" style="height: 93%; margin-top: 2px;"  cellpadding="0" cellspacing="0">
       <tr>
         <td class="top" style="background: url(img/w_tl.jpg) no-repeat top left #FFFFFF;"></td>
         <td class="white_fill"></td>
         <td class="top" style="background: url(img/w_tr.jpg) no-repeat top right #FFFFFF;"></td>
       </tr>
       <tr class="white_fill">
         <td></td>
         <td></td>
         <td></td>
       </tr>
       <tr>
         <td class="bottom" style="background: url(img/w_bl.jpg) no-repeat bottom left #FFFFFF;"></td>
         <td class="white_fill"></td>
         <td class="bottom" style="background: url(img/w_br.jpg) no-repeat bottom right #FFFFFF;"></td>
      </tr>
    </table>
  </div>
  </div>

I have attached a screenshot. Note that I took the content out of the table in the post so that the code doesn't extend forever. I have put a black border around the right border to make it stand out in the screenshot.

hi, i have the following css

Code:

#content { width:1000px; text-align:center; height:100%; border:2px #000 solid; }

#mainbody { width:1000px; height:100%; display:run-in; border:#03F 1px solid; }

and my xhtml looks like

Code:

<div id="content">
 <div id="mainbody">
</div>
</div>

basically what i want to do is to have full available page height covered by content div so that i can stick a footer div at the end of it. so that regardless of the height of the contents covering the mainbody-div my footer always sticks to the bottom of the page.

now even before i add footer, the problem is that mainbody is going 50px outside the content div at the bottom making the page to scroll. should it not take the available height within the content-div because it is nested within content div?

thanks

At first this was slightly amusing. The border in the lower middle column dubbed "News" extended underneath the other divs to the top in Firefox.

See he
www.djoj.net/test/indexwierd.html
Css: (Look at the way bottom of the CSS. The last 3 styles)
www.djoj.net/test/styles2.css

So I changed my div's to span's and wrapped them in one div labled "bottom" Now look...

www.djoj.net/test/index.html
Css: (once again, at the bottom)
www.djoj.net/test/styles.css

How can I fix this? It's a problem in both browsers. I don't want to use tables, I'd rather stick to CSS positioning.

Thank you in advance!

~B

I guess let me start with centering. I have
Code:

body {
	margin: 1%;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	line-height: 1.75em;
	background-color: #6E4E1C;
  	text-align: center;
}
#wrapper {
	background-color: #343457;
	width: 775px;
	position:absolute;
	margin: 0px auto;
	text-align: left;

By everything I read, setting the body's text-align to center, and the wrapper's margins to auto should do the trick. When I copy other stylesheets, they work. But when I type it in, it doesn't? Mozilla puts content at the left, and IE6 puts the left border of the wrapper in the center of the page causing horizontal scroll.
(actual pages at http://lgs.lambrite.com/new.css and http://lgs.lambrite.com/test2.htm

2nd, if you visit the htm page above you see that my content div does not extend down to meet the footer. I have looked at the faux columns, but can't make that work and keep my blue border at the bottom, unless I add another wrapper div to hold the background, inside of the primary wrapper div. This seems not the best way to do this. Any suggestions?

Lastly, in Mozilla, the url background on my sublinks nicely meets the content background, but in IE, there is a nice empty blue space between them I understand that this probably has to do with the box model issues, but have no idea how to fix it.

I'd also welcome any criticism on my stylesheet (aside from the fact that it is not in short-hand - I am not familiar enough yet).

You guys are great for newcomers - I know I really appreciate the help!

Sarah

I am quite new to css and have stumbled my way through making a page. My issue is the footer. My footer contains a background image that repeats across the page. In order to make the footer stick to the bottom I have placed it in a container. My issue is, when the page is minimized and you scroll over the right of the page, the menu that is on the bottom is on the right but the background image does not extend behind it.

Code:

/*---------------------------------------------
    Footer Area Starts here
----------------------------------------------*/
#FooterBody{
            background: #6f1e1a url(http://www.cleverchickcreations.com/images/footer.png) repeat-x;
			height:232px;
			width:100%;
			border:1px solid;
			color:#f2f1df;
			
			             
			}
#FooterContainer{
            
			      width: 936px; margin: 0 auto; padding: 0; text-align: left; 
				 
             
			}
			/*------------------------------------------------footer--------------------*/



#footer{
	width:100%;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding: 0px;
	float: left;
	height: 232px;
	background-image: url(http://www.cleverchickcreations.com/images/footer.png);
	background-repeat: repeat-x;
        position: relative;
}



#btmmenu_area{
	width:1100px;
	height:120px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	font-family: Tahoma;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #dcd66e;
	text-decoration: none;
	padding: 0px;
	float: none;
}



.navcolumn {
	float: left;
	width: 300px;
	height: 120px;
	margin-left: 10px;
        padding-left: 20px;
        padding-right: 20px;
}


.row1 {
	float: left;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
	width: 140px;
	text-align: left;
	margin-top: 10px;
	padding-left: 10px;
	line-height: 140%;
}
.row1 a:link, .row1 a:visited, .row1 a:active {
	float: left;
	color: #301010;
	text-decoration: none;
}
.row1 a:hover{
	color: #6d5f52;
	text-decoration: none;
}
.row2 {
float: left;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
	width: 130px;
	text-align: left;
	margin-top: 10px;
	padding-left: 20px;
	line-height: 140%;
}
.row2 a:link, .row2 a:visited, .row2 a:active {
	float: left;
	color: #301010;
	text-decoration: none;
}
.row2 a:hover {
	color: #6d5f52;
	text-decoration: none;
}
.row3 {
float: left;
font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
	width: 130px;
	text-align: left;
	margin-top: 10px;
	padding-left: 20px;
	line-height: 140%;
}
.row3 a:link, .row3 a:visited, .row3 a:active {
	float: left;
	color: #301010;
	text-decoration: none;
}
 .row3 a:hover {
	color: #6d5f52;
	text-decoration: none;
}


.foot-headers {
        font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #ef5f9b;
	line-height: 140%;
}


.footer_links {
	font-family: Arial;
	font-size: 11px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	margin: 0px;
	float: left;
	height: 20px;
	width: 100%;
	color: #333333;
	padding-top: 35px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}



.footer_copyrights {
	font-family: Arial;
	font-size: 10px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	margin: 0px;
	float: left;
	height: 20px;
	width: 100%;
	color: #c2c093;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}



/*------------------------------------------------validation --------------------*/


#validation_area {
	width:100px;
	height:34px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	font-family: Tahoma;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #dcd66e;
	text-decoration: none;
	padding: 0px;
	float: none;
}


.validation {
	font-family: Arial;
	font-size: 9px;
	font-weight: normal;
	text-transform: uppercase;
	color: #FFFFFF;
	text-decoration: none;
	background-image: url(http://www.cleverchickcreations.com/images/validation.png);
	background-repeat: no-repeat;
	float: right;
	height: 16px;
	width: 44px;
	padding-top: 3px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 5px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.validation:hover {
	font-family: Arial;
	font-size: 9px;
	font-weight: normal;
	text-transform: uppercase;
	color: #FFFFFF;
	text-decoration: none;
	background-image: url(http://www.cleverchickcreations.com/images/validation-0.png);
	background-repeat: no-repeat;
	float: right;
	height: 16px;
	width: 44px;
	padding-top: 3px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 5px;
	margin-bottom: 0px;
	margin-left: 0px;
}

It's hard for me to explain this so bear with me.

This is the page in question.

The right side is my float. If it is longer than the left side, then it continues, but the white background does not. I've tried doing height: 100% and so forth and can't get it to stretch.

I've tried reversing the float assigning it to the left side and it appears fine in Net/Moz, but IE won't run it right.


I don't really want to use float but I can't find another way to do it. I'm redoing the site from tables to CSS to make it cleaner. Floating has always been a problem but I've found ways to deal with it. Now, I'm realizing how finicky it is on different browsers.

Any suggestions or alternatives to float? The heights of both sides may change at any point so I don't really want to use any position elements. Will I have to?

Thanks in advance.

Tim

I have a site that is using the suckerfish style dropdown sorta...

On a previous version I had the li dropdown block entirely clickable, so a user could click in any part of the 160px block, but on a current site using the same navigation just dropped in you can only click on the word and nothing happens for the rest of the 'box'.. It works fine in Firefox but not IE, if there is an image aligned to the right of the link it extends the clickable region...

Any help would be appreciated.

Here is the CSS for that section:
Code:

 /*******************************/
	/*   BEGIN: Drop-Down Styles   */
	/*******************************/
	
	#navigation, #navigation ul {
		position:absolute;
		padding: 0;
		margin: 0;
		list-style: none;
		line-height: 20px;
		font-size: 11px;
		font-family: Arial, Helvetica, sans-serif;
		z-index: 10;
		font-weight: bold;
	}
	#navigation li.main {
		text-align: center;
		}
	
	#navigation ul {
		margin: 0 0 0 -1px;
	}
	
	#navigation a {
		display: block;
		background-color: transparent;
		color: #F1F1F1;
		text-decoration: none;
		padding: 2px 4px 2px 6px;
		z-index: 10;
	}
	
	#navigation li {
		float: left;
		width: auto;
		border: solid 1px #0f2344;
		border-right: none;
		background-color: #0f2344;
		color: white;
		z-index: 10;
	}
	
	#navigation li li {
		border-right: solid 1px black;
		border-bottom: none;
		width: 160px;
	}
	
	#navigation li.last {
		border-right: solid 1px black;
		border-bottom: solid 1px black;
	}
	#navigation li.hr {
		border-right: solid 1px black;
		border-bottom: solid 1px black;
		
	}
	
	#navigation li ul {
		position: absolute;
		width: 160px;
		display: none;
	}
	
	#navigation ul ul {
		margin: -20px 0 0 160px;
	}
	
	#navigation li:hover ul ul, #navigation li.over ul ul, #navigation li.over ul ul, #navigation li.over ul ul ul {
		display: none;
	}
	
	#navigation li:hover ul, #navigation li li:hover ul, #navigation li.over ul, #navigation li li.over ul, #navigation li li li.over ul  {
		display: block;
	}
	
	#navigation li:hover, #navigation li.over {
		color: black;
		background-color: #467BB4;
		cursor: pointer;
	}
			
	#navigation li:hover>a { /* IE/Win ignores this declaraion */
		color: black;
		background-color: #467BB4;
	}

And a segment of the HTML I'm using.

Code:

<ul id="navigation">
			<li><a href="http://links.com">Home <img src="http://links.com/comm_demo3/img/dn_arrow.gif" alt="" border="0"></a>
			  <ul>
			    <li><a href="http://links.com/comm_demo3/pages/news/news.asp">Newsroom</a>
				<li><a href="http://links.com/comm_demo3/pages/news/archives/archives.asp">Newsletter Archives</a>
				<li class="last"><a href="http://links.com/dashboard/corporat.htm">Dashboard</a>
				</li>
		      </ul>
			</li>

I have an issue where I have created a template for an organization and the horizontal drop menu can contain about 9 elements.

It has tiered drop downs which extend off the end of the page to the right.

Is there a way to make them flip left ONLY if they are at the end of the page?

I did do some javascript that takes the last element and gives it a class that can make it flip, as in the image. But if there are only 3 menu items that would look a bit goofy.

Anyone else encounter this issue and how did they resolve it?

In IE-only.com Firefox is extending the bottom border of my blogTitle divs the lenth of the page. The other browsers are fine with the code. Tested on FC4, and IE was tested on XP Home. All are the latest versions (Fx:1.5, Konqi:3.x, Opera: 8.5, IE: 6.x).

Why would Firefox do this? How can I correct this? Thank you.

I'm in the midst of redeveloping my site's look and feel using CSS. I'm having a moderate amount of luck so far, but I've run into a problem.

I'm testing using Firefox 1.0 PR, but I've seen this behaviors in other Mozilla-based browsers.

Example 1:
URL.

As you will probably see, the white background only extends to the bottom of the one DIV. The only way I was able to get the white background to extend to the bottom of the two DIVs was to use an image in one of the container DIVs.

Example 2:
URL.

Of course, then the problem is still that it doesn't extend all the way to the bottom of the browser unless it's filled entirely with content.

The effect I'm looking for is something like this: URL.

My CSS is here
URL.

First, if anyone can help me figure out how to get the background to extend evenly, without an image, that would be great. If there's a way to make the page always extend to the bottom of the browser, I'd love to hear about that, too.

Thanks in advance for any help you can offer.

I have a navigation bar I've created that always extends the vertical borders past it's span tag. Could someone please look at let me know if there's something weird with my css?

Is there some kind of work around for FF for this? In IE it works just fine. I have attached a screenshot for reference of what I'm talking about.

CSS -- headertable, headercell, and nav are the ones directly relating to the bar. I put them in for proper context.
Code:

.logo {
  border: 0px;
  display: inline;
}
#header {
  height: 92px;
  width:188px;
  background: url(/theme/Green/logo.jpg) no-repeat;
}
.banner {
  border: 0px;
  margin: 0px;
  padding 20px 5px 5px 5px;
  float: right;
}
.headertable {
  width: 770px;
  padding: 0px;
  margin: 0;
  height: 133px;
}
.headercell {
  height: 35px;
  vertical-align: top;
}

#nav{
  padding: 5px 0;
  float: right;
}
#nav  a,#nav  a:visited {
  background: url(/theme/Green/bgnavbutton.gif) repeat-x;
  padding: 9px 9px;
  margin: 0;
  color: #fff;
  font: bold 14px/22px arial,sans-serif;
  text-decoration: none;
}

HTML

Code:

<table class="headertable">
          <tr><td valign="top"><div class="banner"><?=proam_loc(9)?></div><div id="header"><h3><a href="/"><span>TDS</span></a></h3></div></td></tr>
          <tr>
            <td class="headercell">
              <span id="nav"><a href="/index.php" id="home" title="TDS Home">Home</a><a href="http://www.tdstelecom.com/redir.asp?keyword=HOME" id="shop" title="Shop TDS">Shop TDS</a><a href="https://secure.tds.net/" id="mya" title="Manage Your Account" target="_blank">Manage Account</a><a href="http://tdsmail.tds.net/" id="jobs" title="Jobs @ TDS" target="_blank">TDS Mail</a><a href="http://tdstelecomhelp.tds.net/" id="help" title="Help / FAQ" target="_blank">Help / FAQ</a><a href="http://www.tdstelecom.com/hr/job_opps.asp" id="jobs" title="Jobs @ TDS" target="_blank">Jobs @ TDS</a></span>
            </td>
         </tr>
       </table> <!-- End Header Table -->

I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule:
Code:

 .textarea-box {
	color: #990000;
	background-color: #fff;
	width: 375px;
	height: 200px;
	border: #000 solid 1px;
	} 

...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule?
Thanks for help with this.
j9

I have a textarea in a <td>which asks for users for some description.

If users enter text and don't use any space or enter, the
width of the table gets bigger and bigger and damages the pages
design.


What can I add (to td.fixed_width css for example )to make the line
break after the width of the table is reached???


There is a solution that I put a div in td and then
Code:

#desc {
	width:"100%";
	width::fixed;
	overflow:scroll;}

but it is not exactly what I want

hi every one...

How can I display static headers in a table, so that headers remain visible while user scrolls the table body?

This is not working in IE 7 any working example please

2.
iam having a column which holds data around some 100 to 200 characters...
by default i want to display some 50 characters and rest of the characters can be viewed by moving the column...

if this is possible let me know how to do it with some sample code......i dont know much about CSS

3. One more problem iam facing is with the number of columns displayed in the table.

I have to display around 15 to 20 columns in a table...
with this 15 to 20 columns in a table, i can see scrollbar to the page ....but i dont want scrollbar to the page, instead i want want scroll bar to the table (so that it doesnot effect the design of the page)

I need a fixed table width and height and also fixed column width and height.....
Note: I dont mind if columns are not visible (thru scrool bar i should see the hide columns)