SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
Thread: (yet another) IE layout problem
-
Mar 1, 2007, 17:54 #1
- Join Date
- Jan 2006
- Posts
- 106
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
(yet another) IE layout problem
Hi,
Once again i turn to the creative minds of this forum to get me out of yet another mess caused by the ever so crap IE browser.
In this example i have 3 divs each 150px high. I'd like a 200x200px image to float over an area that overlaps the 2 top divs. as you can see in the example FF understands the little im asking for and gives me just what i want. But IE decides to add an extra 50 pixels to the first div.
I can't split the image to 2 and position the parts separately. Can anyone think of a solution?
Thanks.
Code:
Code:<div> <div style="height:140px;background:#FFF000;"> Div 1 <div style="position:relative; top:20px; left:40px; z-index:2;"> <img src="face.jpg"> </div> </div> <div style="height:140px;background:#F00000;"> Div 2 </div> <div style="height:140px;background:#F0AA00;"> Div 3 </div> </div>
FF.gif
FF:
IE.gif
until images are approved here imageshack copies:
IE
http://img108.imageshack.us/my.php?image=iehh7.gif
FF
http://img108.imageshack.us/my.php?image=ffzl6.gif
-
Mar 1, 2007, 19:53 #2
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Try using absolute positioning.
I suggest you read about Internet Explorer and the Expanding Box Problem.We miss you, Dan Schulz.
Learn CSS. | X/HTML Validator | CSS validator
Dynamic Site Solutions
Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.
-
Mar 2, 2007, 05:41 #3
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
As Kravvitz already said you could use absolute positioning to get that effect. Just set position:relative on the parent div and change the inner to absolute.
e.g.
Code:<div style="height:140px;background:#FFF000;position:relative"> Div 1 <div style="position:absolute;etc.........
Bookmarks