----- Original Message ----- From: Gunlaug Sørtun To: Alan K Baker Cc: css-d Sent: Sunday, May 18, 2008 2:11 PM Subject: Re: [css-d] Image displacement
Alan K Baker wrote: > > http://www.webbwize.co.uk/Test_Area/VTPO/ > The addition of... > .couplertab li a, .fluetab li a, .reedtab li a, .stringtab li a { > background-repeat: no-repeat; > } > ...will fix the problem with the shorter background. Absolutely on the nose, Georg. I do feel silly for missing that one, but then it's obvious after it's been pointed out. :-) > > [...] The correct effect can be seen on the top text for each image, which > > is working correctly as expected. > Except that small font-sizes do not survive 'minimum font size' or 'ignore > font size'. Agreed, but then how far do you go to accomodate everyone? My main criteria is to have the text fit the tabs and have the entire presentation look like the 'real thing', to those 'in the know'. > > Can anyone think of a way of achieving this with text, as I don't want to > > have to resort to further graphical text manipulation? > Address them as... > #navbar li a:active span { /* and style to your liking */ } Thanks for that Georg. Something I needed to learn. :-) > Delete the 'z-index: 200;' on '.abbreviate, .pitch' while you're at it, as it > serves no purpose. One that got 'left-over' when moving things around, it will be banished. <g> > Additional comments: > The whole construction makes me wonder why there are so many DIVs and ULs in > there, as one UL and a number of LIs with anchors would work just fine. As with many of my 'projects', I'm always in a hurry to meet a deadline and panic myself into taking the easy option, then maybe clean up afterwards. This one has several 100Mb of music files for users to download, and I took the files on because the forum-server that they are on, is almost full, so needs emptying ASAP. This one's my own pet project, so it's only me to blame. > All backgrounds with all states can be contained in one image, and horizontal > background-offset be used to line them up as what you have now. Will make the > whole thing less complicated I think, and one image loads faster. You can > also tune the image a bit and make it 8bit png, which will make IE6 more > cooperative. That sounds like a good idea and one I will consider as soon as the site is actually 'live'. I presume that you are suggesting that each <li> is given a style appropriate to its background image position. It's a nice solution, and one that I am now keen to implement. There may be one complication in that (if you've ever seen one of these instruments) the console is shaped like a horseshoe, and the backboard which contains all of the tabs is semi-circular, which means that the tabs nearer the left and right sides are turned inwards by varying degrees. I'm aiming at future expansion which would mean many more tabs, and as with the real thing, they simply won't fit in a straight line in the available space. Although it's straightforward enough to rotate the images, as they will still be in straight-sided containers, it may prove quite difficult to make the 'squares' overlap, using <li>s alone. Further comments appreciated. > Remember that IE6 'auto-expands' empty elements, as IE/win sees imaginary > spaces in empty elements. Declaring 'overflow: hidden' on them or simply > placing an HTML comment as only content inside them, will make IE6 stop > expanding them. Will do. Again Georg, thanks for your sage advice. > regards > Georg > -- > http://www.gunlaug.no Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch & A-P groups Shopsmith 520 + bits Flatulus Antiquitus ______________________________________________________________________ css-discuss [EMAIL PROTECTED] 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/
