Jump to content

dbrimlow

Members
  • Posts

    712
  • Joined

  • Last visited

    Never

Contact Methods

  • Website URL
    http://www.dbrimlow.com

Profile Information

  • Gender
    Not Telling

dbrimlow's Achievements

Member

Member (2/5)

0

Reputation

  1. First, so far as the clearfix, there is no "best way" - and some people don't even like this method at all. Use what's comfortable to you and does the job. To me, simply adding the class or ID of any floated element (that actually needs clearing) to the CSS clearfix select is simple and keeps my markup free of any unnecessary divs. But about your liquid issue: Without some kind of "faux column" technique, it is impossible to get two different boxes to be an equal height based upon the content of one of them; they are apples and oranges - completely unrelated to each other. Once you removed the overflow:hidden on the container, and the large bottom margin and padding on the boxes, you disabled the whole faux column concept and illusion of equal height boxes. Percentage heights do not work for many reasons, one being (in the most basic sense) because they are EACH relative to a parent container and not content or each other. EM layouts have a little more relative control, but not much. And using position:absolute for any wire-frame non-fixed component instead of floats is guaranteed to be unstable in any modern browser. You need to use some kind of illusion technique, like a graphic showing the two different backgrounds tiled in a parent container, or the Stu Nicolls technique I used of a huge padding-bottom (like 32767px) and an offsetting margin_bottom of equal-sized negative (like -32767px) to emulate equal heights, AND, MOST IMPORTANT, the overflow:hidden on the parent - this is what keeps the boxes appearing equal because the overflow is hidden based on whichever container has the most content. THAT is the key to the trick. Here is the technique with a header and footer to show you that it works: <!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Fixed left flexible right equal-height 2 columns</title> <style type="text/css"> body {font-size:76%; font-family: verdana, arial, sans-serif; background: #FFFFDF; word-wrap:break-word;} #container {overflow:hidden; background:#333;} .menu {float:left; width:280px; padding:5px; color:#FFFFCC; background: #800000;} .content {margin-left:300px; padding:.5em; background:#CCCCCC} .menu, .content, .buffer {padding-bottom:32767px; margin-bottom:-32767px;} h1 {font-size:150%; margin:0; padding:10px 0; color:#fff;} h3 {font-size:130%; margin:0; padding:8px 0;} li {list-style:none; text-decoration:none; margin:.1em; padding:.25em} li li {list-style:none; text-decoration:none; margin:.1em 0; padding:.25em 0} li a:link, li a:visited {display:block; background:#555; padding:.25em; border:1px solid #fff; color:#FFFFCC; text-decoration:none} li a:hover, li a:active {background:#FFFFCC; padding:.25em; border: 1px solid #000; color:#800000; text-decoration:none} p {font-size:1em; line-height:1.5em; margin:0; padding:5px 0;} #header {background:#555; margin-bottom:2px; padding:1.5em; color:#444; font-weight:bold} .contained {padding:10px;} #footer {width:100%; border-top:2px solid #333;background:#555; float:left; text-align:center } #footer p, #header p {color:#fff;} #footer a {color:#fff;} #footer a:hover {text-decoration:none;} </style> <!--[if lte IE 7]> <style type="text/css"> body {word-wrap:break-word;} li {margin:.1em; padding:.25em} li li {list-style:none; text-decoration:none; margin:0; padding:.25em 0} .content {display:inline; float:left; margin-left:0; margin-right:0;} #container {display:inline-block;} </style> <![endif]--> </head> <body> <div id="container"> <div id="header"> <h1>Fixed left flexible right equal-height 2 columns with header and footer</h1> <p>This is bullet-proof (minimize your browser window and it does not blow-up). It contains some fundamental wireframe requirements that should NOT be modified. Using percentage height attributes defeat the whole point of the faux equal height columns. This is an extremely elegant solution that Stu Nicholes created rather than using graphics.</p> </div> <div class="menu"> <div class="contained"> <h3>Left 300px</h3> <ul> <li><a href="#">option 1</a></li> <li><a href="#">option 2</a></li> <li><em><strong>option 3:</strong></em> <ul> <li><a href="#">sub-option 1</a></li> <li><a href="#">sub-option 2</a></li> </ul></li> <li><a href="#">option 4</a></li> </ul> </div> </div> <div class="content"> <div class="contained"> <h3>Remainder in %</h3> <h3>The site content comes here and needs to fill the screen</h3> <p>No faux column image. Background colors give equal height impression. Layout concept is originally from a Stu Nicholes idea. This column is not floated for modern browsers, IE7 and above, but it IS floated left for IE6 (via conditional comment). </p> <p>You can add as much content as you like and the menu will still show equal height. Aliquam eu nibh eget diam hendrerit pellentesque. Proin ac risus metus. Curabitur ipsum ligula, bibendum ac rhoncus ut, mollis quis dolor. Proin lorem est, venenatis nec pellentesque eget, dignissim vitae nisi. Pellentesque ornare dignissim tempor. Sed elit sapien, pellentesque quis accumsan eget, vestibulum a sapien. Aliquam at consectetur odio. Proin ut velit nec nunc commodo iaculis sit amet eget lacus. Donec condimentum mollis lacus non interdum. Vestibulum at lectus lorem.</p> <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p> <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p> </div> </div> <div id="footer"> <p>Footer clears the ".menu" class here by using "set a float to clear a float". (In IE6 it clears ".content" class). </p> <p>If adding a third column, float it right, remove the footer float and set a simple "clear:both" element. </p> </div> </div> </body> </html> This was based on an amazing 3 column technique by Stu Nicholls at cssplay. various 3 column equal height, liquid/fixed layouts Good luck, David P.S. For what its worth - my liquid project experience: Creating a professional, practical, nice looking, liquid website for business is extremely hard. I set out @ 2 years ago to make a 100% liquid Real Estate Company website. EXTREMELY challenging and I was told it couldn't really be done. I specialize in Real Estate sites, so I know the challenges - fixed sized photos, search listing results requiring 5 or 6 multi-column boxes side by side IN ADDITION to the wireframe's columns, and other issues ... all generated dynamically. The thing is, you have to get used to creating a text-only liquid wire-frame, first. And all of the techniques out there are based on text only wire-frames. Then, as soon as you start to add graphics or photos or media .... WHAMMO!! There goes the layout. And that's where you have to start making choices and settling for less than perfect. I've come close, it scales perfectly on high resolution widescreen monitors (1280 x 1024 or higher) down to medium resolution (1024 x 768) but it does very well at low res (it gets wonky at an 800 x 600 and lower resolution - which of course is what our firm's CEO has his monitor set at). Since IE6 doesn't have a min-width, the layout doesn't hold up well when the browser window falls below 700px wide. But, for the most part, I achieved what I set out to do. The site is liquid, elastic, holds up in high res, and only has problems in IE6 when the window is minimized below 750px wide. I could continue to tweak it and change things every day if I had the time. And some day soon will come back to it clean up the design. I used the old "non-graphic rounded-corner technique" to emulate rounded corners, which looked fine in a fixed layout, but don't look as good when liquid. Another difficulty is that I used a form search on the right column, there is only so much styling you can do with form elements ... by default these are for the most part controlled by the browser AND platform - like scrollbars - and may look different in Safari/Mac, FF/WinXP, IE7/Vista, seamonkey/Linux! NYCRealbroker
  2. Just a quick comment about the clearfix. Like you, I prefer using a "clearfix" solution for clearing floats. However, you're using the old way originally intended to work with IE 5/Win, IE 5/Mac and IE6. Instead of creating a whole new select item called .clearfix (and adding yet another div in your markup), just add the existing class or ID that you want cleared to it, like so: #header:after, #footer:after { content: "."; display: block; height: 0; font-size: 0; line-height: 0; clear: both; visibility: hidden; } /* target IE6 HasLayout trigger*/ * html #header, * html #footer { height: 1%; } /* target IE7 HasLayout trigger*/ *:first-child + html #header, *:first-child + html #footer { height: 1px; }
  3. How about a fixed left, liquid right, equal height columns, fully elastic text, compatible in all browsers incl. IE6? <!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Fixed left flexible right equal-height 2 columns</title> <style type="text/css"> body {font-size:76%; font-family: verdana, arial, sans-serif; background: #f0f0f0; word-wrap:break-word;} #container {overflow:hidden; background:#333;} .menu {float:left; width:280px; padding:5px; color:#FFFFCC; background: #0099CC;} .content {margin-left:300px; padding:.5em; background:#CCCCCC} .menu, .content {padding-bottom:32767px; margin-bottom:-32767px;} h1 {font-size:150%; margin:0; padding:10px 0; color:#fff;} h3 {font-size:130%; margin:0; padding:8px 0;} p {font-size:1em; line-height:1.5em; margin:0; padding:5px 0;} </style> <!--[if lte IE 7]> <style type="text/css"> body {word-wrap:break-word;} .content {display:inline; float:left; margin-left:0; margin-right:0;} #container {display:inline-block;} </style> <![endif]--> </head> <body> <div id="container"> <div class="menu"> <h3>Left 300px</h3> <ul> <li>option 1</li> <li>option 2</li> </ul> </div> <div class="content"> <h3>Remainder in %</h3> <h3>The site content comes here and needs to fill the screen</h3> <p>No fauex column image. Background colors give equal height impression. Layout concept is originally from a Stu Nicholes idea.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut ultrices sapien. Etiam aliquet ligula sed urna lobortis mattis. Aliquam eu nibh eget diam hendrerit pellentesque. Proin ac risus metus. Curabitur ipsum ligula, bibendum ac rhoncus ut, mollis quis dolor. Proin lorem est, venenatis nec pellentesque eget, dignissim vitae nisi. Pellentesque ornare dignissim tempor. Sed elit sapien, pellentesque quis accumsan eget, vestibulum a sapien. Aliquam at consectetur odio. Proin ut velit nec nunc commodo iaculis sit amet eget lacus. Donec condimentum mollis lacus non interdum. Vestibulum at lectus lorem.</p> <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p> </div> </div> </body> </html> Good luck.
  4. Axeia didn't advise using "position: absolute". No wonder the layout is blowing up. If you USE "position: absolute" DON'T expect your layout to be "flexible"! position: absolute has no impact on any other element, tag, div within the markup. No other element, tag, div, select has any impact on a position: absolute element (unless sometimes when first contained within a position:relative parent). DO NOT USE position: absolute FOR YOUR WIRE-FRAME LAYOUTS if you want it to be flexible. Learn and use floats, relative text (percentage or ems) and layoff declaring heights. If you use fixed layouts, don't set pixel heights at all. If it is a float use the clearfix to control the hasLayout triggers in IE. I recommend Dan Cederholm's "Bulletproof Web Design". It is all about avoiding exactly what happened to you. It is well worth the $25 U.S. on Amazon if you buy it via his website, "simple bits". Good luck
  5. haku is 100% (1em, 16px) correct. You can't just slap ems in place of px and expect your site to work as originally intended. The whole point is that ems are relative! They are not a fixed unit of measure on their own. They need an initial reference in the body tag. For modern browsers you can set the initial body font-size to pixels and ems will work relative to the px. However, but of course, this is not the case for IE. IE can't calculate relative sizing when the body uses a fixed (px) font-size. And as Anzeo said, the general default font-size for most browsers is 16px. But trying to calculate the relative em of 16px is a nightmare. If 1em = 16px, (which is too large for most of us to use as a default) then 1.1em would be 17.6px ... YIKES!! You would be forever just guessing and trying different size combinations all under 1em to equal 12px or 10px. .9em or .8em or even .75em? Marko Dugonjić, however, came up with both a simple solution and a web tool to help you calculate the relevant sizing. Here is the concept: base-font-size He bases it all on body {font-size:10px) for modern browsers and font-size:62.5% for IE. That way 1em = 10px, 1.2em = 12px, 2em = 20px, .9em = 9px. Now, that said - as is so often the case with css - "it isn't as simple as that". Because the font-size is not forever and globally relative to the declared body font size; it is relative to its parent element. So, unless you are an advanced mathematician, once you declare a font size for a container other than 1em, all elements within that container become relative to the new font-size. Imagine what can happen if you nest a few containers within each other but not adjust the font-sizes? Well, like I said, Marco came up with a tool called typetester that does the math for you. Some people love it. I don't have the time to play with it yet so I don't know how easy it is to work with ... I'm sure it works fine because a lot of serious pros have linked to it in their books (although I notice they don't use it). I personally just set my body font-size to "small" and have created my own visual cues for relative em sizing from there.
  6. Thanks, tarun. I always forget to check AOL.
  7. I created the gif to cycle through just once. It may be that since Mcafee internet security is slowing down web pages (performing goodness knows what scans and checks) that the gif cycles in the background while loading.
  8. In Firefox 2.0.1? I know it works in IE6.0. But since upgrading FF to 2.0.1 it doesn't (but I also upgraded my Mcafee Security Center and that puppy has caused some strange slowdowns on my laptop).
  9. sorry, forgot the link (where did the "modify" button go? http://www.bluesmandeluxe.com/ae/
  10. You make a few common but critical newbie mistakes. These are mostly thanks to Microsofts' evil influences and IE's displaying of garbage code. First (and most important) use a proper DOCTYPE and charset. If you use a proper doctype, even IE will somewhat behave and follow most web standards. Second get used to coding in all lower case. Eventually xhtml and xml will be the norm, so you may as well get used to those rules. Third use containers for your most important layout ids "divs" - starting with a container for all of your markup within the body tag. A quick recoding (@ 5 minutes) and the following is a relatively "fluid" or "flexible" webpage. This will resize the containers and fonts proportionally as the browser window shrinks: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Shane's Home Server</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> <!-- body { background-color: #000000; font-family:Arial, Helvetica, sans-serif; font-size:100%; width:96.8%; margin:0 auto; } a:link, a:visited {color:#0000FF} a:hover {color:#66CCFF} #container { font-size:1em; width:80%; margin:0 auto; text-align:center; } .Music { margin-top: 65px; margin-right:auto; margin-left: auto; width: 80%; height: auto; background-color: #989898; border: 1px solid #66CCFF } h1 { font-family:Verdana, Arial, Helvetica, sans-serif;font-size:1.5em;color: #FFFFFF} .pageTitle {color:#D0D0D0; font-size:1.1em} .formfield {border: 1px solid #66CCFF; background-color:#CCCCCC; color:#333333} --> </style> </head> <body> <div id="container"> <h1>Welcome to Shane's Home Server</h1> <div class="Music"> <form action="Music_Upload.php" method="post" enctype="multipart/form-data"> <h2>~~~~Music~~~~</h2> <p><a href="Files/Music/">-View music-</a></p> <p>Upload Music - Song</p> <input name="file" type="file" class="formfield"> <br /><br /> <input type="submit" name="submit" value="Upload"> </form> <!-- close Music --></div> <!-- close container --></div> </body> </html> Cheers. Dave
  11. It would help to see the rest of the css. If you are using all "absolute" positioning, then there is no telling what your box is in relation to and how changing it will affect the whole layout.
  12. For some reason, my animated gif background image stopped working in FF (2.0.1). Interestingly enough, I can't find any css info on "background animated gifs". When I view "tools/page info/media/http://bluesmandeluxe.com/ae/085/eyea.gif" it animates just fine. This site was a challenge in the first place and I didn't want to put the gif in the markup (although I have a feeling that's the recourse here). I HATE that it works in IE. Anyone familiar with the rule regarding background animated gifs?
  13. OH BOY, are you in for a "fun" ride. LOL! IE 5.2x for Mac? ROTFLMAO! :P You really need to take a few days to get your head around the wonderful world of various IE version nightmares. You will soon understand why the web developer world HATES MS with such an unbridled passion. The best place to start (and be prepared for your brain to explode a few times from the massive attack of getting around the malichious beast known as IE) is [url=http://www.positioniseverything.net/]http://www.positioniseverything.net/[/url] The IE vs Standards section is particulalry eye watering. The only way I have finally gotten around all the bugs of all the IE css layout issues was to create, find, beg, borrow, steal, buy layouts that work (carefully hoard them and use them as templates for ALL my layouts).
  14. [code]You'll want to work with percentages rather than pixels if you want the your layout/div to fit in all screen resolutions. Wow, what a "duh" moment... Thanks for the quick fix[/code] Whoa! That isn't a quick fix by any means. wildteen88 was just telling you that in order to have a "flexible" aka "floating" layout that will auto adjust for any screen res, you have to use percentages for ALL non-fixed sized content. Photos and graphics with text and/or pictures are fixed pixel, while layout divs, tables, background simple graphics and text fonts are flexible. There is no point having your layout auto adjust if the fonts are fixed and vice-versa. And that's where using "em" instead of "px" sizing for fonts, margins, padding, etc is usefull because ems can be easily tweaked to be "just a smidgeon bigger or smaller". BUT, that can also be tricky if you don't understand css (and drive you nuts!) because the em size is relative to the font size of the div it is in (not the body font size). % sized fonts, margins, padding, are better for beginners to use instead, until they get more comfortable with non-table layout. It looks to me as if you code specifically for IE, judging by the use of an IE expression within your actual style. This will not validate and may cause strange things in real browsers because "left, right, top" is a positioning element meant to position your div the designated distance, respectively, from its container for relative positions or for absolute positions the browser window itself - well, except if the absolute position div is placed within a relative postioned container div, then the absolute "left" designation will be spaced relative to the relative positioned div left boundry - LOL, if you don't know css and/or that totally just confused you, sorry :) Actually, I now see a few things in your css that may be dangerous for cross browser rendition. Flexible layout can be a real tricky thing to do if you are not familiar with css and IE hacks, because every version of IE (including 7.0) will handle flexibility (boxes, floats, absolute positioning, margins and paddings) much differently than real browsers. Specifically, spacial distances for positioned elements and ALL block level tag elements (lists, paragraghs, blockquotes, headers). But this doesn't help you solve your issue. Yours is MUCH trickier because you, in essence, want to have a non-fixed-height "positioned" div that scrolls down any overflow within a table cell, that will now also have no fixed height. Usually we specify a visible height so any initially hidden overflow scrolls. After playing with it I found that either a fixed px height or an em height works - This was something of a challenge to me because I've never tried using a flexible overflow before; it gave me a hard time using percentages for the height. But after playing, I was able to easily designate an em instead of px or percent. You have to use a position:relative div in your scrollable cell. and place that within the right columned table cell. So, using an old (poor html) form I had lying around, I was able to get it to be flexible (an inelegant, markup messy solution, that can be done without the table). [url=http://www.bluesmandeluxe.com/ae/flexscroll.html]http://www.bluesmandeluxe.com/ae/flexscroll.html[/url] Feel free to grab the source code. I stripped away the old form actions and validations so it is just a broken dummy form for effect. here is the css (I didn't use css "shorthand" since you are a beginner): [code] body { font-family:Arial, Helvetica, sans-serif; font-size:100%; color:#333; background-color:#FFFFFF;} #container { /* everything goes within this div*/ width:100%; height:100%; background-color:#FFFFFF;} table { /* this is your control table for the left/right cells - unless otherwise specified, all tables will use this body level tag command */ width:95%; border:none; padding:0; background-color:#FFFFFF;} .td1 { /* left column class style */ width:25%; height:100%;} .td2 { /* right column class style - I like to keep 1%, 1 px, etc shy of making the 2 a full 100% */ width:74.99%; /* I like to keep 1%, 1 px, etc shy of making the 2 a full 100% */ height:100%;} .tr1 { /* This class controls how the left cell behaves and is for the left cell data - all visible */   position:relative; width:95%; height:100%; top:0px; left:1px; visibility:visible; overflow: visible;} #content { /* This class controls how the right cell behaves and is for the right cell data - scrollable */ font-size:85%; position:relative; left:1px; width:90%; height:30em; /* This is the crucial bit - you can use a fixed height like "300px", or an em - I couldn't get it to work using percentages */ top: 0px; visibility: visible; overflow: auto; /* I leave this up to the browser so I can debug any mangling by an IE version */ background-color:#FFFFFF;} #content table { width:90%; color:#666; background-color:#FFFFFF;} [/code] Here is the html structure: [code] <body> /* open container */ <div id="container"> /* open main table */   <table>     <tr>       /* apply style to left cell */<td valign="top" class="td1">       /* open left cell container div */ <div class="tr1">           <p>non scrolling content</p>           <p>The font size is 100% </p>         /* close left cell container div */</div> </td>       <td> /* open right cell container div */ <div id="content">           /* open new table within right cell*/             <table width="100%">               <tr>                   <td colspan="5" ><your content in a table</td>                 </tr>               </tbody>             /* close new table within right cell*/ </table>   /* close right cell container div */      </div> </td>     </tr> /* close main table */  </table> /* close container */ </div> </body> [/code]
  15. overflow in general is apples and oranges for IE and proper browsers. overflow:auto is a nightmare in IE. Many coders use overflow:hidden and overflow:visible as actual IE hacks to get IE 5.0.x and 5.5 to tame the IE "double margin bug" and the "expanding box bug". What you most likely are looking for is the "overflow:auto" element along with the "visibility" feature of an absolute div (aka "layer" in DreamWeaver). On its own it has no reference points other than what you want the browser default to guess at (and you never want to leave it up to IE to guess). BUT, used in an absolute positioned div it tells the browser how to guess. Example - what I did here was to put a table based form within an absolute positioned div, http://www.manhattanapts.com/forms/r_lwu.php : Here is the css I used. The div should be wider than the table, but the table must be longer than the div. Then designate how much of the div you want to be visible with height and when you specify overflow:auto it adds scrolling up and down for visibile table height (you can do the same with width by making the table width wider than the div width. #form { position: absolute;         top: 108px; width:515px; height:450px; margin-left: 215px; overflow: auto; visibility: visible; border-color:#ccc; border-style:solid; border-width:thin; left: 0px; top: 110px; }
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.