I've done a little test page in CSS which I was quite happy with, until I tried opening it in Internet Explorer 6. Then everything didn't look very good at all. So I was wondering, should good CSS and HTML show up correctly in both browsers? I'd assume so, just thought I'd check.
I will do, first I'll just tidy it up and see if the problem is too obvious, I'll post it tomorrow if it's still the same.
IE is very likely displaying it wrong. Firefox is a much better browser to see if your CSS is correct.
It could also be that the code wasn't written correctly too. I see it a lot, both here and on SitePoint.
Actually, concentrate on the four major rendering engines, and you'll cover all the major browsers in one fell swoop. Trident (Win-IE) Gecko (Mozilla, Netscape, and its various offshoots) Presto (Opera) KHTML/WebKit (Konqueror, Safari, and IIRC OmniWeb as well, though that might be running Presto as well)
Thanks for that, I forgot to post the code before sorry. Well I guess there's no harm in showing you all my embarrassing code. It's all validated, but it still doesn't work. Keep in mind however that I don't really know anything about CSS and "relative" positioning bamboozles me (I mean I know what it is, I just can't use it correctly). By the way, this page is just a test, nothing more. http://www.grandfiles.com/test/index.html http://www.grandfiles.com/test/css.css It Firefox it looks fine. In IE the images are out of line, the rollover menu on the left is completely crazy, the paragraphs are messed up and it's hard to highlight text for some reason. As you can see I'm a poor misguided soul and I need some CSS skills. Does anyone know of any (preferably free) resources about using and positioning with CSS? Thanks.
The problem is that Firefox and IE render margins and borders differently. For one their part of the box, for the other they're additional to the box. Can't remember which does what. The easiest way to save yourself the troubles is to program for Firefox and then use conditional comments to get IE to use different positions for the divs.
First thing; valid html. How rare is that? Good job. Second thing; lose all absolute positioning. It is very tempting, just Bam! Tell the element where to be. That's just like the prints shop's paste up board. Trouble is, the web's not print, and absolute positioning has gotchas with big teeth. As you learn css positioning, do it without absolute positioning. Here is a simple two column layout that has a bunch of bells and whistles for you to study. It can be seen at http://garyblue.port5.com/webdev/2col.html. I'm posting the code here since my (free) host seems to be choking on something at the moment. <!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" /> <meta name="editor" content="Emacs 21" /> <meta name="author" content="Gary Turner" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="shortcut icon" href="/favicon.ico" /> <meta name="description" content= "A demo of two column layouts using faux columns and overlapping borders to appear like columns are equal height." /> <title>2 Column - Apparent Equal Height | Gary Turner's html & css playpen</title> <style type="text/css"> /*<![CDATA[*/ html, body { padding: 0; margin: 0; } body { font: 100% Tahoma, sans-serif; color: black; background-color: white; text-align: center; /*IE centering hack*/ } em { font-style: italic; } p { font-size: 1em; } h1, h2 { font-family: tahoma, helvitica, sans-serif; text-align: center; margin: 0; } h1 { margin: .67em 0; } ul {} li a { display: block; text-decoration: none; } li a:hover { text-decoration: underline; } blockquote { margin: 0 3em; text-align: justify; font: 1em serif; line-height: 1.1em; } blockquote p { margin-bottom: 0; } blockquote p:before { content: "\201c"; font-size: 3em; color: #ccc; vertical-align: text-bottom; } blockquote p.last:after { content: "\201d"; font-size: 3em; color: #ccc; vertical-align: -.75em; } /*The background image should be the width of the sidebar. Its purpose is to simulate a column of full height.*/ #wrapper { position: relative; width: 750px; margin: 0 auto; /*proper centering*/ text-align: left; /*return to normalcy*/ border: 1px solid #333; background: #eee url(navcolbg.jpg) top left repeat-y; } #banner { background-color: white; border-bottom: 1px solid #555; position: relative; } #pageheader { border: 0 none; padding-left: 5px; display: table; width: 60%; } #pageheader p { color: #a00; float: left; font-family: georgia, serif; font-size: 2em; font-weight: bold; line-height: 1.2; margin: 0.67em 0 0; } #pageheader p span.light { color: #669; float: right; font-size: .75em; font-weight: normal; } #pageheader a { display: block; color: #a00; text-decoration: none; } #pageheader hr { clear: both; height: 1px; color: #999; background-color: #999; margin: 0 0 0 2em; } #sidebar { float: left; width: 160px; padding: 1em 5px 0; border-right: 1px solid #555; } /*See my article, "white space bug revisited" at http://www.csscreator.com/node/6745 for an explanation of the next hack*/ /* \* * html li a { height: 1px; } /* */ #main { margin-left: 170px; /*adjust for overlap with sidebar border*/ border-left: 1px solid #555; padding: 1em; line-height: 1.3em; } #footer { font-size: 0.8em; text-align: center; margin-top: 0; } /*** see http://www.positioniseverything.net/easyclearing.html for explanation of Tony Aslett's elegant hack ***/ .clearing:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearing { display: inline-block; } /* hides from IE/Mac \*/ * html .clearing { height: 1%; } .clearing { display: block; } /* end hide from IE-Mac */ /*** end clearing hack ***/ .def { border-bottom: 1px dotted #666; cursor: help; } /*]]>*/ </style> </head> <body> <div id="wrapper" class="clearing"> <div id="banner"> <div id="pageheader"> <p><a href="../index.html">Gary <span class= "kern">T</span>urner’s<br /> <span class="light">html and css playpen</span></a></p> <hr /> </div> <h1>2 Column—Apparent Equal Height</h1> </div><!-- end banner --> <div id="sidebar"> <h2>Menu</h2> <ul> <li><a href="#" onclick="this.blur()">menu item</a></li> <li><a href="#" class="out">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> </ul> <p>The background image in #wrapper extends the full length of the page. So, it looks like the column is full length.</p> </div><!-- end sidebar --> <div id="main"> <h2>Main Content</h2> <p>The borders are set to <span class="def" title="one lies over the other">overlap</span>. If you know which column will always be the longer, you may use only that column's border. If you use color to separate the columns, the background image in #wrapper should be total width of the float column. Like the overlapping borders, this makes it appear that both columns are full length.</p> <p>This demo has been modified to include an actual background image. I have also lengthened the content to more clearly show that the navcol <em>seems</em> to extend the full height of the content.</p> <blockquote> <p class="last">Aliquam odio wisi, molestie quis, hendrerit non, tempus ut, felis. Sed a augue. Fusce metus justo, faucibus in, sagittis dignissim, porttitor id, risus. Praesent sit amet velit. Aliquam erat volutpat. Pellentesque ut diam. Nam venenatis, metus sed scelerisque semper, tellus libero placerat tellus, vel aliquam risus lorem sed dui. Cras lacus. Nullam venenatis adipiscing neque. Maecenas et metus nec libero vehicula congue. Vestibulum vestibulum odio ullamcorper lacus. Etiam odio eros, aliquet et, volutpat eu, porta laoreet, orci. Donec sodales massa tincidunt est.</p> </blockquote> </div><!-- end main --> </div><!-- end wrapper --> <p id="footer">Footer Stuff ©2005</p> <p><a href="../">⇠home</a></p> <p><a href="#wrapper">⇑ Return to top of page</a></p> </body> </html> Code (markup): cheers, gary
I am using a CSS at work that works with IE 6/7 and Opera but won't work in FF or Netscape. I have nearly given up on the issue but have a client that is insisting we fix the problem. I have posted the code and problem in another thread.
Is Opera set to identify itself as Opera, or is it identifying (or worse, masking) itself as Internet Explorer?
Well actually neither are totally compliant to Valid css coding, but then **good css should show well in ALL browsers