|
|
Killersites.com Forum » List all forums » » Forum: Open Forum. » » » Thread: A look at a CSS layout and screen shots from IE4.0 through IE7b2, » » » » Post: A look at a CSS layout and screen shots from IE4.0 through IE7b2, |
Print at Mar 21, 2010 9:47:41 AM |
| Posted by shelfimage at Feb 23, 2006 3:12:07 PM |
|
A look at a CSS layout and screen shots from IE4.0 through IE7b2, Some recent threads and my latest work on a CSS positioned page motivated me to take a closer look at this page in various browsers. One recent thread: The new twist on the browser wars ...As always, LSW and TPattison got me thinking... The page I tested has no css hacks, validates as xhtml 1.0 strict, and uses an IE Conditional Statement to call an IE only style sheet correcting IE's buggy interpetation of the Float Model. While using a strict DTD will help IE6 properly render the Box Model, it does not correct floats and the IE 3Px Jog that IE causes. More on that here: http://www.digital-web.com/articles/toward_a_more_standards_compliant_ie/ and http://www.positioniseverything.net/explorer/threepxtest.html The problem with the fixes proposed by reknown css experts is their dependence on ie hacks. Search the forums here for opinions about the problems of CSS Hacks. So, after I tested my page using browser cam, I thought it helpful to post the screen shots. First, here's the XHTML and CSS: //START XHTML// <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> ...skipping most <head></head> content... <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="ie_style.css" /> <![endif]--> <body> <div><a name="topg" id="topg"></a></div> <div id="wrap"> <!-- sof Head --> <div id="top"> <div id="logo"></div> <h1>HEADER 1 TEXT HERE</h1> </div> <!-- eof Head --> <!-- sof Top Nav --> <div id="navbar"> <div id="nav"> <h2><a href="/">HEADER 2 TEXT HERE</a></h2> <ul><li><a href="/" class="active">Home</a></li><li><a href="furniture.html" class="inactive">LINK2</a></li><li><a href="about.html" class="inactive">LINK3</a></li><li><a href="contact.html" class="inactive">LINK4</a></li></ul> </div> </div> <!-- eof Top Nav --> <!-- sof of Main Content --> <div id="main"> <h1>HEADER 1 TEXT - TOPIC 1 INTRO</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sagittis, leo a adipiscing tincidunt, massa erat ultrices lorem, non nonummy lorem risus ac orci.</p> <ul> <li>Unordered List - item here</li> <li>List - item here</li> <li>List - item here</li> <li>List - item here</li> </ul> <div class="hr"></div> <h1>HEADER 1 TEXT - TOPIC 2 INTRO</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sagittis, leo a adipiscing tincidunt, massa erat ultrices lorem, non nonummy lorem risus ac orci. Integer dignissim neque tempor dui. Curabitur lacus nulla, porttitor id, malesuada ut, blandit id, quam. Fusce wisi. Aenean tortor diam, fringilla eu, placerat ut, viverra quis, diam. Vestibulum molestie. Maecenas cursus. Ut ultrices molestie justo. Donec ut sem. Suspendisse lectus. Ut condimentum sagittis odio. Cras cursus.</p> <p class="infobox">ger dignissim neque tempor dui. Curabitur lacus nulla, porttitor id, malesuada ut, blandit id, quam. Fusce wisi. Aenean tortor diam, fringilla eu, placerat ut, viverra quis, diam. Vestibulum molestie.</p> </div> <!-- eof of Main Content --> <!-- sof of Left Column --> <div id="left"> <p class="leftinfo"><b>Title Here</b><br />Click on the pictures below for more information, massa erat ultrices lorem<a href="#nogo" title="#nogo">some page link</a>.</p> <br /> <p><a href="furniture.html#blanket_chest" title="Blanket Chest"><img src="img/blanket_chest.jpg" width="160" height="110" alt="Blanket Chest" /><br />Cedar lined Blanket Chest built with cherry wood</a></p> <br /> <p><a href="furniture.html#tea_table" title="Tea Table"><img src="img/tea_table.jpg" width="160" height="100" alt="Tea Table" /><br />Oval Tea Table with decorative wood inlay</a></p> <br /> <p><a href="furniture.html#end_table" title="End Table"><img src="img/end_table.jpg" width="160" height="226" alt="End table with dove tail drawers" /><br />Family room table with tapered legs and beaded drawer fronts</a></p> <br /> <p class="topg"><a href="#topg" title="Top of page" class="topglink">Top of page</a></p> <br /> </div> <!-- eof of Left Column --> </div> <!-- eof of id Wrap --> <!-- sof Footer --> <div id="footer"> <!-- sof Bottom Nav --> <div id="botnav"> <ul><li><a href="/" class="active">Home</a></li><li><a href="furniture.html" class="inactive">LINK2</a></li><li><a href="about.html" class="inactive">LINK3</a></li><li><a href="contact.html" class="inactive">LINK4</a></li></ul> </div> <!-- eof Bottom Nav --> <p>Copyright © 2005 <a href="URL" title="TITLE" rel="external" class="extlink">CONTENT</a> All rights reserved.</p> <div class="fade">Website development by <a href="http://mainewebworks.com" title="Common sense web development" rel="external" class="extlink">MaineWebworks</a></div> </div> <!-- eof Footer --> </body> //START CSS// body{ margin:0; padding:0; background:#FFF url(img/top.gif) repeat-x; color:#575757; font:100%/16px Arial,Helvetica,sans-serif; } h1{ margin:0; padding:0; color:#456dba; background:transparent; font:bold 1.5em Arial,Sans-Serif; letter-spacing:-1px; } h2{ margin:0; padding:3px 0 6px 0; color:#a9531c; background:inherit; font:bold 90% Georgia,Times,'Times New Roman',Serif; text-transform:uppercase; } p{ margin:0; padding:2px 0 5px; } #wrap{ margin:0 auto; padding:0; width:765px; } #top{ margin:0; padding:0; width:100%; height:120px; } #top h1{ margin:-55px 0 0 335px; padding:0; font-size:140%; } #logo{ margin:0; padding:0; width:271px; background:transparent url(img/logo.jpg) no-repeat 0 7px; color:inherit; height:107px; } #navbar{ margin:0 0 0 24px; padding:0; background:#fff url(img/nav.gif) no-repeat; color:inherit; height:30px; } #nav{ display:inline; } #nav h2{ margin:0px 0 0 11px; display:inline; font-size:77%; line-height:2.3em; } #nav h2 a{ color:#a9531c; background:transparent; } #nav ul{ margin:0 0 0 80px; padding:0; list-style-type:none; display:inline; } #footer ul{ margin:10px 0 0 0; padding:10px 0 0 0; list-style-type:none; display:inline; } #nav li,#footer li{ list-style-type:none; display:inline; } #nav li a,#nav li a:visited,#footer li a,#footer li a:visited{ margin:0px 20px 0 0; color:#a9531c; background:transparent; font-weight:bold; text-decoration:none; } #nav li a:active,#nav li a:active .active,#footer li a:active,#footer li a:active .active{ padding-bottom:0px; border-bottom:3px solid #456dba; color:#456dba; background:#d1ddf2; } #main{ margin:0; padding:14px; width:490px; float:right; background:transparent; color:inherit; } #main p,#main h1{ padding-left:15px; padding-right:10px; } #left{ margin:0 0 10px 24px; padding:0 15px; width:192px; float:left; color:inherit; background:#DADADA; } #left h2{ padding:0 0 2px 0; color:#a9531c; background:transparent; font-size:85%; text-align:center; } #left p{ padding:5px; border:1px dotted #575757; color:inherit; background:#fff; font-size:80%; text-align:center; } #left img{ padding-bottom:3px; color:inherit; background:#fff; } #left p.leftinfo{ margin:0; padding:0; border:0; color:#333; background:#dadada; font:95% "Courier New",Courier,monospace; word-spacing:-3.5px; letter-spacing:-.5px; } #left p.topg{ margin:0; border:0; color:#456dba; background:#dadada; } #footer{ clear:both;/* needed for Mozilla */ margin:5px 0 0 0; padding:0; background:#fff url(img/footbck.gif) repeat-x; color:inherit; text-align:center; height:80px; } #footer p{ margin:2px 0 5px 0; padding:0; font-size:75%; text-align:center; line-height:2.5em; } #botnav{ padding-top:8px; } .infobox{ margin-top:20px; padding:5px 0 15px 0; width:450px; background:url(img/boxbot.gif) #f2f2f2 repeat-x bottom left; color:#626262; } Next - the browser shots... This post was long enough... ![]() ---------------------------------------- "The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo Save the developers<!> Maine Webworks |
|
|
Current timezone is GMT Mar 21, 2010 9:47:41 AM |