RE: [WSG] Redesigning smh.com.au & theage.com.au with css

Amit Karmakar Mon, 21 Jun 2004 16:55:55 -0700

Title: RE: [WSG] Redesigning smh.com.au & theage.com.au with css

I was just going to say that Pete :)

use firefox/mozilla and dig out the CSS with the 'web developer extension.

Here you go Nancy.

Regards,

Amit Karmakar

www.karmakars.com

http://www.smh.com.au/

Inline Styles from http://www.smh.com.au/

body { margin: 0pt; padding: 0pt; background: rgb(255, 255, 255) url(/css/images/page_bg_v6_4_800.gif) repeat-y scroll 50% 0pt; text-align: center; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; font-family: arial,verdana,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 83%; line-height: normal; font-size-adjust: none; font-stretch: normal; }

table { width: auto; }
h1, h2, h3, h4, h5, h6 { margin: 1em 0pt 0pt; }
h1 { font-size: 150%; }
h2 { font-size: 135%; }
h3 { font-size: 120%; }
h4 { font-size: 110%; }
h5 { font-size: 95%; }
h6 { font-size: 90%; }

body#typeA h1, body#typeA h2, body#typeA h3, body#typeA h4, body#typeA h5, body#typeA h6 { margin: 0pt; }

.clear { clear: both; position: relative; font-size: 0px; height: 0px; line-height: 0px; }

.highlight { color: rgb(153, 0, 0); }

.standardsNote, .skiplinks { position: absolute; left: -1000px; width: 990px; font-size: 1px; line-height: 1px; }

small { font-size: 86%; }

#sidebar small { font-size: 100%; }

hr { margin: 0.3em 0pt; height: 1px; color: rgb(204, 204, 204); background-color: rgb(204, 204, 204); }

img { border: 0pt none ; }

form { margin: 0pt; padding: 0pt; }

a, a:link, a:link, a:link, a:hover { background: transparent none repeat scroll 0%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; text-decoration: underline; cursor: pointer; }

a:link { color: rgb(0, 102, 204); }

a:visited { color: rgb(68, 68, 68); }

a:hover, a:active { color: rgb(153, 0, 0); }

#wrap, #masthead, #contentwrap { position: relative; }

#wrap { margin: 0pt auto; width: 777px; text-align: left; padding-left: 1px; }

#masthead { border-bottom: 1px solid rgb(40, 121, 194); margin: 0pt; background: rgb(44, 136, 210) url(/css/images/masthead_bg.gif) repeat-x scroll 0pt; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; text-align: center; width: 100%; min-height: 70px; }

body#typeA #masthead { border: medium none ; min-height: 78px; height: 78px; }

#masthead #logo { float: left; width: 146px; }

#masthead #logo img { display: block; }

body#typeA #masthead .clear { display: none; }

body#typeA #wrap .textad { position: absolute; top: 32px; left: 625px; width: 150px; color: rgb(255, 255, 255); font-size: 11px; }

body#typeA #wrap .banner { position: absolute; top: 32px; left: 155px; z-index: 10000; }

#masthead .textad { padding: 8px 0pt 0pt; float: right; width: 150px; color: rgb(255, 255, 255); font-size: 11px; }

#masthead .banner { padding: 5px 0pt 3px; min-width: 468px; min-height: 60px; }

body#typeA #masthead .banner { padding: 11px 0pt 3px; }

#masthead .textad a { color: rgb(255, 255, 255); }

#masthead .textad .adnote { color: rgb(204, 204, 204); display: block; }

#masthead .date { float: right; color: rgb(255, 255, 255); }

#mtmh { position: absolute; top: 109px; left: 310px; font-size: 11px; width: 180px; text-align: center; }

#contentwrap { background: transparent url(/css/images/contentwrap_bg.gif) no-repeat scroll 0pt; width: 777px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; padding-top: 36px; }

body#typeA #contentwrap { background: transparent url(/css/images/contentwrap_bg_home.gif) no-repeat scroll 0pt; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; }

#nav { background: transparent url(/css/images/nav_bg_sub.gif) no-repeat scroll 0pt; position: absolute; top: 0pt; left: 0pt; width: 119px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; text-transform: lowercase; }

body#typeA #nav { background: transparent url(/css/images/nav_bg.gif) no-repeat scroll 0pt; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; }

#nav h3 { font-size: 15px; }

#sidebar { position: absolute; top: 0pt; right: 15px; left: auto; width: 180px; font-size: 86%; }

#content, #footer { margin: 0pt 212px 1em 135px; }

#content { padding-top: 40px; }

#sidebar { padding-top: 35px; }

#contentArea1 { float: left; width: 200px; padding-top: 0px; }

#contentArea2 { float: right; width: 200px; font-size: 86%; padding-top: 0px; }

body#typeA #contentArea1 { margin-top: 5px; clear: left; }

body#typeA #contentArea2 { margin-top: 13px; }

#membership { position: absolute; top: 5px; right: 15px; left: auto; font-size: 11px; padding-left: 3px; z-index: 666; }

#sunday-mastheads { position: absolute; top: 4px; left: 131px; width: 169px; height: 19px; }

#nav a { border-left: 3px solid rgb(242, 242, 242); margin-left: 1px; display: block; font-size: 11px; color: rgb(0, 68, 113); text-decoration: none; padding-left: 3px; line-height: 1.4em; width: 108px; }

#nav a:link, #nav a:visited, #nav a:active { color: rgb(0, 0, 0); text-decoration: none; }

#nav a:hover { border-left: 3px solid rgb(153, 153, 153); background-color: rgb(221, 221, 221); }

#nav .navsection h3 { margin: 0pt 0pt 0pt 8px; background: transparent url(/css/images/bg_nav_h.gif) repeat-x scroll 0pt; position: relative; color: rgb(0, 0, 0); -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; padding-bottom: 2px; font-size: 12px; }

#nav .navsection ul.divider { border-style: solid none; border-color: rgb(242, 242, 242) -moz-use-text-color; border-width: 1px medium; background: transparent url(/css/images/bg_nav_div.gif) repeat-x scroll 0pt 100%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; }

#nav div { margin-left: 0pt; margin-right: 1px; }

#nav .navsection { background-color: rgb(242, 242, 242); margin-left: 1px; }

#nav #classifieds { margin: 0pt; width: 119px; }

body#typeA #nav #classifieds { margin: 8px 0pt 0pt; }

#nav #classifieds a { border-left: 3px solid rgb(32, 107, 177); color: rgb(255, 255, 255); padding-left: 5px; line-height: 17px; width: 106px; }

#nav #classifieds a:hover { border-left: 3px solid rgb(102, 153, 204); background: rgb(40, 121, 194) none repeat scroll 0%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; }

#nav #classifieds ul { margin: 0pt; padding-bottom: 2px; }

#nav #classifieds li { border-top: 1px solid rgb(42, 127, 201); border-bottom: 1px solid rgb(12, 82, 143); padding: 0pt; background: rgb(32, 107, 177) none repeat scroll 0%; margin-left: 0pt; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; }

#nav #classifieds .highlight { color: rgb(178, 188, 204); font-weight: normal; }

#nav #classifieds li.classifieds-first { border-top: medium none; background: transparent none repeat scroll 0%; padding-top: 1px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; }

body#typeA #nav #classifieds li.classifieds-first { border-top: 1px solid rgb(42, 127, 201); background: rgb(32, 107, 177) none repeat scroll 0%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; padding-top: 0pt; }

body#typeA #nav #classifieds a { width: 109px; }

.wof { margin-bottom: 1em; clear: left; }

.wof small { color: rgb(136, 136, 136); text-transform: uppercase; }

.wof small a { color: rgb(136, 136, 136); font-weight: bold; text-transform: none; }

.wof p { margin: 0pt; }

.wof img, .featurePic .wof img { margin: 3px 4px 0pt 0pt; display: block; float: left; }

#sidebar .wof img, .featureNewsSection .wof img, .featurePic .wof img { margin-top: 2px; }

.wof ul { clear: left; }

body#typeA #contentArea1 .wof { clear: right; }

.wof h1 a, .wof h2 a, .wof h1 a:visited, .wof h2 a:visited { color: rgb(0, 51, 102); }

.wof h1 a:link, .wof h1 a:visited, .wof h1 a:hover, .wof h1 a:active, .wof h2 a:link, .wof h2 a:visited, .wof h2 a:hover, .wof h2 a:active { text-decoration: none; }

.wof h1 { font-size: 135%; }

.wof h2 { font-size: 120%; }

.wof h3 { font-size: 110%; }

.wof .clear { clear: left; }

.option2 { margin: 0.5em 0pt; text-align: center; }

.option2 h1 { font-size: 220%; }

.option2 ul li { background-color: transparent; }

.option3 { margin: 0pt; width: 430px; }

.option3 .featurePic img { margin: 0pt 0pt 3px; display: block; float: none; }

.option3 .featurePic p { font-size: 86%; margin-bottom: 0pt; }

.option3 .featurePic { border-top: medium none; border-left: medium none; border-right: medium none; margin-bottom: 0.5em; width: 430px; float: right; }

.option3 ul li { background-color: transparent; }

#latest { position: absolute; font-size: 11px; top: 156px; left: 137px; z-index: 9000; }

#latest span { margin: 2px 3px 0pt 0px; font-size: 11px; display: block; float: left; }

#sidebar #latest { border: 1px solid rgb(184, 184, 184); margin-bottom: 1.5em; }

#sidebar #latest object { margin: 5px 7px; }

#date { position: absolute; top: 142px; left: 135px; color: rgb(204, 0, 0); font-family: verdana; font-style: normal; font-variant: normal; font-weight: bold; font-size: 10px; line-height: normal; font-size-adjust: none; font-stretch: normal; }

#weather { height: 53px; }

#weather dl { margin: 7px 0pt 0pt 7px; padding: 1px 1px 7px; width: 75px; }

#weather dt { margin: 0pt; padding: 0pt; font-weight: bold; color: rgb(255, 204, 0); }

#weather dt img { margin-right: -10px; }

#weather dt a, #weather dt a:link, #weather dt a:visited, #weather dt a:hover, #weather dt a:active { border: 0pt none ; margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0%; color: rgb(255, 204, 0); width: 100px; display: inline; text-decoration: underline; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; font-size: 12px; }

#weather dd { margin: 0pt; padding: 0pt; color: rgb(255, 255, 255); font-size: 11px; }

#weather dd.weather-icon { position: absolute; top: 11px; left: 72px; }

ul { margin: 1em 0.3em 1em 0pt; padding: 0pt; position: relative; list-style-type: none; }

.puff ul { margin-left: 7px; margin-right: 7px; }

ul.related { margin-top: 0.2em; margin-left: 1em; }

ol { margin: 0.5em; }

ol li { background: transparent none repeat scroll 0%; margin-left: 2em; padding-left: 0pt; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; list-style-type: decimal; }

#nav ul { margin: 0pt 0pt 0pt 1px; padding: 0pt 0pt 1em; }

#nav ul li { margin: 0pt; padding: 0pt; background: transparent none repeat scroll 0%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; }

li { background: rgb(255, 255, 255) url(/css/images/li_sprites.gif) no-repeat scroll 0pt -1400px; line-height: 1.3em; padding-left: 20px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; }

ul.related li { background-position: 0pt -1300px; }

ul li.audio { background-position: 0pt; }

ul li.doc { background-position: 0pt -100px; }

ul li.enlarge { background-position: 0pt -200px; }

ul li.external { background-position: 0pt -300px; }

ul li.flash { background-position: 0pt -400px; }

ul li.graphic { background-position: 0pt -500px; }

ul li.mail { background-position: 0pt -600px; }

ul li.map { background-position: 0pt -700px; }

ul li.movie { background-position: 0pt -800px; }

ul li.photo { background-position: 0pt -900px; }

ul li.photogallery { background-position: 0pt -1000px; }

ul li.popup { background-position: 0pt -1100px; }

ul li.print { background-position: 0pt -1200px; }

ul li.related { background-position: 0pt -1300px; }

ul li.say { background-position: 0pt -1500px; }

ul li.slideshow { background-position: 0pt -1600px; }

ul li.top { background-position: 0pt -1700px; }

ul li.video { background-position: 0pt -1800px; }

ul li.vote { background-position: 0pt -1900px; }

ul li.virgo { background-position: 0pt -2000px; }

ul li.sagittarius { background-position: 0pt -2100px; }

ul li.taurus { background-position: 0pt -2200px; }

ul li.capricorn { background-position: 0pt -2300px; }

ul li.pisces { background-position: 0pt -2400px; }

ul li.aries { background-position: 0pt -2500px; }

ul li.scorpio { background-position: 0pt -2600px; }

ul li.leo { background-position: 0pt -2700px; }

ul li.gemini { background-position: 0pt -2800px; }

ul li.libra { background-position: 0pt -2900px; }

ul li.cancer { background-position: 0pt -3000px; }

ul li.aquarius { background-position: 0pt -3100px; }

.section a.section-homebg h4, .section a.section-homebg:hover { color: rgb(255, 255, 255); font-size: 1px; }

.section a.section-homebg { background: rgb(255, 255, 255) url(/css/images/li_sprites.gif) no-repeat scroll 0pt -3200px; float: left; display: block; width: 49px; height: 20px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; }

.section a#section-world {  }

.section a#section-national { width: 70px; background-position: 0pt -3300px; }

.section a#section-sport { width: 46px; background-position: 0pt -3400px; }

.section a#section-entertainment { width: 115px; background-position: 0pt -3500px; }

.section a#section-business { width: 69px; background-position: 0pt -3600px; }

.section a#section-technology { width: 92px; background-position: 0pt -3700px; }

.featurePic ul, .featureNewsSection ul { margin-left: 5px; margin-right: 5px; }

.featurePic ul.related, .featureNewsSection ul.related { margin-left: 1.5em; }

.featurePic ul li { background-color: rgb(242, 242, 242); }

.more-top-stories h3 { color: rgb(102, 102, 102); text-transform: uppercase; font-weight: bold; font-size: 86%; }

.more-top-stories ul { color: rgb(0, 0, 0); margin-top: 0pt; }

.more-top-stories li { font-weight: bold; }

.more-top-stories a:link { color: rgb(0, 102, 204); text-decoration: underline; font-size: 96%; }

.more-top-stories a:hover { color: rgb(153, 0, 0); }

.section { margin: 1.5em 0pt 0.4em; background: transparent url(/css/images/bg_section_small.gif) repeat-x scroll 0pt; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; height: 26px; }

.section a:link, .section-head a:link, .section a:visited, .section-head a:visited { text-decoration: none; color: rgb(95, 95, 95); }

.section a:hover, .section-head a:hover, .section a:active, .section-head a:active { text-decoration: underline; color: rgb(153, 0, 0); }

.section h5 { margin: 0pt; font-size: 11px; float: right; padding-top: 5px; }

body#typeA .section h5 { white-space: nowrap; }

.section h5 a:link { color: rgb(0, 68, 113); }

.section img { margin: 0pt; }

body#typeA .section img, .section-noimg { float: left; }

.featurePic, .featureNewsStory, .featureNewsSection { border: 1px solid rgb(184, 184, 184); background: rgb(242, 242, 242) none repeat scroll 0%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; margin-bottom: 1em; }

.featurePic { border-style: none none solid; border-color: -moz-use-text-color -moz-use-text-color rgb(184, 184, 184); border-width: medium medium 1px; }

.featurePic p, #content div.featureNewsStory p, #content div.featureNewsSection p { margin: 3px 7px; font-size: 93%; }

.featurePic img, .featureNewsStory p, .featureNewsSection p { margin: 0pt; }

.featureNewsStory span, .featureNewsSection span, .featurePic span { display: block; }

#content .featurePic li, #content .featureNewsSection li { font-size: 93%; }

.featureNewsSection { background: rgb(255, 255, 255) none repeat scroll 0%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; }

.featureNewsStory { background: rgb(255, 255, 255) none repeat scroll 0%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; }

.featureNewsSection .featurePicHeader, .featureNewsStory .featureNewsStoryPic { position: relative; height: 22px; }

.featureNewsStory .featureNewsStoryPic { height: 60px; }

.featureNewsSection .featurePicHeader img, .featureNewsStory .featureNewsStoryPic img { position: absolute; top: -1px; left: -1px; }

#content .featureNewsSection img { float: left; }

#content .featureNewsSection span { margin-bottom: 5px; }

#content .featureNewsSection span img { float: none; }

#content .featureNewsSection ul, #content .featurePic ul { margin-top: 0.2em; }

#content .featureNewsSection .wof p, #content .featureNewsSection .wof h5, #content .featureNewsSection .wof small, #content .featurePic .wof p, #content .featurePic .wof h5, #content .featurePic .wof small { margin: 0pt 7px 3px; position: relative; }

#content .featureNewsSection hr { margin: 0pt 5px; height: 1px; color: rgb(204, 204, 204); background-color: rgb(204, 204, 204); }

.puff { border: 1px solid rgb(184, 184, 184); margin: 0pt 0pt 1em; padding: 7px 0pt 3px; width: auto; }

.puff p { margin: 0pt 7px 3px; }

.puff small { margin-left: 7px; }

#content .puff h5, #content .puff h4, #content .puff h3, #sidebar .puff h5, #sidebar .puff h4 { margin: 0pt 7px; }

#sidebar .puff p { font-size: 100%; }

.puff img { margin: 3px 0pt 0pt 4px; float: right; }

.puff ul { margin-top: 0.2em; }

.puff ol { padding-left: 0pt; }

.puff img.nofloat { float: none; }

.promo h4 a { color: rgb(153, 0, 0); }

.promo a:link, .promo a:visited, .promo a:hover, .promo a:active { color: rgb(153, 0, 0); }

.hotspot { border: 1px solid rgb(184, 184, 184); margin: 0pt 0pt 1em; padding: 7px 0pt 3px; width: auto; }

.hotspot iframe { margin: 3px 0pt 0pt 4px; }

.search { margin: 0pt 0pt 1em; padding: 0.3em; color: rgb(0, 0, 0); position: relative; z-index: 1000; }

.search strong { margin: 0pt; display: block; font-size: 130%; }

.search small { margin-left: 1em; }

#sidebar .search { padding: 0pt; margin-bottom: 16px; }

#sidebar .search input.searchbox { width: 140px; }

#footer .search strong { display: inline; }

#footer .search { background: rgb(230, 230, 230) none repeat scroll 0%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; }

body#typeA #sidebar .search input.searchbox { width: 143px; }
#sidebar .domcol { margin-bottom: 1em; text-align: center; }
.ad-default { margin: 0pt 0pt 1.5em; text-align: center; }
.ad-default-nocentre { margin: 0pt 0pt 1.5em; }
.banner table, .banner div, .banner script { z-index: 8000; }
.horoscopes { min-height: 100px; position: relative; }
.horoscopes a { text-decoration: none; }
.horoscopes ul { margin: 3px; padding: 0pt; float: left; width: 70px; }

#footer { text-align: center; }
#footer .search { text-align: left; }
#footer p { margin: 0.5em 0pt; font-size: 90%; color: rgb(153, 153, 153); }
#footer p.sublevel, #footer p.copyright { font-size: 86%; }
#footer p.sublevel a { color: rgb(0, 0, 0); }

Inline Styles from http://www.smh.com.au/

body { background: rgb(255, 255, 255) url(/css/images/page_bg_v6_4_1024.gif) repeat-y scroll 50% 0pt; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; }
#wrap { width: 1001px; }
#contentwrap { width: 1001px; }
body#typeA #wrap .textad { left: 825px; }
body#typeA #wrap .banner { left: 255px; }
#network-strip { width: 1001px; }
body#typeA #contentArea1 { width: 420px; }
body#typeA #contentArea2 { margin-top: -38px; }
#mtmh { left: 410px; }
.option3 { width: 654px; margin-top: 1em; }
.option3 .featurePic { margin-left: 10px; }
.search input.searchbox { width: 250px; }
#sidebar .search input.searchbox { width: 135px; }

http://www.smh.com.au/css/smh_print.css

/*
Version:       28.04.2004
Designer:     Peter Ottery
*/

body {background-image:none;background: #fff;font: 11pt arial}
img {border:0}
.standardsNote, .skiplinks, .textad, .textad-age, iframe, #mtmh, #nav, .banner, #banner-age, .search, .pagetools, #sidebar, #membership, .islandad, .pagetools-wrap-bot {display:none}
#footer .search {display:none}
#footer p {display:none}
#footer p.copyright {display:block}
#breadcrumbs {margin: 1em 0}
.clear {position:relative;font-size:0px;height:0px;line-height:0px}
h1 {font-size:14pt;margin: 1em 0 0}
h2 {font-size:13pt;margin: 1em 0 0}
h3 {font-size:12pt;margin: 1em 0 0}
h4 {font-size:11pt;margin: 1em 0 0}
h5 {font-size:10pt;margin: 1em 0 0}
h6 {font-size:10pt;margin: 1em 0 0}
p {margin: 0 0 .5em}
ul {margin: 0 0 0 2em;padding:0}
.wof img {float:left;margin: 3px}
#sidebar ul {list-style-type:none;margin:0;padding:0}

/* ----- Section Straps and Links ----- */
.section {margin: 1.5em 0 0.4em 0;background: url("images/bg_section_small.gif") repeat-x 0 0;height:26px}
.section-head {margin: 0 0 1.5em;background: url("images/bg_section.gif") repeat-x 0 0}
.section a:link, .section-head a:link, .section a:visited, .section-head a:visited {text-decoration: none;color: #5F5F5F}
.section a:hover, .section-head a:hover, .section a:active, .section-head a:active {text-decoration: underline;color: #900}
.section h5 {font-size: 11px;float: right;padding-top: 5px;margin:0}
.section h5 a:link {color:#004471}
.section-head h4 {font-size: 100%;float: right;padding-top: 12px;margin:0}
.section img {margin: 0}
.section-noimg {font: bold 18px arial;color:#004471;text-transform:uppercase;letter-spacing:-1px}
body#typeA .section img, body#typeC .section img, body#typeF .section img, .section-noimg {float: left}
body#typeC .section, body#typeE .section {margin-top:0;margin-bottom:.5em}

.section-head .subsections a, .section-head .subsections a:link, .section-head .subsections a:visited, .section-head .subsections a:active, 
.section .subsections a, .section .subsections a:link, .section .subsections a:visited, .section .subsections a:active {font-weight:bold;color:#004471;text-decoration: underline}
.section-head .subsections a:hover, .section .subsections a:hover {color:#900}
.section-head .subsections, .section .subsections {color:#004471;font-size: 86%}

/* ----- Puff ----- */
.puff {margin: 0 0 1em 0;padding: 7px 0 3px;width:auto}
.puff p {margin: 0 7px 3px 7px}
.puff small {margin-left: 7px}
#content .puff h5, #content .puff h4, #content .puff h3, #sidebar .puff h5, #sidebar .puff h4 {margin: 0 7px 0 7px}
#sidebar .puff p {font-size: 100%}
.puff img {float: right;margin: 3px 0 0 4px}
.puff ul {margin-top: .2em}
.puff img.nofloat {float:none}
/* ----- Horoscopes ----- */

.horoscopes {min-height: 100px;position:relative;width:200px}
.horoscopes a {text-decoration: none}
.horoscopes span {clear: both;display:block}
.horoscopes img {margin: .1em .2em 0 0}
.horoscopes p {margin: .3em .2em;float: left;width: 43%}
.featurePic, .featureNewsStory, .featureNewsSection {margin-bottom: 1em}

From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Peter Ottery
Sent: Tuesday, 22 June 2004 9:29 AM
To: '[EMAIL PROTECTED]'
Subject: RE: [WSG] Redesigning smh.com.au & theage.com.au with css

>> Nancy wrote:
>> This seemed like a very interesting meeting,
>> would it be possible to publish the actual CSS files?

Hi Nancy, thanks for yr interest :)
By 'actual CSS files' I assume you mean for the sites discussed - smh.com.au & theage.com.au..?
Point your browser in the direction of those URL's and dig away :)
I should mention, in a recent development (since the presentation), we've inlined the CSS on the homepage - primarily for performance issues. Granted the nature of CSS makes so much more sense when it comes from a central linked file/s - but the situation with these news sites and the amount of sustained traffic they get at peak periods meant inlining the CSS made a noticeable difference in load time over a modem (and even a small difference could be observed over a network connection). All other pages (articles etc) have a linked css file as normal.

pete

~~~~~~~~~~~~~~~~~~~~
Peter Ottery
Head of Design
f2 Network

(02) 8596 4450
[EMAIL PROTECTED]
www.f2.com.au

**********************************************************************
This message is intended for the addressee named and may contain
privileged information or confidential information or both. If you
are not the intended recipient please delete it and notify the sender.
**********************************************************************

RE: [WSG] Redesigning smh.com.au & theage.com.au with css

http://www.smh.com.au/

Inline Styles from http://www.smh.com.au/

Inline Styles from http://www.smh.com.au/

http://www.smh.com.au/css/smh_print.css

Reply via email to