FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

CSS Positioning in Internet Explorer

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


garionw
Hello,

I am wondering if someone can help me with a problem I am having. I am trying to setup something like this:



That was in Firefox which displays it without a problem, but when I go to view it in I.E, heres what happen's:



Heres the code I have so far:

The CSS
Code:

 #featured{height: 310px; width: 720px;}
  #featured img{position: absolute; margin: 0; z-index: 0;}
 #lists{position: absolute; z-index: 1; background-color: #FFFFFF; padding: 3px 10px; width: 319px; border-bottom: 1px solid #666666; border-left: 1px solid #666666; margin: 0 0 0 380px;}
  #lists a{}
 #description{width: 216px; background-color: #FFCCFF; height: 56px; font-size: 12px; padding: 2px; position: absolute; margin: 200px 0 0 460px; z-index: 1; opacity: 0.6;}
  #description strong{font-size: 16px;}


The HTML
Code:

<div id="featured">
   <img src="images/home/featured1.png" name="imagename" alt="Featured" width="720" />
   <div id="lists">
    Bridges
    Featured2
   </div>
   <div id="description">
    <strong>Bridges</strong><br />
    Can you climb to the top in time with this delightfully addictive puzzler?
   </div>
  </div>


Thanks In Advance,
Garion
LukeakaDanish
I'm having trouble seeing how this works - can you post a link?

A couple of notes about your css, however:


  • I don't think z-index: 0 is a good idea - use positive integer values
  • the opacity attribute doesn't work in IE6 (and possibly not in IE7 either)
  • So far as i can tell, there is no point in the 380px left margin on the #lists element - its positioned absolute, so margin's shouldn't have any (intended) effect - use left and top attributes instead.


I really need a proper page source to be able to test with my browsers though...
garionw
LukeakaDanish wrote:
I'm having trouble seeing how this works - can you post a link?

A couple of notes about your css, however:


  • I don't think z-index: 0 is a good idea - use positive integer values
  • the opacity attribute doesn't work in IE6 (and possibly not in IE7 either)
  • So far as i can tell, there is no point in the 380px left margin on the #lists element - its positioned absolute, so margin's shouldn't have any (intended) effect - use left and top attributes instead.


I really need a proper page source to be able to test with my browsers though...



I'll bump the z-index up a notch

Opacity is a feature for Firefox/Webkit/Opera users only, but I do have a hack for IE

If I use top and left elements in Firefox, it positions it absolutely absolutely (Like at the top of the page, rather than the top of the div)


Because I'm working on it locally, and im not on the computer, I'll post the source later
LukeakaDanish
garionw wrote:

If I use top and left elements in Firefox, it positions it absolutely absolutely (Like at the top of the page, rather than the top of the div)


The solution to that problem is applying position: relative OR position: absolute to the containing element
garionw
Thats got it, thanks a bunch!

Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.