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 3 of 3
  1. #1
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts

    Help With IE Positioning Please

    Hey guys,

    Right, my page http://www.ahallicks.co.uk/newpage.php has a guitar that needs to be floated on top of the scroll bar on the content pages. I have created a transparent .gif to do this and have relatively positioned it to get it where I want.

    In IE (6), as you will see when you click it, a large gap appears where the div is placed for the element that has been positioned, but I can still position the image correctly.

    I was wondering how I can get rid of this stupid big white gap?

    Cheers


    CSS for image:

    Code:
    #content {
    	background-image: url(images/content.jpg);
    	width: 492px;
    	height: 285px;
    	float:left;
    }
    
    .content {
    	color: #000000;
    	padding-top: 10px;
    	padding-left: 10px;
    	width: 400px;
    	height: 270px;
    	overflow-y: scroll;
    }
    
    #overguitar {
    	position: relative;
    	background-image: url(images/over_guitar.gif);
    	width: 136px;
    	height: 155px;
    	top: 401px;
    	left: 608px;
    }
    Last edited by ahallicks; 12-21-2006 at 06:26 PM. Reason: And another thing...
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    I've been playing around with the display: properties and found that display: inline; puts the page where I want it to be but the actualy image doesn't show up anymore!

    Why does IE place the div where I put it but move the actual image to the relative position I've chosen? Firefox moves the actual div to where I've placed it and puts it over the top, but IE leaves the div where I put it and moves the element in the div, hence the big white gap
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    And, just wondering... is there a conditional statement that parses a specific style to JUST Firefox? The reason I ask is because I want a valid stylesheet but it doesn't seem to like overflow-y and opacity, so I want to put that in it's own stylesheet and incorporate it as a conditional statement. I have something like this (which doesn't work as of yet):

    <!--[if FF]>
    <style type="text/css">
    @import url(resources/ff-style.css");
    </style>
    <![endif]-->
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools


  •  

    Posting Permissions

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