CSS - Nested Tables Vs Css
I've found that nesting tables works very well for getting data aligned properly.
I'm having serious trouble doing the same thing with css. For example, I can easily create a table with 2 col, 2 rows, then put another table in each box and do get things just the way I want. I can't figure out a way to do that with css. Is it possible? Should I even try? Thanks! Similar Tutorialsi 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 have a website full, and I mean FULL of nested tables. It was designed by my webguy before he had an understanding of CSS and div tags. I've decided to take on the seemingly monumental task of converting my site to CSS (mainly because I'm implementing Wordpress and I figure now is a good time to get current, clean, and tidy). I haven't found any good tutorials or sites that explain how to make the transition, or for that part, offer a good explanation of how to use CSS for positioning and site layout. I was hoping some of you guys might have some recommendations. Right now I have tables within tables within tables within tables next to tables within tables next to tables within more tables and more tables..... et cetera. And I'm of course trying to do this right away and in as little time as possible Thanks for any suggestions guys Hi, I'm working on this webpage http://www.dkwebconsultants.com/jaclo/subnav.php?SubGroupID=24 and it works fine in Mozilla. However, in IE there is a thin white space between the td that says "handshowers" in it and the blue above as well as the the left side of the page. The same thing for the slightly lighter td below it and the left side of the page. I've been reading and error checking all day, but i can't figure this one out. the php/html code is as follows: Code: <table class="nicetable"> <?php include "header.html" ?> <!-- This is one table row, the table has two td's--> <tr> <td height="410"> <table class="nicesubnavtable"> <tr> <td id="subnavtop"> <script language="JavaScript1.2" type="text/javascript"> <!-- myTest.writeMenuBar(); //--> </script> </td> </tr> <tr> <td id="subnavbottom"> <?php $sql = "SELECT * FROM SubGroup WHERE GroupID = '$GroupID'"; $result = mysql_query($sql) or die (mysql_error()."<br />Couldn't execute query: $sql"); $num_results = mysql_num_rows($result); echo "<br>"; for($i=0; $i < $num_results; $i++){ $row = mysql_fetch_array($result); $tempSubGroupID = $row['SubGroupID']; $tempName = stripslashes($row['Name']); if($SubGroupID == $tempSubGroupID){ echo "<a id='snsgnamesblue' href='subnav.php?SubGroupID=$tempSubGroupID'>$tempName</a>"; } else{ echo "<a id='snsgnames' href='subnav.php?SubGroupID=$tempSubGroupID'>$tempName</a>"; } } ?> </td> </tr> </table> </td> <td id="mainareanav"> <?php $sql1 = "SELECT * FROM IndividualItem WHERE SubGroupID = '$SubGroupID'"; $result1 = mysql_query($sql1) or die (mysql_error()."<br />Couldn't execute query: $sql"); $num_results1 = mysql_num_rows($result1); for($i=0; $i < $num_results1; $i++){ $row = mysql_fetch_array($result1); $tempItemID = $row['ItemID']; $tempNickName = stripslashes($row['NickName']); $filename = stripslashes($row['ThumbImageName']); $filenamearray = explode('.', $filename); $fnameNoExt = $filenamearray[0]; //print the nickname, if no nickname print the itemID if($tempNickName == "") echo "<a id=\"itemnames\" href=\"product.php?itemID=$tempSubGroupID\" onMouseover=\"changeit('pic1','$fnameNoExt');\" onMouseout=\"changeit('pic1','image_off');\">$tempItemID</a> \n"; else echo "<a id=\"itemnames\" href=\"product.php?itemID=$tempSubGroupID\" onMouseover=\"changeit('pic1','$fnameNoExt');\" onMouseout=\"changeit('pic1','image_off');\">$tempNickName</a> \n"; } //<td id="subnavright"> //<img src="images/thumb/blankthumb.jpg" id="thumb" name="pic1"> //</td> ?> </td> </tr> <?php include "footer.html" ?> <!-- This is three table rows, public links, user links, search and contact--> </table> The relevant CSS code is: Code: body { font-family : Arial, Helvetica, sans-serif; font-size: 16px; margin: 0; padding: 0 } .nicetable { border-collapse:collapse; } .nicesubnavtable { border-collapse:collapse; width: 200px; margin: 0px; padding: 0px; border-bottom: 2px solid #BAB6B7; } #subnavbar { vertical-align: top; } #subnavmiddle { background-color: white; width: 220px; height: 410px; vertical-align: top; padding-left: 15px; } #subnavright{ width: 240px; vertical-align: top; border-right: 1px solid #797D7E } #subnavtop{ background-color: #F3D891; height: 60px; width: 185px; border-top: 2px solid #F3D891; border-left: 2px solid #F3D891; } #subnavbottom{ background-color: #FAE1A8; height: 350px; width: 185px; padding-right: 15px; border-left: 2px solid #FAE1A8; vertical-align: top; } I'm using tables for the layout and css for the style. I've tried many variations on table layout and haven't come up with anything. If anyone has any ideas, please let me know. Thanks, dk Hi, I have used bottom-border: 1 on my links and the problem I am having is making sure that these borders are not displayed on images which have <a "somelink"> </a> wrapped around them. I have used #content a > img { border: 0; } and this seems to have solved the problem however when I have an image link nested into a table the border reappears and I have tried everything to get it to remove it. If anyone else knows why it reappears when nested in tables please let me know how I can fix it. Regards, Graham Hey, I have parent table, with several nested tables within. I'm changing the CSS values on-the-fly using Javascript so I'm using id's instead of classes. The CSS of all the tables is generated using this code: Code: /* mp_tip_CSS_x_TABLE CSS */ <? for ($i=1; $i<=12; $i++) { ?> #mp_tip_CSS_<? echo($i); ?>_table { border-color: <? echo($mp_tip_CSS_table_border_color[$i]); ?>; border-style: <? echo($mp_tip_CSS_table_border_style[$i]); ?>; border-width: <? echo($mp_tip_CSS_table_border_width[$i]."px"); ?>; border-collapse: collapse; } #mp_tip_CSS_<? echo($i); ?>_table td { border-color: <? echo($mp_tip_CSS_table_border_color[$i]); ?>; border-style: <? echo($mp_tip_CSS_table_border_style[$i]); ?>; border-width: <? echo($mp_tip_CSS_table_border_width[$i]."px"); ?>; border-collapse: collapse; } <? } ?> /* mp_tip_CSS_x_TABLE CSS END */ The parent table is mp_tip_CSS_1_table and the nested tables are mp_tip_CSS_2_table to mp_tip_CSS_12_table. The problem I'm getting is the nested tables seem to inherit the td border values of the parent table, so they have two borders instead of just the single one (the parent border and their own border). Is there any way to make the parent border td value only be applied to the immediate td's of the parent table, and not the td's of the nested tables as well? After browsing some web pages I came across using: Code: #classname >tr >td {} But that doesn't seem to work... Thanks for any help, -Ross hi everyone, My css code: table.test{ font-family: Arial, sans-serif; font-size: 11px; width: 100%; CURSOR: default; border: 1px solid silver; border-collapse: collapse; padding: 3px; } table.aside{ font-family: Arial, sans-serif; font-size: 11px; width: 100%; CURSOR: default; border: none; padding: 3px; } th.aside, tr.aside, td.aside{ font-family: Arial, sans-serif; font-size: 11px; CURSOR: default; border: none; padding: 3px; } my nested tables, which overflows the width of the screen in ie 6 , but works on ie 7 and firefox. echo "<table class='aside' cellpadding='0px' cellspacing='0px' border='0'><tr><td width='80%' >$table1</td><td width='20%'>$table2</td></tr></table>"; Should I or should I not learn more about coding when I build my page using Dreamweaver anyways and it looks and functions fine. I am stuck wit the issue of doc types in my pages which has prevented me to make a center middle design page and had to remove the doc type code on all my websites so that the page content will end up at centre middle. The only solution I have been offered was to use CSS but I have so many old sites that converting the sites I have built to CSS would be too time consuming and not worth it. Anyone have any other better ideas? I'm not confident enough with CSS to just use it, so I'm mixing it with some tables too. I want a layout with two tables next to each at the top and then another below. The two at the top are working fine, but the one below keeps jumping back up to the top. I've managed to get an ugly fix by putting in a load of <br> but this doesn't work in IE7 (unless I add a lot more, pushing the content way down in other browsers) and isn't much of a solution. The other problem I have is that I want to have the majority of my page with a white background, but to get a surrounding border I've set the body background to be a colour and then placed a div around all the content. I want this div to be the size of the page and so set it's height to 100%, but this makes it too small. Not sure why. Here is my code for my page and CSS. If anyone can help I'd be most grateful. 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></title> <link href="incl/default.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> <!-- function navon(num) { document.getElementById("nav" + num).style.backgroundColor = '#CDEB8B'; document.getElementById("nav" + num).style.paddingTop = '0px' document.getElementById("nav" + num).style.paddingBottom = '0px'; document.getElementById("nav" + num).style.borderTopWidth = '10px'; document.getElementById("nav" + num).style.borderBottomWidth = '10px'; } function navoff(num) { document.getElementById("nav" + num).style.backgroundColor = '#C3D9FF'; document.getElementById("nav" + num).style.paddingTop = '8px' document.getElementById("nav" + num).style.paddingBottom = '8px'; document.getElementById("nav" + num).style.borderTopWidth = '2px'; document.getElementById("nav" + num).style.borderBottomWidth = '2px'; } //--> </script> </head> <body> <div class="main"> <table width="29%" border="0" cellpadding="2" cellspacing="5" align="left"> <tr> <td><img src="" alt="" width="230" height="80" border="0" /></td> </tr> </table> <table width="70%" height="60px" border="0" cellpadding="2" cellspacing="5" align="right"> <tr> <td width="180px" class="nav" id="nav1" onmouseover="navon('1')" onmouseout="navoff('1')">link</td> <td width="180px" class="nav" id="nav2" onmouseover="navon('2')" onmouseout="navoff('2')">link</td> <td width="180px" class="nav" id="nav3" onmouseover="navon('3')" onmouseout="navoff('3')">link</td> <td width="180px" class="nav" id="nav4" onmouseover="navon('4')" onmouseout="navoff('4')">link</td> <td width="180px" class="nav" id="nav5" onmouseover="navon('5')" onmouseout="navoff('5')">link</td> </tr> </table> <br /><br /><br /><br /><br /><br /> <table width="100%" border="0" cellpadding="2" cellspacing="5" align="center"> <tr> <td width="70%"> some content </td> <td width="30%"> some more content </td> </tr> </table> </div> </body> </html> Code: @charset "utf-8"; /* CSS Document */ body { padding-right: 4%; padding-left: 4%; padding-top: 30px; padding-bottom: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; letter-spacing: 0.1em; color: #000000; background-color: #EEEEEE; } a:link { color: #000000; text-decoration: none; } a:visited { color: #000000; text-decoration: none; } a:active { color: #000000; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } .main { background:#FFFFFF; border: 10px solid #36393D; width: 89%; padding: 5%; } .nav { padding: 8px; background-color: #C3D9FF; vertical-align: middle; text-align: center; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 24px; color: #36393D; cursor:pointer; border: 2px solid #36393D; } Thanks for taking the time to read my question If I have <div class="main"> something here <div class="sub1"> something here that has more height than the above div</div> </div> Shouldn't the height of main be stretched to fit the height of sub1 where sub1 has a greater height than main. Does it have to be display: block; or float: left; ? Brad Hi everyone. I've come pretty close to solving this problem but certain problems keep showing themselves. Here's the mockup menu I'm trying to recreate. Current CSS: Code: .interior #sidebar ul{ padding:20px 0 5px 0px; list-style:none; } .interior #sidebar ul.outerUL {border-bottom:1px solid white;} .interior #sidebar ul.middleUL{border-top:1px solid white; margin:0; padding:5px 0 0 0;} .interior #sidebar ul.innerUL{padding:5px 0;} .interior #sidebar ul li a {padding:5px 0 5px 0; margin:0;} .interior #sidebar ul li.outerLI a{ border-top:1px solid white; padding:0 0 0 20px; color:#003371; width:100%; } .interior #sidebar ul li.middleLI a{ padding-left:25px; color:#3f699d; } .interior #sidebar ul li.innerLI a{ padding:2px 0 2px 30px; color:#0f8b53; } .interior #sidebar a {text-decoration:none;} Current HTML: Code: <div id="sidebar"> <ul class="outerUL"> <li class="outerLI"><a href="#">Our Misssion</a></li> <ul class="middleUL"> <li class="middleLI"><a href="#">Quality</a></li> <ul class="innerUL"> <li class="innerLI"><a href="#">Dedication</a></li> <li class="innerLI"><a href="#">Perseverance</a></li> </ul> <li class="middleLI"><a href="#">Choice</a></li> <li class="middleLI"><a href="#">Value</a></li> </ul> <li class="outerLI"><a href="#">Parkland Timeline</a></li> <li class="outerLI"><a href="#">Management Bios</a></li> </ul> </div> I've tried multiple different ways of acheiving the desired look, but each one has a certain problem with it. This is the best I can get while still keeping each link the correct color and font size. I'd be all set (I can deal with the padding later) if I could get the white bar above each of the top-level links to extend across the whole sidebar div. well if i dont put any css firefox does this with nested link: Code: link1 link2 sublink1 IE doesnt indent the sublink. so is there any hack available? PS>i tried using margin-left but by doing that firefox indents it even further so it looks bad? cheers Hi All, I have the following html: Code: <div class="businessItem"> <div class="bizIcon"> <img src="GetImage.axd?type=1&business=3" alt="My Biz" /> </div> <div class="bizInfo"> <a href="business.aspx?business=3"> My Biz </a> <p> my biz </p> </div> <div class="bizContact"> <a href="www.myweb.com">www.myweb.com</a><br /> <a href="mailto:roman.rodov@gmail.com">roman.rodov@gmail.com</a><br /> 90294767 </div> </div> <div class="businessItem"> <div class="bizIcon"> <img src="GetImage.axd?type=1&business=4" alt="My Second Business" /> </div> <div class="bizInfo"> <a href="business.aspx?business=4"> My Second Business </a> <p> My second business </p> </div> <div class="bizContact"> <a href="www.myweb.com">www.myweb.com</a><br /> <a href="mailto:roman.rodov@gmail.com">roman.rodov@gmail.com</a><br /> 90294767 </div> </div> And the following CSS that applies: Code: div.businessItem { background-color: #66cc66; margin-bottom: 10px; width: 100%; padding: 10px 10px 10px 10px; } div.bizIcon { float: left; width: 64px; margin: 0px 10px 0px 0px; } div.bizInfo { float: left; width: 256px; } div.bizContact { float: left; width: 256px; } now the problem is that it looks like crap in FF2 and looks ok in IE7 (haven't tested IE6 yet). The idea is to have a full width div with 3 divs inside side by side. It looks *completely* different in FF2. Does anyone have any ideas? (I'm pretty new to CSS, just learning). 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> I am not getting the right behaviour from my css in a nested list i made for a menu. here is the css for the menu Code: #main_menu{ position: absolute; top: 252px; left:30px; margin:0; padding:0; } #menu_item_1{ list-style-type: none; } #menu_item_1 a{ color:#11352B; text-decoration:none; font-weight:300; vertical-align:text-top; } #menu_item_1 a:hover{ color:#007888; text-decoration:underline; font-weight:300; vertical-align:text-top; } #menu_item_2{ list-style-type: none; } #menu_item_2 a{ color:#007888; text-decoration:none; font-weight:300; vertical-align:text-top; } and here is the xhtml section showing the menu Code: <ul id='main_menu'> <li id='menu_item_1'><a href='index.php'>Home</a></li> <li id='menu_item_1'><a href='about_us.php'>About Us</a></li> <li id='menu_item_1'><a href='customers.php'>Customers</a></li> <li id='menu_item_2'><a href='products.php'>Products</a></li> <ul> <li id='menu_item_1'><a href='atlas2000.php'>Atlas 2000</a></li> <li id='menu_item_1'><a href='atlas2000.php'>Web Request</a></li> <li id='menu_item_1'><a href='atlas2000.php'>Atlas Mailer</a></li> </ul> <li id='menu_item_1'><a href='service.php'>Service</a></li> <li id='menu_item_1'><a href='download.php'>Download</a></li> <li id='menu_item_1'><a href='support.php'>Support</a></li> <li id='menu_item_1'><a href='contact_us.php'>Contact Us</a></li> </ul> the main list works great but the sublist the color is wrong, it should behave like the main one does....I think I have not structured my css correctly, but can not figure it out. I would be very grateful for any help offered. The following html and css are displaying very differently between IE7 and Firefox 2. The HTML is Strict verified and the CSS has also been verified. Please help me! I don't mind you telling me an idiot. Just please constructively explain how I'm an idiot and how I can stop being an idiot. Thanks. HTML Document Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)"> <head><title> Kaua'i Historical Society Membership Maintenance </title><link type="text/css" rel="stylesheet" href="Kauai.css" /></head> <body> <form method="post" action="default.aspx" id="aspnetForm"> <div> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEzMjAyNDM1NzdkGAEFEGN0bDAwJExvZ2luVmlldzEPD2QCAmT6FXaep7s2kkgUAi6bmGTUd7hIOw==" /> </div> <div id="Header"> <a href="(URL address blocked: See forum rules)" title="Kaua'i Historical Society"> <img src="images/mastheadBar.gif" style=" border-style:none;" alt="Kaua'i Historical Society" /></a></div> <div id="Content"> <div class="containerparent"> Manage members <div id="membercontainer"> <div class="box"> <a id="ctl00_ContentPlaceHolder1_hlCreateMember" title="Create Member Record" href="CreateMember.aspx"><img title="Create Member Record" src="images/businessman_add.png" alt="Create Member Record" style="border-width:0px;" /></a><br /> Create member</div> <div class="box"> <a id="ctl00_ContentPlaceHolder1_hlFindMember" title="Find Member Record" href="FindMember.aspx"><img title="Find Member Record" src="images/businessman_find.png" alt="Find Member Record" style="border-width:0px;" /></a><br /> Find member</div> </div> </div> <p> </p> <div class="containerparent"> Manage pledge drives <div id="pledgedrivecontainer"> <div class="box"> <a id="ctl00_ContentPlaceHolder1_hlCreateDrive" title="Create Pledge Drive" href="CreateDrive.aspx"><img title="Create Pledge Drive" src="images/businessman_add.png" alt="Create Pledge Drive" style="border-width:0px;" /></a><br /> Create pledge drive</div> <div class="box"> <a id="ctl00_ContentPlaceHolder1_hlFindDrive" title="Find Pledge Record" href="FindDrive.aspx"><img title="Find Pledge Record" src="images/businessman_find.png" alt="Find Pledge Record" style="border-width:0px;" /></a><br /> Find pledge record</div> </div> </div> <p> </p> <div class="containerparent"> Manage pledge levels <div id="pledgelevelcontainer"> <div class="box"> <a id="ctl00_ContentPlaceHolder1_hlCreateLevel" title="Create Pledge Level" href="CreateLevel.aspx"><img title="Create Pledge Level" src="images/businessman_add.png" alt="Create Pledge Level" style="border-width:0px;" /></a><br /> Create pledge level</div> <div class="box"> <a id="ctl00_ContentPlaceHolder1_hlFindLevel" title="Find Pledge Level" href="FindLevel.aspx"><img title="Find Pledge Level" src="images/businessman_find.png" alt="Find Pledge Level" style="border-width:0px;" /></a><br /> Find pledge level</div> </div> </div> <p> </p> <div class="containerparent"> Manage letters <div id="lettercontainer"> <div class="box"> <a id="ctl00_ContentPlaceHolder1_hlGenerateThankYou" title="Generate Thank You Letters" href="GenerateThankYou.aspx"><img title="Generate Thank You Letters" src="images/businessman_add.png" alt="Generate Thank You Letters" style="border-width:0px;" /></a><br /> Generate thank you letters</div> <div class="box"> <a id="ctl00_ContentPlaceHolder1_hlGenerateReminder" title="Generate Reminder Letters" href="GenerateReminder.aspx"><img title="Generate Reminder Letters" src="images/businessman_find.png" alt="Generate Reminder Letters" style="border-width:0px;" /></a><br /> Generate reminder letters</div> </div> </div> </div> <div id="Menu"> Welcome <span id="ctl00_LoginView1_lnUser">fred</span>.<br /><br /><span style="font-size:xx-small;">Admin enabled</span> </div> <div id="Search"> Search here</div> </form> </body> </html> CSS File Code: body { margin: 0px; padding: 0px; font-family: verdana, arial, helvetica, sans-serif; color: #333333; background-color: white; } h1 { margin: 0px 0px 15px 0px; padding: 0px; font-size: 28px; line-height: 28px; font-weight: 900; color: #cccccc; } p { font: 11px/20px verdana, arial, helvetica, sans-serif; margin: 0px 0px 16px 0px; padding: 0px; } #Content > p { margin: 0px; } #Content > p + p { text-indent: 30px; } a { color: #09c; font-size: 11px; text-decoration: none; font-weight: 600; font-family: verdana, arial, helvetica, sans-serif; } a:link { color: #09c; } a:visited { color: #07a; } a:hover { background-color: #eeeeee; } #Header { margin: 50px 0px 10px 0px; padding: 17px 0px 0px 20px; /* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */ height: 73px; /* 14px + 17px + 2px = 33px */ border-style: solid; border-color: black; border-width: 1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */ line-height: 11px; background-color: #eeeeee; /* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style declaration. The incorrect IE5/Win value is above, while the correct value is below. See (URL address blocked: See forum rules)/css/hacks.asp for details. */ voice-family: "\"}\""; voice-family: inherit; height: 14px; /* the correct height */ } /* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct length values to user agents that exhibit the parsing error exploited above yet get the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */ body > #Header { height: 14px; } #Content { position: absolute; top: 100px; left: 150px; padding: 0px; } #Menu { position: absolute; top: 100px; left: 20px; width: 100px; padding: 10px; background-color: #eeeeee; border: 1px solid #000000; line-height: 17px; /* Again, the ugly brilliant hack. */ voice-family: "\"}\""; voice-family: inherit; font-size: medium; } #Search { position: absolute; margin-left:8px; top: 100px; left: 500px; width: 225px; padding: 10px; background-color: #eeeeee; border: 1px solid #000000; line-height: 17px; /* Again, the ugly brilliant hack. */ voice-family: "\"}\""; voice-family: inherit; font-size: medium; } /* Again, "be nice to Opera 5". */ body > #Menu { width: 100px; } /* Again, "be nice to Opera 5". */ body > #Search { width: 100px; } #membercontainer { margin-left: 15px; margin-right: auto; width: 18.75em; } #pledgedrivecontainer { margin-left: 15px; margin-right: auto; width: 18.75em; } #pledgelevelcontainer { margin-left: 15px; margin-right: auto; width: 18.75em; } #lettercontainer { margin-left: 15px; margin-right: auto; width: 18.75em; text-align:center } #membercontainer .box { /*border: 1px solid black;*/ background-color: #ffffff; color: navy; float: left; line-height: 1.5; margin: 0.5em; text-align: center; font-size: xx-small; /*height: 1.5em; width: 1.5em;*/ } #pledgedrivecontainer .box { /*border: 1px solid black;*/ background-color: #ffffff; color: navy; float: left; line-height: 1.5; margin: 0.5em; text-align: center; font-size: xx-small; /*height: 1.5em; width: 1.5em;*/ } #pledgelevelcontainer .box { /*border: 1px solid black;*/ background-color: #ffffff; color: navy; float: left; line-height: 1.5; margin: 0.5em; text-align: center; font-size: xx-small; /*height: 1.5em; width: 1.5em;*/ } #lettercontainer .box { /*border: 1px solid black;*/ background-color: #ffffff; color: navy; float: left; line-height: 1.5; margin: 0.5em; text-align: center; font-size: xx-small; /*height: 1.5em; width: 1.5em;*/ } /*#membercontainer, #pledgedrivecontainer, #pledgelevelcontainer .box.selected { background-color: orange; }*/ .containerparent { font-size: medium; font-weight: bold; color: navy; padding: 5px; border-style: solid; border-color: navy; border-width: 1px; width: 18.75em; } I have a div: .gallery{width:95%;margin:0 auto;padding:5px;border:solid 1px black;} and inside I have: .galleryItem{float:left;width:150px;padding:5px;height:150px;border:solid 1px black;} .spacer{clear:both;} Used to give height to the container div. The idea is to create and even sized box for varying jpgs. How do I get the inside divs to space themselves out evenly across the space? AND the get the jpg to align itself in the middle of its containing div? Thanks. I am trying to create a layout that uses Nested DIVs, and I may be trying to force it to do something it does not like. I will post the code below, but here is an image that displays the layout. Note that Div3 and Div1 are fine, and Div 2 is fine, and the top DIV that is inside of that, #4, is where it needs to be, but the rest of the items just fall in below it. I would really not wish to use tables, but I am trying to do something that can only be done with tables? Page Code: Code: <div id="content"> <div id="usercp"> <?php include("scripts/yourmother.php"); ?> </div> <br /> <div id="NewsOuter"><div id="NewsTitle"><a href="viewArticle.php?id=1">ArticleTitle</a></div> <div id="NewsInner"><div id="NewsImage"><img src="http://tweedledee.dyc.edu/~tpx/test/tpx7c/images/site/notavail100.jpg"></div> <div id="NewsShortDesc">ArticleShort</div></div> <div id="NewsBottom"><div id="NewsIndexDate">ArticleDate</div> <div id="NewsIndexUser">ArticleUser</div></div> <div style="clear:both;"></div> </div> </div> And here is the relevant CSS (not counting the Content (div 1) or UserCP (div 3) Code: #Content #NewsOuter { display: block; float: left; height: 162px; width: 602px; } #NewsTitle { font-family: Arial, Helvetica, sans-serif; text-decoration: none; } #NewsTitle a { display: block; border:1px solid; background: #FFFFFF; color: #000000; height:20px; font-weight: bold; text-align:left; text-decoration: none; padding: 1px 10px; } #NewsTitle a:hover { color: #999999; text-decoration: none; } #Content #NewsOuter #NewsInner { width: 602px; height: 100px; } #Content #NewsOuter #NewsInner #NewsImageIndex { display: block; float: left; width: 100px; height: 100px; border: 1px solid black; } #Content #NewsOuter #NewsInner #NewsShortDesc { width: 500px; height: 100px; font-family: Arial; font-size: 10px; font-style: none; } #Content #NewsOuter #NewsBottom { width: 602px; height: 20px; } #Content #NewsOuter #NewsBottom #NewsIndexDate { display: block; float: left; width: 100px; border: 1px solid; border-color: #666666; font-weight: bold; font-family: Arial; } #Content #NewsOuter #NewsBottom #NewsIndexUser { display: block; float: right; width: 500px; border: 1px solid; border-color: #000000; Font-Family: Arial; Font-Style: Italic; Font-Size: 9px; } Also to note, the 3 items that appear below the image are not getting their formatting. Should I just use tables instead? I'm having some cross browser CSS issues (what a surprise.. ). Things render fine in IE7, but in FF (2.0.x) it seems that the style for <div id="shell"> just seems to stop. It looks <div class="content_shell"> is overflowing outside of its parent, but after using the 'Outline current element' tool in the web developer tool bar (very cool feature!) it looks like the parent div is being expanded but it's style is not. Basicly the white background and borders of "shell" don't continue and the content from "content_shell" just looks overflowed onto the page background. Very strange and again it's FF only. Here is the basic setup... html4strict Code: Original - html4strict Code <div id="shell"> <!-- a bunch of other content --> <div id="page_contents"> <div class="content_shell"> <div id="main_content" class="content_box"> Sample main content. </div> <div id="secondary_content" class="content_box"> Sample secondary content. </div> </div> </div> </div>
and here's the related css css Code: Original - css Code #shell { background-position: right top; background-color: #FFFFFF; border-right-style: solid; border-left-style: solid; border-right-width: 2px; border-left-width: 2px; border-right-color: #000000; border-left-color: #000000; width: 700px; height: auto; text-align: left; background-image: none; background-repeat: no-repeat; } #page_contents { width: 100%; height: auto; } .content_shell { width: 680px; height: auto; padding: 10px; font-size: 14px; } #main_content { width: 400px; height: auto; clear: right; float: left; } #secondary_content { width: 250px; height: auto; clear: right; float: left; margin-left: 10px; }
I'm sorry I can't post a link to the page, but it is still only on our intranet and deployed through SharePoint so it cannot be easily replicated on my own server. Hi All, I'm fairly new to CSS and have what is probably a basic question. I'm trying to format a class and having issue. Please look at my html and the css code below: Code: div class="node"> <div class="taxonomy"></div> <div class="content"> <p>Photo Gallery Body Here</p> <div class="field field-type-filefield field-field-image"> <div class="field-items"> <div class="field-item odd"> <a href="/sites/default/files/imagecache/Full/IMG_0275_0.JPG" rel="lightbox[field_image][Pic 1<br /><br /><a href="/node/48" id="node_link_text" class="active">View Image Details</a> - <a href="/sites/default/files/IMG_0275_0.JPG" target="_blank" id="download_link_text">Download Original</a>]"><img src="/sites/default/files/imagecache/Thumbnail/IMG_0275_0.JPG" alt="Pic 1" title="Pic 1" width="125" height="125" /></a> </div> </div> </div> </div> </div> </div> </div> Code: .node .field .field-type-filefield .field-field-image .field-items .field-item .odd { border: 1px solid #fff; width: 125px; height: 125px; margin-top: 35px; margin-right: 28px; float: left; } The only way I can format the "field-item odd" class but naming the css class .odd. However, this effects other parts of the site. How do I target this specific class properly? Thanks! |