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

Laughing out loud Well it's a mistake obviously. Laughing out loud

It seems to have inherited the image from #content ul. Have a look in IE, the daisy sits nicely in the middle of the staggered pics.

I did put the #gallery on the div but it lined the pics up neatly under each other in 2 rows instead of staggering them. The Rooms page will probably stay in a line since a page full would probably look like a patchwork quilt! - but what do we think about leaving this gallery layout on the home page? Too patchy?

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 5 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

It is a given if IE/7 and

It is a given if IE/7 and IE/6 get it right but compliant browsers get it wrong, then you are coding (backward) to Redmond.

CSS
 
#gallery{width:602px;margin:0 auto; border:1px solid fuchsia/*test*/;overflow:hidden;padding-bottom:25px;}
#top{background: url("daisy_yl.gif") 200px 50px no-repeat;padding-bottom: 40px;height:120px;}
#rap{float:left;width:100%}
#c1{background: url("daisy_yl.gif") 0 50px no-repeat; margin-right: 400px;height:120px;}
#c2{background: url("daisy_yl.gif") 0 50px no-repeat; float:left;width:200px;margin-left:-400px;height:120px;}
#c3{background: url("daisy_yl.gif") 0 50px no-repeat; float:left;width:200px;margin-left:-200px;height:120px;}
#bottom{background: url("daisy_yl.gif") 200px 80px no-repeat; width:100%; clear:both;padding-top: 40px;height:120px;}
#gallery img {display:block;margin:0 auto;width:125px; height:120px;}
 
HTML  
<div id="gallery">
<div id="top">
<a href="http://bbakehouse.freehostia.com/images/lb_bread.JPG" rel="lightbox[bb_home]" title="Bread can now be made in the comfortable country kitchen">
<img src="bb_files/tn_bread.jpg" width="125" height="120" alt="Bread can now be made in the comfortable country kitchen"></a>
</div>
<div id="rap">
<div id="c1">
<a href="http://bbakehouse.freehostia.com/images/lb_shelley.JPG" rel="lightbox[bb_home]" title="Shelley is willing to share her playground">
<img src="bb_files/tn_shell.jpg" width="125" height="120" alt="Shelley is willing to share her playground"></a>
</div>
</div>
<div id="c2">
<a href="http://bbakehouse.freehostia.com/images/lb_windowflowers.JPG" rel="lightbox[bb_home]" title="Daffodils from the property">
<img src="bb_files/tn_windo.jpg" width="125" height="120" alt="Daffodils from the property"></a>
</div>
<div id="c3">
<a href="http://bbakehouse.freehostia.com/images/lb_garden01.JPG" rel="lightbox[bb_home]" title="A part of the lovely garden">
<img src="bb_files/tn_garde.jpg" width="125" height="120" alt="A part of the lovely garden"></a>
</div>
<div id="bottom">
<a href="http://bbakehouse.freehostia.com/images/lb_postbox.JPG" rel="lightbox[bb_home]" title="We didn't have the heart to change it">
<img src="bb_files/tn_postb.jpg" width="125" height="120" alt="We didn't have the heart to change it"></a>
</div>
</div>
<!-- This document saved from <a href="http://bbakehouse.freehostia.com/index.html" rel="nofollow">http://bbakehouse.freehostia.com/index.html</a> -->

Cursory checked only on a local file in IE 6 & 7; and, Mac browsers FF/3.01, Safari, Opera, & Camino.
Validate your CSS.

You did not ask about anything else on that page...

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

Quote:It is a given if IE/7

Quote:

It is a given if IE/7 and IE/6 get it right but compliant browsers get it wrong, then you are coding (backward) to Redmond.

Aah, yes...I have had that drummed in to me here Smile I do in fact code for FF but check in IE as I go along. Saves waiting till the end and finding nothing works!

Thank you for the re-code, however I was trying to convert my LightBox gallery code to a list as per Gary's instruction here.

I sort of knew that the #content ul would probably need a change of name but I try to do one thing at a time and was just checking to see that the images were still all lined up. Got the shock of my life to see what IE had done and then started to wonder if I should leave it that way and try and get the daisy up in FF. So, as always, I came here to ask "what do we think?" Smile

Quote:

Validate your CSS.

:ohdear: A "$" just doesn't work as well as a "%" does it?

Quote:

You did not ask about anything else on that page...

LOL! I gather you spotted something else that needs fixing?

Thanks 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

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

I get it. Just "testing the

I get it. Just "testing the water." That being the case, I'll pass on other things to fix..

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

Quote:That being the case,

Quote:

That being the case, I'll pass on other things to fix..

LOL! But was it something "new" or something we had already covered in the other thread?

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 5 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

LOL, yourself... that's not

LOL, yourself... that's not a thread, that's a long boring novel. :rolleyes:

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

Hah! You need to have

Hah! You need to have staying power David! 'Tis but a chapter compared to most of my efforts - I'm definitely not a One Fix Wonder Laughing out loud

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 13 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Okaaay...gallery lists all

Okaaay...gallery lists all converted for first 3 pages (home, rooms & garden).

Looks ok here on both FF2 and IE6 - anyone else see a problem? There's a white gap of a couple of px above the bottom border of the map (IE) on the home page, but I can live with that.

See it here

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: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Looking good, and coming

Looking good, and coming together well, only had a quick scan though. Apropos the map white gap, again haven't checked in IE6 but try setting img to display:block or vertical-align:bottom

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 13 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Aaw thanks Hugo! I've

Smile Aaw thanks Hugo! I've swapped this website for a weekend at the Bakehouse! And guess what. D, one of the owners, has another site she wants me to do a makeover on! And has offered to pay me! Shock I think that's going a bit far myself Laughing out loud

Anywho...

Quote:

Apropos the map white gap, again haven't checked in IE6 but try setting img to display:block or vertical-align:bottom

Ummm...no, I'm afraid neither of those mad any difference. I tried display:block by itself first, then added the vertical-align:bottom - but no change.

On another note, and asking a Big Favour here Smile I've added back the two original backgrounds, (a4.gif on body and a3.gif on #outer) which are positively greenish on flatscreens from what I've seen. Since you did so well on the purrrpul - if you have some time to spare over the next few days/week :rolleyes: would you see if you can do the desat/hue trick to these please? So that it's a bit more golden on the sides and "toasted" on the top...like a loaf of bread! Then I can colour pick lighter/darker from that palette for the tariff table and brown text. I don't want to do just a gradient 'cos I like the sprinkled look. I know you're super busy, so only if and when.

I'm getting new versions of all the pics on Tuesday so I'll do all those again next week. I think the only thing left is the callout/quote thingy on the About Burra page, again I'm not sure it's dark enough.

Anything else I need?

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 5 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

The fix for the gap in IE/6

The fix for the gap in IE/6 is to target the correct hasLayout [1] trigger:

* html .prev, * html .next {height:0;}  

You did not ask if there is a correction for the "rivers," the use of a display font for a text font in some OSs, or if there is a fix for the nav that breaks the header.

BTW, no LOL allowed.

[1] http://www.satzansatz.de/cssd/onhavinglayout.html

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

Hi David, thanks for looking

Hi David, thanks for looking at this.

Quote:

The fix for the gap in IE/6 is to target the correct hasLayout [1] trigger:

I'm not sure why you've targetted .pre and .next here... :?

.centermap sits in #content and (according to the IE Developer Toolbar), they both have HasLayout as do all the floats following (#nukunu, .floatbird .next and .prev) - if I'm reading it right and -1 equals "true"

ETA: Might it be coming from #content p?

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 13 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

David wrote:You did not ask

David wrote:

You did not ask if there is a correction for the "rivers," the use of a display font for a text font in some OSs, or if there is a fix for the nav that breaks the header.

"rivers"

Justified text will usually produce some "rivers" however I'm not too worried about any appearing here since I have so little text. I would assume having a bit of a play with the margins and padding might correct it but I'm fairly happy with those as they are.

"display font"
Do you mean the pre-installed fonts each machine has and using one which may or may not be installed on the majority of systems? Yes, it has been niggling at me to check it because I rather like the Arial MT Rounded for this Smile
Guide to pre-installed fonts on Linus, Mac and Windows

"or if there is a fix for the nav that breaks the header"
Well if you have any ideas, do share! It is most untidy Smile

Quote:

BTW, no LOL allowed.

One must always retain a sense of humour!

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 5 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

Quote: I'm not sure why

Quote:

I'm not sure why you've targetted .pre and .next here... :?

Close the vertical space beneath the bottom of the arrow and the beneath the bottom of the birds foot in IE/6 -- on that particular page -- anyway that does it for you.

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

Smee wrote: Justified text

Smee wrote:

Justified text will usually produce some "rivers" however I'm not too worried about any appearing here since I have so little text

Well, I'm glad we got that straightened out...

If you do not see the rivers in your "so little text," view same at +2 or +3 in Safari, Camino, and any pre FF/3.0 browser; or, at /minimum/ font-size 32px in Opera, or at /minimum/ font-size 24 in Safari, Camino, or any pre FF/3.0.

Users control the Web, not you. It makes no difference to me whether or not you accommodate them.

But if did wish to do so "playing with the margins and padding" is not the solution. Changing text-align "justify" to text-align "left" will ditch the rivers.

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

Quote: "... I rather like

Quote:

"... I rather like the Arial MT Rounded for this"

In the header, it's not bad. As for using it throughout the rest of the page--

-- de gustibus non est disputandum

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

David wrote: "or if there is

David wrote:

"or if there is a fix for the nav that breaks"

Smee wrote:

Well if you have any ideas, do share! It is most untidy Smile

CSS
 
#menu
{	
/*height: 1.4em;line-height: 1.4em;delete*/
line-height: 2;/*add*/	
}
 
HTML
 <li><a href="http://bbakehouse.freehostia.com/tariffs.html">Tariffs&nbsp;&amp;&nbsp;Bookings</a></li>

The above CSS changes will prevent the nav from slipping behind the content block, and the menu items from overlapping vertically at +3 in Safari, Camino, and pre FF/3.0 browsers.
The addition of   in the html keeps that 3 word list item on one line with font scaling

The below CSS changes keeps h1 from clipping vertically when the fonts are scaled enough for it to be on two lines.

/*#header-- not needed*/ h1
{   
/*font-family: "Arial Rounded MT Bold", arial, sans-serif;not needed-- inherited*/
line-height: 0.8; /*add*/
}
 
/*#header-- not needed*/ h2
{
/*font-family: "Arial Rounded MT Bold", arial, sans-serif;not needed-- inherited*/
}

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

Thank you, I shall

Thank you, I shall investigate.

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 5 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

Smee wrote:... I shall

Smee wrote:

... I shall investigate.

I owe my success to having listened respectfully to the very best advice, and then going away and doing the exact opposite.
-- G. K. Chesterton (1874 - 1936)

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

Are we flattering ourselves

Are we flattering ourselves David Wink

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