dbrimlow

No, don't copy the whole css just to make it work in IE and recreate the proper css for valid content. It needs to be the other way around. Remember, if it works in IE but NOT in FF, then there is most-likely a flaw in the layout concept. Conversely, if it works in FF, but not in IE, then you only need to tweak a few commands to make IE behave. The point of using css is to make the web page cleaner and leaner, reducing the amount of page "weight" for faster and more efficient download and reduce the amount of bandwidth each page uses up. If you just copy your css to ie-only.css, THEN create another whole new css file, you have doubled the page weight (everything a page uses as a resource is part of the page's weight, external files, jscript, markup, graphics, etc.) The trick with using "IE conditional comments", is that the css it points to (for use with any IE), does NOT contain ALL of the same commands as the main css including any modifications. It ONLY modifies the portions of the main css commands necessary to get IE to behave - sort of like using the old "hacks" within a css. For instance, I have a page that uses a main css where most of it works in IE, except for the margins of two container items. My ie-only.css file just contains two lines, an ID and a class, and it doesn't copy ALL of the commands for them, just the one or two that IE requires. Here are those two items within the main css file, with all commands: Now here is the complete ie-only.css file, that just modifies the commands necessary: #header { margin:0 0 10px 0; clear:right } .content { margin:5px 0 0 10%} Notice the only changes in #header that IE needs is to use a top margin of 0px instead of the main css of 1px, and it clears any floats to the right of it. Otherwise, all other commands for #header from the main css work fine in IE. The only change for my .content for IE is the left margin of 10% instead of 5px, it is a MAJOR change. And one would think, "whoa, how do you go from 5px left margin in real browsers to 10% in IE!!!" Welcome to the wonderful world of IE 6.0 and floats. ******************** For your page, the whole structure is wrong, the problem is with the header and menu. They don't work neatly with the other elements. The killer is the way the menu is set up. It creates too large of a block when used with the ul and li commands. What you are trying to do is called a "tab" menu. Here is a cool article and sample on how to do this http://www.alistapart.com/articles/slidingdoors/ And of course let's not forget the master at list-o-matic: http://css.maxdesign.com.au/listamatic/index.htm Look at how they do it.

Don't go posting it there yet! LOL! You NOW have 14 errors in your markup! FONTS!!! Oh, NO you DIDN'T use FONTS in your markup! Shame on you. Seeing font tags within an xhtml markup page is like seeing old round cast iron cannon balls stacked up next to a state-of-the-art, laser guided, self-propelled 155mm Howitzer! NEVER use font tags. That's the whole point of using css. Here, try this: <div class="leftb"> <h4>Welcome!</h4> <p>Welcome I have completely remodeled the web site from inside out. Please feel free to sign up and contact me about anything. I am still doing some work on the web site, so do not be surprised if your account has been deleted.</p> <p class="center">-Lamez (James Little)</p> </div> Now, code your style sheet to make any "font" size, color, type changes: p.center { text-align:center } Also, I hate to say it, but this design is extremely unstable because of the way you made the div.logo and div.menu items. You use both #wrapper and div.top with no css commands (they aren't even in the css). I've been playing around with it for an hour or so to get it cross-browser compatible, but I had to stop myself because I was changing the entire css. It can be made to work in IE, but not FF. And that means something's broken. Remember, FF is a real browser that is web standards compatible and IE isn't. So the key is to get your design working properly in FF first, then just make some adjustments for IE. It is far, far easier to use a separate IE-only.css that has only a few lines to modify the widths, heights, left, right, margins and paddings. Then call it in your head tag using an IE conditional comment, like this: <link rel="stylesheet" type="text/css" href="style/default.css"/> <!--[if lt ie 7]> <link rel="stylesheet" type="text/css" media="screen,projection" href="IE-only.css" /> <![endif]--> </head> <body> Any version of IE up to and including 7, will call the IE-only.css file and use the commands within it to over-ride the same commands in your real css file.

You see? Once you fix any error (either in your markup code or your css code), debugging layout is easy as pie. A little trick you can use to cover the space on the left is to create a gray box 22px wide and 20px high and use position:absolute. A quick guess at positioning would be left:0; top:120px.

Your css has errors. This will throw off everything. Fix the errors, THEN debug for layout. bad syntax. Change to: background-repeat: repeat; bad syntax. Change to: background-color: #cbcbcb; no such animal. Use either auto, 0, px or % a:active is out of proper order. You can't include it here as a shortcut. It MUST be defined AFTER a:hover. And stay consistent, use lowercase for your "color" command. You should also avoid using font-size: "large", "medium" or "small". When you do this you totally lose control of your sizing. Use em or %. Set it to 100% in your "body" tag, then adjust up or down when you want it larger or smaller like this: "font-size:90%", or "font-size:.9em" The tag <center></center> is deprecated. Use a proper text block container like paragraph or list for text and style it in the css for the specific element you want to use it in: In the css style the p tags like so: .box p{text-align:center} Fix these and the layout is an easy fix (right now your menu is pushing down the left column and creating the space).

Just give us an example of what you want to do. What you ask is too abstract. The css cannot even begin to explain what you are attempting. Show us an html example.

What you are asking for is an advanced css technique that requires some understanding of how the background of an block/box works. Moberemk gave you an advanced solution. But he can't just give it to you, without you understanding what it is he proposed. But he (we) is guessing as to what it is you are actually asking. Can you show a sample? You already showed a solution. Use repeats. Try to "tile" the image without limitation: background-repeat: repeat; The above will repeat it both width and height for the full size of the column (whatever size it is).

The sample I posted was NOT intended to do what you wanted ... I didn't know what you wanted. It was just to illustrate how position:absolute and position:relative work. Know that we know what it is you ARE trying to do, it is easier to help. What is needed is to make a container to force the absolute positioned elements to be relative to the container and NOT the window. The key to correctly styling layout is to put everything within its proper containers. If you are trying to use positions and floats to create boxes or columns, create a main container to hold them. AND! Don't leave text dangling in the middle of a box ... text needs to be contained within a block element (paragraph, lists, etc.) So here is <!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=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> <!-- #container { position:relative; width: 160px; height: 300px; } --> </style> </head> <body> <div id="container"> <img src="http://website.com/image.jpg alt="1956" /> <p style="position:absolute;left:40px;top:100px;color:#FF0000;font-weight:bold">X</p> <p style="position:absolute;left:10px;top:20px;color:#FF0000font-weight:bold">X</p> </div> </body> </html> Now. By giving the container "position:relative", you can use "absolute:positioned" blocks within it ... absolute positioning will then be relative to its containing block. Another crucial part is to set the width and height of the container. Use your map image's size to guide the container size. Actually, you would then be able to even optimize your page's weight by including the image as background for the container instead of putting the image directly in the markup. This will make it simply download once into the users cache, instead of re-downloading on every page. You would do it like this: #container { position:relative; width: 160px; height: 300px; background:#000000 url(http://website.com/images/image.jpg) top left no-repeat; } Of course, change the width and height above to whatever the map image size is. And if you add any margins, paddings or borders ... remember to increase the width and height of the container proportionately so the image will still view in its entirety. Now, you can copy and paste the container ID div (including everything within it) in the proper flow of your markup, without having to worry about the absolute items aligning to the window. This will do what you want. Good luck, Dave

First, fix your image style. It goes AFTER you define the image source - exactly the way you would define the native image style - height, width and alt tags. Now, it isn't clear what you want this to do. Where do you want the Xs to be relative to the image? It SOUNDS to me like you are seeking an alternative to "position:absolute". Position:absolute takes the element OUT of the normal linear flow of the html and positions it exactly where on the page you are telling it to be (relative to the window), that's what the "left:220px;top:492px" is doing ... placing the element EXACTLY where you want it on the PAGE (regardless of where it is in the html). "Position:relative", however, places the element WITHIN the linear flow of the html and relative to both the containing element (left and right) AND the element before it (top and bottom) . So if you have something like: <!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=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> <!-- #container {width 160px; height:300px} --> </style> </head> <body> <div id="container"> <p style="position:relative;left:25px;top:10px">something or other</p> <img src="images/1956.jpg" alt="1956" style="position:relative;left:10px;top:20px" /> <p style="position:relative;left:10px;top:10px">X</p> <p style="position:relative;left:10px;top:20px">X</p> </div> </body> </html> The first paragraph is 25px to the left of the container and 10px from it's top. The image will be 10px from the left of the div container and 20px below the first paragraph. The second paragraph will 10px from the left of the div container and 10px below the image, The third paragraph will be 10px from the left of the div container and 20px below the the first "X". Copy and paste my sample code and play with the spacings to see what I mean. NOW, change the last two paragraphs to "position:absolute" and you will see how they leap out of the flow of the html and position themselves "relative" to the actual browser window. In Macromedia (dreamweaver, flash) absolute position elements are called "layers" because you can put one on top of another (like changing the page from two dimensional to three dimensional). Hope this helped you to understand. But again, without knowing what you want the Xs to do in relation to the image, I can only show you how they act using "position" types. It may be that what you are attempting requires a different style technique altogether, like "float". Dave

Before debugging how your code LOOKS, make sure you coded it right. If it doesn't work in FF but does in IE, always assume something is wrong either within your markup or your CSS. In your case, it is clearly in your markup ... you didn't close your nested list items. <ul id="main_menu" class="jd_menu jd_menu_slate"> <li><a href="#">Home</a></li> <li><a href="#">Products</a> <ul> <li><a href="#">Sigma Reactor</a></li> <li><a href="#">Project Mayhem</a></li> </ul> </li> <li><a href="#">The Team</a></li> <li><a href="#">Forums</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Register</a></li> </ul> I didn't go beyond that as soon as I saw it, so I don't know if you have css issues as well. Altogether, your markup has 12 total errors (most related to the non-closed list tags). Use the w3c validation tool before debugging how your site LOOKS. Get the code right and it will save you hours of frustration: Here is a link to your site's w3c validation: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.kaizendigital.com%2Findex2.php

Everything you ever wanted to know about crafting perfect lists using css is at "listamatic". Also, when done with lists, check out the Selectutorial and the floatutorial. Many of us Pros still go back to maxdesign every so often for a refresher. http://css.maxdesign.com.au/index.htm Dave

The multiple ul elements is for styling a nested list. for example this is a 3 level nested list: <ul> <li>first list item before the first nested list <ul> <li>first nested list item</li> <li>first nested list item before second nest <ul> <li>second nested list item</li> <li>second nested list item</li> </ul> </li> </ul> </li> <li>something continues the initial list</li> </ul> To style the second and third nested lists differently you use: .stylelist ul {color:#000000} .stylelist ul ul {color:#800000} .stylelist ul ul ul {display:block; background-color:#000000; color:#FFFFFF; list-style-type: disk outside;}

Let's not forget Roger Johansson's, "456 BEREA St" [url=http://www.456bereastreet.com/archive/]http://www.456bereastreet.com/archive/[/url] Blog where Professional css writers, gurus hang. Archives of superb articles, very cool "Lab", etc

Here you go. Roger (one of the most respected pros in the biz) both explains how it is done, then shows you how it is done, then provides the css for how he did it. http://www.456bereastreet.com/archive/200410/styling_even_more_form_controls/

LOL! True. FrontPage has an awful html view editor, so it almost forces the user to use the display view. I think it does this to discourage people from ac5tually seeing the skunk it writes. And since Microsoft couldn't care less about standards (in fact consistently being arbitrarily anti-standards in its browser) it stands to reason that FrontPage would generate proprietary code that only works in IE. But, carefree, there is still hope. Go to the w3c validation tool http://validator.w3.org/. Then, one by one, fix all the errors it shows. THIS will also teach you proper coding by default. Because while the tool identifies the error, it isn't always clear WHY you got the error.

I suppose as soon as I realized I'd spanned a header, I KNEW it wasn't tabular data anymore. I can most likely make a shaky case for spanning rows. But Andy put it into the best perspective. Accessibility was the first reason why tables were frowned upon as a layout technique.

Okay. This has been bothering me (and your other problem, as well) so I took a few minutes to fix your html and css. It now works fine in both FF and IE 6. Remember this, if it works in IE but NOT in FF, then there is a problem with either improper html or improper css. If it works in FF but not IE, then you just need to tweak a few things and not actually fix them. Both of your issues were relatively easy fixes. Your problems were both in your html and your css. First, the html changes (I added extra tabs in the content text code so it would not scroll too far in this post, you should remove them if you copy and paste the code: <div id='faux'> <!-- I changed <b> to <strong> since you are using xhtml, and I removed the two wasted <br /> tags, break tags AFTER text don't work the same across browsers, just adjust your css padding or margin for the same effect --> <div id='content'> <strong> Will your game be remembered forever?</strong> The aim of Warptweet.com is to become the largest database of flash games ever created to date, while keeping them safely hosted on our servers for the decades to come. This way, todays modern games will be played and enjoyed by all for the years that have yet to pass, allowing you or your group of flash game creators to have your games remembered, <strong>forever</strong>. </div> <div id='right'> <!-- I put image into a link container - removed improper tag "<center>" --> <ul> <li><img src="images/fpnoicon.jpg" alt="Ninja Stars" /></li> <li><a href='#'>Ninja Stars</a></li> </ul> </div> <!-- close id "faux"--> </div> Now for the css fixes: /* changed overflow:auto to overflow:hidden */ #faux { margin-bottom: 10px; overflow: hidden; width: 100% } /* If you list a:link, a:visited - you must ALSO list a:hover, a:active - in THAT order - LVHA = LoVe HAte */ #nav-top li a:link, #nav-top li a:visited { color: black; font-size: 120%; text-decoration: none; } /* created a:hover and a:active to work with above */ #nav-top li a:hover, #nav-top li a:active { color: black; font-size: 120%; text-decoration: underline; } /* This needs to be floated right to align properly */ #right { background: #B2D95E; padding: 10px; min-width: 125px; float:right; } /* set the bullet "list-style-type" for any list item */ #right li { display: block; list-style-type:none; padding:0 10px } a:link, a:visited{ text-decoration: none; color: black; } a:hover, a:active{ text-decoration: underline; color: black; } You've been fighting too hard with this simple layout. In future, get it working correctly in FF before adjusting things for IE. Cheers, Dave

<ul> <li class="letter"> <p style="text-align: left">A </li><li> <p style="text-align: left"> <a href="games.shtml"> <font color="#000080">Games</font></a></font><font color="#000080" size="2"> </li> </font><font color="#000000" size="3"> <li> <p style="text-align: left"> <a href="games.shtml"> <font color="#000080" size="2">Games</font></a><font color="#000080" size="2"> </li> </font> I don't mean to sound rude, and I understand you came here for help ... but this is a scary mess and well beyond your initial question. And it just helps to illustrate why using CSS is so crucial. So it's good you showed the code. Your whole page is a mess of old code, conflicting styles and bad code. And what proves you want to understand it all was your use of the word "CLEAN" here "..way to display clean <li> With a common text font and colour??" You don't need to learn "<divs>". You need to learn HTML and CSS. <div> is just yet another tag. Like <p> or <li>. But you DO need to learn HTML. This code is really bad. It looks like it was generated with either an old version of Dreamweaver or some other off the shelf editor from 1997. The code uses attributes of an old, no longer valid version of HTML (either 2.0 or 3.0). With all those fonts shotgunned willy-nilly all over the place, how can you possibly confirm if your actual mark-up is correct? Because it isn't. Which is why you are fighting to get the link styled. Always begin with structure first, add styling later. Because without a correct structure all the styling in the world will only display the mess in vivid color -and trying to debug with all that style junk in the way is a chore. So, first, let's strip away all the styling attributes and "font soup" . Now let's look at what you have: <ul> <li><p>A</li> <li><p><a href="games.shtml">Games</a></li> <li><p><a href="games.shtml">Games</a></li> This is just wrong: 1. you opened the <ul> tag, so close it when you are done with it </ul> 2. a list item is a "block level" tag ... so is a paragraph ... block level tags don't play well together. Lose that errant <p> tag... it doesn't belong in a list. The LIST is what holds the text. Paragraphs and list are two different animals that do two different things with text. 3. However, whenever you DO use a paragraph ... close it <p>buncha text</p>. Here is your code fixed: <ul> <li>A</li> <li><a href="games.shtml">Games</a></li> <li><a href="games.shtml">Games</a></li> </ul> Okay. Now. Without you having shown us your css, we can't see what styles your class "letter" uses or what it is intended for. You have so many conflicting font sizes and colors throughout the list, that it is hard for me to tell which you wanted for the text in the list. You give your table a font-size of 8pt!!!?? Never use points for font-size; the font size "2" or "3" scattered throughout is OLD code (HTML 3.0 or less). Either use "px", "percent" or "em". Since percent and em requires more skill, let's use px. The old font-size "2" can (very roughly) translate to @ 10px or 11px. (I don't know if it will work because you tell your table to use a tiny size of 8pt) but since you are not working with valid code, it may work. Copy this and put it on your page just before the </head> tag. <style type="text/css"> <!-- .category ul li { color:#000080; font-size:10px; } --> </style> Now, change your ul as follows: <ul class="category"> <li>A</li> <li><a href="games.shtml">Games</a></li> <li><a href="games.shtml">Games</a></li> </ul> It should work, but your code is so bad and the conflicting fonts and style junk all over the place so rampant, it may simply be overwhelmed. Good luck, When you want to begin learning proper html and css, here is the best place to start (it makes it all easier to understand by putting it into proper perspective) http://css.maxdesign.com.au/selectutorial/ Dave

Okay, this one is for the advanced HTML/CSS mavens here. When we talk about using tables in our web pages, we all know that using them for LAYOUT is wrong, and using them for "tabular data" is right. I've created a few real estate sites and have used floated boxes (with fixed sizes) to display the results of a search query. While it works, it only works using fixed widths and heights to keep the boxes equal in width and height. I've been trying to create a "liquid AND elastic" design that would let me have cross-browser "equal height boxes" (the IE bane of us all ... but SOMEONE will eventually figure it out, so I've tried). But today I realized something ... the search query results IS tabular data! So, I am now trying to decide if using a table to display the results portion of the query is, in fact, proper. My full-time job is web admin for a huge real estate firm. I have slowly been converting the site to valid css over the past two years, and am now ready to plan out my search query results page (currently validates HTML "transitional", yet uses deprecated markup and is totally table based layout). When a user searches for an apartment, they enter in their search criteria (price, location, size, etc.) The results page displays all of the apartments that meet this criteria - starting from highest price to lowest ... and this is the result: That looks like tabular data to me! There are some column and row spans. And that's where I am unsure of the legitimacy of using a table. The photo spans three rows, but is clearly the data for the "PHOTO" column. The "details" link in the "LISTING#" column is not part of the database data - although it is directly related to the listing# and links to the full page of that listing#. The "add to inquiry" link is also "related" to "CONTACT" since it adds the record to the email that requests more information. The one that is clearly in question, however, is the text description. While it falls within the three rows that make up the column for "location / description" it spans into the "PRICE" columns. In order for the tabular data record to be legitimate within a table, does: a. each record have to comprise one table row? b. have no fields span two columns? I can't get a clear answer when I google it. Dave

The answer to your question is "no". You cannot have more than one action and/or method within one form tag - so having one submit perform multiple tasks is moot. HOWEVER! What TM was getting at, was to be creative in your coding of your processing page so it will perform specific tasks based upon what data the variables submitted to it contain. If a variable contains "W" data, do "X" output, if it contains "Y" data do "Z" output. Here is why it cannot be done as you ask: As you know, a form is an enclosed "tag" <form></form> It contains specific instructions for THAT and only THAT tag, such as: "method='post or get'" and "action='somepage.php'". It then contains "input" elements for which you assign named variables to contain data inputed. Then it uses a "submit" element to pass data contained within named variables to the processing page - that was specified in the "action='somepage.php'. The form then terminates with a closing tag. So <form method="post" action="somepage.php' target="_new"></form> is a closed tag only allowing one method, action and submit. It passes the input variables to one page for processing. It is in coding your processing page, as to what to actually DO with the data contained within the passed variables, where the skill and focus of php becomes flexible and quite powerful. Now, IF you happen to be trying to use one form to access TWO different databases, with different named variables that are incompatible, then you simply have no choice but to use two different form tags with two different actions (processing pages). I actually have this situation in my full time job. I administer a Huge real estate website. We have one database for apts for sale, and a completely different DB for apts for rent - the table structures for the databases are completely different. I cannot have one processing page interpret two different sets of posted variables at the same time, open/close both databases and perform advanced select queries on both based on the posted variables. Although, I CAN perform a limited query for some posted variables that may have fields in common between databases. But I would have to make it a generic "negative check. For instance, both databases have "Listing Numbers" that use 6 numbers; our Sales database uses a range of numbers that starts with 5 (eg: 512345) and our Rentals database uses a range of numbers that start with 9 (eg: 912345). So I have a "search by listing #" form on our home page with an action that goes to our sales database processing page. It does a quick check on the data within the variable and if it the first number greater than 5 it closes and switches to the rental database processing page. THIS IS NOT RECOMMENDED! LOL! There are so many things that could mess this up. What if our company needed more number (7 instead of 6)? What if we needed a new set for sales to start with 6 (because we had over 599999 listings)? It is inefficient, but it illustrates how one form can control the output from two different databases depending upon the data within the variable.

close your "a" tag.

#footer h1 { margin:0; padding:0; font-size:1em } That will make your heading act as any other generalized text within the id. Because <span> is not a tag level block element ... it is a styling element only. And it should only be used when you need to make a styling change within a pre-styled element, that just "spans" a few words. Like this. <div id="footer"> <p class="copyright">copyright © 2007 <a href="#">DBrimlow</a> | All Rights Reserved | <a href="http://validator.w3.org/check/referer">Valid Xhtml </a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a></p> <p>For more information about <span class="redstyle">"Using Span Within a Tag"<span>, just ask Dave.</p> </div> Now, I did a few things to show you how styling affects the "page weight" of your document. First. The key to perfect page markup is keeping it lean and clean. You want your page to load as quickly as possible. Adding and/or repeating code is like a chubby 10 year old eating yet another canoli ... the page bloats proportionately and the needle on the scale rises. It is tough enough that your graphics will be trying to cram themselves into the users cache as quickly as possible without the markup and the css jamming up the works with bandwidth weight bottle-necks. The code and css is under your control, help it to sprint ahead and let the graphics ease their bulk into the cache without competition. SO. Notice my footer. First, I already have styling for the footer ID. And, I have styling for my body <p> tags. So I want to make a special styling in the footer, so I use <p class="copyright"></p> all the class does is alter the padding & background color for one certain paragraph. Then I go back to the simple <p> tag (because I already have it styled in my css, as well as any font changes within my footer styling). BUT, I have a short little "span" of words that I want to use a certain class style ( "redstyle") for all such events, whenever they occur on the page ... and have used it a few times, on just short little "spans" of words within the page. Hence the name of the element ... SPAN. It is used to span a few words within a pre-styled element. Damn. I took a long road to say that! LOL. Dave

Yeah, csszengarden was the site that made most of us realize how powerful css really was.

We are talking about different things. We are talking about two side by side boxes. Each with a red border and yellow background. Let's say the left has 10 lines of text, the right has 7 lines of text. The two boxes will not stay equal heights unless they are provided with a fixed height setting. Unlike in a one row, two column table, where the right will auto stretch to equal the left regardless of the content. Here is an example - try this code in both Firefox and IE 6.0 (I never looked at it in IE 7). In Firefox you will see three equal height boxes with varying amounts of text in each. In IE, you will see one big box containing three unequal height boxes of the text: or, here is a direct link to he following page look at it in FF and IE 6 http://www.456bereastreet.com/lab/equal_height_ii/ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Equal height boxes with CSS, part II | Lab | 456 Berea Street</title> <style type="text/css" media="screen,print"> /* Layout rules */ .equal { display:table; border-collapse:separate; } .row { display:table-row; } .row div { display:table-cell; } /* Styling rules to make the example look nicer */ html,body { margin:0; padding:0; color:#000; background:#fff; } body { font:76%/140% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; } .equal { margin:10px auto; border-spacing:10px; background:#898B60; width:600px; } .row div { background:#fff; } .row .one { width:200px; } .row .two { width:200px; } .row .three { vertical-align:middle; } .row div h2 { margin:0 0 0.5em 0; padding:0.5em 10px; font-size:1.2em; color:#fff; background:#595B30; } .row div p { font-size:0.94em; margin:0.5em 0; padding:0 10px; } #labfooter { text-align:center; clear:both; } </style> <!-- Some rules to make IE/Win display the boxes with variable height. --> <!--[if IE]> <style type="text/css" media="all"> .equal, .row { display:block; } .row { padding:10px; } .row div { display:block; float:left; margin:0; } .row .two { margin-left:10px; } .row .three { width:160px; float:right; } .ieclearer { float:none; clear:both; height:0; padding:0; font-size: 2px; line-height:0; } </style> <![endif]--> </head> <body> <div class="equal"> <div class="row"> <div class="one"> <h2>This is a box</h2> <p>This box has less content than the one next to it, but both boxes will still have equal height. No background-image trickery.</p> </div> <div class="two"> <h2>This is another box</h2> <p>This box has more content than the others. If all boxes were table cells, the cell with the most content would decide the height of all cells. It works like that here too, but this is not a table.</p> <p>Instead, display:table, display:table-row and display:table-cell are used to make divs behave like table cells. Excellent. Too bad it doesn’t work in you-know-which-browser. It does, however, work in modern browsers like Mozilla, Opera, Safari, Firefox, OmniWeb, Camino, and Netscape. IE gets alternate CSS rules to prevent it from destroying the layout completely.</p> <p>Read the related blog entry for more info: <a href="/archive/200406/equal_height_boxes_with_css_part_ii/">Equal height boxes with CSS, part II</a>.</p> </div> <div class="three"> <p>This box has even less content. Anything in it is vertically centered.</p> </div> <!--[if IE]> <div class="ieclearer"></div> <![endif]--> </div> </div> </body> </html> Now this was the FIXED for IE version! It uses the "display:table" command. IE still can't bring itself to show the boxes equally, however. Here is the mess it looks like in IE WITHOUT the display:table and ie hacks - check this out in FF then IE 6: http://www.456bereastreet.com/lab/equal_height/

Calabiyau, that will not work. A background image in css will not act to force width, height like it does in a table cell ... it will just disappear and the box will resize to whatever value it has been told to. Auto Equal height boxes in css is not possible (for cross-browsers). You can get it to work in real browsers (FF, Safari, Opera), but it will not work in any flavor of IE. see http://www.456bereastreet.com/archive/200406/equal_height_boxes_with_css_part_ii/ for a fix for the real browsers. The one solution I always use is exactly what tarun said ... designate the height. BUT! Remember to include your margins, paddings and borders of any element in one box to another. What I do for "dynamically generated" data where I have no control over the amount of data being input (like in a database), is create a fixed height for the boxes and have php generate a "more" link. Unfortunately, this is one area of the cross-browser standards where IE simply cannot be forced to behave ... period. No hacks can make any IE auto-generate equal height boxes if there is no data of equal height. Dave

Okay. Now for your problem. Without really knowing what you are trying to do, I can guess (like a browser would). First, lose the all those break tags for spacing. Instead, style the p tag in that div to offer the same look. And what is "div"? You are using it as a "tag level element". Make it a class or ID element ... for example's sake, I'll make it a class. Drop the overflow and add display:inline. Now put this in an external css called IE6-only.css, and add a conditional comment to your head tag as follows: <!--[if lt ie 6]> <link rel="stylesheet" type="text/css" media="screen,projection" href="IE6-only.css" /> <![endif]--> IE6-only.css is exactly as follows, no more, no less: .div {overflow:hidden;display:inline} .div p {margin:20em 5px} In your markup change: "<td align="center"><div>" to "<td align="center"><div class="div">" or "<td style="text-align:center" class="div">" Dave