CSS - Scrollable Div Inside Table

Hi,

This is clearly a noob question but i'm just starting to figure out CSS as a better way to navigate & layout my page.


I have nested a table inside a div to get a two column effect within the main content area. In Opera, Firefox, IE 5x for mac it works fine and the table stays within the middle section. On IE for PC it runs over the right hand side of the middle section and lays under the right hand menu.

I imagine there is a way to get two column layout ysing just DIVS. . .

I use my site for school, I'm a high school teacher & I teach some university coursework.

My site is set up with three main divs: (heavily borrowed from Eric Meyer's CSS book.)

sitenav : left hand nav_bar (for site-wide)
entry : min content
sidebar: Right hand sub_nav_bar (within this area)

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

div#sitenav {position: absolute; top: 2.33em; left: 0; width: 12.5%;
font-size: 11px; background-color: white;
border: 1px solid red; z-index: 10;}
div#entry { color: #660; margin: 0 20% 1em; padding: 0 }
div#sidebar {position: absolute; top: 4em; right: 0; width: 20%;
font-size: 11px; z-index: 11;}

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

http://www.mrplatts.com/pitt_tech/schedule.html


any help?

Thanks, Rich

I am using a Body{...} style on my page (background set to black #000000) and DIV's inside Tables inside DIV's and when I set up and use a .14 (14px size and white color font syle class) my text stays black! The only thing that works is "inline styles". Not good for site wide-control. There is obviously a conflict here or something is superceding my classes. I prefer to use CSS for font control. I am using div's because of a "jquery slider" and tables because I usually design the look in photoshop and then use slices... not doing that on this site, but it's just what I'm used to. Thanks for any help.

single page site is here "petermarsphotography dot com"

Hello,

I'm brand new to this CSS business, so please be gentle!

I'm trying to place my AP Div objects inside a table so that their positions are relative to the edges of the table, rather than relative to the edges of the browser window.

I'm guessing I need to somehow put the code for the table around the code for the AP Div objects, but I can't work out how it's supposed to look. Any guidance would be much appreciated.

Thanks!

I want to know how I could possible control all the elements inside a table that is inside a div with an id. This is possible correct?

So if I have:

Code:

#header { width: 900px; }

And then something like this:

Code:

<div id="header">

<table>
<tr>
<td>

</td>
</tr>
</table>
</div>

I'd like to then have something like:

Code:

#header.table,td {padding-left: 10px;}

Which I am hoping would put a 10px padding on all the td's in the table and nothing else. Is my syntax right?

Code:

-- HTML

<div id="Dashboard">
<table id="Overview">
<tr>
<td>Cost <span>$10,710</span></td>
<td>Visits <span>51,907</span></td>
<td>Cost / Visit <span>$0.21</span></td>
<td>Conv. Rate <span>1.3%</span></td>
<td>Cost / Conv. <span>16.11</span></td>
<td>Conversions <span>655</span></td>
<td class="Detail">>></td>
</tr>
</table>
</div>

-- CSS

/*  Dashboard */

#Dashboard {
	border: 1px solid #b5bfbf;
	padding: 2px;
}

/* Overview Table */

#Overview {
	width: 100%;
	border-collapse: collapse;
	height: 50px;
	background-image: url(../images/dashboard/overviewtable_bg.png);
	background-repeat: repeat-x;
}

#Overview td {
	padding-top: 8px;
	padding-left: 5px;
	border: 1px solid #b5bfbf;
	margin: 0;
}
#Overview td.Detail {
	width: 45px;
}
#Overview span {
	font-size: 20px;
	font-weight: bold;
	display: block;
	margin-top: 2px;
}

so there is a DIV with a 2px padding on the inside.

But when I check it in firefox, it isn't a 2px space between the outside DIV border and the border of the table. it is more like 1px space on top and left, 2px on bottom and right.

I could put another div inside with a border to achieve that 2px spacing, but that just seems extraneous.

I am not sure what the issue is?

edit:

screenshot:

http://ricebox.whiteazn.com/tabpadding.png

is there a problem with placing div tags inside table cells.

I have a need to do this and it works fine on my FF3 and IE7 but i am told this is bad practice.

is there a problem and/or workaround to using div tags inside a table cell

Hi
I have a problem with tables and divs
consider this table and divs:
<TABLE>
<TR>
<TD>
<DIV STYLE='hieght:30px'>
text
</DIV>
<DIV STYLE='position:relative;top:-30px;height:30px'>
text
</DIV>
</TD>
</TR>
</TABLE>

if I don't put position:relative;top:-30px; inside the second div the height of table would be around 60px (you say) as expected but when I put position:relative;top:-30px;, I would expected to have my table shrinks to 30px not the same 60px because I put two divs on the top of each other.

Obviously for one reason or another my assumption isn't correct. So how do I amend the code to get a correct height of table?

Perhaps I can use tables in this way?

Is it ok to nest a div tag inside a table? It appears to work correctly.


Thanks!

Im trying to get an input field and form button to line up to the right of an <li> tagged menu and not sure of the approach i should take.

I'd prefer not to use a table if possible, and the table im using now is a bit buggy anyway.

this is a page with the menu as it shows right now....
http://www.seesawusa.com/products/

this is the page with the basic idea of what im trying to do
http://www.seesawusa.com/pages/74/

Things i'v tried
1. put the form inside a LI tag.... This results in putting the search box below the list of menu items across all my test browsers.

2. put the UL and the FORM inside a table with 2 cells...
in FF, i get the result i want... except the LI and INPUT field are not aligned to the right
in IE6 & 7 I get it lined up the way i want it. But the table pushes the the height and width of the containing div to an unacceptable level

I've seen this type of thing before and in my searching other sites i've only found complicated table based layouts that use it. Does anyone know an approach that would allow me to leave out tables, or at the very least only use one?

Thanks for the glance.

P.S. Interestingly enough, the page you are reading has a menu and text field configuration that im wanting to use, but it is very table oriented.

<div height = 100% doesn't work inside <table> but if i change height = 900px, it works. anyone know how to fix it?
see example code below. thx so much
<table border = 1>
<tr>
<td>
mesg
</td>
</tr>
<tr>
<td>
<div style='HEIGHT:100%; WIDTH:100%; OVERFLOW:auto'>
<table border=1 width=100%>
<tr><td>stuff</td>
<td>more stuff</td></tr>

<tr><td>stuff</td>
<td>msg

</div></td></tr>
</table>
</div>
</td></tr>
</table>

I'm trying to vertically align two divs inside a table cell. I have the cell's vertical-align property set to text-top because I want the first div to be aligned at the top of the td but I can't, no matter what I try, get the second div to align to the bottom.

Is there a better way to accomplish this without nesting tables or is this the right way and I'm just missing something?

HI all...

i have been loving my table layouts, but it seems that if i dont convert i will get left behind, so help a fellow out...

the problem is that i have a complex 3 col layout, and i need the divs to auto size to fill the whole div... code will explain it better i think

Code:

<div style="border:1px solid white;width:100%;height:600px;">

		<div style="border:0px solid blue;height:300px;float:left;">
			<div style="border:1px solid blue;width:100px;height:100px;"></div>
			<div style="border:1px solid red;width:100px;height:100%;"></div>
			<div style="border:1px solid yellow;width:100px;height:100px;"></div>
		</div>

		<div style="border:0px solid yellow;height:300px;float:left;">
			<div style="border:1px solid blue;width:100px;height:100px;"></div>
			<div style="border:1px solid red;width:100px;height:100%;"></div>
			<div style="border:1px solid yellow;width:100px;height:100px;"></div>
		</div>

		<div style="border:0px solid yellow;height:300px;float:left;">
			<div style="border:1px solid blue;width:100px;height:100px;"></div>
			<div style="border:1px solid red;width:100px;height:100%;"></div>
			<div style="border:1px solid yellow;width:100px;height:100px;"></div>
		</div>
		
</div>

the first div is the wrapper, the first is the left then the middle then the right...

but if the middle one changes height the rest are left at there default, and i just cant seem to locate the problem, i give it a day, then its back to tables.... this is not helping me like this CSS stuff

just a note the whole lot will be centered with a margin of 20-30px... so no fixed positions for the inner divs..

frank/

Hey
i got some cells in a table which hold links.
How can i make only the links inside these cells a different color?

This is the class i use on the table cells:
css Code:
Original - css Code .selectedContactRow{ background-color: white; color: black; }

  

  


 .selectedContactRow{


     background-color: white;


     color: black;


 } 

I only know how to change the link colors in general.
css Code:
Original - css Code a:link{color: red;} a:hover{color: red;} etc.

  

  


 a:link{color: red;}


 a:hover{color: red;}


 etc. 

thanks in advance.

Hiya, im trying to place a blog inside a table and also have a picture above the table and some links.

In Mac Firefox and Camino it works perfectly. but in IE or Safari it just doesn't want to work.

Please help

Thanks guys

http://www.kafadrian.com/juggernaut/index.html
is what i have so far
I want it to look like:
http://www.kafadrian.com/juggernaut/layout.jpg

The problem im having is that the image links that have mouseover effects dont align (touch) the blue bar below them and apparently in some browsers the image links themselves have gaps between them

I spent hours, and yes im relatively noobish about all this, trying all sorts of different display commands and border/margin commands to try and get rid of any spaces, the way the site is now (10.01.08) is the best i could get it. in IE7 the mouseover images connect horizontally but not vertically with other images.

am i going about this all wrong? my experience in building websites is mostly from the early eras of netscape when IE was new, back when you put stuff in a table a certain way with no cellpadding/spacing/border and everything aligned no problem.

I appreciate any help with this as I undertand it will take time to give me an answer that no only makes sense (to me) but will work.

the code for the site is:

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" />
<title>Juggernaut - Monolith - Order</title>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0">

<script type="text/javascript">
<!--

var image1 = new Image();
image1.src = "news1.jpg";
var image2 = new Image();
image2.src = "news2.jpg";
var image3 = new Image();
image3.src = "news3.jpg";

var image4 = new Image();
image4.src = "roster1.jpg";
var image5 = new Image();
image5.src = "roster2.jpg";
var image6 = new Image();
image6.src = "roster3.jpg";

var image7 = new Image();
image7.src = "forums1.jpg";
var image8 = new Image();
image8.src = "forums2.jpg";
var image9 = new Image();
image9.src = "forums3.jpg";

var image10 = new Image();
image10.src = "files1.jpg";
var image11 = new Image();
image11.src = "files2.jpg";
var image12 = new Image();
image12.src = "files3.jpg";

var image13 = new Image();
image13.src = "info1.jpg";
var image14 = new Image();
image14.src = "info2.jpg";
var image15 = new Image();
image15.src = "info3.jpg";

var image16 = new Image();
image16.src = "founded.jpg";

//-->
</script>
<script type="text/javascript">
<!--

function roll(img_name1, img_src1, img_name2, img_src2)
   {
   document[img_name1].src = img_src1;
   document[img_name2].src = img_src2;
   }

//-->
</script>
<table border="0" cellspacing="0" cellpadding="0" style="margin:0">
  <tr height="34">
    <td rowspan="4">
      <img style="display:block" src="juggernaut.jpg" width="560" height="110"/>
    </td>
    <td>
    </td>
  </tr>
  <tr>
    <td>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('news','news2.jpg','text','news3.jpg')" onmouseout="roll('news','news1.jpg','text','founded.jpg')">
        <img style="display:inline-block" src="news1.jpg" name="news" width="48" height="48" border="0"/>
      </a>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('roster','roster2.jpg','text','roster3.jpg')" onmouseout="roll('roster','roster1.jpg','text','founded.jpg')">
        <img style="display:inline-block" src="roster1.jpg" name="roster" width="48" height="48" border="0"/>
      </a>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('forums','forums2.jpg','text','forums3.jpg')" onmouseout="roll('forums','forums1.jpg','text','founded.jpg')">
        <img style="display:inline-block" src="forums1.jpg" name="forums" width="48" height="48" border="0"/>
      </a>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('files','files2.jpg','text','files3.jpg')" onmouseout="roll('files','files1.jpg', 'text','founded.jpg')">
        <img style="display:inline-block" src="files1.jpg" name="files" width="48" height="48" border="0"/>
      </a>
      <a href="index.html" style="display:inline-block"
        onmouseover="roll('info','info2.jpg','text','info3.jpg')" onmouseout="roll('info','info1.jpg','text','founded.jpg')">
        <img style="display:inline-block" src="info1.jpg" name="info" width="48" height="48" border="0"/>
      </a>
    </td>
  </tr>
    <tr>
    <td>
      <img style="display:block" src="line_right.jpg" width="240" height="4"/>
    </td>
  </tr>
  <tr>
    <td>
      <img style="display:block" src="founded.jpg" align="right" name="text" width="144" height="20"/>
    </td>
  </tr>
</table>
</body>
</html>