DIV Positioning on different browsers/computers

**Noob_Programmer** · 09-17-2011, 04:51 AM

Hello, I am having some trouble with the position of 2 DIV's. They look fine on my computer but aren't in the same position on IE and other peoples computers.

The following is how it looks on FireFox on my computer and how it SHOULD look for everyone:

This is how it looks on IE9 (Yes I am aware the menu isn't right either but i'll sort that out later):

The code for the 2 DIV's (I can post whole page CSS code if required):

Code:

 
#shoppingCart{
background-image:url('images/shopping_cart_banner.jpg');
background-color:#000000;
background-repeat: no-repeat;
height:80px;
width:200px;
color:white;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid white;
position:absolute;
top:300px;
left:915px;
}

#countdown{
background-image:url('images/countdown_banner.jpg');
background-color:#000000;
background-repeat: no-repeat;
height:80px;
width:200px;
color:white;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid white;
position:absolute;
top:420px;
left:915px;
}

The HTML code for the page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
	<title>Home - Dine in</title>
	<meta name="description" content="Homepage for Dine in" />
	<meta name ="keywords" content="Dine, food" />
	<link rel="stylesheet" type="text/css" href="divstyles.css" />
	<link rel="stylesheet" type="text/css" href="formatstyles.css" />
	<link rel="stylesheet" type="text/css" media="all" href="menu_style.css"  />

</head>

	<body class="body">
	<div id="page_section">
			<div id= "banner">
                        <img src="images/Banner.jpg" alt="The Dine In Banner" height="100%" width="100%" />
			</div>
				<div>
			<ul id='menu'>
			<li class="button"><a class='current' href='index.html' >Home</a></li>
			<li class="button"><a href='aboutus.html'  >About Us</a></li>
			<li class="button"><a href='http://'  >Menu</a></li>
 			<li class="button"><a href='http://'  >Gallery</a></li>                       
                        <li class="button"><a href='http://'  >Reviews</a></li>
                        <li class="button"><a href='booking.html'  >Bookings</a></li>
                        <li class="button"><a href='http://'  >Upcoming Events</a></li>			
                        <li class="button"><a href='http://'  >Contact Us</a></li> 
                        <li class="button"><a href='http://'  >Links</a></li>
			</ul>
		</div>
		<div id="content">
<center><h1>The Dine In; A Cuisine like no other</h1></center>
<center><h4><u>Established August 2011</u></h4></center>
<center><img src="images/rest.jpg" alt="setting" title="setting" /></center>                
                       
			
        <h2 class="margin">Whether alone, with family or with friends our purpose is to give you the <b>best</b> eating experience ever.</h2>

	<p class="margin">Located on Bourke St, in the heart of Melbourne's CBD, TDN is a newly opened restaraunt with a World Class Cusisine and the finest dishes.
	It combines relaxeded, glamourous atmosphere with exceptional hospitality.<br /> 
	Our specialised Cheffs and Staff are trained to meet the requirements of our customers. At TDN it's our customers <i>needs</i> and <i>wants</i> that come first.


<center>We are open<u>7 days</u> a week and invite you during the following hours. </center>



<center><h3>Trading Hours:</h3></center>
<center>Mon 9:00am - 9:00pm</center>
<center>Tue 9:00am - 9:00pm</center>
<center>Wed 9:00am - 9:00pm</center>
<center>Thu 4:00pm - 10:30pm</center>
<center>Fri 4:00pm - 10:30pm</center>
<center>Sat 4:00pm - 10:30pm</center>
<center>Sun 11:00am - 5:30pm</center>

<center><h3>Thank you for visiting our Web Site, please continue browsing through what we have to offer to our customers</h3></center>

			<div id="shoppingCart"></br></br>
                           <center>Your cart is currently empty.</center>                  
			</div>
                        <div id="countdown"><br/><br/>
                        <script type="text/javascript" src="countdown.js"></script>
			</div>			
			</div>                      
				
			<div id= "footer">
				<b>Disclaimer</b><br/>
				This website is a student project that is intended to be used only for academic purposes. This page was created by Taner Serbest</p>
				</div>
	
				</div>
</body>
</html>

The URL for the site (if it helps or is needed):

http://freddo.bf.rmit.edu.au/~s32861...eIn/index.html

Any help is appreciated!

**itivae** · 09-17-2011, 07:28 PM

Hi a couple of things that might help you.

1. Add a div to wrap the cart and the clock like this

HTML Code:

<div id="content">
  <center>
    <h1>The Dine In; A Cuisine like no other</h1>
  </center>
  <div id="cartandclock">
    <div id="shoppingCart">
      <br>
      <br>
      <center>Your cart is currently empty.</center>
    </div>
    <br>
    <br>
    <div id="countdown">
      <br>
      <br>
      <script type="text/javascript/edited/edited" src="countdown.js"></script>
      
    
    Only 2 days until our next sale!
			
  
  
    </div>
  </div>
  <center>
    <h4>
      <u>Established August 2011</u>
    </h4>
  </center>
  <center>
    <img src="images/rest.jpg" alt="setting" title="setting">
  </center>
  <h2 class="margin">
    
    Whether alone, with family or with friends our purpose is to give you the 
    
    <b>best</b>
    
     eating experience ever.
  
  </h2>
  <p class="margin">
    
    Located on Bourke St, in the heart of Melbourne's CBD, TDN is a newly opened restaraunt with a World Class Cusisine and the finest dishes.
	It combines relaxeded, glamourous atmosphere with exceptional hospitality.
    
    <br>
    
     
	Our specialised Cheffs and Staff are trained to meet the requirements of our customers. At TDN it's our customers 
    
    <i>needs</i>
    
     and 
    
    <i>wants</i>
    
     that come first.



  
  </p>
  <center>
    
    We are open
    
    <u>7 days</u>
    
     a week and invite you during the following hours. 
  
  </center>
  <center>
    <h3>Trading Hours:</h3>
  </center>
  <center>Mon 9:00am - 9:00pm</center>
  <center>Tue 9:00am - 9:00pm</center>
  <center>Wed 9:00am - 9:00pm</center>
  <center>Thu 4:00pm - 10:30pm</center>
  <center>Fri 4:00pm - 10:30pm</center>
  <center>Sat 4:00pm - 10:30pm</center>
  <center>Sun 11:00am - 5:30pm</center>
  <center>
    <h3>Thank you for visiting our Web Site, please continue browsing through what we have to offer to our customers</h3>
  </center>
</div>

You will want to move those divs up near the top.
Then float said div (id="cartandclock) float:right; then adjust to fit with padding. You will also want to erase the position absolute from both the cart div and the clock div.

2. Change your div id="cart" to div class="cart" and then call it in css with .cart instead of #cart (use also for #countdown change instead to .countdown). It will help to keep you more organized. This looked fine for me in Opera and Firefox I think it will work cross browser for you.

Good luck.

**Noob_Programmer** · 09-18-2011, 01:37 AM

Thanks for the help guys, I am trying to float things now instead of using position:.

I have a problem though, I made a div to hold the shopping cart and the countdown and floated it right. So now it is in the bottom right corner of the content section. How do I get it up and slightly to the left? Padding and margins don't move it they just create space around it.

Code:

Code:

#cartAndClock{
float:right;
}

.shoppingCart{
background-image:url('images/shopping_cart_banner.jpg');
background-color:#000000;
background-repeat: no-repeat;
height:80px;
width:200px;
color:white;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid white;
margin-bottom:50px;
}

.countdown{
background-image:url('images/countdown_banner.jpg');
background-color:#000000;
background-repeat: no-repeat;
height:80px;
width:200px;
color:white;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid white;
}

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
	<title>Home - Dine in</title>
	<meta name="description" content="Homepage for Dine in" />
	<meta name ="keywords" content="Dine, food" />
	<link rel="stylesheet" type="text/css" href="divstyles.css" />
	<link rel="stylesheet" type="text/css" href="formatstyles.css" />
	<link rel="stylesheet" type="text/css" media="all" href="menu_style.css"  />

</head>

	<body class="body">
	<div id="page_section">
			<div id= "banner">
                        <img src="images/Banner.jpg" alt="The Dine In Banner" height="100%" width="100%" />
			</div>
				<div>
			<ul id='menu'>
			<li class="button"><a class='current' href='index.html' >Home</a></li>
			<li class="button"><a href='aboutus.html'  >About Us</a></li>
			<li class="button"><a href='http://'  >Menu</a></li>
 			<li class="button"><a href='http://'  >Gallery</a></li>                       
                        <li class="button"><a href='http://'  >Reviews</a></li>
                        <li class="button"><a href='booking.html'  >Bookings</a></li>
                        <li class="button"><a href='http://'  >Upcoming Events</a></li>			
                        <li class="button"><a href='http://'  >Contact Us</a></li> 
                        <li class="button"><a href='http://'  >Links</a></li>
			</ul>
		</div>
		<div id="content">
<center><h1>The Dine In; A Cuisine like no other</h1></center>
<center><h4><u>Established August 2011</u></h4></center>
<center><img src="images/rest.jpg" alt="setting" title="setting" /></center>                
                       
			
        <h2 class="margin">Whether alone, with family or with friends our purpose is to give you the <b>best</b> eating experience ever.</h2>

	<p class="margin">Located on Bourke St, in the heart of Melbourne's CBD, TDN is a newly opened restaraunt with a World Class Cusisine and the finest dishes.
	It combines relaxeded, glamourous atmosphere with exceptional hospitality.<br /> 
	Our specialised Cheffs and Staff are trained to meet the requirements of our customers. At TDN it's our customers <i>needs</i> and <i>wants</i> that come first.


<center>We are open<u>7 days</u> a week and invite you during the following hours. </center>



<center><h3>Trading Hours:</h3></center>
<center>Mon 9:00am - 9:00pm</center>
<center>Tue 9:00am - 9:00pm</center>
<center>Wed 9:00am - 9:00pm</center>
<center>Thu 4:00pm - 10:30pm</center>
<center>Fri 4:00pm - 10:30pm</center>
<center>Sat 4:00pm - 10:30pm</center>
<center>Sun 11:00am - 5:30pm</center>

<center><h3>Thank you for visiting our Web Site, please continue browsing through what we have to offer to our customers</h3></center>












                        <div id="cartAndClock">

			<div class="shoppingCart"></br></br>
                           <center>Your cart is currently empty.</center>                  
			</div>
                        <div class="countdown"><br/><br/>
                        <script type="text/javascript" src="countdown.js"></script>
			</div>
                        </div>			
			</div>                      
				
			<div id= "footer">
				<b>Disclaimer</b><br/>
				This website is a student project that is intended to be used only for academic purposes. This page was created by Taner Serbest</p>
				</div>
	
				</div>
</body>
</html>

**itivae** · 09-18-2011, 02:01 AM

Move your cartclock div to the top where it is in my code. Right under the

HTML Code:

 <center>
    <h1>The Dine In; A Cuisine like no other</h1>
  </center>

then use the new #cartandclock div to move it all around at once.

Good luck.

**Noob_Programmer** · 09-18-2011, 02:39 AM

Ok great I got it working, I had to use a negative value on the left margin though so the image wasn't getting pushed aside. Is this acceptable?

**itivae** · 09-18-2011, 02:44 AM

Should work. How many browsers do you have. Id just browse it in all of them and see. Post a link here if you like.

**Noob_Programmer** · 09-18-2011, 03:12 AM

http://freddo.bf.rmit.edu.au/~s32861...eIn/index.html

Links for the About Us, Menu and Gallery pages work too if you want to try them.

Appreciate your help

**itivae** · 09-18-2011, 03:40 AM

The only thing I can see that is wrong is in chrome (on the first page).
Change this to.

HTML Code:

<div id="banner">
  <img src="images/Banner.jpg" alt="The Dine In Banner" height="100%" width="100%">
</div>

HTML Code:

<div id="banner">
  <img src="images/Banner.jpg" alt="The Dine In Banner" height="auto" width="100%">
</div>

Your site has no other error that I can see other than a few cosmetic things. Get as many browsers as you can....and test it all. Then you will know.

**Noob_Programmer** · 09-18-2011, 03:47 AM

great appreciate your help

Thread: DIV Positioning on different browsers/computers

Thread Tools

Search Thread

DIV Positioning on different browsers/computers

Bookmarks

Bookmarks

Posting Permissions