Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Junior Member
    Join Date
    Sep 2006
    Posts
    8
    Member #
    13973
    First off, i just wanted to say thanks for the wealth of info here. I have been reading and learning for a few weeks now.

    Now my problem:

    www.cmarriott.com/gallery.html

    I have a group of image links with a border that changes color on hover.
    everything works fine in IE, but not Firefox.

    in firefox the border is not as high as the image, when it should wrap the image plus a little padding.

    seeing as this is my first try at CSS i know it has to be somthing stupid i did.:lick:

    Also it there a way to keep the same posistioning rgadless of browser text size settings? right no it changes if i change the text size in my browser

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    This is really good for a first try. I believe the reason you're running into this problem is because of the way that a tags wrap images in standards-compliant browsers (namely, they don't wrap around the whole thing). But, you can use a descendant selector to exhibit the same behavior, theoretically:
    Right now, you have:
    Code:
    #gallery img {width: 100px; height: 100px;
    	border:none; }
    
    #gallery a:link { padding: 8px;
    	width: 100px; height: 100px;
    	border: 1px solid gray; }
    
    #gallery a:visited { 
    	padding: 8px;
    	width: 100px; height: 100px;
    	border: 1px solid gray; }
    	
    #gallery a:hover { 
    	padding: 8px;
    	width: 100px; height: 100px;
    	border: 1px solid #AB1D13; }
    Try making that:
    Code:
    #gallery img
    {
        width: 100px;
        height: 100px;
        border: none;
    }
    
    #gallery a:link img
    {
        padding: 8px;
        border: 1px solid gray;
    }
    
    #gallery a:visited img
    { 
        padding: 8px;
        border: 1px solid gray;
    }
    	
    #gallery a:hover img
    { 
        padding: 8px;
        border: 1px solid #AB1D13;
    }
    Now, I haven't tested this in IE; however, non-direct-descendant selectors work in IE, and the :* pseudoclasses work on a tags (and only a tags) in IE, so theoretically that should work in both browsers.

    As a critique of your original code, concerning the fact that you had width and height specified for each of the pseudoclasses, remember you can make a single selector:
    Code:
    a
    {
        width: 100px;
        height: 100px;
    }
    -or-, for just the pseudoclasses:
    Code:
    a:link, a:visited, a:hover
    {
        width: 100px;
        height: 100px;
    }
    And save on repetition.

  4. #3
    Junior Member
    Join Date
    Sep 2006
    Posts
    8
    Member #
    13973
    So i need to apply direclty to the image....

    Thanks for the solution and tips.

    it works in firefox now (and i assume safari) but now i get no rollovers or padding in IE.

    I wish IE would dIE:dead:

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,715
    Member #
    5580
    Liked
    717 times
    cmar ...

    Design your site for FireFox and then do the necessary "hacks" for IE.
    Don't do it the other way around.

    FireFox should be your "standard" to work from.


  6. #5
    Junior Member
    Join Date
    Sep 2006
    Posts
    8
    Member #
    13973
    I preview first in Firefox, and then see if it works in IE.

    I wish knew a hack (why are HACKS so common with the supposedly godsend css?) to make this work.

    At least Shadowfiend's code is LESS screwed up in IE than mine was in Firefox, and his works perfect in Firefox and probably the browsers that the other 1% of the world uses

    /* BEGIN RANT*/
    unfortunately, the reality is that most of the works uses IE, more than any other combined, and CSS is just plain a pain in the *** with IE. At least with a table I know it is going to work. I could have been done in 45 minutes if I just used ImageReady and GoLive.
    /* END RANT*/

    Rant aside, thanks for the response. I have several hundred hours invested in learning this and every little bit helps

  7. #6
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    BAM! Just nuked the bugs. First, we can fix the padding in the image issue by pulling the padding declaration out of the a:* classes. Stick it in the [minicode]#gallery img[/minicode] block:
    Code:
    #gallery img
    {
        width: 100px;
        height: 100px;
        border: none;
        padding: 8px;
    }
    But, this isn't nearly as important, since the way we nuke the border issue should nuke the padding issue, too. As per http://www.satzansatz.de/cssd/pseudocss.html#hoverdesc (took me a little while to find this one), IE won't recognize descendant selectors for :hover pseudoclasses *unless* the pseudoclass separately defines a change. So, to fix the :hover pseudoclass, we can add this to the end:
    Code:
    #gallery a:hover
    {
        background-position: 0 0;
    }
    This, naturally, changes nothing, but makes IE aware that it needs to redraw the page, and thus the border gets updated appropriately.

  8. #7
    Junior Member
    Join Date
    Sep 2006
    Posts
    8
    Member #
    13973
    oooh, we got rollovers!!!

    but still no padding in IE :cry:

    i messed with a few things, but everything i try makes it worst.

  9. #8
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Wait, I'm stupid. Forget my method of doing the padding, IE doesn't respect it. Do this instead:
    Code:
    #gallery a
    {
        padding: 8px;
    }

  10. #9
    Junior Member
    Join Date
    Sep 2006
    Posts
    8
    Member #
    13973
    Quote Originally Posted by Shadowfiend
    Wait, I'm stupid.
    Far from it.
    This does most of what I want, and seems to be the best compromise between IE and the others.
    I canít seem to control the distance between lines (rows) in IE and the border is not padded.
    I will have to come back to this later, for now I am going with what I know works on everything.

    TABLES and JAVASCRIPT.

    ImageReady here I come!!!

  11. #10
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Try giving the lis a margin for line spacing.

    And watch out, Javascript only works on the browsers that have it enabled and work with the particular flavor ImageReady exports to ;-)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:55 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com