Oooeeerk! Mr Tony's "improving" us again!
Well I followed all the good guff on opacity at Mandarin Design, and it pretty much worked!
Then I thought if I came here with all that in-line styling I would get told off, so I've tried to move it to the CSS - but Vlad tells me opacity doesn't exist!!!
And my "quotes" are on the wrong bit. They should be on the pullquote, but I can only get them there with in-line stuff and then I can't style them to the top of where they're supposed to sit. Or can I?
And I absolutely can't get "withquote" to text-align:left and "pullquote" to text-align:right *sigh*
Help please....I've tried all sorts.
ETA: Ummm....sorry about that...BB
Make .withquote {overflow:
Make .withquote {overflow: hidden;} to create a new block formatting context. For IE, set hasLayout. I don't see where you've tried to put the quotes on the pullquote.
cheers,
gary
Never mind. Put the quote
Never mind. Put the quote background image on the pullquote and on the p, apply the close-quote. I'm not happy with your use of the classes.
cheers,
gary
Never mind the never-mind.
Never mind the never-mind. Why didn't you use blockquote instead of the dv.withquote?
cheers,
gary
Quote:Never mind the
Never mind the never-mind.
Now I'm truly confused!
Why didn't you use blockquote instead of the dv.withquote?
I did originally - I just changed it tonight because I couldn't add a class to it.
Why don't you like my classes? I did try taking all that out and just floating left and right but couldn't contain the left float
I've just changed it - it's
I've just changed it - it's almost there
Like you, I thought
Like you, I thought HasLayout was the problem too , but when I stick width:400px on Withquote (the left bit), it drops below the Pullquote.
Not quite sure what you are
Not quite sure what you are after. Something like this?
Online
http://chelseacreekstudio.com/ca/cssd/bake.htm
For arcives below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>About bb</title> <meta name="robots" content="noindex, nofollow"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="description" content="Retreat to a holiday with a slice of history at the Old BB"> <meta name="keywords" content=" retreat, holiday, accommodation, spiritual, wellness, wellbeing, history, 3 bedrooms, sleeps 8, workshops, AV room, tariffs, bookings, gardens"> <style type="text/css">* { margin: 0em; padding: 0em; } a { color: #8DA359; text-decoration: underline; border: 0; } a:hover { text-decoration: none; } img {border: 0; } body { background-color: #F7DC83; background-image: url('bbimages/BB05_a4.gif'); background-repeat: repeat-x; color: #37371E; font-family: "Lucida Sans Unicode", "Arial Rounded MT Bold", sans-serif; line-height: 1.4em; font-size: 100%; height: 1%; } html{ font-size: 100%; } #outer { width: 46.25em; min-width: 620px; max-width: 780px; margin: 1em auto; background-color: #FEFCF3; background-image: url('bbimages/a3.gif'); background-repeat: repeat-x; padding: 1.0em; border-top: solid 1px #97691C; } #outer2 { border: dotted 2px #EFEAD1; padding: 1.0em; } #menu { background-color: #6C7424; background-image: url("images/a1.gif"); background-repeat: repeat-x; color: #ffffff; text-align: center; line-height: 1.5em; padding: 0.8em; border-bottom: solid 1px #ffffff; border-top: solid 1px #6D7B34; } #menu a { color: #ffffff; text-decoration: none; } #menu ul { list-style: none; padding: 0; } #menu li { font-size: 0.9em; font-weight: bold; display: inline; } #menu li a { padding: 0.8em; } #menu li a:hover { background-color: #7C8628; background-image: url("images/a2.gif"); background-repeat: repeat-x; } #header { padding: 0.8em 1.2em 1.2em 1.2em; } #header h1 { color: #97691C; text-transform: lowercase; font-family: "Arial Rounded MT Bold", "Lucida Sans Unicode", sans-serif; font-size: 2.5em; font-weight: normal; letter-spacing: -0.05em; } #header h2 { position: relative; font-family: "Arial Rounded MT Bold", "Lucida Sans Unicode", sans-serif; text-transform: lowercase; font-weight: bold; margin: 0.5em 0; font-size: 1.5em; color: #97691C; } #content { position: relative; overflow: hidden; text-align: left; padding: 0em 1.2em 0.5em 1.2em; display: inline-block; } #content p { font-size: 100%; text-align: justify; margin-bottom: 1.0em; color: #4F4F2B; } #content h3 { font-size: 1.5em; color: #97691C; font-family: "Arial Rounded MT Bold", "Lucida Sans Unicode", sans-serif; border-bottom: #CECF8F dashed 2px ; margin: 1.5em 0 1.0em 0; } #daisylist { position: relative; list-style: none; line-height: 1.8em; } #daisylist li { position:relative; background: url("bbimages/daisy_yl.gif") no-repeat 0 50%; padding: 0.5em 2.5em; margin: 0.5em 2em; text-align: left; color: #8DA359; display: block; } #gallery { margin: 0; padding: 0; margin: 1.5em 0; list-style: none; } #gallery li { display: inline; } #quote { border:1px solid red; width: 95%; background: #FEFCF3; margin: 10px auto 0 auto; } #lft {border-right:1px solid red;width: 380px;display:table; font-family: Georgia, "Trebuchet MS", serif; zoom: 1; } #rht, #rht-a { background: url("http://bbakehouse.freehostia.com/bbimages/unquote.gif") no-repeat left top; border-left: 1px solid red; border-bottom: 1px solid red; float: right; width: 220px; } #rht-a { background: url("http://bbakehouse.freehostia.com/bbimages/unquote.gif") no-repeat right bottom; border: none; } #rht p { color: #77927f;text-align:right; font: 120% "Lucida Sans Unicode", "Arial Rounded MT Bold", sans-serif; margin: 0 25px 0 0; } . .floathouse { float: right; height: 120px; width: 126px; margin: 0 0 0 2em; } .floatbird1 { float: left; height: 56px; width: 75px; margin: 2.5em 0 0 0; } .floatbird2 { float: right; height: 56px; width: 75px; margin: 2.5em 0 0 0; } .centermap { height: 296px; width: 250px; margin: 2em auto; vertical-align: bottom; border: #BB8222 solid 3px; display: block; } .prev { position: relative; float: left; height: 30px; width: 30px; margin: 2.5em 0 0 0; padding-top: 1.2em; } .next { position: relative; float: right; height: 30px; width: 30px; margin: 2.5em 0 0 0; padding-top: 1.2em; } #nukunu { text-align: justify; width: 300px; font-size: 0.8em; font-style: italic; font-weight: bold; line-height: 1.2em; margin: 2.5em 0 2em 15em; color: #BB8222; display: block; } #nukunu p { text-align: center; } /*-- TABLE, TARIFFS --*/ table#tariffs { background: #FDFDDF; padding: 2px; border: 1px solid #E0D1B2; } table#tariffs th { color: #BB8222; background: #FFFFCC; text-align: center; font-family: arial, sans-serif; padding: 10px; border: 1px solid #E0D1B2; } table#tariffs td { line-height: 1.2em; padding: 5px; border: 1px solid #E0D1B2; } table#tariffs p { font-family: arial, sans-serif; font-size: 0.9em; color: #000; line-height: 1.2em; padding: 10px 10px 0 10px;} .accomm { font-size: 1.1em; } #footer { border-top: dotted 2px #EFEFD6; padding-top: 1.0em; font-family: "Arial Rounded MT Bold", arial, sans-serif; font-size: 0.8em; color: #AFA162; clear: both; } </style> </head> <body> <div id="outer"> <div id="outer2"> <a name="top"></a> <div id="header"> <h1>Burra Bakehouse Retreat Centre</h1> <h2>...retreat to a Slice of History</h2> </div> <div id="menu"> <ul> <li><a href="index.html">Home</a></li> <li><a href="rooms.html">The Rooms</a></li> <li><a href="gardens.html">The Gardens</a></li> <li><a href="tariffs.html">Tariffs & Bookings</a></li> <li><a href="aboutburra.html">About Burra</a></li> </ul> </div> <div id="content"> <h3>The Heritage of Burra Preserved</h3> <p>The <a href="http://www.burrahistory.info/" title="external site">Burra History Group</a><img src="bbimages/offsite01a.jpg" alt="external site"> maintains a fascinating and comprehensive website with many old photos and articles. The history of Burra, its pioneers, and their beginnings in this old copper mining town, make absorbing reading.</p> <div id="quote"> <div id="rht"> <div id="rht-a"> <p>...interested parties resolved into two groups: the ‘Nobs’ and the ‘Snobs’</p> </div> </div> <div id="lft"> <p>The story of the mine began in 1845 with the chance discovery of copper ore by a shepherd near Burra Creek. Soon after, a similar find was made by another shepherd further to the north. News of the discovery reached Adelaide, a town already infected with mining mania because of the success of the recently opened Kapunda mine. The struggle for possession of this new copper bearing land quickly followed.</p> <p>The interested parties resolved into two groups: the "Nobs" and the "Snobs". The Nobs were capitalists and included the owners of Kapunda mine. The Snobs were shopkeepers and merchants from Rundle and Hindley Streets in Adelaide.</p> </div> </div> <!-- <div style="clear:both;"></div> --> <p>To read more about the Burra Burra Mine - known as "The Monster Mine" - go to the History Group's main page link given above and choose Burra Mine from the menu (unfortunately there is no direct link to this article).</p> <p>Burra was declared a State Heritage Area in 1993.</p> <div class="centermap"> <img src="bbimages/bb_map.png" alt="Adelaide to Burra map"> </div> <div class="prev"> <a href="tariffs.html"><img src="bbimages/prev_yl.jpg" title="Tarrifs & Bookings" alt="Previous"></a> </div> <div class="floatbird2"> <a href="#top"><img src="bbimages/bb_topbird2.jpg" title="Go to top of page" alt="Top of page"></a> </div> </div> <div id="footer"> <p>© Karuna Consultancy Pty Ltd ABN 36 094 877 317<br> <span style="font-size: 0.7em;"> Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates </a>has been modified.</span></p> </div> </div> </div> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> var pageTracker = _gat._getTracker("UA-UA-4918306"); pageTracker._initData(); pageTracker._trackPageview(); </script> </body> </html>
What I said before? Never mind.
Take a look at this.
<!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"> <head> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 6 November 2007), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>" /> <title>About BB</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="aboutburra_files/bbakehouse.css" /> <style type="text/css"> /*<![CDATA[*/ blockquote { font-size: 0.9em; padding-left: 1.5em; overflow: hidden; zoom: 1; /*for IE <7*/ } blockquote p { text-indent: -.5em; /*value equals width of quote-mark face*/ } blockquote p:before { content: open-quote; } blockquote p:after { content: close-quote; /*we have to close each paragraph else following quotes would all be inner quotes*/ visibility: hidden; /*so we hide them until the last paragraph*/ } blockquote p:last-child:after, blockquote p.last-p:after { /*Opera doesn't grok :last child, so … */ visibility: visible; } #content { overflow: hidden; } #pullquote { background:transparent url(aboutburra_files/quote.gif) no-repeat left top; color:#6C7424; display:block; float:right; font-family:"Lucida Sans Unicode","Arial Rounded MT Bold",sans-serif; font-size:28px; line-height:1.5em; margin-left:30px; opacity:0.2; padding: 13px 0 0; position:relative; text-align:right; width:190px; } #pullquote p { background:transparent url(aboutburra_files/unquote.gif) no-repeat right bottom; margin: 0; padding: 0 0 13px; } /*]]>*/ </style> </head> <body> <div id="outer"> <div id="outer2"> <div id="content"> <h3>The Heritage of B Preserved</h3> <p>The <cite><a href="http://www.bbhistory.info/" title="external site">B History Group</a></cite><img src= "aboutburra_files/offsite01a.jpg" alt="external site" /> maintains a fascinating and comprehensive website with many old photos and articles. The history of B, its pioneers, and their beginnings in this old copper mining town, make absorbing reading.</p> <div id="pullquote"> <p>...interested parties <small>resolved into two groups: the</small> <b>"Nobs" and the "Snobs"</b></p> </div> <blockquote> <p>The story of the mine began in 1845 with the chance discovery of copper ore by a shepherd near B Creek. Soon after, a similar find was made by another shepherd further to the north. News of the discovery reached Adelaide, a town already infected with mining mania because of the success of the recently opened Kapunda mine. The struggle for possession of this new copper bearing land quickly followed.</p> <p class="last-p">The interested parties resolved into two groups: the "Nobs" and the "Snobs". The Nobs were capitalists and included the owners of Kapunda mine. The Snobs were shopkeepers and merchants from Rundle and Hindley Streets in Adelaide.</p> </blockquote> </div> <p>To read more about the Bb Mine - known as "The Monster Mine" - go to the History Group's main page link given above and choose b Mine from the menu (unfortunately there is no direct link to this article).</p> <p>B was declared a State Heritage Area in 1993.</p> </div> </div> </body> </html>
cheers,
gary
Can I just add.. oh never
Can I just add.. oh never mind
David wrote:Not quite sure
Not quite sure what you are after. Something like this?
Note quite David. I may have led you astray just pointing at Mandarin's home page. The pertinent bit was under the heading "Magazine Style Pullquotes" (click it and scroll down on the new page)...but it's okay, Gary grokked what I was getting at
Gary... He's done it! By George, I think he's done it!
I just slapped it into a new page to look and will have a tweak though I don't even begin to understand all your new (to me) CSS!!! I've never seen half that stuff before
Can I just add.. oh never mind
...but I should really give it to Gary this time round
Now let's see how well I can mess it all up!
Smee wrote:David wrote:Note
Note quite David. I may have led you astray just pointing at Mandarin's home page. The pertinent bit was under the heading "Magazine Style Pullquotes" (click it and scroll down on the new page)...but it's okay, Gary grokked what I was getting at
"By all means break the rules, and break them beautifully, deliberately and well. That is one of the ends for which they exist."
— Robert Bringhurst (The Elements of Typographic Style)
//mod edit: second quote tag closed --gary
Sorry David, I don't quite
Sorry David, I don't quite understand, however I assume you're talking about Gary's code.
I did look at yours first (it has now changed I think) but although it had both quotes in the right place, both were still justified and the Pullquote didn't have any styling? That's why I say it's changed, because it has some now.
It was after midnight though and I faded fast at that point. I'll look again.
I didn't quote anything Mr
I didn't quote anything Mr Tony!
Smee wrote:Sorry David, I
Sorry David, I don't quite understand, however I assume you're talking about Gary's code.
My reply has nothing to due with Gary or Gary's code. It is a basic and simple concept that the purpose of typography is to make content readable. No more. No less.
Smee wrote:I didn't quote
I didn't quote anything Mr Tony!
It wasn't you this time.
cheers,
gary
Smee wrote:<snip> Gary...
Gary... He's done it! By George, I think he's done it!
I just slapped it into a new page to look and will have a tweak though I don't even begin to understand all your new (to me) CSS!!! I've never seen half that stuff before
See How-to mark up quotes, originally published at my now-defunct site as quotes.html 25-Jul-2006 23:43. I mention this only because I'm still p*ssed about this, Long Live the Q Tag by Stacey Cordoni of Sept, 2006. I really, really need to get a life. :shrug:
Other than the blockquote, the css is pretty much vanilla, with just a touch of butterscotch.
cheers,
gary
Oi you two! A person's
Oi you two! A person's trying to concentrate here Thanks for untangling Gary and for the "clarification" David.
Gary it's up - but my #content is mucking it up I think.
I've also tried David's and played with some span styling but can't get that to work either.
Other than the blockquote, the css is pretty much vanilla, with just a touch of butterscotch.
I luuuurve butterscotch and vanilla. Seriously!
Look at the path to the
Look at the path to the quote/unquote images. /aboutburra_files/unquote.gif That was my local path. It won't do you much good.
cheers,
gary
Sorry guys! My ISP went down
Sorry guys! My ISP went down the minute I hit Submit and I've been locked out for the last hour
Thanks for the links Gary...now I understand a bit more
Look at the path to the quote/unquote images. /aboutburra_files/unquote.gif That was my local path. It won't do you much good.
Aaaah...off to do it now and reload to see what we will see.
Off you go and have a look
Off you go and have a look then...
What I meant about #content is that something still seems to be overriding the Pullquote alignment. Locally it's right aligned but not when I put it on FF.
Can you be more
Can you be more specific/explicit about what "something still seems to be overriding the Pullquote alignment. Locally it's right aligned but not when I put it on FF" means? It looks as I would expect it to.
cheer s,
gary
Quote:It looks as I would
It looks as I would expect it to.
I don't know what's wrong then When I plonked your page into my editor and loaded it - it looked bayoodiful - Pullquote was exactly what I wanted i.e. right aligned/left jagged and different text sizes.
When I put the code into my files and loaded them to the server, what I see in FF is a justified Pullquote. :?
Is this my cache perhaps?
ETA: No, I don't think it is the cache (I force refresh all the time and I just viewed it in IE6 and it's justified) - I must have unwittingly changed something else.
My bad. I was mentally
My bad. I was mentally bypassing the text-align properties.
Consider this:
#pullquote p { background:transparent url(bbimages/unquote.gif) no-repeat scroll right bottom; margin:0; padding:0 0 13px; } #content p color:#4F4F2B; font-size:100%; margin-bottom:1em; text-align:justify; }
#pullquote ... text-align:right; width:190px; }
Which text-align rule applies to the p?
cheers,
gary
Quote:Which text-align rule
WoooHoooo! Way to go Gary!
WoooHoooo! Way to go Gary! {mwaah} Looks the same in IE toooo!
Now, two itchy bits...
1. I was originally aiming to have the left block left aligned/right ragged. Worth pursuing?
2. I will change the left block text to Georgia to make it more distinct. Do we think the Pullquote should be in Georgia or stay as is?
All opinions considered
Georgia
Georgia
There you go then, have a
There you go then, have a look.
Yes, I think I like it. So
Yes, I think I like it.
So is there anything else that needs tending before I start a new Burnt Bit with the tracker? I'm thinking that, and making sure all the descriptions etc are right, are the only things left?
I shall put solved on the thread though...
Looks very nice, good job
Looks very nice, good job both of you.
Re your original post "vlad doesn't like opacity" don't overly worry about css validation, in respect of certain warnings you do need to clarify to vlad which css spec you want him to check your rulesets against i.e css2.1 css3 etc a property might not have been part of an earlier spec but introduced in a later one.
Aaaw thanks Hugo...but it's
Aaaw thanks Hugo...but it's all due to Gary's being upset with whatshername - I couldn't have done it because I didn't know that story.
you do need to clarify to vlad which css spec you want him to check your rulesets against i.e css2.1 css3 etc
Yes, he tripped me up on that a while ago and basically I check against 2.1 now. I did have the defunct -moz thing in there though as well as the "filter" opacity for IE - both of which are now gone.
He still doesn't validate the CSS but I'm not going to worry about his complaints on this one
Validate against the latest
Validate against the latest spec you can, -moz and IE properitary stuff won't validate. Mention some of the other warnings and we can clear them up or confirm not to worry about them.
seem to recal that post on blockquotes/q from years back and Gary's consternation at the time and said he should have mentioned something to whatsherface
validated to
validated to css3
Move the zoom property to a conditional comment stylesheet for IE only or care not as it's not a problem as such. Backgrounds/colors are potential problems and is the validator being over cautious and unable to acertain whether or how the layout actually stacks as to whether there is potential for disaster.
Quote:Validate against the
Validate against the latest spec you can,
Ah. I thought I was playing safe. I shall change it to CSS3.
seem to recal that post on blockquotes/q from years back and Gary's consternation at the time and said he should have mentioned something to whatsherface
I think he should send his brilliant riposte piece to ALA! After all I'm proof of the pudding
validated to css3
Ooooh! Look at that - 2 errors gone! One was a "last-child" thing and the other was Vlad telling me the opacity didn't exist in 2.1 but did in 3. Very nice of him.
Move the zoom property to a conditional comment stylesheet for IE only or care not as it's not a problem as such.
What, a whole sheet for a zoom property? I don't think so, we know it's good stuff, it doesn't need badges and anyone who knows enough to care about them can run it through the validator themselves.
Backgrounds/colors are potential problems and is the validator being over cautious and unable to acertain whether or how the layout actually stacks as to whether there is potential for disaster.
OTOH these I will check out! Thanks Hugo
I used the zoom property
I used the zoom property because it's so simple, and didn't get in the way of the issues at hand. Any means of setting hasLayout will work. The Holly hack, * html [selector] {height: 1px;} is perfectly safe, as only IE≤6 sees it. Another safe method is Claire's tripswitch hack, which is a favorite of mine.
Both methods will test as valid css.
cheers,
gary
Hi Gary - I'm not worried
Hi Gary - I'm not worried about the zoom, as you say, it's simple and it works. Though I'll tuck the other two away for future reference when I do want it to validate
Hugo....
73 Same colors for color and background-color in two contexts #outerImageContainer and #menu a
73 Same colors for color and background-color in two contexts #imageDataContainer and #menu a
334 Same colors for color and background-color in two contexts #overlay and table#tariffs p
These are Vlad's colour complaints and I'm not sure what he's referring to :?
I looked at them but the first named div in each isn't in my code. Maybe this is a name he makes up? Is it #outer or #outer2? It seems to be saying if the menu image isn't there, the white menu text won't show up against the cream bg set on #outer - is that right? But there is a dark green background set on #menu - why or when would it lose that in order for the white/cream to come in to play?
This is the outer and menu code-
#outer { width: 46.25em; min-width: 620px; max-width: 780px; margin: 1em auto; background-color: #FEFCF3; background-image: url('bbimages/a3.gif'); background-repeat: repeat-x; padding: 1.0em; border-top: solid 1px #97691C; } #outer2 { border: dotted 2px #EFEAD1; padding: 1.0em; } #menu { background-color: #6C7424; background-image: url("images/a1.gif"); background-repeat: repeat-x; color: #ffffff; text-align: center; line-height: 1.5em; padding: 0.8em; border-bottom: solid 1px #ffffff; border-top: solid 1px #6D7B34; } #menu a { color: #ffffff; <span style="color:red"><----------line 73</span> text-decoration: none; } #menu ul { list-style: none; padding: 0; } #menu li { font-size: 0.9em; font-weight: bold; display: inline; } #menu li a { padding: 0.8em; } #menu li a:hover { background-color: #7C8628; background-image: url("images/a2.gif"); background-repeat: repeat-x; }
I'm not sure what he's referring to with the #overlay (again, not something I've specified) the bit for line 334 -
table#tariffs { background: #FDFDDF; padding: 2px; border: 1px solid #E0D1B2; } table#tariffs th { color: #BB8222; background: #FFFFCC; text-align: center; font-family: arial, sans-serif; padding: 10px; border: 1px solid #E0D1B2; } table#tariffs td { line-height: 1.2em; padding: 5px; border: 1px solid #E0D1B2; } table#tariffs p { font-family: arial, sans-serif; font-size: 0.9em; color: #000; <span style="color:red"><---------line 334</span> line-height: 1.2em; padding: 10px 10px 0 10px;} .accomm { font-size: 1.1em; }
The seemingly spurious
The seemingly spurious selector/rulesets are comming from the lightbox.css.
I wouldn't be too concerned at these warnings. You must determine that your backgrounds and text color don't conflict and that sufficient backgrounds are stated so that a user defined background doesn't inadvertently match a text color you have set. Define no backgrounds at all and you could find a user who has set application backgrounds to black which along with your black text renders black on black which can be difficult to read.
Duh! It didn't occur to me
Duh! It didn't occur to me to check the lightbox.css
I usually put a colour on the body and my containers so I should be safe on that score - thanks.