Previous Message
Next Message

TOC for Image Gallery using Ordered List & CSS

Sent by Lori Lay on 13 April 2007 21:09


ibn Ezra wrote:
> Works great with the latest versions of IE, Firefox, Safari and Opera 
> and without additional mark-up! Don't have IE 6 handy to see what 
> happens (already know the transparent png rollover won't work).
>
> http://richmondesign.com/fsm_portfolio/index4.php
>
> toda raba!
> -iE
>
> .................................................
>
> ibn Ezra
> mailto: [EMAIL-REMOVED]
>
> .................................................
>
>
Looks ok in IE 6 too.  The images look like they do in FF when you hover 
over them, which I think is what you expected.  The only problem is with 
the main title.  In IE the PNG isn't working so the title looks jagged.

You should be able to use browsershots to see what it looks like in IE 6.

http://browsershots.org/

Lori

PS What does "toda raba" mean?  I know what domo arigato means, but 
that's the extent of my Japanese :-)

>
>
> On Apr 13, 2007, at 16:21 PM, Lori Lay wrote:
>
>> ibn Ezra wrote:
>>> Thanks... that moves the text down nicely. Funny that your solution
>>> never crossed of my mind! The only drawback is that it creates a
>>> large (invisible) link area beneath each image which could
>>> potentially compete with content in a different layout (a second row
>>> of gallery images for example).
>>>
>>>
>>
>> Try removing the height from #content #portfolios li a.
>>
>> This seems to work under Firebug in FF.  I'm not sure what this will do
>> to IE.  IE has the same large area under the images, so hopefully
>> removing the height won't cause problems.
>>
>> Lori
>>
>>> Here's the result:
>>> http://richmondesign.com/fsm_portfolio/index2.php
>>>
>>> Thanks again,
>>> -iE
>>>
>>> .................................................
>>>
>>> ibn Ezra
>>> mailto: [EMAIL-REMOVED]
>>>
>>> .................................................
>>>
>>>
>>>
>>>
>>> On Apr 13, 2007, at 15:32 PM, nat parker wrote:
>>>
>>>
>>>> ibn Ezra wrote:
>>>>
>>>>> What I would really like to do is to take the text inside the
>>>>> anchor  and force it to drop below the background image (with
>>>>> appropriate  padding), but it doesn't look like there is a way to
>>>>> 'grab onto' just  the text and do that without adverse side
>>>>> effects. Is this possible?
>>>>>
>>>> If I understand what you are trying to do, you could just add
>>>> padding-top to:
>>>>
>>>> #content #portfolios li a {
>>>>     display: block;
>>>>     height: 91px;
>>>>     width: 147px;
>>>>     background: transparent url(../_images/vellum.png) repeat;
>>>>     padding-top: 95px;
>>>> }
>>>>
>>>>
>>>> nat
>>>>
>>>
>>> ______________________________________________________________________
>>> css-discuss [EMAIL-REMOVED]]
>>> http://www.css-discuss.org/mailman/listinfo/css-d
>>> IE7 information -- http://css-discuss.incutio.com/?page=IE7
>>> List wiki/FAQ -- http://css-discuss.incutio.com/
>>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>>
>>>
>> ______________________________________________________________________
>> css-discuss [EMAIL-REMOVED]]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> IE7 information -- http://css-discuss.incutio.com/?page=IE7
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: