SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE and FF issues

    Hi,

    I've tried reseting my CSS using

    * {
    padding: 0;
    margin: 0;
    }

    and yet I'm still having issues w.r.t. cross browser compatablity.

    www.internetlinked.com/virtuemart

    In IE you will see that the background for the shopping cart works just file but that in FF it is cut off. I am convinced that I had it working two nights ago but in a tired state of mind I made a change and alas it is now broken.

    Any ideas?

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is not a new issue. All web designers face the same issues unless they are not using very strict CSS layout. Designers use separate CSS files for IE and FF sometimes.
    PM me for Professional Email Marketing Service

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    The .vmCartModule DIV is not enclosing its floated contents, which is normal behavior. Probably the simplest solution is to add overflow: hidden to the styles for .vmCartModule. E.g.

    Code:
    .vmCartModule {
        overflow: hidden;
    }
    More solutions for this sort of thing here.

    I suppose you could also just give .vmCartModule a height (e.g. 113px) but that's not the best way to go in general.

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    In IE you will see that the background for the shopping cart works just fine
    It is not working in IE8, that's because the IE float model was finally fixed.
    It works in IE7 and under because the width on your .vmCartModule is giving it "haslayout".

    As ralph.m mentioned above just use overflow:hidden to force float containment in modern browsers

    Code:
    .vmCartModule {
        width: 265px;/*haslayout for IE6/7 = float containment*/
        overflow:hidden;/*float containment for modern browsers*/
        background-image: url(../images/BG_ViewCart.jpg);
        background-repeat: no-repeat;
        background-position: right top;
        color: #FFF;
        text-align: center;
        display: block;
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    Auckland, NZ
    Posts
    98
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Thanks, that worked... how do you guys stay on top of all this stuff?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by abasel View Post
    how do you guys stay on top of all this stuff?
    If you lurk around fora for a while, and do some reading, there's not much 'new under the sun' after a while.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by abasel View Post
    Thanks, that worked... how do you guys stay on top of all this stuff?
    Hang around here and just read the threads and it isn't hard to stay on top. Just don't go into cave.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •