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 10 of 10
  1. #1
    Regular Coder
    Join Date
    May 2007
    Location
    Manteca, CA
    Posts
    219
    Thanks
    4
    Thanked 0 Times in 0 Posts

    css left/right, top/bottom probs in IE

    I'm trying to create a div that simply expands with the window, horizontally and vertically. In FF, the following works fine...
    div.mydiv=
    {
    position:absolute;
    left:100px;
    top:50px;
    bottom:50px;
    right:10px;
    }

    In good ol' IE, somehow setting the left/right, and top/bot results in width=0,height=16.

    I've tried every combo of "position" settings, margins, and other desparate attempts, and still can't get what I need in IE. I guess I could use an ugly resize hook func to force the div to whatever size, but, of course, would prefer not to do it that way.

    Any help is most appreciated.
    Last edited by snoodle; 01-10-2010 at 08:26 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello snoodle,
    I think div.mydiv= is not going to work very well. Don't know if that was a mistake here or if your code actually has the = in it.
    You will probably need a doctype for IE to do this. See the link about DocTypes in my sig below.

    Give this a try and see if it works for you -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    div.mydiv {
    	position:absolute;
    	top: 50px;
    	right: 10px;
    	bottom: 50px;
    	left: 100px;
    	background: #00f;
    }
    </style>
    </head>
    <body>
        <div class="mydiv">
        <!--end .mydiv--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    May 2007
    Location
    Manteca, CA
    Posts
    219
    Thanks
    4
    Thanked 0 Times in 0 Posts
    yeah, unfortunately the "=" was just a type-o. I finally gave in (for now) and and am force feeding the coords upon a resize event. I know this isn't "cool" but sometimes seems to be the easiest way to deal with browser incompatibilities.

    unless i'm still drunk from last night, setting left AND right or top AND bottom simply doesn't work in IE, and at the moment, the only way i can figure around the problem is to REset the coords after every window resize.
    Last edited by snoodle; 01-10-2010 at 08:42 PM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Gotta love IE

    That bit I quoted in my first post works in FF3.5, IE8 and IE7. I don't have IE6 to test in.

    I don't know what the final objective is but have a look at this demo and see if this is what you're after.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    May 2007
    Location
    Manteca, CA
    Posts
    219
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks for your reply. In the page you sent, your img CSS is...

    #background_image {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: 1;
    }

    The question is... How would you code the CSS if you wanted, the right side of the image to always be 100 pixels from the right of the window (ie body)? (like I said, normal browsers have no problem with setting "left" and "right" while IE, well, you know.

    You can view the layout at http://deborah-barr.com/newsite/.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    You can view the layout at http://deborah-barr.com/newsite/.
    That's too much absolute positioning for me. I think I would have started with a completely different approach. Like this maybe - http://nopeople.com/CSS/another_3-column/index.html


    As for that resizing background demo ... you might be able to do something with a different image. I don't know that you can put a margin or padding on that.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Regular Coder
    Join Date
    May 2007
    Location
    Manteca, CA
    Posts
    219
    Thanks
    4
    Thanked 0 Times in 0 Posts
    [QUOTE=Excavator;908680]That's too much absolute positioning for me. I think I would have started with a completely different approach.QUOTE]

    I did start with a completely different approach but needed to come up with a quickie solution, so went to all the absolute stuff. I don't like it either. The example you point out uses all fixed widths and heights. I'm trying to have the widths and heights change with the window (body).

    As soon as I find out how to make this work I'll get rid of all the absolute stuff, though I don't think I can get rid of all of it, especially the centered image (resizing an image with the resizing of a window and maintaining it's proportions). If there is a way to CSS and avoid hard-coded-absolute-positioning javascript code to force the results, I'm all ears.

    The other possibility I thought of was using a <table>. Assuming a table would do that job would the CSS police come after me for using table elements for my layout?

    That all said... I do agree with you and all that absolute positioning is gonna bite me in the butt eventually, so... it's back to the CSS/IE-sucks drawing board for me...
    Last edited by snoodle; 01-11-2010 at 11:06 PM.

  • #8
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    1
    Thanks
    0
    Thanked 1 Time in 1 Post
    i also bumped in this IE6 problem, so in my sites i usually solve it by complementing its css-declarations with the proprietary value "expression([js-code])":

    Code:
    /* normal 'modern' browser css (Fx2+, IE7+, Safari3+, Opera9+...) */
    #content{
      position:absolute;
      top: 120px; bottom:0;
      left: 210px; right:0;
      }
    
    /* special complement for IE6 (usually in another file) */
    #content{
      width:expression(document.body.offsetWidth - 210 + "px");
      height:expression(document.body.offsetHeight - 120 + "px");
      }
    i don't know if it continually fires or if it runs just once, there are several issues mentioned around the web about these expressions, but i mostly exploit them just for such little problems...


    ok, just to mention the complexity you could achieve with them, here a "little" BIG snippet (indented to better understand it) to force ie6 to correctly display an alpha-png image which is normally set as an inline css-background, with some extra hacks to avoid repeated evaluations of the code and to let the src uri still be part of the same domain (strip-off hte http://... part):
    Code:
    <!-- HTML
    the "esagoni_home" part varies as with the requested sub-page,
    the "1259617980" timestamp is to load the last updated version (CMS!) of the img 
    -->
    <div id="esagoni" style="background-image:url(cont/immagini/esagoni_home.png?1259617980)"></div>
    
    /* CSS: */
    /* note the , used to separate js statements (normal js uses ;) */
    #img{
      behavior: expression(                         <== open 1st (
        (this.runtimeStyle.behavior="none") && 
        (this.pngSet ? this.pngSet = true :         <== open 2nd (
          this.origBg = this.origBg ? this.origBg : V 4 statements
            this.currentStyle.backgroundImage.toString().substr(
              this.currentStyle.backgroundImage.toString().indexOf('cont/')+5
              ).replace('")',''),
            this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../cont/" + this.origBg + "', sizingMethod='crop')", 
            this.runtimeStyle.backgroundImage = "none",
            this.pngSet = true
          )                                         <== close 2nd )
        );                                          <== close 1st )
      }
    so, my devise is to avoid these expressions as much as possible, but if the client really want nearly perfect ie6 compatibility for his site... wish you luck!
    Last edited by pikappa; 01-26-2010 at 05:07 PM. Reason: some more details about the 2nd code part

  • Users who have thanked pikappa for this post:

    snoodle (01-26-2010)

  • #9
    Regular Coder
    Join Date
    May 2007
    Location
    Manteca, CA
    Posts
    219
    Thanks
    4
    Thanked 0 Times in 0 Posts
    AWESOME! I had no idea there was a way to embed javascript in CSS (abeit, for IE only). Unfortunately my editor (Aptana) marks CSS lines with "expression()" as syntax errors, but that's ok. It works!

    THANKS!!!

  • #10
    Regular Coder
    Join Date
    Jan 2010
    Posts
    137
    Thanks
    3
    Thanked 10 Times in 10 Posts
    In addition, you can quite easily get your box to center horizontally and change with the window size with css using auto margins.

    #div {
    width: ___;
    margin-left: auto;
    margin-right: auto;
    }

    Using this, you can also get it to move 100px away from the left or right side by changing "auto" to 100px. In this case you need to set a width though.

    For centering vertically, css really doesn't make this easy. You can't use the same margin trick, for some unknown reason. I would suggest just giving it a margin-top of a couple hundred pixels until it looks relatively centered on your screen - screens vary more in width than height anyway


  •  

    Posting Permissions

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