37 replies [Last post]
Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 51 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Oooeeerk! Mr Tony's "improving" us again! Smile

Well I followed all the good guff on opacity at Mandarin Design, and it pretty much worked! Smile

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

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Never mind the never-mind.

Never mind the never-mind. Why didn't you use blockquote instead of the dv.withquote?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 51 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Quote:Never mind the

Quote:

Never mind the never-mind.

Laughing out loud Now I'm truly confused! Laughing out loud

Quote:

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? Sad I did try taking all that out and just floating left and right but couldn't contain the left float Sad

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 51 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

I've just changed it - it's

I've just changed it - it's almost there

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 51 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

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.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

David Laakso
David Laakso's picture
Offline
Enthusiast
US
Last seen: 12 years 42 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

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 &amp; 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 
 &#8216;Nobs&#8217; and the 
 &#8216;Snobs&#8217;</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 &amp; 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>&copy; Karuna Consultancy Pty Ltd  ABN 36 094 877 317<br>
 
      <span style="font-size: 0.7em;">&nbsp; &nbsp; &nbsp; 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>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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>
Embedded styles override existing styles where applicable.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 23 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Can I just add.. oh never

Can I just add.. oh never mind Tongue

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 51 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

David wrote:Not quite sure

David wrote:

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 Smile

Gary... Shock He's done it! By George, I think he's done it! Smile 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 Shock

Hugo wrote:

Can I just add.. oh never mind Tongue


Smile...but I should really give it to Gary this time round Smile

Now let's see how well I can mess it all up!

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

David Laakso
David Laakso's picture
Offline
Enthusiast
US
Last seen: 12 years 42 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

Smee wrote:David wrote:Note

Smee wrote:
David wrote:

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 Smile

"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

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 51 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

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. Smile I'll look again.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 51 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

I didn't quote anything Mr

I didn't quote anything Mr Tony!

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

David Laakso
David Laakso's picture
Offline
Enthusiast
US
Last seen: 12 years 42 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

Smee wrote:Sorry David, I

Smee wrote:

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Smee wrote:I didn't quote

Smee wrote:

I didn't quote anything Mr Tony!

It wasn't you this time. Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Smee wrote:<snip> Gary...

Smee wrote:

Gary... Shock He's done it! By George, I think he's done it! Smile 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 Shock

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 51 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Oi you two! A person's

Oi you two! A person's trying to concentrate here Smile 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.

Gary wrote:

Other than the blockquote, the css is pretty much vanilla, with just a touch of butterscotch.

I luuuurve butterscotch and vanilla. Seriously! Smile

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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. Wink

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 51 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

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 Sad

Thanks for the links Gary...now I understand a bit more Smile

Quote:

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. Wink

Aaaah...off to do it now and reload to see what we will see.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 51 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

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.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 51 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Quote:It looks as I would

Quote:

It looks as I would expect it to.

I don't know what's wrong then Sad 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.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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;
}
and this
#pullquote 
...
  text-align:right;
  width:190px;
  }

Which text-align rule applies to the p?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 51 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Quote:Which text-align rule

Quote:

Which text-align rule applies to the p?

Answer loaded to site Tongue

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 51 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

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 Smile

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 23 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Georgia

Georgia

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 51 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

There you go then, have a

Smile There you go then, have a look.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 51 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

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...

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 23 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 51 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

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.

Quote:

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 Smile

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 23 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Smile 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

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 23 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

validated to

validated to css3

http://jigsaw.w3.org/css-validator/validator?warning=1&profile=css3&usermedium=all&uri=http%3A%2F%2Fbbakehouse.freehostia.com%2Faboutburra.html

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 51 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Quote:Validate against the

Quote:

Validate against the latest spec you can,

Ah. I thought I was playing safe. I shall change it to CSS3.

Quote:

Smile 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 Laughing out loud

Quote:

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.

Quote:

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.

Quote:

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 Smile

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 51 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

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 Smile

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;
}

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 23 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 3 years 51 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Duh! It didn't occur to me

Duh! It didn't occur to me to check the lightbox.css Smile

I usually put a colour on the body and my containers so I should be safe on that score - thanks. Smile

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile