dbrimlow

Your code is not validating and your html is not properly coded. It starts out right using proper semantic markup - div containing block level tags. Then devolves into using divs and spans as text containers. In at least one case you surround a div with a span tag! DIVS do not replace headers, paragraphs and lists for containing text. You have blocks of text that should be in paragraphs but you style them using two br tags only. A break tag is meant to create a line break within a logical block level tag, it is not meant to be a "carriage" return. SPAN is meant to be used within a pre-existing block level tag - generally to temporarily reset a style for a short span of text in the middle of an existing pre-styled block. Invalid code may not render well in modern browsers, but may render just fine in IE (IE almost always prefers bad code actually). This is why most of us make sure our code works first in Firefox or Safari or Opera or any other modern browser before writing the separate CSS fix file for IE. It is far easier to hack a few CSS fixes for IE than the other way around. But, for sure, when html is invalid AND improperly coded, it will not be cross-browser compatible at all. I strongly recommend that you first validate your code and then use proper semantic markup to style and position elements as you want. Just validating the code doesn't mean it will fix your improperly coded html.

The actual old html 3.0 element - vertical-align - only works within table cells. DropFaith was on the right track. To center a block level select you must, first, always give it a width smaller than its parent select, then use margin:0 auto. What it needs is to use auto to calculate left and right margins in order to center within a parent element. It obviously will not work on a floated or absolute positioned element. You had used the letter o instead of the "number" zero "0". Position:fixed is also not advised since it, too, is not cross-browser compatible. z-index:1;position:fixed;left:0px;top:0px; is wasted since you already have width and height at 100% for the main select. "cursor:wait;" this is a dhtml or ajax only element not css. Setting the cursor in CSS is not cross-browser compatible.

Close your meta tags endings! The only difference between html and xhtml (served as "text/html") is that xhtml is strict about following rules ... close all tags. If you use a utf-8 charset, then you must NOT use non-html characters (like ampersands or quotations) in your mark-up. Convert them to the proper html chars & and &quot Using floats for wire-framing your layout is correct. However, it is near impossible to debug the css when it is in one huge line like that (how can you debug a particular select?) Also, using inline styling within your markup (without knowing css very well) is dangerous and can cause specificity problems. And with the one line main css, how can you tell what is conflicting with what? You need to take a debug approach to this and start by creating the wire-frame only. Slowly add in the menu links, forms and other content elements. As each one is added, it will show how it impacts the wire-frame and other elements already present. I spend most of my day converting old table-based code soup html to clean semantic markup css based layout. If you try to take it all on at once you will go mad! Always get the structural pieces working first.

In your css, create the background for the container using that image the same way linked-in did, as follows: {background: #fff url(/img/bg/bg_byn_box_1000x1000.gif) 100% 100% no-repeat;} This is a form of "sliding door" technique, only it uses the one image that resizes entirely to the container.

This site is a "fixed-width" layout. It's container, and all the layout graphics, is fixed at 800px wide ... no more, no less. #container { margin: 0 auto; width: 800px; height:100%; text-align:left; border:1px solid #000000; } It's margin is set at margin:0 auto - this tells the browser to use "auto" left/right margins - so as soon as the screen exceeds 800px the container is auto centered (auto default margins each side). It all depends on the width of your main container select. You can use percentages, too, if you want, like so: #container { margin: 0 auto; width: 80%; border:1px solid #000000; } Now the container will resize and stay centered (@10% margin each side) no matter how small or how wide (and depending upon content and embedded graphics of course).

Absolutely. Although they are tricky to get cross-browser compliant and require having a large bag of css tricks and techniques. This is not something that can be quickly explained in a forum. There are so many factors to a true "liquid" wire-frame layout - like using ems or percentages for fonts and dimensions (not using pixel based fonts or widths), floats, clearing floats, graphic techniques like "faux-columns" and "sliding door". One of the best books I ever bought to help with this was Bulletproof Web Design (Second Edition) by Dan Cederholm. That, along with dozens of online css professional blogs, forums and tutorials, AND hours and hours of frustration when one simple new element is added to a perfectly working frame, and collapses it like a house of cards.

You REALLY need to learn the quick basics of floats. Anyone can show you the solution to exactly what you are looking for, but it will only help you for THAT one circumstance. Without understanding the basic concepts, you will soon get confused and frustrated when you add another element to your wireframe. Here is an easy to follow online tutorial (all html) Floatutorial

Quick look, quick fix ... designate a width for ".main_content". It is defaulting at 100%

Show us the code.

Is it working in IE7 now? That one bad single bit of text that was causing the charset invalidation problem is now gone. So now that that it is validating, IE7 will honor the non-anchor hover pseudo-element. Either way, that can now be confirmed or eliminated as the cause.

I'm not clear what the issue is ... can you post a "screen shot" of the problem in IE5? However, before even attempting to debug css IE evils, it is absolutely crucial that your page validate. In your case, first let me say that your markup is extremely clean and very well formed. And BIG kudos for using an html 4.1 strict doctype! You have two issues keeping you from validating ... First, your form input elements are not contained by a proper block level tag - form elements belong within proper semantic tags - paragraphs, lists, etc.. Second, those missing "alt" tags on images can kill you every time. I NEVER attempt debugging a specific browser/IE issue until the page validates. There are enough issues IE can cause without dealing with it using its own defaults or kicking into quirks. Absolute positioning in IE will ALWAYS require a separate "IE-Only.css" called via a conditional comment (or a hack in your main css to change the positioning). The non-anchored :hover element doesn't work in ie6, so beware your naming conventions to make sure they use correct anchor syntax.

Doesn't work in IE6 and <

I can see the main issue, here. Fix your markup to comply with utf-8 coding - you are dropping into invalid compliance because of improper apostrophe character on line 157 ("One of the UK's premier Flooring"). Because of this one little issue, your charset is being ignored by the validator. This means browsers may fall into a default charset. The very LAST thing anyone wants is for IE to start using default behaviors. Get your markup validating before starting to debug or apply IE only solutions. Otherwise the page is valid XHTML 1.0 Transitional. Now, guess what happens in IE7 when the page is invalid (quirks mode)? The non-anchored ":hover" element doesn't work. Always get your page to validate before even trying to waste time debugging IE issues.

invalid code causing the problem

Simply put the menu bar inside the main content container. WHY you even bothered to slap a table there when you crafted your lists perfectly is beyond me. Lose those tables and table cells where they don't belong (for layout), you already have most of your wire-frame done right anyway. A perfect example of PROPER use of tables would be for the two rows of data below "Sailor Moon" ... THAT is tabular data. Here is the general concept of what you are trying to do: <div id="pagecontainer"> <div id="maincontent"> <ul class="nav_menu"> <li><a href="home.php" title="Home Page">Home</a></li> <li><a href="#" title="Getting Started" rel="ddsubmenuside1">Getting Started</a></li> <li><a href="creationform.php" title="Create Character">Create Character</a></li> <li><a href="#" rel="ddsubmenuside2" title="Members">Members</a></li> <li><a href="newsandevents.php" title="News And Events">News And Events</a></li> <li><a href="glossary.php" title="Glossary">Glossary</a></li> <li><a href="topiclist2.php" title="Battle Board">Battle Board</a></li> <li><a href="chat/chatframe.php" title="Battle Chat Lounge">Battle Chat Lounge</a></li> <li><a href="about.php" title="About Us">About Us</a></li> <li><a href="news.php" title="Newsletters">Newsletters</a></li> <li><a href="invite.php" title="Invite Friends">Invite Friends</a></li> <li><a href="topiclist.php" title="Discussion Board Forum">Discussion Board</a></li> <li><a href="faq.php" title="Frequently Asked Questions">FAQ</a></li> <li><a href="contact.php" title="Contact Us">Contact Us</a></li> </ul> <h2>The Magical Girl Genre</h2> <p>The magical girl genre has a rather long and important history in Japan. The magical girls of Japanese animation (or anime) are a rather unique group of characters. They defy easy classification, and yet contain elements from many of the best-loved fairy tales and children's stories throughout the world. Many countries have imported these stories for their children to enjoy (most notably Italy and Spain) but this particular genre of anime still remains mostly unknown to much of the English speaking world. </p> <table class="data"> <tr> <td>Charactor Name:</td> <td>Surino Tsukino</td> </tr> <tr> <td>Element of Influence:</td> <td>Purity And the Soul</td> </tr> </table> </div> </div> basic css layout - you want the nav menu to float left of the all semantic content - with a small right and bottom margin to provide space between the wrapped content. I also made widths and fonts relative size so it auto fits all screens: body {font-size:small} #pagecontainer {width:100%; margin:0 auto} #maincontent (width:90%; margin: .9em} .nav_menu {float:left; width:20%; margin: 0 .5em .5em 0} h2.page_title {display:block; margin:0 auto; font-size: 1.3em} .data {width:60%; margin:0 auto}

As you know with css, one thing impacts another. I would guarantee that the issue is how your tag and class/id style elements conflict with each other ... particularly if you are not declaring the styles for all "tags" and leaving it all to their "browser generated defaults". Remember, tag default styling is different from browser to browser ... particularly paddings and margins.

They wanted to be the first browser to actually be 100% css specifications compliant and pass the WASP Acid2 test. Leave it to MS to just get it all wrong again when attempting to get it right. We don't CARE if it is 100% spec compliant ... just first make "at least as" compliant as the top 4 css compliant browsers. Worry about being perfect later. So far IE8beta css is easily blow up and it is failing the Acid tests - so much for even "at least as compliant as". Only 2 browsers have passed the new Acid3 test within a month of its release this July ... WebKit and Opera. So MS will once again start falling behind in compliance while the others start jumping ahead.

The rule is this ... "If it looks good in IE, but not in any of the actual css compliant browsers, don't blame the css comliant browsers ... it's your own fault and your css is invalid".

I don't think The Film God was clear in what he meant. What he said was correct ... don't limit your classes or IDs by forcing them to be used with a tag (like, "div", "span", etc) This Means you can ONLY use it within a div: div.left {float:left;width:150px ;height:600px;background-color:#fff;} div.right {float:right;width:200px;height:600px;} div.center{width:100%;height:600px; } The whole point of css is to reduce the amount of markup code. Also, lose position:relative; It has no benefits and should only be used to force contain position:absolute elements (avoid those as well). You need to float all columns (including"center"). But, if you give them specific fixed widths and heights ... don't be confused when they don't "auto-size". The main reason your corner floats slide over the center float is because the center is not floated as well! However, even if it was, you would still have issues because of the fixed widths and heights and non-existant proper float clearing. Floats require a LOT of research, study and trial and error before using them becomes relatively easy.

Here's a link to one solution (out of many): http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners.shtml Go beyond this and make it liquid by using a sliding-doors technique as well. http://www.alistapart.com/articles/slidingdoors/

Tags, classes, IDs ... they ALL use the same css rules (hence trigger the same bugs) whenever a "styling" element is applied to them.

This is why using position:absolute for a wire-frame layout is BAD! Absolute positioning is outside of the flow of html and has no relation whatsoever to the tags, text and html in the markup ... it is OUTSIDE of the flow ... so of course it will never "auto-adjust". Also, if you ever want to have a "liquid" or "elastic"layout (that completely auto sizes everthing based on monitor window size) you need to get away from fixed sizes and positioning. You need to create a simple 2 column layout ... css layout 101 stuff. Two left floated columns. Start at the place most of us did years ago ... maxdesign.com floatutorial After that, check out all the other links and tutorials there ... listomatic will make navigation a snap.

Take a browse here: http://css.maxdesign.com.au/ This site, while a little dated, helped many of us when we first started using CSS. The floatutorial will give you a beginner's eye view of the beauty of floating elements. The selectutorial is a must learn to understand the rules and how/whys of css. And what can be accomplished using lists is mind-boggling!

Actually, TFG your are correct when you say you should eliminate extra weight in the markup ... Which is exactly why I did it this way. One should avoid "Divitus" at all costs. Style the html TAG itself, rather than surrounding it in yet another DIV container when unnecessary. In every case that you can avoid using a div container by simply adding a class to an html tag, you will have cleaner, "leaner" and properly semantic markup. For the most part "DIVS" should be limited to the layout wire-frame and out of the way of proper semantic block level tags. BUT, I think where you were going was to say that you don't need to limit the class .yellow to h1.yellow. And that's true. You could add .yellow h1 {font-weight:normal}. This will still let you avoid the extra div tags and simply apply the class to the H! tag as I mentioned before.

Try to eliminate repeating default elements that you have already set. The beauty of css is that once you set defaults , you only need to CHANGE those values when they actually differ from the default. For example, in your body tag you specify "font-family: Verdana, Arial, Helvetica, sans-serif". That sets the font default for the entire document - you don't need to specify it again. For every element thereafter, you no longer need to set the font-family (unless you specifically want it to be different than the body default). HOWEVER, if you specify a different font-family for a container, all child elements within that parent container will now use the parent font by default and you would have to specify them if you wanted to return to the body default. The same goes for color. If you set the body default to "color:#555555". All elements will use that color unless you want it to be different. The main reason for using CSS is to eliminate clutter in your markup. Using the "b" or "strong" tags in the body markup just adds more "weight" to your page. By default, headers are bold. If you want a header tag to not be bold, "specify" it in the css as follows: h1.yellow { color: #FFC600; font-weight: normal; } in the markup it will be <h1 class="yellow">HEADER</h1>