Re: [css-d] Getting absolutely positioned divs with bottom: auto to end together

2009-05-11 Thread Gunlaug Sørtun
Michael Leibson wrote:

 www.thinkingmusic.ca/analyses

I have used a copy of this page to exemplify one approach to solving
your problems...

http://www.gunlaug.no/tos/alien/ml/test_09_0511.html
http://www.gunlaug.no/tos/alien/ml/test_09_0511_files/styles00.css

 Are these differences the result of my own errors, or normal browser 
 behaviour?

Both :-)

Browsers behave this way given the styles you have provided.

You can not calculate the right length (height) of an element in
relation to another, unless one is a child of the other.

 If the result of browser behaviour, I’d rather just find a way to 
 ensure that all divs conclude at the same point (and leave the minor 
 differences alone), rather than write re-calibrated measurements for 
 each browser.  Is there a way to do this?

CSS standards, and some workarounds for very old browsers, let you make
the sidebar (#left) end up exactly in line with the main column. The
easiest way to achieve this is to leave #main un-positioned (static), so
it can affect the height of main div (#top) directly. Then the sidebar
(left) can be absolute positioned relative to bottom of main div (#top)
for perfect alignment.
Resize (text) all you want in any somewhat standard compliant browser,
and it'll keep the bottom alignment.

IE6 can't position opposite edges of elements relative to parents, so
I've added a workaround (dynamic expression) for it.

I've also modified how those ul in the sidebar are positioned.
Note that there's no way you can space those ul evenly down the sidebar
in a way that will look alright for any page-length and amount of
content and degree of font-resizing in the main column. You'll have to
compromise.


Design wise I agree with Philippe: a jagged line-up at the bottom will
look better then a straight line. You can achieve a straight line or a
jagged alignment as you wish with the method I've exemplified, and the
chosen alignment will remain stable.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Fluid Page + Centered 80% Div + Thumbnails

2009-05-11 Thread Court Kizer
Sorry for the late reply, and why yes. Thank you it is! -ck


On May 6, 2009, at 5:33 PM, Tim Snadden wrote:


 On 7/05/2009, at 11:08 AM, Court Kizer wrote:

 I have a thumbnail gallery composed of 200px by 200px thumbnails.

 I put them in a 80% wide DIV and allow them to reflow as the browser
 resizes.
 This works great. However I do NOT want it justified to the left. So
 I  put  margin: 0 auto; on my 80% width div.


 It's a bit difficult without seeing an example, but I suspect you  
 need to contain floats. There are a number of ways of doing this.  
 One would be to set 'overflow: auto;' on the container.

 Have a look at this: http://snadden.com/sandbox/thumbnail.html

 Is that the kind of effect you were looking for?

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


[css-d] UL Menu Causing Separate Issues In IE and Firefox?

2009-05-11 Thread The Ferrett
I'm working on a table-free layout with jQuery-based drop-down megamenus
(which have a hover-based trigger that displays a panel).  The menus are
ULs, though to make it fit underneath the logo they're contained in a DIV
set to a display: inline (since otherwise, it doesn't validate).  

Though the page now validates, it's running into two problems in separate
browsers.  

http://www.starcitygames.com/SCG_6/test.html

In FIREFOX, the menu displays fine, but displays another line just below it
- a narrow strip the height and background color of the menu that drops
everything else down.  I'm not sure why this is happening.

In IE, if you hover your mouse over the Buying Cards link and see the
(horrifically styled) drop-down panel, you'll note that the author in the
text underneath the panel (The Ferrett) bleeds through into the actual
panel, even though the z-index on the panel is set to 10,000.  This could be
a JavaScript issue, but I think it's CSS-related.  

In CHROME, OPERA, and SAFARI: No problems.  

Any ideas?  The relevant markup and CSS is below, though obviously the whole
page can be visited.  

Thanks in advance!

div id=header
div style=float: left;
a href=http://www.starcitygames.com;
class=disable_hover
img
src=http://www.starcitygames.com/images/button/SideSCGLogo.gif;
alt=StarCityGames.com! /
/a
/div

script type='text/javascript'!--//![CDATA[
   var m3_u =
(location.protocol=='https:'?'https://ads.starcitygames.com/phpad/www/delive
ry/ajs.php':'http://ads.starcitygames.com/phpad/www/delivery/ajs.php');
   var m3_r = Math.floor(Math.random()*999);
   if (!document.MAX_used) document.MAX_used = ',';
   document.write (scr+ipt type='text/javascript' src='+m3_u);
   document.write (?zoneid=4);
   document.write ('amp;amp;cb=' + m3_r);
   if (document.MAX_used != ',') document.write (amp;amp;exclude=
+ document.MAX_used);
   document.write (amp;amp;loc= + escape(window.location));
   if (document.referrer) document.write (amp;amp;referer= +
escape(document.referrer));
   if (document.context) document.write (amp;context= +
escape(document.context));
   if (document.mmm_fo) document.write (amp;amp;mmm_fo=1);
   document.write ('/scr+ipt);
//]]--/scriptnoscripta
href='http://ads.starcitygames.com/phpad/www/delivery/ck.php?n=acef68fcamp;
cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'img
src='http://ads.starcitygames.com/phpad/www/delivery/avw.php?zoneid=4amp;cb
=INSERT_RANDOM_NUMBER_HEREamp;n=acef68fc' border='0' alt=''
//a/noscript

div id=navigation_bar
ul id=menu
li
h2a
href=http://www.starcitygames.com;Home/a/h2
/li   
li class=mega
h2
a href=#Buying Cards/a
/h2
  div
  h3
Menswear
  /h3
  p
a href=#Articles/a, 
a href=#Cards/a, 
a href=#Decks/a,
a href=#More.../a
  /p
  h3
Gifts
  /h3
  p
a href=#Gift Certificates/a, 
a href=#Ponies/a, 
a href=#More.../a
  /p
  h3
Clearance!
  /h3
  p
10% off all Apocalypse Singles this
weekend. 
a href=#Don't miss out!/a
  /p
a href=# class=more
  More stuff for him.../a
  /div
/li
li class=mega
h2
a href=#Selling Cards/a
/h2
div
h3
Menswear
 

[css-d] Image bullets and floated images

2009-05-11 Thread Stephen Tang
Hi,
I have a div/image that is floated left from the rest of the content.
My content consists primarily of p tags and lists.  The text needs
to wrap below the floated dv/image.  This part is not difficult.
However, I have a list where the bullets have been replaced with
images.  When I do this, the image bullets are all the way to the left
of the page and collides with the floated div/image.

When I check this in firebug, I noticed that the ul takes up the
width of the parent element, so the bullet images are placed on the
left side.  I wanted the bullets to be immediately next to the list
items (if I use the default bullets, the bullets appear next to the
list item. Is there any way to get the bullet images next to the list
items again?  I don't want to jeopardize the text-wrapping either.

Here is the URL:
http://stephentang.info/floattest/test.html

Thank you for your time in reading this.

Sincerely,
Stephen
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Image bullets and floated images

2009-05-11 Thread Brian Hazelton

The best that I can come up with is that since it is just a circle and
not anything too intricate, you can just use the image as the list-style
type...list-style:url(image name);  the only problem with this is that
the image is not directly in the center of the text. Hope this helps.

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] IE 8

2009-05-11 Thread david
Divya Manian wrote:

 I have also experienced MultipleIEs have issues with javascript (sometimes
 CSS). Plus it doesn't work as expected when u install IE 8. I am still
 looking for a good solution to test IE 6/7/8 in one machine, no luck so far.

Linux with VirtualBox and 3 different Windows VM's works.

-- 
David
gn...@hawaii.rr.com
authenticity, honesty, community
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] IE 8

2009-05-11 Thread Ib Jensen
2009/5/11 david gn...@hawaii.rr.com:
 Divya Manian wrote:

 I have also experienced MultipleIEs have issues with javascript (sometimes
 CSS). Plus it doesn't work as expected when u install IE 8. I am still
 looking for a good solution to test IE 6/7/8 in one machine, no luck so far.

 Linux with VirtualBox and 3 different Windows VM's works.

A new toy has been discovered for Win-machines:

IETester

http://www.my-debugbar.com/ietester/index_all.php

Shows your page in IE 5.5, 6, 7, 8.
IE8 only showing, if IE7 is installed.

I don't know if it's having any issues with javascript ?




-- 
Regards / Mhv.
Ib K. jensen - http://ikjensen.dk
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Image bullets and floated images

2009-05-11 Thread Stephen Tang
Hi Bill,
What is this style?
ul {display:inline!ie;}

Is this a browser hack?

--Stephen


On Mon, May 11, 2009 at 2:56 PM, Bill Brown macnim...@gmail.com wrote:
 Stephen Tang wrote:
 [snipped/]

 list item. Is there any way to get the bullet images next to the list
 items again?  I don't want to jeopardize the text-wrapping either.
 http://stephentang.info/floattest/test.html

 Something like this ought to work for you:
 ~~~
 body, ul, p, li, div
  {margin:0;padding:0;}
 .container
  {height:600px;width:700px;border:1px red solid;}
 .floatedobj
  {border:1px blue solid;margin-right:20px;height:100px;width:300px;
  float:left;}
 p
  {margin-bottom:5px;}
 ul
  {list-style:none;margin:0;padding:0;display:inline-block;}
 ul
  {display:inline!ie;}
 ul li
  {list-style:none;margin:0;padding:0 0 0 10px;
  background:transparent url(bullet_hdr.gif) no-repeat scroll 0 8px;}
 ~~~

 Hope it helps.
 --Bill

 --
 !--
  ! Bill Brown macnim...@gmail.com
  ! Web Developologist, WebDevelopedia.com
 --

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Image bullets and floated images

2009-05-11 Thread Bill Brown
Stephen Tang wrote:
[snipped/]
 list item. Is there any way to get the bullet images next to the list
 items again?  I don't want to jeopardize the text-wrapping either.
 http://stephentang.info/floattest/test.html

Something like this ought to work for you:
~~~
body, ul, p, li, div
   {margin:0;padding:0;}
.container
   {height:600px;width:700px;border:1px red solid;}
.floatedobj
   {border:1px blue solid;margin-right:20px;height:100px;width:300px;
   float:left;}
p
   {margin-bottom:5px;}
ul
   {list-style:none;margin:0;padding:0;display:inline-block;}
ul
   {display:inline!ie;}
ul li
   {list-style:none;margin:0;padding:0 0 0 10px;
   background:transparent url(bullet_hdr.gif) no-repeat scroll 0 8px;}
~~~

Hope it helps.
--Bill

-- 
!--
  ! Bill Brown macnim...@gmail.com
  ! Web Developologist, WebDevelopedia.com
--
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Getting absolutely positioned divs with bottom: auto to end together

2009-05-11 Thread Michael Leibson






From: Gunlaug Sørtun gunla...@c2i.net
To: Michael Leibson michael_mabe...@yahoo.ca
Cc: css-d@lists.css-discuss.org
Sent: Monday, May 11, 2009 5:56:02 AM
Subject: Re: [css-d] Getting absolutely positioned divs with bottom: auto to 
end together


 www.thinkingmusic.ca/analyses

I have used a copy of this page to exemplify one approach to solving your 
problems . . 
. . .  The easiest way to achieve this is to leave #main un-positioned 
(static), so
it can affect the height of main div (#top) directly. Then the sidebar
(left) can be absolute positioned relative to bottom of main div (#top)
for perfect alignment.

Georg, I'm picking my jaw up from the floor, after it dropped in utter 
amazement at your solution!  ; - )
You guys aren't 'mere web developers' -- you're mathematicians!

I'm blown away.  I'll get back to you after I've had a chance to re-gather my 
mind, and have tried to 
follow the principles involved in your solution.

(Wow!)

- Michael


  __
The new Internet Explorer® 8 - Faster, safer, easier.  Optimized for Yahoo!  
Get it Now for Free! at http://downloads.yahoo.com/ca/internetexplorer/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Getting absolutely positioned divs with bottom: auto to end together

2009-05-11 Thread Michael Leibson
Thanks for your generous feedback, Philippe!  Some follow-up questions, below. 
. . 

 To get all containers to
 ‘conclude’ at the same point, at the bottom of the page, I’ve given their
 bottom-most elements the margin-bottom measurements required to do that.  
 However, I’m getting unexpected results that
 I don’t understand:


Specifying a line-height will
normalise things a little. . . 
While the #main div has line-height on all ps, you're right -- there was no 
line-height in the #left div.  I just tried adding the same
line-height, there, but it made no difference.  IE gives a 2px bottom space to 
every li,
while FF doesn't -- but, since the problem also occurs in other
browsers, it's probably not because of that.


Google 'faux columns', or try one of the following techniques:
I read Dan Cederholm's article 
(http://www.alistapart.com/articles/fauxcolumns/), but I'm not 100%
sure I get it:  in my situation, I already have a repeating background
image on my body element, but
it must tile horizontally, not vertically, because the top third of my
viewport has a white body background, and the rest has a dark slate
background.  Am I misunderstanding how the fauxcolumns would work?



http://www.positioniseverything.net/articles/onetruelayout/
I see that, since its invention, many bugs have rendered this technique
almost impossible
(http://www.positioniseverything.net/articles/onetruelayout/appendix/equalheightproblems).


http://www.satzansatz.de/cssd/companions.html

While I think I get the concept (and it's very neat!), the technical side of 
this one is way beyond my current level.  


Personally, I'd go with a 'ragged end-of-page' by design :-)
Do you mean to just let the divs end wherever they may, and forget about the 
aesthetic consequences -- or to come up with a design in which such a 
consequence will be in keeping with an important design motif?

Thanks again, Philippe!

All the best,
Michael



















 2) In Firefox, zooming all
 elements gives the #left div greater or lesser height than its neighbouring
 div, depending on the degree of zoom.

Text
zoom or page zoom ?  With page zoom, there is little difference. With
text-zoom, the columns will on grow based on the text content. The
margins in your left column will not change the same way, as they are
specified in pixels.

 Are these differences the
 result of my own errors, or normal browser behaviour?
 
 If the result of browser
 behaviour, I’d rather just find a way to ensure that all divs conclude at the
 same point (and leave the minor differences alone), rather than write
 re-calibrated measurements for each browser.  Is there a way to do this?

Google 'faux columns', or try one of the following techniques:
http://www.positioniseverything.net/articles/onetruelayout/
http://www.satzansatz.de/cssd/companions.html

Personally, I'd go with a 'ragged end-of-page' by design :-)


PS
- the little images in your #left column contain a colour profile. This
causes a (severe) colour mismatch in browsers that support colour
management for images (Safari, Firefox 3.5b). The embedded colour
profile is the one coming from Photoshop when saving for web.
I use pngcrush to strip it out.

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





























The total height of those 2 columns will also depend on the
line-height, and how browsers interpret the 'normal' keyword - you
don't specify any line-height as far as I a can tell.
Specifying a
line-height will normalise things a little, but you might still be at
the mercy of differences in rounding of values to the nearest pixel
between browsers.

I've got line-height: 135% on all the p text in the #main div, but none on 
the elements in the #left div.  I just tried adding the same line-height, 
there, but it made no difference to the ragged-end-of-page problem.  In order 
to see what may be happening, I gave all the #left elements borders, and saw 
that IE gives a 2px bottom space to every li, while FF doesn't.  However, since 
the problem also occurs in other browsers, I don't want to begin applying hacks 
unless I know what I'm doing.  






From: Philippe Wittenbergh e...@l-c-n.com
To: CSS-D css-d@lists.css-discuss.org
Cc: Michael Leibson michael_mabe...@yahoo.ca
Sent: Sunday, May 10, 2009 10:49:57 PM
Subject: Re: [css-d] Getting absolutely positioned divs with bottom: auto to 
end together


On May 11, 2009, at 11:17 AM, Michael Leibson wrote:

 ...
 While building two more
 pages for that site -- www.thinkingmusic.ca/analyses/coltrane,
 and www.thinkingmusic.ca/analyses (the much smaller page of the two), I’ve 
 begun to implement some of your recommendations.
 
 One of these was to allow
 containers’ heights to be deterimined by their contents, rather than by a
 given, fixed amount.   I’ve now tried to
 do that, by giving my absolutely positioned divs positions for left, top, and
 right, but leaving their bottoms as “auto”.
 
 To get all 

Re: [css-d] Getting absolutely positioned divs with bottom: auto to end together

2009-05-11 Thread Gunlaug Sørtun
Michael Leibson wrote:

 www.thinkingmusic.ca/analyses

 You guys aren't 'mere web developers' -- you're mathematicians!

:-)

When dealing with browsers that's definitely an advantage.
Apart from that; when one has created and modified a few thousand
layouts, the only problem is which solution(s) to choose amongst the
many one knows will work for the case at hand.

To use the same page for more examples - different ways to achieve the
same thing, here are two identically-looking pages...

http://www.gunlaug.no/tos/alien/ml/test_09_0511-a.html
http://www.gunlaug.no/tos/alien/ml/test_09_0511-b.html

These two have the left sidebar absolute positioned from inside an
absolute positioned main column, which mean I've gone back to your
absolute positioning method but rearranged the markup ever so slightly
but modified it slightly to make it work as you wanted.

test_09_0511-a has the sidebar above the main content in the markup -
like your original page, while test_09_0511-b has the sidebar below
the main content. As you can see the source-order can be modified to
either main content first or main content last, based on the exact same
stylesheet with the exact same absolute positioning...

http://www.gunlaug.no/tos/alien/ml/test_09_0511_files/styles01.css


Now, note that this method only works well when the main column is at
least tall enough to stretch the sidebar to a reasonable height. To
short a main column will make the sidebar look crammed, so you may have
to add a suitable min-height to #main if you don't have enough content.
I've used #main {min-height: 1200px;} which has no effect on the
examples since the amount of content pushes it taller, but the optimal
value depends on how much you want to put into the left sidebar.

I added in a jagged bottom-edge just to show what we mean by that.
By applying #left {bottom: 10px;} I'd mad sure the sidebar will always
be 10px shorter than the main column, regardless of how tall the main
column is or ends up being when you resize text. I think it looks better
this way.


To give you a bit more to build on; read this ALA article...
http://www.alistapart.com/articles/conflictingabsolutepositions/

Also; for the examples above I used my own IE-expression to make IE6
play ball...
http://www.gunlaug.no/contents/wd_additions_22.html

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


[css-d] How do you dynamically change the size of graphics on a page?

2009-05-11 Thread Trevor
Aloha!

This is my first post, so be kind...

Here's a site I've been playing around with:

http://orangephile.com


Right now the images are created at 150px square, but I list their  
height and width as 300px.

What I would like to know is how can you create CSS code to  
dynamically change the dimensions of the images, say 75px for  
thumbnails, 300px to get a good overview, 600px for examining the  
color palette closely.

Mahalo,

Trevor Avichènnya Zénaïde

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] How do you dynamically change the size of graphics on a page?

2009-05-11 Thread David Laakso
Trevor wrote:
 Aloha!

 This is my first post, so be kind...

 Here's a site I've been playing around with:

 http://orangephile.com


 Right now the images are created at 150px square, but I list their  
 height and width as 300px.

 What I would like to know is how can you create CSS code to  
 dynamically change the dimensions of the images, say 75px for  
 thumbnails, 300px to get a good overview, 600px for examining the  
 color palette closely.

 Mahalo,

 Trevor Avichènnya Zénaïde

   



Welcome to the list!

CSS deals primarily with look and feel rather than behavior, so dynamic 
generation using pure css is somewhat limited. But you might consider 
pure css pop-ups. This is one example by Stu Nicholls.
http://www.cssplay.co.uk/menu/photo_not_so_simple#nogo
I don't recall ever having seen pop-ups done with 3 images, but in the 
vein that anything is possible, perhaps someone else has...
Javascript or Flash are alternative methods to create the behavior you 
wrote about.










__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] How do you dynamically change the size of graphics on a page?

2009-05-11 Thread David Laakso
Trevor wrote:

 Welcome to the list!

 CSS deals primarily with look and feel rather than behavior, so 
 dynamic generation using pure css is somewhat limited. But you might 
 consider pure css pop-ups. This is one example by Stu Nicholls.
 http://www.cssplay.co.uk/menu/photo_not_so_simple#nogo
 I don't recall ever having seen pop-ups done with 3 images, but in 
 the vein that anything is possible, perhaps someone else has...
 Javascript or Flash are alternative methods to create the behavior 
 you wrote about.

 Thank you for your response. Do you know a javascript site that would 
 have that information, either in book, web, or list?


Dunno, but try Google, subject line: creating image pop-ups with 
javascript, or creating image pop-ups with jQuery
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] IE 6 layout issues

2009-05-11 Thread David Bailey
Hi Tim and others,

Sorry I have not responded sooner, but have been away.

Thanks for the reply and helpful advice.


On 07/05/2009, at 10:49 AM, Tim Snadden wrote:


 1. Text content:
 The text drops down below the image on the right instead of being
 parallel to it. I'm sure I've seen something about this problem
 before in one of my books, but I can't find it for the life of me.

 The IE web developer toolbar is pale imitation of firebug but can  
 be used to find out what is happening in IE. If you look you will  
 see that the div class=hp_img is taking up with full width. You  
 could set a width on it, or do away with it altogether and just  
 position the image. I would absolutely position that image bottom  
 right so that even if the content grows he still looks right.
Thanks for that; that makes sense and works. I've downloaded the IE  
Web Developer toolbar too; that's great.

You're probably right about the absolute positioning. I see it moves  
when the window is narrowed. I'll give that a go.


 2. Stripes:
 The gray stripes under the navigation bar at the top and the bottom
 redish band at the bottom drops too low (the bottom one gets tangled
 with the footer text.

 .stripes {
 background:transparent url(/images/hor-stripes_bgtop.gif) repeat-x  
 left bottom;
 clear:both;
 height:26px;
 }
This has fixed it.

 You don't need the image inside that div.
That's true, if I make the image longer than the widest screen. I'll  
look at that.  I take it that this is better practice?

 Give the footer layout (google hasLayout) and the stripes will  
 position correctly. One way is using the proprietary 'zoom: 1; '
Hmm. I'll have to do a bit of study here and see how all that works.  
I've heard about it, but this is the first time I've really had a  
problem of this sort. Will check it out. Thanks.

 By the way - It would look much nicer to anti-alias the violin on  
 the left. It looks quite jaggy against the menu bar. You could do  
 it as an alpha transparent PNG and it would look better to everyone  
 but IE6 users, and to them it would look no worse than it does  
 currently.
I did use a PNG image at first, but Fireworks gave it a black edge  
which only emphasised the problem. I've done the same in Photoshop,  
which doesn't give it the edge, but still gets the halo. I may just  
start again with the original image and see if I can improve it. Thanks.

 Cheers, Tim

Much appreciated,
David

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/