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 7 of 7
  1. #1
    Regular Coder gcmax's Avatar
    Join Date
    Sep 2010
    Posts
    108
    Thanks
    8
    Thanked 5 Times in 5 Posts

    Internet Explorer Position absolute: is this an IE bug?

    Hi, I'm redesigning my portfolio;

    http://www.gcmax.co.uk

    Been testing in Firefox and Chrome with no problems but floated text doesn't appear correctly in Internet Explorer, version 7. Not sure about other versions of IE but I'm presuming they will be similarly affected. Is there a fix for this?

    Thanks.

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    try setting top and left styles to p.desc

    your home page looks fine in IE8. IE7 might need top and left values which should always be set imo when setting position: absolute

  • Users who have thanked bullant for this post:

    gcmax (03-14-2011)

  • #3
    Regular Coder gcmax's Avatar
    Join Date
    Sep 2010
    Posts
    108
    Thanks
    8
    Thanked 5 Times in 5 Posts
    bullant Your suggestion is working, thank you thank you thank you!! This was driving me nuts! So now I'll remember to use;

    Code:
    {position:absolute; top:""px; right:""px; bottom:""px; left""px;}
    instead of

    Code:
    {position:absolute; margin: ""px ""px ""px ""px;}

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello gcmax,
    If you position an element it usually works better if you tell it where to go. margin can still nudge it around a bit sometimes but, as you noticed, it's not very affective.
    Have a look at http://www.barelyfitz.com/screencast...s/positioning/ for a pretty good explanation of positioning.

    You should also know that positioning is way over-used and usually not needed at all. Read about the pitfalls of absolute positioning here.
    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

  • Users who have thanked Excavator for this post:

    gcmax (03-14-2011)

  • #5
    Regular Coder gcmax's Avatar
    Join Date
    Sep 2010
    Posts
    108
    Thanks
    8
    Thanked 5 Times in 5 Posts
    Thanks for the link Excavator.
    I used absolute to position text over an image, afaik there is no way to do this using the preferred relative positioning, as tests revealed. The only other instance when it was used was in the footer, which is very limited space wise. Relative positioning was throwing everything out and had to be abandoned but I can't disagree that it's a more browser accepted way of designing a layout.
    Cheers

  • #6
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by gcmax View Post
    bullant Your suggestion is working, thank you thank you thank you!! This was driving me nuts!
    You're welcome

    But I have never seen top and bottom styles values as ""

    Putting your css through the w3c css validator shows your css to be invalid although the browsers you are using are "smart" enough to equate the "" to a default value, probably 0.

    I normally set the top and left positions to 0px or wherever I need the element to be in relation to it's parent.

    If interested, below is what imo is a very good tool for teaching the basics of how positioning works. Don't be concerned about the actual code, just copy and paste the code into a html file and open it in a browser. Then play with the various top and left settings textboxes and you can see immediately what effect they have on the 2 divs in the demo. (btw-I am not the author)

    Code:
     
    <html>
    <head>
    <!-- 
       New Perspectives on HTML and XHTML
       Tutorial 7
       Tutorial Case
       CSS Positioning Demo
       Author: Patrick Carey
       Date:   6/1/2004
       Filename:         demo_css_positioning.htm
       Supporting files: demo.gif
    -->
    <title>CSS Positioning Demo</title>
    <style type="text/css">
       body {background-color:white; font-family: Arial, Helvetica, sans-serif}
       h2 {color:yellow; background-image: url(demo.gif); letter-spacing: 1em;
           font-size: 1.5em; padding: 10px; margin-bottom: 0; text-align: right}
       p {font-size: 0.8em; padding: 10 30 10 30; border: solid 1px black; margin-top:0; background-color: ivory}
       address {text-align: center; font-size: 8pt; border-top: 1px solid black; clear:right; font-style: normal;
                margin-top: 15px}
       span.btitle {font-style: italic}
       #form {float: right}
       #outer {width: 150; height: 150; background-color: red; border: 5px outset red}
       #inner {width: 50; height: 50; background-color: yellow; border: 5px outset yellow}
       #flow {width: 300; height: 50; border: 1px dotted black; margin-top: 10px}
    </style>
    <script type="text/javascript">
    function moveit() {
     outerbox=document.getElementById("outer");
     innerbox=document.getElementById("inner");
     opindex=document.csspform.outerpos.selectedIndex;
     ipindex=document.csspform.innerpos.selectedIndex;
     oppos=document.csspform.outerpos.options[opindex].value;
     ippos=document.csspform.innerpos.options[ipindex].value;
     
     if (oppos != "static") {
        outerbox.style.position=oppos;
        outerbox.style.top=document.csspform.outertop.value+"px";
        outerbox.style.left=document.csspform.outerleft.value+"px";
        document.csspform.outertop.disabled=false;
        document.csspform.outerleft.disabled=false;
     } else {
        outerbox.style.position="";
        outerbox.style.top="0px";
        outerbox.style.left="0px";
        document.csspform.outertop.disabled=true;
        document.csspform.outerleft.disabled=true;
     }
     
     if (ippos != "static") {
        innerbox.style.position=ippos;
        innerbox.style.top=document.csspform.innertop.value+"px";
        innerbox.style.left=document.csspform.innerleft.value+"px";
        document.csspform.innertop.disabled=false;
        document.csspform.innerleft.disabled=false;
     } else {
        innerbox.style.position="";
        innerbox.style.top="0px";
        innerbox.style.left="0px";
        document.csspform.innertop.disabled=true;
        document.csspform.innerleft.disabled=true;
     }  
    }
    function resetform() {
     document.csspform.outerpos.selectedIndex=0;
     document.csspform.innerpos.selectedIndex=0;
     document.csspform.outertop.value="0";
     document.csspform.outerleft.value="0"
     document.csspform.outertop.disabled=true;
     document.csspform.outerleft.disabled=true;
     document.csspform.innertop.value="0";
     document.csspform.innerleft.value="0"
     document.csspform.innertop.disabled=true;
     document.csspform.innerleft.disabled=true;
     moveit();
    }
    </script>
    </head>
    <body>
    <h2>CSS Positioning</h2>
    <p>This page demonstrates how different position styles affect layout. Select position
    values from the selection lists and input boxes below. The first column of input fields sets the position of the larger red box. The second column of input fields sets the position of the smaller yellow box. To reset all the two colored boxes to their default positions, click the
    <b>reset</b> button. The position of the dotted paragraph can not be set, but it may change
    in relation to the movements of the two colored boxes.</p>
    <div id="form">
       <form name="csspform" id="csspform">
       <table cellspacing="2" style="border-left: 1px solid black">
       <tr><td></td>
          <th colspan="2" style="color: blue">Positioning Styles</th>
       </tr>
       <tr><td></td>
          <th style="background-color: red; color: white">outer</th>
          <th style="background-color: yellow; color: black">inner</th>
       </tr>
       <tr><td style="text-align: right">position:</td>
           <td style="background-color: red"><select name="outerpos" id="outerpos" onchange="moveit()">
                  <option value="static" selected="selected">static</option>
                  <option value="absolute">absolute</option>
                  <option value="relative">relative</option>
                  <option value="fixed">fixed</option>
                  <option value="inherit">inherit</option>
               </select></td>
           <td style="background-color: yellow"><select name="innerpos" id="innerpos" onchange="moveit()">
                  <option value="static" selected="selected">static</option>
                  <option value="absolute">absolute</option>
                  <option value="relative">relative</option>
                  <option value="fixed">fixed</option>
                  <option value="inherit">inherit</option>
               </select></td>
       </tr>
       <tr><td style="text-align: right">top:</td>
           <td style="background-color: red"><input name="outertop" id="outertop"  disabled="disabled" value="0" size="5"             style="text-align: right" onchange="moveit()" /></td>
           <td style="background-color: yellow"><input name="innertop" id="innertop"  disabled="disabled" value="0" size="5"             style="text-align: right" onchange="moveit()" /></td>
       </tr>
       <tr><td style="text-align: right">left:</td>
           <td style="background-color: red"><input name="outerleft" id="outerleft"  disabled="disabled" value="0" size="5"             style="text-align: right" onchange="moveit()" /></td>
           <td style="background-color: yellow"><input name="innerleft" id="innerleft"  disabled="disabled" value="0" size="5"             style="text-align: right" onchange="moveit()" /></td>
       </tr>
       <tr>
          <td></td>
          <td colspan="2" style="text-align: center">
              <input type="button" value="   reset   " onclick="resetform()" />
          </td>
       </tr>
       </table>
       </form>
    </div>
    <div id="outer">
       <div id="inner">
       </div>
    </div>
    <p id="flow">
    Sample paragraph.
    </p>
    <address>
    Carey, P.
    <span class="btitle">New Perspectives on HTML and XHTML</span>,
    Course Technology: Boston, 2004.
    </address>
    </body>
    </html>

  • #7
    Regular Coder gcmax's Avatar
    Join Date
    Sep 2010
    Posts
    108
    Thanks
    8
    Thanked 5 Times in 5 Posts
    Finally got this fixed (locally) for all browsers and different resolutions. The ie position bug was showing the text to the right of it's intended location. In Chrome and Firefox a smaller screen size would push the text out of it's box.

    All this was due to me not including an extra wrapper for the content then changing the div that contains the text to position relative.

    eg;
    //XHTML
    Code:
    <div id="ctwrap">
    
    <div class="ctbox">
    
    <div id="imgbox">
    <div id="img1">
    <a href="example.html" title="Text"><img src="image.png" alt="Text"></img></a>
    </div>
    
    <div id="imgdes"><p class="desc">Text here</p>
    </div>
    </div>
    </div>
    </div>
    //CSS
    Code:
     
    #ctwrap {width: 1000px; height: 520px; margin: auto;} /* Full site width and centered */
    
    .ctbox {position: relative; float: left; width: 1000px; height: 520px; margin: auto; background: #ffffff;} /* Content respects this class position as relative, the text no longer overflows on window resize :) */
    
    #imgbox {position: relative; width: 962px; height: 492px; padding-top: 20px; margin: auto;} /* Images in here are centered */
    
    #imgdes {position: absolute; top: 428px; left: 0px; width: 930px; height: 50px; margin: auto;} /* Floated content is centered, left: 0px; is the fix for ie position bug */
    
    p.desc {font-size: 10pt; color: rgb(159,147,137); padding-left: 16px;} /* Text has left spacing which overrides the left: 0px; of #imgdes */
    So wow I was really pounding my head trying to understand the problem and didn't even think to look at my footer which had floated text and was being rendered the same in all browsers!
    It seems I understand a little bit more through solving this problem, thanks to all who tried to help.


    Cheers.


  •  

    Tags for this Thread

    Posting Permissions

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