Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorcalvinc
    • CommentTimeJul 25th 2006
     permalink
    Hi all, it's me again. Haven't working on my site lately because of work and stuff. Anyway, I was checking my site again for bug in Firefox and IE6. And I noticed that IE is adding extra padding in the last divs in my containers. I know that IE got lots of problems . . also some with padding and margins. Since it renders fine in Dreamweaver and Firefox, i guess it's an IE bug ? Or maybe a noobie mistake I made.

    Anyway, for the ones that don't know what im talking about, below is a link to my site, notice the differences in padding between IE and firefox. The extra padding is beeing added to the categories div and the archive div ( recently posts div ).

    http://www.c-styled.com/beta/main.php

    Thnx in advance.

    (ps: haven't cleaned my code yet, sorry for all the duplication declarations :p will fix it some day hehe )
    • CommentAuthordeaghean
    • CommentTimeJul 25th 2006
     permalink
    Hey there,
    This seemed to do the trick:

    #archive, #category
    {
    float: none;
    }

    #category:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }
    #category {display:inline-block;}
    /* Hide from IE Mac \*/
    #category {display:block;}
    /* End hide from IE Mac */

    .arch_showall{
    float: none;
    text-align: right;
    }


    The #category rules you can replace with a <div style="clear:both;"></div> after the second category ul if you like. Figured I'd try an all CSS route.

    Hope that helps,

    - Josh
    • CommentAuthorcalvinc
    • CommentTimeJul 25th 2006 edited
     permalink
    wow . . . thnx alot.

    Although I have no idea what happened hahaha

    But if I add this, if I put other divs below them, I have to apply these to the lowest div instead of category and archive? I mean, this is not a global fix right?
    • CommentAuthordeaghean
    • CommentTimeJul 25th 2006
     permalink
    You should be able to add divs below them without any problems, though if you add another div that's similar to #category (i.e. just a container with floated elements inside), you'll have to clear the floats similar to how #category is done above.

    - Josh
    • CommentAuthorkmg
    • CommentTimeJul 25th 2006
     permalink
    Calvin - I believe the problem you are having is some elements in IE are considered to have "layout" and can add space. You can learn more about on the link below. I will check into it more as well to see if there is a fix for your site.

    http://www.satzansatz.de/cssd/onhavinglayout.html
    • CommentAuthorcalvinc
    • CommentTimeJul 26th 2006
     permalink
    deaghean - thnx for the info :)

    kmg - thnx for the link, very interesting to read
    • CommentAuthorcalvinc
    • CommentTimeJul 27th 2006
     permalink
    hi everybody,

    I just finished pulling some pictures from my flickr account, I wanted 6 pictures in total, so I pulled twice a badge of 3. I didnt know how to get the pictures aligned nice and tidy. But anyway, after some time with lots of experiment, I managed to get the pictures aligned by using extra divs . . . dont know if this is the best solution.

    In firefox the flickrbox div of mine is alining how I want, 10 pixels on the left, but again, viewing in IE6 it adds more margins then i actually wanted. Is this problem also the same as the one i stated above? and can i fix it the same way? Also, i want the two colums of pictures aligned center in the flickrbox, I tried to put text-align:center in the flickrbox div, but that didnt work. Finally I tried to just manual put margin at the left of the leftflickr div to push the pictures in the center, hower . . again, IE6 is adding extra margin again. Is this problem the same as the one i asked above? or can this fixed other way?

    http://www.c-styled.com/beta/main.php

    thnx in advance, sorry for all the trouble heh.
    • CommentAuthorkmg
    • CommentTimeJul 27th 2006 edited
     permalink
    i wonder if you can put margin:0 auto; like you would to center a wrapper - only problem i forsee is only modern browers render
    • CommentAuthorcalvinc
    • CommentTimeJul 27th 2006 edited
     permalink
    I added another div container arround the flickrbox div, and used the new div's padding to manual push it to the center, it works, but I know this is a "worst" solution, using so many divs, to get something so simpel lol. Will try to look for a hack . . . I know this is a known problem, as you gave me the link above, just still dont understand . . . have to dive in to the world of IE6 float bugginess i guess.

    edit:adding an extra div container, fixed the problem above, for now this is fine . . . but I know there is a fix out there for this heh.
    edit2: doohh . . server probs, have to move my stuff lol, sorry if link is dead.
Add your comments
    Username Password
  • Format comments as (Help)