|
CSS - Layout Problem With Nested Table
So does anyone use div tags only and no tables at all? Not even for tabular data?
Similar TutorialsHello, I'm having an interesting dilemma. Hopefully I can get some advice. I have created a site using a 2 column liquid layout. The site is created using CSS. I have tested successfully in both FF & IE (which my client uses). In the content area, there is a data table that is generated dynamically. At times the table consists of many columns. If the table strecthes beyond the screen view (resulting in horizontal scrolling) the container/layout does not stretch with the table. Any thoughts? Any suggestions will be greatly appreciated! Below are snippets of code from the css code and html code: CSS Code:
body {
margin: 0px 20px 0px 20px;
background-color: #069;
background-image: url(../images/bkgd.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 70%;
color: #036;
}
#container {
width: 100%;
margin: 0px auto 0px auto;
background-color: #DDD;
}
...
#content {
background-color: #FFF;
padding: 20px;
margin-left: 190px;
}
...
#content_main table.data {
margin: 0px 0px 0px 0px;
border: 1px solid #369;
background-color: #FFF;
}
#content_main table a.nobrdr {
border-bottom: none;
}
#content_main table.data th {
height: 20px;
color: #E8E8E8;
text-align: center;
background-color: #369;
border: 1px solid #2C537D;
text-transform: uppercase;
}
#content_main table.data td {
height: 25px;
padding: 3px;
border: 1px solid #CCC;
vertical-align: top;
line-height: 15px;
}
HTML Code: <table width="100%" border="0" cellpadding="0" cellspacing="0" class="data" summary="this table displays BDXT selected data"> <tr> <th scope="col" width="5%" nowrap>fund</th> <th scope="col" width="6%" nowrap>bsli</th> <th scope="col" width="4%" nowrap>reg</th> <th scope="col">title</th> <th scope="col" width="9%" nowrap>projcode</th> <th scope="col" width="7%" nowrap>cip</th> <th scope="col" width="4%" nowrap>afc</th> <th scope="col" width="10%" nowrap>avail</th> <th width="10%" nowrap scope="col">oblig</th> <th width="10%" nowrap scope="col">oblig</th> <th width="10%" nowrap scope="col">oblig</th> <th width="10%" nowrap scope="col">oblig</th> <th scope="col" width="10%" nowrap>unoblig</th> <th scope="col" width="5%" nowrap> </th> </tr> <tr> <td scope="row" align="center" nowrap>682A</td> <td align="center" nowrap>1A01A1</td> <td align="center" nowrap>HQ</td> <td>NEXT GENERATION WEATHER RADAR (NEXRAD) </td> <td align="center" nowrap><a href="#">25570427</a></td> <td align="center" nowrap>W020200</td> <td align="center" nowrap>140</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000</td> <td align="center" nowrap><a href="#" class="nobrdr"><img src="images/icon_view.gif" alt="view detail" width="15" height="13" border="0"></a></td> </tr> <tr> <td scope="row" align="center" nowrap>682A</td> <td align="center" nowrap>1A01A1</td> <td align="center" nowrap>HQ</td> <td>NEXT GENERATION WEATHER RADAR (NEXRAD)</td> <td align="center" nowrap><a href="#">25570427</a></td> <td align="center" nowrap>W020200</td> <td align="center" nowrap>3J0</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000,000</td> <td align="center" nowrap><a href="#" class="nobrdr"><img src="images/icon_view.gif" alt="view detail" width="15" height="13" border="0"></a></td> </tr> <tr> <td scope="row" align="center" nowrap>682A</td> <td align="center" nowrap>1A01A1</td> <td align="center" nowrap>TC</td> <td>NEXT GENERATION WEATHER RADAR (NEXRAD)</td> <td align="center" nowrap><a href="#">25570427</a></td> <td align="center" nowrap>W020200</td> <td align="center" nowrap>4C0</td> <td align="right" nowrap>000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000,000</td> <td align="right" nowrap>000,000</td> <td align="center" nowrap><a href="#" class="nobrdr"><img src="images/icon_view.gif" alt="view detail" width="15" height="13" border="0"></a></td> </tr> </table> html: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(...)"> <html xmlns="(...)">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="stylesheet,css" />
<title>Test page.</title>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<div id="main">
<!--- <object type="application/x-shockwave-flash" data="../Graphics/Site/site-banner-top,swf" width="800" height="300"> </object> !-->
<div id="maintop" ></div>
<div id="mainbody">
<div id="testleft">
<div id="leftpaneltop"></div>
<div id="leftpanelbody"><p> test</p> </div>
<div id="leftpanelbottom"></div>
</div>
<div id="test_right">
<div id="rightpaneltop"> </div>
<div id="rightpanelbody"> test</div>
<div id="rightpanelbottom"></div>
</div>
</div>
<div id="mainbottom"></div>
</div>
<script type="text/javascript"> <!-- swfobject.registerObject("FlashID"); //--> </script>
</body>
</html>
css: Code:
@charset "utf-8"; /* CSS Document */
body{
background-color:#569753;
padding:0px;
width:800px;
margin-top:0px;
margin-left:10%;
}
#main{
background-image:url(../Graphics/Site/body-bg,png);
background-repeat:repeat-y;
width:800px;
position: relative;
padding:0px;
}
#maintop{
background-image:url(../Graphics/Site/body-top,png);
width:800px;
height:50px;
position:relative;
margin-top:0px;
}
#mainbody{
background-image:url(../Graphics/Site/body-bg,png);
background-repeat:repeat-y;
position:relative;
width:800px;
margin-top:50px;
}
#mainbottom{
background-image:url(../Graphics/Site/body-bottom,png);
position:relative;
width:800px;
height:50px;
padding:0px;
}
#leftpaneltop{
background-image:url(../Graphics/Site/panel_left_top,png);
background-repeat:repeat-x;
background-color:#99cc99;
position:relative;
width:200px;
height:25px;
}
#leftpanelbottom{
text-align:left;
background-image:url(../Graphics/Site/panel_left_bottom,png);
width:200px;
height:21px;
padding:0;
position:relative;
}
leftpanelbody{
font:Verdana, Geneva, sans-serif;
width:200px;
text-align:left;
text-shadow:#000;
color:#FFF;
margin-top:auto;
position:relative;
}
#testleft{
background-color:#569753;
position:relative;
padding:0;
margin-left:10px;
width:200px;
height:inherit;
}
#test_right{
position:relative;
padding:0px;
margin-left:30%;
margin-top:-200px;
background:#000;
width:508px;
}
#rightpaneltop{
background-image:url(../Graphics/Site/right_panel_top,png);
background-color:#000;
width:508px;
height:37px;
margin-top:0px;
position:relative;
}
#rightpanelbody{
background-image:url(../Graphics/Site/right_panel_middle.png);
width:508px;
position:relative;
}
#rightpanelbottom{
background-image:url(../Graphics/Site/right_panel_bottom,png);
position:relative;
width:508px;
height:25px;
}
p{
font:Verdana, Geneva, sans-serif;
font-size:12px;
font-style:normal;
color:#FFF;
}
Hope the above scripts can be viewed easily. I just started using css, and for some reason I can't get this simple template to function in Mozilla Firefox. I don't know how nested divs behave, but it's really frustrating. The problem is that i have two main divs within one encompassing div. The encompassing div is supposed to expand in height based upon the height and/or position of the nested two divs, but it only expands based one of these nested divs. These nested divs have divs inside them too. This only happened in mozilla firefox. In IE it works. I'm not using floats or anything. I don't have it up on a site, but if necessary I'll post a pic of the rendering. Thanks in advance. I am Having a problem with IE6 and DIV's which use blocks to highlight links. The problem is I want to have different colour links. It seems to work OK in FF but not IE 6. Code:
.mainmenu a:link { color: #fff; font-size: 11px; font-weight: 600; text-decoration: none; background-color: #a62a2a; background-position: 180px 0; text-align: left; text-indent: 3px; vertical-align: middle; width: 180px; height: 24px; border-bottom: 1px solid #e8aaaa; display: block; }
.mainmenu a:visited { color: #fff; font-size: 11px; font-weight: 600; background-color: #a62a2a; background-position: 180px 0; text-decoration: none; text-align: left; text-indent: 3px; vertical-align: middle; width: 180px; height: 24px; border-bottom: 1px solid #e8aaaa; display: block; }
.mainmenu a:active { color: #fff; font-size: 11px; font-weight: 600; background-color: #a62a2a; background-position: 180px 0; text-decoration: none; text-align: left; text-indent: 3px; vertical-align: middle; width: 180px; height: 24px; border-bottom: 1px solid #e8aaaa; display: block; }
.mainmenu a:hover { color: #ac4545; font-size: 11px; font-weight: 600; background-color: #f7d4d4; text-decoration: none; text-align: left; text-indent: 3px; vertical-align: middle; width: 180px; height: 24px; display: block; }
.submenu a:link { color: #a62a2a; font-size: 11px; font-weight: 600; text-decoration: none; background-color: #ebebeb; background-position: 180px 0; text-align: left; text-indent: 8px; display: block; width: 180px; height: 24px; vertical-align: middle; border-bottom-color: #a62a2a; border-bottom-width: 1px;x; }
.submenu a:visted { color: #a62a2a; font-size: 11px; font-weight: 600; text-decoration: none; background-color: #ebebeb; background-position: 180px 0; text-align: left; text-indent: 8px; display: block; width: 180px; height: 24px; vertical-align: middle; border-bottom: 1px solid #e8aaaa; }
.submenu a:active { color: #a62a2a; font-size: 11px; font-weight: 600; text-decoration: none; background-color: #ebebeb; background-position: 180px 0; text-align: left; text-indent: 8px; display: block; width: 180px; height: 24px; vertical-align: middle; border-bottom-width: 1px; border-bottom-color: #a62a2a; }
.submenu a:hover { color: #ac4545; font-size: 11px; font-weight: 600; text-decoration: none; background-color: #f7d4d4; text-align: left; text-indent: 8px; display: block; width: 180px; height: 24px; vertical-align: middle; }
.menutop { color: white; font-size: 12px; font-weight: 600; text-decoration: none; background-color: #cc5252; text-align: left; text-indent: 3px; display: block; width: 180px; height: 24px; vertical-align: middle; }
Code:
<table width="180" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" bgcolor="#f7d4d4">
<div id="mainmenu" class="mainmenu">
<div id="menutop" class="menutop">Menu</div> <a href="#">Products</a>
<a href="support.html">Support</a>
<div id="submenu" class="submenu"><a href="#">Customer Login</a></div>
<div id="submenu" class="submenu"><a href="#">Phi Login</a></div>
<a href="#">Services</a>
<a href="#">Shop</a>
<a href="#">Contact Us</a>
<a href="#">Call Comparison</a>
</div>
</td>
</tr>
</table>
Thanks for taking the time to read my question. I've been searching the web on how to fix this but haven't got anything yet. In IE, my nested div (class="BioContent") stays within the parent container (id="BioBox"), but does not in FF. Right now I am using width: 100%; I've tried defining the width in pixels, but if I get it to work in FF, then it isn't wide enough in IE. Any ideas? Thanks for your help, Brad HTML: Code: <!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">
<!-- Created on: 7/21/2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title></title>
<link href="Junk.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="WP.js"></script>
</head>
<body>
<div id="FaderBar">
<div id="FaderBarWP">Warren Persowich</div>
<div><img id="FaderBarImg" src="images/audience.jpg" alt=""></div>
<div id="FaderBarHC">Humor Consultant</div>
</div>
<!--<p/>-->
<div id="MainBox">
<div id="LeftBox">
<div id="BioBox">
<div id="Bio0" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[0],0)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[0],0)";>5 Star Rating on bit aired on CBC</div>
<div id="Bio1" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[1],1)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[1],1)";>Licenced Psychologist</div>
<div id="Bio2" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[2],2)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[2],2)";>National Television Debut - Fall of 2006</div>
<div id="Bio3" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[3],3)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[3],3)";>XM Satelite Bit</div>
<div id="Bio4" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[4],4)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[4],4)";>Instructor of Stand-Up Comedy</div>
<div id="Bio5" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[5],5)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[5],5)";>Manitoba Theatre For Young People</div>
<div id="Bio6" class="BioContent" onMouseOver="if (isMouseLeaveOrEnter(event, this)) ShowMediumText(MediumText[6],6)"; onMouseOut="if (isMouseLeaveOrEnter(event, this)) ShowSmallText(SmallText[6],6)";>Cancer Survivor</div>
</div>
<div id="BioFooter">Move cursor over text to read on...</div>
<div id="Broadcast">
<!-- begin embedded WindowsMedia file...-->
<OBJECT id='mediaPlayer' width="320" height="285"
classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95'
codebase='http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701'
standby='Loading Microsoft Windows Media Player components...' type='application/x-oleobject'>
<param name='fileName' value="http://servername/path/to/media.file">
<param name='animationatStart' value='true'>
<param name='transparentatStart' value='true'>
<param name='autoStart' value="true">
<param name='showControls' value="true">
<param name='loop' value="true">
<EMBED type='application/x-mplayer2'
pluginspage='http://microsoft.com/windows/mediaplayer/en/download/'
id='mediaPlayer' name='mediaPlayer' displaysize='4' autosize='-1'
bgcolor='darkblue' showcontrols="true" showtracker='-1'
showdisplay='0' showstatusbar='-1' videoborder3d='-1' width="320" height="285"
src="http://servername/path/to/media.file" autostart="true" designtimesp='5311' loop="true">
</EMBED>
</OBJECT>
<!--<a href="http://servername/path/to/media.file" style='font-size: 85%;' target='_blank'>Launch in external player</a>-->
</div>
</div>
<div id="CenterBox"><img class="HeadShot" src="ColourTest1.JPG" width="122" height="212" alt=""/></div>
<div id="RightBox"><ul>
<li class="LB1TOP"><a href="#">Seminars</a></li>
<li class="LB2"><a href="#">Stand-Up</a></li>
<li class="LB3"><a href="#">Intro Psych</a></li>
<li class="LB4"><a href="#">Selected Transcripts</a></li>
<li class="LB3"><a href="#">Broadcast Archives</a></li>
<li class="LB2"><a href="#">Links</a></li>
<li class="LB1"><a href="#">Pricing & Inquiries</a></li>
<!--<li class="LB4"><a href="#">Link #8</a></li>
<li class="LB3"><a href="#">Link #9</a></li>
<li class="LB2"><a href="#">Link #10</a></li>
<li class="LB1"><a href="#">Link #11</a></li>-->
</ul></div>
</div>
<div id="Signature"><a class="Sig" href="#">Manic Web Designs</a></div>
</body>
</html>
CSS: Code: body {
/*background: #E2E2E2;*/
background: #000000;
margin-top: 5px;
}
#MainBox {
/*background-color: #ECF9FF;*/
background-color: #8C8C8C;
margin: 0 auto;
width: 780px;
/*height: 500px;*/
/*border-color: #004A94;
border-width: 2px;
border-style: solid;*/
overflow: hidden;
}
#FaderBar {
/*background-color: #ECF9FF;*/
background-color: #8C8C8C;
margin: 0 auto;
height: 80px;
width: 780px;
border: 5px double #ffffff;
/*background-image:url('HeaderImg.png');*/
}
#FaderBarWP {
float: left;
height: 40px;
width: 300px;
margin-left: 15px;
margin-top: 5px;
font-size: 40px;
/*background-color: red;*/
}
#FaderBarHC {
float: left;
height: 55px;
width: 430px;
font-size: 25px;
margin-left: 45px;
/*background-color: aqua;*/
}
#FaderBarImg {
float:right;
height: 105px;
width: 199px;
}
#LeftBox {
width: 340px;
/*height: 500px;*/
float: left;
/*background-color: aqua;*/
}
#CenterBox {
width: 220px;
/*height: 500px;*/
float: left;
/*background-color: red;*/
}
#RightBox {
width: 220px;
/*height: 500px;*/
float: left;
/*background-color: yellow;*/
}
#BioBox {
width: 295px;
height: 250px;
background-color: #F2F2F2;
padding-top: 5px;
border-color: #dcdcdc;
border-style: solid;
border-width: 2px;
float: right;
margin: 5px 10px 0px 0px;
}
.BioContent {
width: 100%;
float: left;
font-size: 11px;
margin-bottom: 5px;
border-top: 1px dashed #dcdcdc;
border-bottom: 1px dashed #dcdcdc;
padding: 5px;
}
#BioFooter {
float: right;
width: 100%;
text-align: right;
font-size: 12px;
color: gray;
margin-bottom: 15px;
}
#Broadcast {
height: 300px;
width: 330px;
float: right;
padding: 0px 0px 0px 0px;
}
ul li {
float: right;
height: 20px;
margin-bottom: 25px;
border-color: #dcdcdc;
border-width: 2px;
border-style: solid;
text-align: center;
width: 150px;
background-color: #F2F2F2;
list-style-type: none;
}
.LB1TOP {
margin-right: 30px;
margin-top: 35px;
}
.LB1 {
margin-right: 30px;
}
.LB2 {
margin-right: 25px;
}
.LB3 {
margin-right: 20px;
}
.LB4 {
margin-right: 15px;
}
.LB5 {
margin-right: 10px;
}
.LB6 {
margin-right: 5px;
}
ul li a {
display: block;
}
ul li a:link {
text-decoration: none;
color: black;
}
ul li a:visited {
text-decoration: none;
color: black;
}
ul li a:hover {
background-color: #737373;
color: white;
font-weight: bold;
}
ul li a:active {
text-decoration: none;
}
img.HeadShot {
margin: 125px 0px 0px 50px;
}
#Signature {
background-color: #E2E2E2;
margin: 0 auto;
width: 780px;
padding-top: 10px;
/*height: 500px;*/
/*border-color: #004A94;
border-width: 2px;
border-style: solid;*/
overflow: hidden;
text-align: right;
}
a.ReadOn:link {
text-decoration: none;
color: black;
}
a.ReadOn:visited {
text-decoration: none;
color: black;
}
a.ReadOn:hover {
text-decoration: none;
color: black;
}
a.ReadOn:active {
text-decoration: underline;
color: black;
}
.Sig {
color: #808080;
font-size: 10px;
}
a.Sig:link {
text-decoration: none;
}
a.Sig:visited {
text-decoration: none;
}
a.Sig:hover {
text-decoration: overline underline;
}
a.Sig:active {
text-decoration: none;
}
i have nested tables but table inside is inheriting properties from table outside. i have written classes for both tables in css and i dnt want inside table to inherit. what can i do? I'm having a problem with a float property placing a nested div outside of a parent box. I've ran validation on both the XHTML/CSS. Both are coming up with no errors. Heres the DIV snippet: Code: <!-- Div snippet -->
<!-- start main -->
<div id="main">
<div class="mainbx">
<!-- top border -->
<!-- top left -->
<div class="tl">
<div class="c"></div>
</div>
<!-- top center -->
<div class="tc">
<div class="c"></div>
</div>
<!-- top right -->
<div class="tr">
<div class="c"></div>
</div>
<!-- top border -->
<!-- bdy1 -->
<div class="bd">
<!-- content area -->
<div id="leftcol">
<pThis column ( leftcol ID ) is correctly placed.</p>
</div>
<div id="rightcol">
<!-- Rounded corner dialog begins -->
<div class="dialog">
<!-- top border -->
<!-- top left -->
<div class="tl">
<div class="c"></div>
</div>
<!-- top center -->
<div class="tc">
<div class="c"></div>
</div>
<!-- top right -->
<div class="tr">
<div class="c"></div>
</div>
<!-- top border -->
<!-- bdy1 -->
<div class="bd">
<div class="c">
<div class="s">
<!-- content area -->
<h1>This is an inline dialog.</h1>
<!-- content area -->
</div>
</div>
</div>
<!-- bdy1 -->
<!-- botom border -->
<!-- bottom left -->
<div class="bl">
<div class="c"></div>
</div>
<!-- bottom center -->
<div class="bc">
<div class="c"></div>
</div>
<!-- bottom right -->
<div class="br">
<div class="c"></div>
</div>
<!-- botom border -->
</div>
</div>
<!-- content area -->
</div>
<!-- bdy1 -->
<!-- botom border -->
<!-- bottom left -->
<div class="bl">
<div class="c"></div>
</div>
<!-- bottom center -->
<div class="bc">
<div class="c"></div>
</div>
<!-- bottom right -->
<div class="br">
<div class="c"></div>
</div>
<!-- botom border -->
</div> <!-- end mainbx -->
<div id="footer">footer text</div>
</div> <!-- end main -->
If I place a float property in the left or right col ID, the whole ID is placed outside of the mainbx class. For instance: Code: /* example w float */
#rightcol {
float: right;
height: auto;
width: 500px;
padding-top: 0px;
padding-right: 35px;
margin-right: 0px;
}
This is how it looks: http://b.imagehost.org/0176/inc_plcmnt.jpg URL Click to view larger image! Now if I remove the float and add a position property: Code: #rightcol {
position:relative;
right:-320px;
top:-190px;
height: auto;
width: 500px;
padding-top: 0px;
padding-right: 25px;
margin-right: 0px;
}
This is how the rightcol is placed: http://d.imagehost.org/0643/cor_plcmnt.jpg URL Click to view larger image! It seems better, but if the black box is re-sized eventually it will end up outside mainbx class ( the purple box ). This leads me to belive that the problem has something to do with nesting. The weird thing is if I add lots of text to the black dialog box, mainbx re-sizes. Any ideas of how to fix this? Thanks for any help or ideas. Hi, I've a problem designing with CSS. This is the html code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="structure-yellow.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="main"> <div id="headimage">test</div> <div id="greybar">test</div> </div> </center> </body> </html> And the attached css file is: Code:
div#main {
border: solid #000000 1px;
padding: 3px;
width: 780px;
margin: 0 auto 0 auto;
}
#headimage {
vertical-align: middle;
height: 100px;
background: #FFFF00;
}
#greybar {
position: relative;
top: 3px;
background: #CCCCCC;
}
Since the headimage and the greybar are nested within the main div, the 3px padding of the "main" div should be respected, however it's not. What I think is happenning is that the 3px padding of the main div is respected for the expected greybar position, and it is not updated after setting the "#greybar" position property on the CSS file. How can I solve this problem? I know that I could achieve the same effect adding a 3px white bottom border on the "#headimage" class, but I'm looking for more elegant solution based on block positioning. Any ideas? Thanks, Caste Hi I've got a bit of a problem. I am making a website and what I want to do is create links with block background showing an image, which changes to just pink on a mouse over. what I did was make a div, give it classname menu_items and in that div put different hyperlinks. my code: Code: /* Menu picture caption */
.menu_items a { display: block; color: #FFF; background-color: #FF0066; text-decoration: none; padding: 5px; position: absolute; }
#menu_0910_dg000 { background-image: url('img/0910_dg000.jpg'); height: 90px; width: 140px; top: 100px; left: 0px; font-size: 12pt; }
#menu_0910_dg000:hover { background-image: none; color: #FFF; }
#menu_0910_dg601 { background-image: url('img/0910_dg601.jpg'); height: 90px; width: 140px; top: 100px; left: 150px; font-size: 12pt; }
#menu_0910_dg601:hover { background-image: none; color: #FFF; }
#menu_0910_dg200 { background-image: url('img/0910_dg200.jpg'); height: 90px; width: 140px; top: 100px; left: 300px; font-size: 12pt; }
#menu_0910_dg200:hover { background-image: none; color: #FFF; }
#menu_0910_elderly { background-image: url('img/0910_elderly.jpg'); height: 90px; width: 440px; top: 0px; left: 0px; font-size: 18pt; }
#menu_0910_elderly:hover { background-image: none; color: #FFF; }
#menu_0910_demos { background-image: url('img/0910_demos.jpg'); height: 90px; width: 890px; top: 200px; left: 0px; font-size: 20pt; }
#menu_0910_demos:hover { background-image: none; color: #FFF; }
Code: <div class="menu_items"> <a id="menu_0910_dg000" href="0910_elderly.html">Assignment: DG000 Introducing Competency-Centred Learning </a> <a id="menu_0910_dg601" href="0910_elderly.html">Assignment: DG601 Digital Video</a> <a id="menu_0910_dg200" href="0910_elderly.html">Assignment: DG200 Creative Programming for Designers</a> <a id="menu_0910_elderly" href="0910_elderly.html">Project: Elderly Interacting with the Digi-world</a> <a id="menu_0910_demos" href="0910_elderly.html">External: Demos Bar Committee</a> </div> You can see that I first used the nested selector .menu_items a, but this doesn't work with hover, so .menu_items a:hover doesn't work. Why not and how to fix?:S gr Bram I have set up a couple vertical boxes and filled them with 'column' boxes all nested within the parent vertical boxes. My problem is when, say, box #3 from the left has more content than the furthest left box, instead of stretching the parent to accommodate the content and push down the other parent horizontal box below, the content just flows behind the lower horizontal box. If the content in the furthest left box is the longest, this problem doesnt occur. The parent box is stretched to fit. Thx Joe ####################### html ######################### <html> <head> <meta http-equiv="Content-Type" charset=windows-1252> <link rel="stylesheet" href="test.css" type="text/css" media="screen,projection,print" title="Default" /> </head> <body id="savor-home"> <div id="main"> <div id="abovefold"> <div id="column-a"> <div id="type2"> blah<br> blah<br> blah<br> blah<br> </div> </div> <div id="column-b"> <div id="type1"> blah<br> blah<br> blah<br> blah<br> </div> </div> <div id="column-c"> <div id="type2"> blah<br> blah<br> blah<br> blah<br> </div> </div> <div id="column-d"> <div id="type1"> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> </div> </div> </div> <div id="maincontent"> <div id="column-a"> <div id="type1"> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> </div> <div id="column-b"> <div id="type1"> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> </div> </div> <div id="column-c"> <div id="type2"> blah<br> blah<br> blah<br> blah<br> blah<br> blah<br> </div> </div> </div> </div> </body> </html> ####################################### css ####################################### body { margin: 0px; background: #fff; } #main { width: 780px; min-height: 1500px; } #savor-home #abovefold { position: relative; top:0px; left:0px; width: 100%; width: 780px; clear: both; } #savor-home #abovefold #column-a { background: #eee; width: 185px; position: relative; top:10px; left:10px; display: inline; } #savor-home #abovefold #column-b { background: #ddd; width: 185px; position: absolute; top:10px; left: 205px; display: inline; } #savor-home #abovefold #column-c { background: #ccc; width: 185px; position: absolute; top:10px; left: 400px; display: inline; } #savor-home #abovefold #column-d { background: #bbb; width: 185px; position: absolute; top:10px; left: 595px; display: inline; } #savor-home #abovefold #type1 { background: url("/img/savor/featcontent1.jpg") no-repeat; width: 100%; /* hide from IEMac\*/ width: 185px; \width: 185px; w\idth: 165px; *width: 185px; /* end hiding */ padding: 10px; font: 12px verdana,arial,helvetica,sans-serif; color: #000; } #savor-home #abovefold #type1 h2 { color: #000; } #savor-home #abovefold #type1 h4 { color: #B5390F; padding: 1px; } #savor-home #abovefold #type1 a:link, #savor-home #abovefold #type1 a:visited { color: #000; font: bold 10px verdana,arial,helvetica,sans-serif; } #savor-home #abovefold #type1 a:hover { text-decoration: underline; color: #B5390F; font: bold 10px verdana,arial,helvetica,sans-serif; } #savor-home #abovefold #type2 { background: url("/img/savor/featcontent2.jpg") no-repeat; width: 100%; /* hide from IEMac\*/ width: 185px; \width: 185px; w\idth: 165px; *width: 185px; /* end hiding */ padding: 10px; font: 12px verdana,arial,helvetica,sans-serif; color: #000; } #savor-home #abovefold #type2 h2 { color: #000; } #savor-home #abovefold #type2 h4 { color: #B5390F; padding: 1px; } #savor-home #abovefold #type2 a:link, #savor-home #abovefold #type2 a:visited { color: #000; font: bold 10px verdana,arial,helvetica,sans-serif; } #savor-home #abovefold #type2 a:hover { text-decoration: underline; color: #B5390F; font: bold 10px verdana,arial,helvetica,sans-serif; } #savor-home #maincontent { position: relative; top:0px; left:10px; background: #0f0 url("/img/savor/maincontent.jpg") no-repeat; width: 770px; } #savor-home #maincontent #column-a { width: 256px; position: relative; top:10px; left:0px; } #savor-home #maincontent #column-b { width: 256px; position: absolute; top:0px; left: 256px; } #savor-home #maincontent #column-c { width: 256px; position: absolute; top:0px; left: 512px; } #savor-home #maincontent #type1 { width: 100%; /* hide from IEMac\*/ width: 256px; \width: 256px; w\idth: 236px; *width: 256px; /* end hiding */ padding: 0 10px 0 10px; font: 12px verdana,arial,helvetica,sans-serif; color: #000; border-right: 1px dotted; } #savor-home #maincontent #type1 h2 { color: #000; } #savor-home #maincontent #type1 h4 { color: #B5390F; padding: 1px; } #savor-home #maincontent #type1 a:link, #maincontent #type1 a:visited { color: #000; font: bold 10px verdana,arial,helvetica,sans-serif; } #savor-home #maincontent #type1 a:hover { text-decoration: underline; color: #B5390F; font: bold 10px verdana,arial,helvetica,sans-serif; } #savor-home #maincontent #type2 { width: 100%; /* hide from IEMac\*/ width: 256px; \width: 256px; w\idth: 236px; *width: 256px; /* end hiding */ padding: 0 10px 0 10px; font: 12px verdana,arial,helvetica,sans-serif; color: #000; } #savor-home #maincontent #type2 h2 { color: #000; } #savor-home #maincontent #type2 h4 { color: #B5390F; padding: 1px; } #savor-home #maincontent #type2 a:link, #savor-home #maincontent #type2 a:visited { color: #000; font: bold 10px verdana,arial,helvetica,sans-serif; } #savor-home #maincontent #type2 a:hover { text-decoration: underline; color: #B5390F; font: bold 10px verdana,arial,helvetica,sans-serif; } My website (OPM) uses css for all the layout. Sometimes, when I load a new page within the website, the entire webpage appears nested within one of the layers. When I reload the page, this effect disappears right away or after a few reloads. It appears about 10% of the time and occurs in several different browsers (i.e. Firefox, IE). Nested webpage error URL Normal page URL I don't know why this is happening, especially since it's only part of time. Please help! Thank you, Misha Okay, I have a page on which I want a banner div with a links div underneath it, a left menu bar div, and a content div. I've put them all in a container div. However, on some pages the menu bar is longer than the content and on others the content is longer than the menu bar. I want the menu bar and the content bar to always be equal heights but adjust to the length of content. Here's the gist of the code: Code:
#container {
text-align: left;
background:#000064;
margin-left: auto;
margin-right: auto;
width: 650;
height:100%;
border: 1px solid #e0e0e0;
}
#banner {
background: #fff;
width: 650;
}
#piclinks {
background: rgb(00,00,64);
padding-top: 10px;
padding-bottom: 5px;
width: 650;
}
#links {
position: absolute;
padding-left: 5px;
padding-top: 10px;
padding-bottom: 10px;
border-right: 1px dotted #fff;
width: 140px;
font-family: verdana, arial, georgia, sans-serif;
color: #fff;
font-size: 8pt;
background: rgb(00,00,64);
}
#content {
position: relative;
float: right;
width: 500;
font-family: verdana, arial, georgia, sans-serif;
font-size: 8pt;
color: #fff;
padding: 5px;
}
I've looked at a few resources, including the 'PIE' site, but haven't been able to quite figure it out. Thanks if you go he http://www.tvshow-caps.co.uk/showPics.php?showid=24&season=6&episode=1 you will see that the nested list do not expand but OVERLAP in IE. firefox displays is ok. EDIT1: i have fixed the nested list problem (i was using height property which IE doesnt like) second problem: now IE doesnt apply the border-bottom property properly (use the above link) I have the following CSS styles: Code:
#content p { font-size: 24px; }
.smalltext p { font-size: 12px; }
Then, I create a #content div in my HTML with three paragraphs in it. I want the middle paragraph to have the .smalltext class, like this: http://www.toprival.com/temp/css_question.gif With the CSS the way I have it, the font size (12px) of the .smalltext paragraph is ignored. But if I change the CSS so both selectors are IDs, or so both are classes (and update the HTML accordintly), it works. Why is that? Hello all. I've got a layout with three columns. The first column contains the navigation and the second two are variable content. All the columns can be any length, and consist of any number of divs; each div is a bordered block of variable-sized content. The problem is if I want to float an image around some text in the second or third column. Since the image is floating, its container doesn't extend fully, and the image overlaps the border and the block below it. However, if I put a "clear: both" spacer within the block, then the container clears elements in the left or right columns, and extends way too far down! What I really need is a way to just clear a single level of nesting, but "clear" seems to be pretty much all or nothing. I've also tried the pseudoclass :after trick to extend the box, but that didn't appear to do any good. It just added the content inside the border of each block, but doesn't enclose the image at all. I hope somebody has suggestions - I actually haven't found anything about this problem, but perhaps I'm just looking for the wrong terms. It seems like a fairly fundamental thing to do... Thanks! Why does GOOD VERSION, below, work perfectly, but the BAD VERSION fails (all browsers)? The only difference is the order of TOPIMAGE and BOTTOMIMAGE in the 2nd IMAGEBUTTON. How can I adjust my CSS so both versions work? GOOD VERSION Code: <style>
a.IMAGEBUTTON img.TOPIMAGE { z-index:1; position:absolute; }
a.IMAGEBUTTON:hover img.TOPIMAGE { filter:alpha(opacity=0); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; }
a.IMAGEBUTTON img {width:150px; }
</style>
<a class="IMAGEBUTTON" href="http://google.com" >
<img class="TOPIMAGE" src="pics\pic2.jpg" />
<img class="BOTTOMIMAGE" src="pics\pic1.png" />
</a>
<a class="IMAGEBUTTON" href="http://google.com" >
<img class="TOPIMAGE" src="pics\pic2.jpg" />
<img class="BOTTOMIMAGE" src="pics\pic1.png" />
</a>
BAD VERSION Code: <style>
a.IMAGEBUTTON img.TOPIMAGE { z-index:1; position:absolute; }
a.IMAGEBUTTON:hover img.TOPIMAGE { filter:alpha(opacity=0); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; }
a.IMAGEBUTTON img {width:150px; }
</style>
<a class="IMAGEBUTTON" href="http://google.com" >
<img class="TOPIMAGE" src="pics\pic2.jpg" />
<img class="BOTTOMIMAGE" src="pics\pic1.png" />
</a>
<a class="IMAGEBUTTON" href="http://google.com" >
<img class="BOTTOMIMAGE" src="pics\pic1.png" />
<img class="TOPIMAGE" src="pics\pic2.jpg" />
</a>
THANKS I am trying to layout a simple table in CSS and have numerous issues; the first and most confusing is why the computer header I am working on currently is not displaying correct. When I look at the computer style in chrome it shows that the height is computing to 31px which is correct but if I measure the image in Photoshop it is only drawing at 17px... if anyone could help I would appreciate it! I was going to post a link to the test page which has all the code cleanly displayed along with the images they use but I guess that is not allowed. I have copied the offending CSS code below. I use it by nesting one div inside another starting with table_head_left and working my way down. Code:
.table_head_left
{
background-image: url(fx/images/tbl_hl.png);
background-position: top left;
background-repeat: no-repeat;
background-attachment: fixed;
padding-left: 14px;
height: 31px;
}
.table_head_right
{
background-image: url(fx/images/tbl_hr.png);
background-position: top right;
background-repeat: no-repeat;
background-attachment: fixed;
padding-right: 14px;
height: 31px;
}
.table_head_center
{
background-image: url(fx/images/tbl_ht.png);
background-position: top center;
background-repeat: repeat-x;
background-attachment: fixed;
height: 31px;
text-align: center;
}
im trying to make the switch from tables to css. I want to have a table with 2 colums so my css is as follows: Code: #mainbody
{
width: 800px;
border: #8FADB4 1px solid;
margin: 0 auto
}
#left
{
float: left;
position: absolute;
width: 325px;
background-color: #8FADB4;
}
#content
{
float: right;
width: 475px;
}
main body is what the whole code sits in, left is the left column and content is the right column. I then use the following code: Code: <div id="mainbody"> <div id="left"><p>left column</p></div> <div id="content"><p>content section</p></div> </div> the problem is that if i type a lot of content into the content section then the left column does not grow vertically, nor does the main body. How do i change this to act like a table where the column would grow?! thanks Please look at this page - http://www.jimstrans.com/diagnosis.asp I've been working hard to get this table laid out and would appreciate some help with something. If you look at the table in IE all looks just as I want it to look. Now look at it in FF and you will see that the text (in the paragraphs w/ class of "cellp" do not align with the checkboxes, but rather are pushed down 2-3 pixels. I guess I could live with this but would really like to know why they are not aligning at the top with the checkbox. Also, does the way I laid this out code wise look ok? Was it neccessary to use the <p> in the td? Could I have put an absolute position on the input boxes (top left), a fixed width on the cells w/ a left padding to indent the text? I'd be curious to know what you think? i'm trying to get rid of my tables. i have a test site i am making and i have 2 questions. first, how do i make the footer attach at the bottom, and then how do i make the main part stretch all the way down to the footer (between the tabs and the footer)? the web site is at gegg dot bandsondemand dot com slash test thanks! |
|||||||