#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    2
    Rep Power
    0

    Positioning inconsistency between IE and Firefox


    Hi everybody,

    The basic set up of a site I'm creating is I have a div with a table inside it both set to 1000px wide. Within the table are the images that make up the background of the site.

    Also within the core div is another div which contains a music player set to absolute positioning. Everything looks perfect in IE however the music player goes beyond the bottom of the image behind it in Firefox.

    The music player itself doesn't move, only the pictures behind it so that leads me to believe it's an issue with where the starting point of the table is rather than the core div.

    I'm completely out of ideas. Does anybody have any thoughts?

    I tried to include a link to the page incase anybody wanted to look at the actual coding but the forum wouldn't allow me since I'm a new user.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2010
    Posts
    2
    Rep Power
    0
    Here is the code....
    Page is kimberleylockeofficial . com / index4.html

    Code:
    <style type="text/css">
    body{
    	text-align: center;
    	min-width: 1000px;
    	background-color:black;
    }
    
    .myCoreDiv{
    	width:1000px;
    	vertical-align:top;
    	text-align:left;
    	margin:auto;
    	top:0px;
    	height:700px;
    	border:0px;
    	margin-top:0px;
    }
    </style>
    </head>
    <body>
    
    
    <div class="myCoreDiv" style="position:relative; top:0px; width:1000px; height:auto; border:0px purple solid; background-color: transparent; " align="center"> 
    
    <table id="CoreTable" width="1000px" height="700px" align="center" border="0" cellpadding="0" cellspacing="0">
    	<tr>
    		<td>
    			<img src="/images/banner_left.jpg" width="500" height="100"></td>
    		<td>
    			<img src="/images/banner_right.jpg" width="500" height="100"></td>
    					</tr><tr>
    					<td>
    			<img src="/images/options_left.jpg" width="500" height="60"></td>
    		<td>
    			<img src="/images/options_right.jpg" width="500" height="60"></td>
    	</tr><tr>
    				<td>
    			<img src="/images/strobe_left1.jpg" width="500" height="480"></td>
    		<td>
    			<img src="/images/strobe_right1.gif" width="500" height="480"></td>
    	</tr><tr>
    				<td>
    			<img src="/images/strobe_left2.jpg" width="500" height="60"></td>
    		<td>
    			<img src="/images/strobe_right2.jpg" width="500" height="60"></td>
    	</tr>
    	</table>
    
    
    
    <!--MUSIC PLAYER START-->
    <div class="MusicPlayer" style="position:absolute; top:490px; left:600px; width:325px; height:200px;">
    
    <div align="center">
    (music player code)
    
    </div>
    <!--MUSIC PLAYER END-->
    
    
    
    </div>
    </body>
    </html>
    Last edited by Kravvitz; April 3rd, 2010 at 05:24 PM. Reason: fixed the code tags
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, trancer78.

    It looks fine in Firefox (2.0-3.6 on WinXP) to me.

    I recommend you add a doctype before the <html> tag to tell browsers to render the page in "standards mode". This is a good one:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    P.S. Are you aware that that animated GIF makes the site look somewhat old and amateurish?
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo