1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS I.E 6.0 versus Firefox Problems (need help!)

Discussion in 'CSS' started by x11joex11, Sep 25, 2007.

  1. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    105
    #21
    Lol @ Zoffix (haslayout.net owner) suddenly adding dynamic js effects to his site. His old site was so plain. He's a pretty useful resource though.
    SEMrush
     
    soulscratch, Sep 27, 2007 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,157
    Likes Received:
    1,708
    Best Answers:
    239
    Trophy Points:
    515
    #22
    font-size:0 fixes a problem in IE where you cannot have any element shorter than the font-size/line-height. That's one of the wierd little 'quirks' that make coding support for IE a bit more complex than it should be.

    If you explicitly declare a line-height in your document and the layout breaks, you'll need to go back and add line-height:0 to your smaller elements alongside the font-size declaration.
     
    deathshadow, Sep 27, 2007 IP
  3. x11joex11

    x11joex11 Peon

    Messages:
    106
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #23
    Thanks for the help, I really appreciate it, I will keep that in mind deathshadow, as i'm sure the layout will break eventually for me =P.
     
    x11joex11, Sep 27, 2007 IP
  4. x11joex11

    x11joex11 Peon

    Messages:
    106
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #24
    This is going to sound dumb, but I don't have a very good understanding of proper div structure and I'm not sure how to make a div move to the 'right' to fill the extra space, (which would be content space in my case).

    Say for example, you create a <div> for the header, then a <div> for the top menu, and a <div> for a long side menu with a fixed width. If I create another div after that shouldn't it be smart enough to fit in the space to the right of the long side menu instead of displaying below the last div I created (the long side menu) making a very long rectangle. See my page (if it still looks like that, as I'll be editing)

    http://classexams.com/illusivetest/

    Not sure why or how to make it properly go to the right. I'm afraid of using float right for I.E error reasons, but if I have to I guess I will.
     
    x11joex11, Sep 27, 2007 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,157
    Likes Received:
    1,708
    Best Answers:
    239
    Trophy Points:
    515
    #25
    It will only appear to one side if you set one of them to float - my advice in this case is to set #side_menu to float:left; - you have a width declared, you'll be fine. THEN set #main_content to margin-left:165px; - equal to the width of your column. Margins on non-floating elements ignore the width of floats - this margin 'pushes' the entire content over to act like a column. Leave off this margin and when your content area is longer than the menu, it will wrap it's content 'under' it.

    There are 'other' approaches like fixing the width of your content area and floating both (which you could float them opposite directions, or even the same direction and that would take in a two column layout), or putting the content first and using the '0 width via negative margin' quirk to place the menu - but those are rather advanced CSS techniques and you look to just be starting out.

    If you want to learn more about non-table column techniques, this is a excellent resource - especially since all of these layouts use identical HTML code, ONLY changing the CSS. http://blog.html.it/layoutgala/

    There's a good deal of 'excess' code IMHO in those examples, but it is a good lesson in how powerful CSS can be.

    That is one of the advantages to CSS though - there are usually five or six ways of doing things... though that comes with the penalty that not all of them work all the time cross browser so if one doesn't work, before diving for the hacks try another one.
     
    deathshadow, Sep 27, 2007 IP
  6. x11joex11

    x11joex11 Peon

    Messages:
    106
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #26
    I attempted your fix, the idea of saying float:left; on #side_menu, it works on Firefox how I intended but in I.E it causes a strange shift in the #side_menu to the right about 3 px. I'm not sure what it could be, let me know. Also I didn't appear to need to set a margin-left value of 165px it just knew to set it up correctly on the right of the $side_menu? If I do the margin-left :165px it actually pushes it way to far because I think it knew to automatically drop it already. I get what you were talking about though.

    Anyways let me know if you have any idea what might be causing the spacing error, I put overflow:hidden; just about everywhere so far and no good. Usually that fixes those I.E spacing errors, since I'm using floats now I got to watch out for it's interpretation of floats I think. Just wish I knew how it did it.

    - Joe
     
    x11joex11, Sep 27, 2007 IP
  7. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    105
    #27
    double margin if horizontal margin on floated element fixed by display:inline in msie6.0
     
    soulscratch, Sep 27, 2007 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #28
    I swear that double margin bug was killing me before I saw someone here mentioning it in passing. I now have these stupid-looking display:inlines all over my css code... but it works!

    Joe, there are two kinds of elements in a web page: boxes that stack on top of each other and inline stuff that stacks from left to right. Divs are boxes and that's why your divs were always beneath each other. Floating divs makes them stack next to each other **so long as there's room for them!!**

    So, normally, if you float something, setting display: whatever should never do anything because float overrides them. Sometimes you see something floated and then display: block. Display:block isn't doing anything usually.

    However, IE is dumb enough not to know this. For some bizaare reason, setting display:inline tells IE not to double the margins. Crazy, yeah.

    There's a book that might help explain all the stuff in one go (minus some of IE bugs which one can learn about here) called HTML Utopia. The rest of the title is something about building sites without tables-- it's written for people who've been using tables for site layout but want to know more about CSS.
     
    Stomme poes, Sep 27, 2007 IP
  9. x11joex11

    x11joex11 Peon

    Messages:
    106
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #29
    I seem to have fixed the issue, but I had to use the clearfix to make it work on I.E and change the order of my divs around, to make one super container for the bottom. I hope this was the proper way to do it.

    Thanks again for the info, it's much appreciated and will probably help more then just me on the forums. :).
     
    x11joex11, Sep 28, 2007 IP