Currently I have a * in front of that line of css, but unfortunately that hides it from Opera as well as Firefox, only letting IE see the line. Is there a character or some similar clean way (inside of the css not the html) to block a single line from Firefox only and still let Opera see it along with IE? Thanks, I'm doing a self-assigned homework assignment of converting a table based layout into a table-less layout as a way to learn how my design approach needs to change. Normally, if I were starting the design with table-less in mind, I don't think I'd need to use this kind of hack, but I need to figure it out for this case, painful as it is.
I can think of no case where a css rule would be hidden from Firefox, but not other modern browsers. If you think you've found that one instance, I'm guessing that you're triggering quirks mode, where Opera acts as an IE wannabe. How about posting a link to your current attempt? cheers, gary
Well, putting the * in front of the line of css hides that line from every browser except IE. I was just hoping maybe there was a character that worked like that for Opera maybe. here's what I'm working on (only the header): http://solutionx.us/css_redesign/index2.html and the css: http://solutionx.us/css_redesign/styles/main.css You can compare that with http://solutionx.us (the tables version) What I'm trying to do is convert it to table-less and make it appear identical, and identical in every main browser + IE 5-6. If you look at the page in Opera, you can barely see it, but the navigation buttons are 1 pixel higher. Not a big deal, I know, but for practice I want to get this perfect. Anyway, the reason it's 1 pixel higher is because I set the first negative margin property for Firefox, but IE and Opera for some reason are 1px off, so I made a second margin property with a * before it and that made IE look the same, but still wondering how I'll do it for Opera. I know about using "switches" in html to link to a different style sheet depending on the browser, but I was gonna see if I could do this all in the same style sheet. Probably not, but maybe some css guru here know how. There are a couple other problems that come up in IE 5, 5.5, and one problem in 6.0, but I'll get to those next I guess.
Going for pixel perfection is, without serendipity, a Quixotic quest. In your example, for instance, should the visitor override your font choice, say verdana for the narrower arial, the header breaks. Or, if he decides to increase the font size, it's broken. Even the different ways of rendering the inline box , prevent pixel perfection x-browser. The idea of perfection is a print concept that is not applicable to the web. Since you're trying to make the move from the obsolete table layout paradigm, I coded the page to pretty much do as you want, and to your structural model, but used semantic markup. Frankly, it looks enough the same in IE6, Firefox2/Win/Linux, Opera9.10 and Konqueror for me. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" /> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="editor" content="Emacs 21" /> <meta name="author" content="Gary Turner" /> <style type="text/css"> /*<![CDATA[*/ html, body { margin: 0; padding: 0; } body { font: 100% arial, helvetica, sans-serif; color: black; background-color: white; } p { font-size: 1em; margin: 1.25em 0 0; } a img { border: none; } h1, h2, h3 { font-family: georgia, serif; } img { vertical-align: bottom; } #wrapper { width: 760px; margin: 20px auto 0; } #header { background: #285a93 url(http://solutionx.us/css_redesign/images/header_end.gif) right top no-repeat; height: 68px; position: relative; } #header p { margin: 0; } #logo { height: 68px; float: left; } #logotext { line-height: 1; color: #fcdf44; font-size: 20px; font-weight: bold; width: 410px; padding-top: 15px; overflow: hidden; /*sets block formatting context*/ } #logotext span { font-size: 12px; color: white; } #headernav { margin: 0; padding: 0; list-style: none; position: absolute; right: 10px; bottom: 0; } #headernav li { float: left; margin-right: 1px; } /*]]>*/ </style> </head> <body> <div id="wrapper"> <div id="header"> <p id="logo"> <a href="index.html"><img src= "http://solutionx.us/css_redesign/images/logo.gif" alt="" height="68" /></a> </p> <p id="logotext">Extend Microsoft® Office<br /> <span>with Outlook Add ins, FrontPage Templates, Access Tutorials & more!</span></p> <ul id="headernav"> <li><a href="add_ins.htm"> <img src="http://solutionx.us/css_redesign/images/buttons_addins.gif" alt="Add ins" width="91" height="28" /></a> </li> <li><a href="templates.htm"> <img src="http://solutionx.us/css_redesign/images/buttons_templates.gif" width="91" height="28" alt="Templates" /></a> </li> <li><a href="tutorials.htm"> <img src="http://solutionx.us/css_redesign/images/buttons_tutorials.gif" width="91" height="28" alt="Tutorials" /></a> </li> </ul> </div><!-- end header --> </div><!-- end wrapper --> </body> </html> Code (markup): cheers, gary
Wow, that's great! I feel like I should be paying you lol, but it's encouraging that it was easy enough for you to do for free. Gives me hope that it won't always be this frustrating Anyway, I really appriciate it and I'll study this code more tomorrow, but can already tell I'll learn much from it.