Jump to content



Photo

Broken IE or Broken CSS?


  • Please log in to reply
7 replies to this topic

#1 Copernic

Copernic

    Neowinian Senior

  • Tech Issues Solved: 2
  • Joined: 03-September 04

Posted 19 September 2013 - 09:48

What i need is to have a 120x600 vertical ad banner on the left side of a page. The problem is that using Internet Explorer the ad banner is totally messed up.

 

Internet Explorer:

LEI6PFz.jpg

 

Firefox:

6PC0xao.jpg

 

And the CSS:

#left {
    position:absolute;
    top:35px;
    left:20%;
    width:120px;
    height:600px;
 }

Any idea how to fix this? Thank you.




#2 the better twin

the better twin

    Neowinian Senior

  • Tech Issues Solved: 2
  • Joined: 26-January 10
  • OS: Win 8
  • Phone: Nokia Lumia

Posted 19 September 2013 - 10:30

Have you done a CSS reset? This could be because of relative positioning of container elements. Could do with a link really to see whats wrong.



#3 OP Copernic

Copernic

    Neowinian Senior

  • Tech Issues Solved: 2
  • Joined: 03-September 04

Posted 19 September 2013 - 11:08

http://freewarepros.com/testing/ACE-Stream.html

Thanks!



#4 the better twin

the better twin

    Neowinian Senior

  • Tech Issues Solved: 2
  • Joined: 26-January 10
  • OS: Win 8
  • Phone: Nokia Lumia

Posted 19 September 2013 - 11:51

Right well you've placed it after your content in the document and are trying to move it outside the document flow with a absolute percentage positioning. This wont work. Try resizing your chrome/firefox to a smaller window size and you have the same problem where it will always be 20% away from the left border of the window.

 

You'd be much better off moving the #left div before your table and just using floated elements. 

<style>
#container {
    margin:0 auto;
    width:960px;
}
#left {
    width:120px;
    margin-right:100px;
    float:left;
} 
table {
    float:left;
}

</style>

<body>
    <div id="container">

        <div id="left">
            // Google code here
        </div>

        <table>
            //Table content here
        </table>

    </div>
</body>


#5 OP Copernic

Copernic

    Neowinian Senior

  • Tech Issues Solved: 2
  • Joined: 03-September 04

Posted 19 September 2013 - 12:07

It works! You really deserve all the good karma I'm throwing at you :jump:



#6 the better twin

the better twin

    Neowinian Senior

  • Tech Issues Solved: 2
  • Joined: 26-January 10
  • OS: Win 8
  • Phone: Nokia Lumia

Posted 19 September 2013 - 13:46

It works! You really deserve all the good karma I'm throwing at you :jump:

Ha ha cheers. Glad you got it sorted.  :beer: 



#7 primexx

primexx

    Neowinian Senior

  • Tech Issues Solved: 6
  • Joined: 24-April 05

Posted 21 September 2013 - 05:26

you run lipsum.org? nice.



#8 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 14
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 21 September 2013 - 10:07

Oh noes ads on my loremipsum site D:





Click here to login or here to register to remove this ad, it's free!