Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow CSS Troubles with IE & KMeleon (Gecko Browsers)

    I have been designing for a long time... and just now decided to switch alot of my layouts from Tables to CSS. Well needless to say its not as easy as I thought..

    First, heres the site: here.

    Now, the left nav (ltNav) in IE is scattered, and looks horrible. It actually looks better in KMeleon, cept for the fact that it has a whitespace towards the top of the nav, instead of resting under the lead.

    Also, if someone can please explain when is the best time to use Absolute positioning, or relative & floating? Floating allways seems to be a bit tricky. Either or, Macromedia did a poor job with DW showing CSS.

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Let's see if I can help explain things, rather than make it more confusing

    Elements on a page (div, ul, p, etc) are displayed according to the page flow. Block-level elements take up the available brwoser width unless otherwise defined, and start on the next line in the page. Inline elements do just that, they stay inline.

    So if you have, say...
    Code:
    <div id="first">...</div>
    <div id="second">...</div>
    ...one div followed by another, the second div will be displayed just below the first, assuming you haven't assigned any CSS to it.

    Relative positioning places the element relative to where it was going to go in the page flow. So if you assigned this...
    Code:
    #second {
     position: relative;
     top:10px;
     left: 10px;
     }
    ... to the second div, this second div will now be displayed 10px from the top and 10px from the left of where it would have normally been (right below the first div).

    Absolute positioning take the element out of the page flow. Once you use this, the page doesn't pay any attention to the div anymore... it's on its own now. For example:
    Code:
    #first {
     position: absolute;
     top: 100px;
     left: 300px;
     }
    Now the first div will be placed 100px from the top and 300px from the left
    of the browser window. The second div will be at the top of the document, because it doesn't see a #first div anywhere. Hopefully this is starting to make some sense.

    Now, you can place elements absolutely in other elements by using both. Let's take this:
    Code:
    html:
    
    <div id="container">
     <ul id="nav">
      <li>...</li>
     </ul>
    </div>
    
    css:
    
    #container {
     position: relative;
     width: 500px;
     height: 200px;
     }
    
    #nav {
     position: absolute;
     bottom: 0;
     right: 0;
     }
    Now we should have a container 500px by 200px, with a ul positioned within at the bottom right side.

    Floats are tricky. They remove the element from the flow as well, but wrap the remaining elements around it. They were designed to wrap text around images, but the uses have gone much further. Rather than me explain such trickery, let my laziness guide you to this link:

    http://css.maxdesign.com.au/floatutorial/

    Which is a great intro to floats and should help you understand everything much better.

    Hope this all helps...

  • #3
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I dont think anyone could have explained it better. thanks for that info, i was very helpful.

    In the middle of typing a huge response, I saw that in KMeleon, and Firefox, the menu looks perfect. Now why doesnt it look the same in IE?

    Is it better to use seperate style sheets for diff browsers?? using the
    Code:
    <!--[if IE 5]>
    <style>
    #id {  }
    </style>
    <![endif]-->
    .. in the head tags, and point IE to a different browser? or use the voice-inherit hack?

    OK If you look at the site in any Gecko Browser, the site is layed out basically the way i want it. I just cant seem to get the midCont to be fluid, and touch the insides of ltCont and rtCont. I used the three containers hoping that itll basically keep things inside them, and therefor hopefully removing the need for floats.

    Any ideas would be greatly appreciated. Thanks again dude.

    =)
    Last edited by m0rbid; 02-24-2005 at 05:58 PM. Reason: UPDate:

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by m0rbid
    I dont think anyone could have explained it better. thanks for that info, i was very helpful.
    Glad it helped. And that I actually made sense for once.

    In the middle of typing a huge response, I saw that in KMeleon, and Firefox, the menu looks perfect. Now why doesnt it look the same in IE?

    Is it better to use seperate style sheets for diff browsers??
    IE is all that's wrong with the web-- in case you hadn't noticed already-- mostly because of it's lack of standards compliance. How to code for standards/non-standards compliant browsers is a question everyone wonders about and the answers tend to run to personal preference. There's a great thread on this, complete with a list of hacks for every major browser, here:

    Firefox THEN Internet Explorer or vice versa

    I tend to use your example, i.e. writing one stylesheet for compliant browsers and using IE's conditional comments to send it its own stylesheet.

    OK If you look at the site in any Gecko Browser, the site is layed out basically the way i want it. I just cant seem to get the midCont to be fluid, and touch the insides of ltCont and rtCont.
    Do you mean in IE? It works great here on FF. You'll have to wait for someone else on this one... I'm on a Mac here and debugging with Virtual PC is slow and painful.

    Just looking at the CSS, I'd say you're close though... if it's working in Moz, FF, Safari, Opera, et al, try sending IE the separate stylesheet with maybe some margin or padding fudges to remove the space between the center content and the sidebars.

    Hope this helps...


  •  

    Posting Permissions

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