dbrimlow

What you want is to make the "link" a block - not the image. This will set the link to the width and height of the box itself. It also allows you to use the feature for an a:hover element on for the entire box (like switching images, generating borders, etc). You didn't show the link your html, it needs to be there - css is not a programming language, it just designates how things look (not act) on the page. So the "a:link" element and the "a:hover" element both only designate how those respective links look. And when you set a:hover to LOOK different than "a:link", it only gives the illusion of what a programming language does, by changing the way a:hover looks. Also, If you can, try to lose all unnecessary "divs" - keep it to the semantic h1 - h6, p, ul, ol, dl, li elements. Only toss in the extra div when you need to style multiple semantic elements within one parent container. Always think of a "div" simply as a placeholder for a group of related semantic and markup elements. So, since you didn't show the link (but used the class in the h2) we must assume you want the h2 element to use the image and be the link. So just set those elements to make the block the size of your image (replace width with the actual width). /* THE CSS: */ h2.dashboard-facilities-header a:link, h2.dashboard-facilities-header a:visited { display: block; width:100%; height:25%; background: url(../images/dashboard-facilities-header.png) no-repeat } /* THE HTML: */ <h2 class="dashboard-facilities-header"><a href="facilities.php>Facilities</a></h2> <p class="dashboard-desc">Here you can add/edit your profile that everyone can see!</p> Just remember that any deviation in the styling of actual text for the h2 element should be separate than the styling for the h2 a elements. Margins, paddings, borders, underlining, etc. all will affect the box, and therefore, the dimensions of the visible background image. You may also need to designate color or any other visual changes you want from your css defaults for those elements. Scalability is the key to well-planned css. What you want to get a small element like this one working should not cause problems later when you are using the CSS for multiple pages. Play around with it to get it working the way you want, so you will know what you can and can't get away with. The cheap and exponentially code-adding quick-fix of slapping on an extra div around the h2 is always available - but your page will become very heavy very quickly when you cheat by using divs. THE CHEAT (using divs instead of semantic classes): /* THE CSS: */ .dashboard-facilities-header a:link, .dashboard-facilities-header a:visited { display: block; width:100%; height:25%; background: url(../images/dashboard-facilities-header.png) no-repeat } /* THE HTML: */ <div class="dashboard-facilities-header"> <h2><a href="facilities.php>Facilities</a></h2> </div> <p class="dashboard-desc">Here you can add/edit your profile that everyone can see!</p> Good luck.

Check out all the menu experiments at Stu Nicholls' "cssplay". These are all amazing and there is bound to be one similar to what you are looking for that from which you can get the technique idea.

Try adding "visibility: visible;" after overflow:auto; That's how we did it in the old days (haven't used that in ages).

Actually, you just need a declared width that is smaller than its parent container - it could be pixel (fixed) or percentage (fluid). The whole point of "margin: 0 auto" is top and bottom are "0" and right and left are "auto". It is the "auto" that determines how far each side's margin should be based on the container's declared width in relation to its parent container's width. If no width is declared, then 100% is assumed. There are no margins of a box that is 100% the width of its parent (there is nothing to auto calculate to).

>>IE with a Mac computer<< ???!!! The last IE made for a Mac was IE 5.03. It did not display absolute positioning or any css well and required hacks galore. Most of us stopped using hacks for IE 5 last year and anyone with a Mac who uses IE should be ashamed of themselves. You're frustrated ... we know how it feels, we've all been there. But seriously, we learned not to blame the browser but to blame ourselves ... something you are doing is creating the problem with FF, not FF. I can see from your markup that you also use inline styling and deprecated markup tag styling. But you still didn't show the results of browser-side htmlcode (not php which doesn't help us) and/or the full css. I would bet we can find the problem quickly. Today, since IE at best only has a 60% market share, we can't afford to ignore Modern browsers and standards. I will not visit a site a 2nd time that requires IE to make it work.

This is why we all try to code for optimum cross-browser support, and is exactly the reason to use proper standards compliant html and page validated DOCTYPE designation. NEVER, EVER test beta layouts using any IE first. Pages should first work in a modern browser like FF or Safari, before even looking at it in IE, because Modern Browsers support the CSS spec much better and more evenly than IE (which uses its own rules for CSS) . You can always slap a conditional comment or IE only css file to tweak the issues that don't work in IE. When you say "it validates as html." What does that mean? Nothing validates as "html". It validates to a declared DOCTYPE and HTML version specification (html 4.01 strict, html 4.01 transitional, xhtml 1.1, etc.) We assume you are not using a doctype, and therefore do not have a "validated" page, because you don't for your web site. That puts the page automatically into Quirks Mode - which is close to coding FOR IE-only by default. When you use quirks mode, all cross-browser compatibility is out the window (no pun intended). FF and other modern browsers support z-indexing just fine. The rule of thumb is when something works in IE but NOT in modern browsers ... don't blame the modern browser or always even IE ... blame your page structure, invalid standards compliant html and/or poor css syntax or markup level tag rules structure. To see why your css or html is not working, I would rather see the browser generated html in full instead of a snippet of php. You are designating classes for the IMG tags but don't seem to be echoing them. Are they contained within a div? Table? The whole page needs to be seen in their html generated, browser sided context before it can begin to be debugged.

The <embed> tag was deprecated in favor of the <object></object> years ago (it was originally a "Netscape" element). It will still work in older versions of browsers but may not work at all in newer versions, particularly depending upon the plugin (like quicktime). Unlike simple deprecated tag elements which are strictly Browser version compatible, in the case of <embed> deprecation, the actual entire platform/browser/plugin combination takes an active role in its support or not, Windows/IE6/media player vs Windows/IE6/Quicktime or Windows/IE7/Media Player vs Windows/FF2/Media Player ... etc. By learning and changing to the <object> tag, you will be able to use embed for plugins in all browsers. Here is an article from "a list apart" I first saw in 2006 about cross browser/platform support for embed because I had noticed my embed tags not working in Firefox 1x: A List Apart: Bye Bye Embed Using <object> to enclose your embeds properly will fix your problem in all platforms/browsers.

LOL. You DID notice that the article was written in 2003. In 2003 floats were extreme cutting edge stuff. Don't forget, IE 5.5/win and IE 5.1x/Mac were the 90% marketshare browsers!! Ever try to even just position simple floats in IE 5.1x/Mac? Do you know how many bugs IE5.5 win had with floats? This is the reason hacks were created in the first place. Eric Meyer was the first to show everyone how it was done. Clapton is a simple guitarist by todays standards, but in 1967 he blew everyone away. Stop blaming the CSS and place blame where it belongs, the browser creators. clear:both exists. clear:left exists. clear:right exists. Get the damn modern browsers to be spec compliant, get MS to stop lying about becoming valid only to release yet another monster IE piece of crap that breaks all previous solutions. Rage at the machine, not the cogs. By the way, The "modern" clearfix (not the PIE initial method) if used right will do exactly what you want in all browsers - BUT, you may have to add a clear:both element to the non-floated tag following the floated box.

Yes, overflow:hidden. Clearfix doesn't generate scrollbars under any circumstances whatsoever. But, I know what TFG is asking for, and yes there are other alternatives. Here is an Eric Meyers article from 2003. Keep in mind he wrote this while most of us were still using tables and "layers" and IE 5.5 was still the top browser. His first solution is no big surprise and all of us tried this without even knowing what it was. It was his second solution, the "use a float to fix a float" that created a buzz and is what some experts still recommend after the clearfix. http://complexspiral.com/publications/containing-floats/

IE6 does not support transparent pngs ... yeah, yet another "What were we thinking?" moment brought to you by Microsoft. When I want to use a transparent png, I use the PNG for modern browsers, then make a duplicate graphic as a tranparent gif and use a conditional comment to parse it for IE6. It doesn't look as good, but it is better than nothing.

It isn't working because your page structure is wrong and xhtml markup tags are bad/invalid. This page uses some pretty nasty code right from the get go: That mess will simply create all kinds of problems in every different browser. When the page is invalid and the html tags are wrong, even the best "spec-perfect CSS" will not always work. First, you cannot have markup code before the doctype - you just can't!!! Second, when you do get to the doctype declaration you designate xhtml, and proceed to ignore the most basic rules of xhtml - self-closing tags like images and line breaks. Third you embed tags wrong and wrap tags incorrectly. You cannot wrap bock level tags, like headings and paragraphs, with <span>. Span is used to select and reavise a style WITHIN a block level tag. Actually, what ken2k7 meant was that you cannot just have "li" tags flappin' in the breeze with no list type designation (un-ordered list - ul, ordered list - ol, definition list - dl). You certainly can wrap properly coded "lists" within divs (and any other markup level html tag), but you must use a properly coded list tag (ul, ol, dl), to contain the "li" (list item) ... this: Is just plain wrong on so many levels. You need to take a course or get a book on basic html ... you must first understand the concepts of basic html tags before attempting to use xhtml and css. I recommend, "Mastering integrated HTML and CSS" By Virginia DeBolt.

Do not use position:absolute for your containers, do NOT designate height on the container, use "relative" dimensions (percentages, ems) for text and containers so the resize and scale properly, use proper semantic markup - paragraphs, headings, lists, etc. - then style for THEM in the css not the div that contains them. Dont just toss text into divs and style the div for text - that's "bad". A div is an html placeholder - style it for its own features, dimensions, colors, etc and not the text within it. Then use specificity to style proper text level tags within that div that you want different from your default, like so. ex. p {color:#555; margin:.4em 0; font-size:1em} #leftNav {float:left; margin: 0; width:25%} #leftNav p {color:#000; margin:.6em .25em; font-size:.9em}

If you want to avoid jscript and keep your layouts "natural", the easy to use trick in css is called faux columns. (this IS the css thread) It emulates the look of equal height columns across all browsers. The original (shows the technique) -faux columns- by Dan Cederholm. Revised technique - (for liquid layouts) faux columns for liquid layouts Gotta admit that jscript solution is pretty cool - but I try to limit jscript.

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

There is no right or wrong solution. Whatever technique works for you is the perfect solution. Overflow: auto will indeed clear the float just fine, but for me it is an inelegant solution because it only works as intended for fixed "pixel-perfect" based layouts and not for fluid and liquid layouts. I was never able to get it to be "bullet-proof" because I mainly now use % and ems for my columns and text, guaranteed to make overflow:auto generate scrollbars when someone bumps up the browser text, or decreases the window size. If you are just 1px off you will end up with scrollbars. Too many other things can blowup layouts, so I don't take chances with things I know I can control. I DO use overflow:auto in certain circumstances (floated fixed elements, like photos or graphics, within a fluid box). I also use a simple clear:both within the occasional floated header, paragraph or ul, ol, dl after certain block elements. It depends on the situation. But I ALWAYS use a clearfix as my main clearing method. And I don't always worry about the hasLayout hacks when not necessary because IE on the whole handles float clearing incorrectly from the spec (which actually FOR ONCE consequently achieves what we intend - clearing the floats). The tough clear is in modern browsers and when using semantic markup - a paragraph immediately after a floated block, for instance will absolutely REQUIRE a clear in FF, Opera or Safari.

Because you can end up with scroll bars. I still use the "clearfix" method because it is guaranteed to work every time. Yeah, it is a pain to remember at first, but well worth it. The clearfix method to auto clear floats uses the pseudo class ":after" on parent floats. eg: for all parent elements (with floated elements within that are not clearing) that need to clear both sides, for instance #navbar and #footer, you would apply the clearfix as follows: #navbar:after, #footer:after { content: "."; display: block; height: 0; margin:0; padding:0; clear: both; visibility: hidden; } But it doesn't stop there because, IE (of course) doesn't recognize the pseudo-element ":after", AND triggers an IE "HasLayout" issue with floated elements (the contents can exceed the dimensions of the floated container if no height or height:auto is designated). So the IE6 hack was simply to give IE6 a height of 1% (since the content would always be over 1% it forced IE to conform to the floated element's dimensions). The hack to clear the float was: * html #navbar, * html #footer {height:1%} Simple. BUT! in IE7 they fixed the bug that permitted the old "star" hack (* html), yet they didn't fix the reason the star hack was necessary - this triggered HasLayout for the clearfix. The brilliant solution to force IE7 HasLayout AND clear the float before and after was the "first-child" pseudo element (which IE recognized) along with "min-height" (which it also now recognized) ... so to get IE7 to use a clearfix type auto-clear the hack is: *:firstchild + html #navbar, *:firstchild + html #footer {min-height: 1px;} Most pros use the cleafix method like so: #navbar:after, #footer:after { content: "."; display: block; height: 0; margin:0; padding:0; clear: both; visibility: hidden; } /* fix for IE6 */ * html #navbar, * html #footer {height:1%} /* fix for IE7 */ *:firstchild + html #footer {min-height: 1px;} Like I said, it's a pain to remember, but it works. There is also a way to trigger haslayout in IE7 using "zoom:1" and "display:inline-block", but they are not as common.

The validator is already telling you what the problems are - poor html markup. These are just some sloppy errors in the use of html. You are invalidly nesting html tags /form elements within list elements. You are using an ampersand instead of the ampersand symbol - utf does not like html special chars. The style "tag" belongs in the head ... an inline "embedded" style " element" (not "tag") is permitted within a proper html tag, like <p style=""> or <ul style="">

overflow: auto will SHOW scrollbars if the list is longer or wider than the parent box. overflow:hidden hides the scrollbar. BUT, it also hides content that is wider or longer than the box.

Sometimes using too many divs creates more than "divitus". <div id="contentCenter"> <p style="margin:0 50px;">Notice the dark red gap above and below this white box. How do I close the gaps?</p> </div>

This is a good example why beginners to css should avoid using position:absolute and position:relative. HOWEVER, this specific instance is one of the very few circumstances where position:absolute is actually the right tool for the desired layout effect - when used in proper conjunction with a parent block that is position:relative. The key is to make it use "left:0" as positioned relative to the centered container and NOT "left: 225px;" as currently positioned relative to the browser window. Play around with placing it in the centered block (div) and tweak the top/left elements. <div id="wrapper"> <div id="header"> <div id="title"><p>Serving the DFW Area</p></div> </div> <div id="navbar"> <a href="index.php"><img src="images/links/home.gif" /></a> <a href="index.php"><img src="images/links/houses.gif" /></a> <a href="index.php?p=faq"><img src="images/links/faqs.gif" /></a> <a href="index.php?p=rules"><img src="images/links/rules.gif" /></a> </div> <div id="content"> <div id="main_logo"> <img src="images/main_logo.png" /> </div> <div id="main_left"> <p>We bring the party to you! Bounce House Buddies, are a family owned and operated business. We operate out of Arlington, Texas. Bouncehouses are great for parties, family reunions, advertisement, backyard BBQs, and anytime kids are in need of a great time!</p> <p>Our goal is to provide safe quality equipment, clean and sanitized equipment, deliveries to be on time for the party or event, and the absolute best customer service.</p> <p>We offer fair and competitive pricing. We realize how important your party or event is to you and strive to provide the best service and equipment at the most reasonable price.</p> <p>Your safety is our number one priority. We go over all safety procedures at the time of every delivery. Our equipment is commercial grade material with a superior design that was carefully engineered with added safety features.</p> </div> When finished with this particular page, forget you ever used position:relative and position:absolute and learn to use floats properly. If not, you will be tempted to try using it for other wire-frame page layouts and that's a path for suckers (because it is not flexible and will blow up depending upon browser/resolution other than yours)

Just to illustrate. For the last 8 years I have a cron on a local unix server that runs a macro, every fifteen minutes, 365 days, to generate a "goodly" sized .psv file from an informix DB and upload it to my web server, ; my web server's cron then checks every fifteen minutes, 365 days, for the new .psv file and loads it into a mysql DB. Never had a problem in the entire 8 years. The psv file is anywhere from 700k to 1.5mb - and while that's a decent sized file, it is both generated then loaded in seconds. That's just one of MANY complex jobs the crons run both locally and online. If a task itself take up a lot of processing time, it does so regardless of the cron automation.

absolute positioning is not going to help. Rodhesha's example is fine for fixed width, pixel perfect fixed layouts. But the "sliding doors" technique was created to have it auto-adust to widths and heights and be elastic with browser-size adjusted text. Here is the original technique that explains each step. It WILL work. sliding doors

First, You need to fix the head tag items and all the html errors. Invalid html acts strangely across browsers. You are better off with no meta tag than to have a blank meta tag. You MUST have a charset/mime type. You are using XHTML closing slashs with an HTML 4.01 Strict Doctype. border="0" does not exist in any html 4.01 Strict specs. You MUST use an "alt="something" tag for any image. Second, you have to clear your floats and have a separate css file for IE - you have all the IE bugs hitting this double margin, HasLayout, un-cleared floats. http://www.positioniseverything.net/explorer/ Too much for anyone here to help specifically.

Show us the complete browser side html (no php).

LOL! Its a fair cop. To me using jscript for design elements when there is a CSS solution is lazy and anyone who recommends tables for layout/design elements SHOULD feel shame.