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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    DIV Positioning on different browsers/computers

    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!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,038
    Thanks
    23
    Thanked 589 Times in 588 Posts
    I use FF and the 2 div are entirely in a different place when I went to the site. The problem is your use of absolute positioning on them. Absolute positioning keeps them from moving when different browser sizes view the page.

    Also go to http://validator.w3.org and fix your code. <center> is depreciated, you have extra tags and there is one warring:
    Byte-Order Mark found in UTF-8 File.

    The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files is known to cause problems for some text editors and older browsers. You may want to consider avoiding its use until it is better supported.

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    I use FF and the 2 div are entirely in a different place when I went to the site. The problem is your use of absolute positioning on them. Absolute positioning keeps them from moving when different browser sizes view the page.

    Also go to http://validator.w3.org and fix your code. <center> is depreciated, you have extra tags and there is one warring:
    What do you suggest instead of absolute? fixed or relative? I think I tried relative and had similar problems. Thanks for your help

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    You don't need to use positioning for layout, until it is too necessary.

    Visit following links for help on how to do tables less layout without postioning

    http://girlswhogeek.com/tutorials/20...ess-css-layout

    http://www.dynamicdrive.com/style/layouts/


  • #5
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #6
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I use FF and the 2 div are entirely in a different place when I went to the site. The problem is your use of absolute positioning on them. Absolute positioning keeps them from moving when different browser sizes view the page.

    Also go to http://validator.w3.org and fix your code. <center> is depreciated, you have extra tags and there is one warring:
    ----------------------
    Last edited by WA; 09-18-2011 at 10:56 PM.


  •  

    Posting Permissions

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