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

    IE7 ignoring my padding grrrrrrr

    Hey,
    Thanks for taking the time to read my post ..apologies firstly as this is my first website in css and my heads about to explode any help greatly appreciated.

    Ok issue one is i have made a website which works fine in when i view it in ie8 but when in ie7 it seems to ignore the padding i have given to the main picture in the div id "pageimage" As a result my footer collapse right after the image.

    I have tried loads of stuff but still it doesnt work. IE8 looks fine but ie7 the footer collapse and makes the whole page look duff as the gradient is out. Also i tried just increasing the size of the div in css but for some reason instaed of adding more length to the bottom it adds to the top going all over the other divs ???

    anyways heres the html code

    Code:
    </head>
    
    <body id="contactpage">
    
        
        <div class="menu">
      
    		<ul>
            	<li><a href="index.html"> Home</a></li>
           	  	<li><a href="aboutus.html">About Us</a></li>
                <li><a href="menu.html">Menu</a></li>
                <li><a href="location.html">Location</a></li>
                <li><a href="contact.html">Contact</a></li> 
          	</ul>
    	</div>
        
    
    
       <div id="wrap">
       
      <div id="banner2">  </div>
    
    <div id="pageimage"><img src="aboutus.png" alt="Map" align="center" /></div>
    
    
    
     
    <div class="footer">
    	   
    <div class="menumedia style10">
      <p><a href="http://www"> Designed by blahblah</a></p>
      </div> 
        
      <div class="ftmenu">
    		<ul>
            	<li><a href="index.html">Home</a></li>
           	  	<li><a href="aboutus.html">About Us</a></li>
                <li><a href="menu.html">Menu</a></li>
                <li><a href="location.html">Location</a></li>
                <li><a href="contact.html">Contact</a></li> 
          	</ul>
      </div>
    	
    <div class="address">
      <p>...................</p>
      
      </div>
    </div>
    </body>
    </html>
    and here is the css

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    
    .style4 {color:#CC3333}
    .style6 {color: #990000}
    .style10 {color: #FF0033}
    .style12 {font-size: 15px}
    .style13 {color:
    #FFFFFF;}
    
    
    
    #wrap {
    		width:900px; 
    		margin:0px auto; 
    		background: url(../images/sprite.pngg)  0 -1200px no-repeat; 
    		position:relative;
    		clear:both;
    }
    
    #homepage {
    		background-image:url(back2.png);
    		background-position:top-left;
    		background-repeat:repeat-x;
    		background-color:#6d0019;
    		text-align: center;
    		margin:0;
    		padding:0;
       		height:100%;
    }
    #menupage {
    		background-image: url(back22.png);
    		background-position:top-left;
    		background-repeat:repeat-x;
    		background-color:#6d0019;
    		text-align: center;
    		margin:0;
    		padding:0;
       		height:100%;
    }
    #contactpage {
    		background-image: url(back222.png);
    		background-position:top-left;
    		background-repeat:repeat-x;
    		background-color:#6d0019;
    		text-align: center;
    		margin:0;
    		padding:0;
       		height:100%;
    }
    #container {
    		background-image: url(lightgreen.png);
    		background-repeat: repeat-y;
    		width: 711px;
    		/*margin-right: 33%;*/
    		/*margin-left: 33%;*/
    		/*margin-top: 0px;*/
    		margin:0px auto; 
    		width: 50em;
    		position:absolute;
    		z-index:2;
    }
    
    #banner1 {
    	
    		/*background-image:url(bannercopy2.png);*/
    		background-image:url(bannerhome.png);
    		background-repeat:no-repeat;
    		background-position: center center;
    		margin-right: auto;
    		margin-left: auto;
    		width: 900px;
    		height: 317px;
    		margin-top: 85px;
    		float:left;
    		z-index:3;
    
    }
    #banner2 {
    	
    		/*background-image:url(bannercopy2.png);*/
    		background-image:
    		url(bannerabout.png);
    		background-repeat:no-repeat;
    		background-position: center center;
    		margin-right: auto;
    		margin-left: auto;
    		width: 900px;
    		height: 317px;
    		margin-top: 18px;
    		float:left;
    		z-index:9;
    
    }
    #banner3 {
    	
    		/*background-image:url(bannercopy2.png);*/
    		background-image:
    		url(bannermenu.png);
    		background-repeat:no-repeat;
    		background-position: center center;
    		margin-right: auto;
    		margin-left: auto;
    		width: 900px;
    		height: 317px;
    		margin-top: 19px;
    		float:left;
    		z-index:3;
    
    }
    #banner4 {
    	
    		/*background-image:url(bannercopy2.png);*/
    		background-image:
    		url(bannerlocation.png);
    		background-repeat:no-repeat;
    		background-position: center center;
    		margin-right: auto;
    		margin-left: auto;
    		width: 900px;
    		height: 317px;
    		margin-top: 18px;
    		margin-bottom: -23px;
    		float:left;
    		z-index:3;
    	
    }
    #banner5 {
    	
    		/*background-image:url(bannercopy2.png);*/
    		background-image:
    		url(bannercontact.png);
    		background-repeat:no-repeat;
    		background-position: center center;
    		margin-right: auto;
    		margin-left: auto;
    		width: 900px;
    		height: 317px;
    		margin-top: 18px;
    		float:left;
    		z-index:3;
    		
    
    
    }
    .pageimage {
    		height: 384px;
    		width: 760px;
    		background-image:url(aboutus.png);
    		padding-bottom:1px 1px 50px 1px;
    		float:left;
    		z-index: 3;
    		display: block;
    		border: 1px solid #CCC;
    	
    }
    
    .menu ul {
    		list-style-type: none;
    		/*background-image: url(menuback2.png);*/
    		height: 40px;
    		width: 565px;
    		margin:19px auto;
    		margin-bottom: 0px;
    }
    
    .menu ul li {
    		float:left;
    
    }
    
    .menu ul li a {
    		background-image: url(divider.png);
    		background-repeat: no-repeat;
    		background-position: right;
    		padding-right: 32px;
    		padding-left: 32px;
    		display: block;
    		line-height: 40px;
    		text-decoration: none;
    		font-family:Arial, Helvetica, sans-serif;
    		font-size:14px;
    		color:#858583
    }
    
    
    .menu ul li a:hover {
    		color: #FFF;
    		background-repeat:repeat-x;
    		background-image:url(divider.png);
    		background-position:right;
    }
    
    
    #left_column {
    		height: 679px;
    		width: 525px;
    		background-color:#6d0019;
    		float:left;
    		z-index: 2;
    		background-image:
    		url(CTikka4.jpg);
    		background-repeat:
    		no-repeat;
    		margin-bottom:0px;
    		background-position:center center;
    	/*border:
    	#CCCCCC;
    	border:thin;*/
    	
    }
    #text_box {
    	height: 650px;
    	width: 200px;
    	padding-top: 0px;
    	padding-left: 30px;
    	margin-left:0px;
    	margin-right:auto;
    	}
    #logo {
    /*background-image:url(address.png);
    background-repeat:no-repeat;*/
    	margin-top:10px;
    	height: 80px;
    	z-index:5;
    	clear: both;
    	
    }
    #delivery {
    	float: left;
    	height: 110px;
    	width: 370px;
    	background-color: #6d0019;
    	background-image:url(delivery.png);
    	background-repeat:no-repeat;
    	z-index: 4;
    }
    
    
    
    
    	#opening {
    	float: left;
    	height: 110px;
    	padding-bottom: 1px;
    	width: 370px;
    	background-color: #6d0019;
    	background-image:
    	url(opening.png);
    	background-repeat:no-repeat;
    	z-index: 4;
    }
    #discount {
    	float: left;
    	height: 110px;
    	width: 370px;
    	background-color: #6d0019;
    	background-image:
    	url(discount.png);
    	background-repeat:no-repeat;
    	z-index: 4;
    	padding-top:4px;
    }
    
    #delivery:hover {
    	background-repeat:no-repeat;
    	background-image:url(deliveryhv.png);
    }
    #opening:hover {
    	background-repeat:no-repeat;
    	background-image:url(openinghv.png);
    }
    #discount:hover {
    	background-repeat:no-repeat;
    	background-image:url(discounthv.png);
    }
    
    #menumovie {
    width: 760px;
    height: 700px;
    margin-right: auto;
    		margin-left: auto;
    }
    
    #movie {
    	float: left;
    	height: 330px;
    	width: 350px;
    	padding-top: 11px;
    	padding-left: 10px;
    	padding-right: 10px;
    	padding-bottom: 3px;
    	background-color: #6d0019;
    	z-index: 4;
    	border:#FF0000;
    	border-width: 3px;
    }
    
    .footer {
    	bottom:0;
    	width:100%;
    	height:100px;   /* Height of the footer */
    	background:#6cf;
    	clear: both;
    	/*bottom: -600px;*/
    	left: 0px;
    	right: 0;
    	background-image:url(backft2.png);
    	z-index:3;
    	clear:all;
    
    
    }
    .ftmenu ul {
    
    	list-style-type: none;
    	/*background-image: url(menuback2.png);*/
    	height: 40px;
    	width: 400px;
    
    	margin-bottom: 0px;
    	Margin-left: 240px;
    Margin-right: auto;
    
    
    	
    }
    .ftmenu ul li {
    	float:left;
    
    
    
    
    }
    .ftmenu ul li a {
    
    	padding-right: 10px;
    	padding-left: 10px;
    	display: block;
    	line-height: 40px;
    	text-decoration: none;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:14px;
    	color:#858583;
    	padding-top:0 px;
    
    }
    .ftmenu ul li a:hover {
    	color: #FFF;
    }
    .menumedia {
    	padding-top:0 px;
    	float:right;
    	height:50px;
    	width:200px;
    	padding-bottom:-50px;
    }
    
    .address{
    	margin:0px auto; 
    	height:30px;
    	width:600px;
    	font-family:Arial, Helvetica, sans-serif;
    	color:#FFFFFF;
    	vertical-align: top;
    	margin-top:10px;
    	}
    	#preloaded-images {
       position: absolute;
       overflow: hidden;
       left: -9999px; 
       top: -9999px;
       height: 1px;
       width: 1px;
    }
    Any tips on improving the coding would be welcome
    Last edited by LameNewbie; 01-10-2010 at 09:04 AM. Reason: More info

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Your markup has some errors. Fix them all and then post the corrected markup, or a link to your page would be much better.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello LameNewbie,
    You have some very basic mistakes in your code.

    The validator finds a lot of them, see the links about validation in my sig below.

    One the validator might not find that is giving you your most immediate problem:
    You have <div id="pageimage"> in your markup but you style .pageimage in your CSS. That should be #pageimage in your CSS. Once you fix that, then you can decide if aboutus.png is going to be presented in the markup or as a background image. It probably doesn't need to be both.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the quick reply
    yep changed that must have been playing around with it before i posted it ..changed it back but still same issue ..padding bottom is ok in ie8 but in ie7 it just collapes

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Post your current version so we can see the corrections you've made.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Guys thanks for all your help I used the validation tool and it appears to be working now pasted the code below for ref. Not quite sure why it was doing what it was doing but its stopped now. Just a couple of other questions if you dont mind
    1) how can i get the div to center via html rather than css

    2) why is it when i make a css box for text the text always goes outside the box or starts further doen the box half in and half out ? (is it better to do this in html ?)

    3) Is it better to use "pageimage" as a css background or a html image ?

    thanks again

    Code:
    </head>
    <body id="contactpage">
    	<div class="menu">
    		<ul>
    		<li><a href="index.html">Home</a></li>
    		<li><a href="aboutus.html">About Us</a></li>
    		<li><a href="menu.html">Menu</a></li>
    		<li><a href="location.html">Location</a></li>
    		<li><a href="contact.html">Contact</a></li>
    		</ul>
    	</div>
        
    <div id="wrap">
    	<div id="banner2"></div>
        
    	<div class="pageimage"><img src="aboutus.png" alt="Map" align="middle" /></div>
        
    	<div class="footer">
    		<div class="menumedia style10">
    			<p><a href="http://www.">� Designed by </a></p>
    		</div>
    
    		<div class="ftmenu">
    			<ul>
    			<li><a href="index.html">Home</a></li>
    			<li><a href="aboutus.html">About Us</a></li>
    			<li><a href="menu.html">Menu</a></li>
    			<li><a href="location.html">Location</a></li>
    			<li><a href="contact.html">Contact</a></li>
    			</ul>
    		</div>
        
    		<div class="address">
    			<p>.......................</p>
    		</div>
    	</div>
        
    </div>
    </body>
    </html>
    css

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    
    .style4 {color:#CC3333}
    .style6 {color: #990000}
    .style10 {color: #FF0033}
    .style12 {font-size: 15px}
    .style13 {color:
    #FFFFFF;}
    
    
    
    #wrap {
    		width:900px; 
    		margin:0px auto; 
    		background: url(../images/sprite.pngg)  0 -1200px no-repeat; 
    		position:relative;
    		clear:both;
    }
    
    #homepage {
    		background-image:url(back2.png);
    		background-position:top left;
    		background-repeat:repeat-x;
    		background-color:#6d0019;
    		text-align: center;
    		margin:0;
    		padding:0;
       		height:100%;
    }
    #menupage {
    		background-image: url(back22.png);
    		background-position:top left;
    		background-repeat:repeat-x;
    		background-color:#6d0019;
    		text-align: center;
    		margin:0;
    		padding:0;
       		height:100%;
    }
    #contactpage {
    		background-image: url(back222.png);
    		background-position:top left;
    		background-repeat:repeat-x;
    		background-color:#6d0019;
    		text-align: center;
    		margin:0;
    		padding:0;
       		height:100%;
    }
    #container {
    		background-image: url(lightgreen.png);
    		background-repeat: repeat-y;
    		width: 711px;
    		/*margin-right: 33%;*/
    		/*margin-left: 33%;*/
    		/*margin-top: 0px;*/
    		margin:0px auto; 
    		width: 50em;
    		position:absolute;
    		z-index:2;
    }
    
    #banner1 {
    	
    		/*background-image:url(bannercopy2.png);*/
    		background-image:url(bannerhome.png);
    		background-repeat:no-repeat;
    		background-position: center center;
    		margin-right: auto;
    		margin-left: auto;
    		width: 900px;
    		height: 317px;
    		margin-top: 85px;
    		float:left;
    		z-index:3;
    
    }
    #banner2 {
    	
    		/*background-image:url(bannercopy2.png);*/
    		background-image:
    		url(bannerabout.png);
    		background-repeat:no-repeat;
    		background-position: center center;
    		margin-right: auto;
    		margin-left: auto;
    		width: 900px;
    		height: 317px;
    		margin-top: 18px;
    		float:left;
    		z-index:9;
    
    }
    #banner3 {
    	
    		/*background-image:url(bannercopy2.png);*/
    		background-image:
    		url(bannermenu.png);
    		background-repeat:no-repeat;
    		background-position: center center;
    		margin-right: auto;
    		margin-left: auto;
    		width: 900px;
    		height: 317px;
    		margin-top: 19px;
    		float:left;
    		z-index:3;
    
    }
    #banner4 {
    	
    		/*background-image:url(bannercopy2.png);*/
    		background-image:
    		url(bannerlocation.png);
    		background-repeat:no-repeat;
    		background-position: center center;
    		margin-right: auto;
    		margin-left: auto;
    		width: 900px;
    		height: 317px;
    		margin-top: 18px;
    		margin-bottom: -23px;
    		float:left;
    		z-index:3;
    	
    }
    #banner5 {
    	
    		/*background-image:url(bannercopy2.png);*/
    		background-image:
    		url(bannercontact.png);
    		background-repeat:no-repeat;
    		background-position: center center;
    		margin-right: auto;
    		margin-left: auto;
    		width: 900px;
    		height: 317px;
    		margin-top: 18px;
    		float:left;
    		z-index:3;
    		
    
    
    }
    .pageimage {
    		height: 384px;
    		width: 760px;
    		padding-bottom:20px;
    		float:left;
    		margin:auto;
    		z-index: 2;
    		display: block;
    	
    }
    
    .menu ul {
    		list-style-type: none;
    		/*background-image: url(menuback2.png);*/
    		height: 40px;
    		width: 565px;
    		margin:19px auto;
    		margin-bottom: 0px;
    }
    
    .menu ul li {
    		float:left;
    
    }
    
    .menu ul li a {
    		background-image: url(divider.png);
    		background-repeat: no-repeat;
    		background-position: right;
    		padding-right: 32px;
    		padding-left: 32px;
    		display: block;
    		line-height: 40px;
    		text-decoration: none;
    		font-family:Arial, Helvetica, sans-serif;
    		font-size:14px;
    		color:#858583
    }
    
    
    .menu ul li a:hover {
    		color: #FFF;
    		background-repeat:repeat-x;
    		background-image:url(divider.png);
    		background-position:right;
    }
    
    
    #left_column {
    		height: 679px;
    		width: 525px;
    		background-color:#6d0019;
    		float:left;
    		z-index: 2;
    		background-image:
    		url(CTikka4.jpg);
    		background-repeat:
    		no-repeat;
    		margin-bottom:0px;
    		background-position:center center;
    	/*border:
    	#CCCCCC;
    	border:thin;*/
    	
    }
    #text_box {
    	height: 650px;
    	width: 200px;
    	padding-top: 0px;
    	padding-left: 30px;
    	margin-left:0px;
    	margin-right:auto;
    	}
    #logo {
    /*background-image:url(address.png);
    background-repeat:no-repeat;*/
    	margin-top:10px;
    	height: 80px;
    	z-index:5;
    	clear: both;
    	
    }
    #delivery {
    	float: left;
    	height: 110px;
    	width: 370px;
    	background-color: #6d0019;
    	background-image:url(delivery.png);
    	background-repeat:no-repeat;
    	z-index: 4;
    }
    
    
    
    
    	#opening {
    	float: left;
    	height: 110px;
    	padding-bottom: 1px;
    	width: 370px;
    	background-color: #6d0019;
    	background-image:
    	url(opening.png);
    	background-repeat:no-repeat;
    	z-index: 4;
    }
    #discount {
    	float: left;
    	height: 110px;
    	width: 370px;
    	background-color: #6d0019;
    	background-image:
    	url(discount.png);
    	background-repeat:no-repeat;
    	z-index: 4;
    	padding-top:4px;
    }
    
    #delivery:hover {
    	background-repeat:no-repeat;
    	background-image:url(deliveryhv.png);
    }
    #opening:hover {
    	background-repeat:no-repeat;
    	background-image:url(openinghv.png);
    }
    #discount:hover {
    	background-repeat:no-repeat;
    	background-image:url(discounthv.png);
    }
    
    #menumovie {
    width: 760px;
    height: 700px;
    margin-right: auto;
    		margin-left: auto;
    }
    
    #movie {
    	float: left;
    	height: 330px;
    	width: 350px;
    	padding-top: 11px;
    	padding-left: 10px;
    	padding-right: 10px;
    	padding-bottom: 3px;
    	background-color: #6d0019;
    	z-index: 4;
    	border:#FF0000;
    	border-width: 3px;
    }
    
    .footer {
    	bottom:0;
    	width:100%;
    	height:100px;   /* Height of the footer */
    	background:#6cf;
    	clear: both;
    	/*bottom: -600px;*/
    	left: 0px;
    	right: 0;
    	background-image:url(backft2.png);
    	z-index:3;
    	clear:both;
    
    
    }
    .ftmenu ul {
    
    	list-style-type: none;
    	/*background-image: url(menuback2.png);*/
    	height: 40px;
    	width: 400px;
    
    	margin-bottom: 0px;
    	Margin-left: 240px;
    Margin-right: auto;
    
    
    	
    }
    .ftmenu ul li {
    	float:left;
    
    
    
    
    }
    .ftmenu ul li a {
    
    	padding-right: 10px;
    	padding-left: 10px;
    	display: block;
    	line-height: 40px;
    	text-decoration: none;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:14px;
    	color:#858583;
    
    
    }
    .ftmenu ul li a:hover {
    	color: #FFF;
    }
    .menumedia {
    
    	float:right;
    	height:50px;
    	width:200px;
    	padding-bottom:50px;
    }
    
    .address{
    	margin:0px auto; 
    	height:30px;
    	width:600px;
    	font-family:Arial, Helvetica, sans-serif;
    	color:#FFFFFF;
    	vertical-align: top;
    	margin-top:10px;
    	}
    	#preloaded-images {
       position: absolute;
       overflow: hidden;
       left: -9999px; 
       top: -9999px;
       height: 1px;
       width: 1px;
    }
    the link is http://zeeratandoori.freehostia.com/aboutus.html
    Last edited by LameNewbie; 01-11-2010 at 05:03 AM. Reason: link

  • #7
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just copied the about us page into the location page but the other page seems to have the padding inside the div ?so that the border collapses again ? whats going on there its just a copy of the other page replacing the image.

  • #8
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    any ideas ?

  • #9
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    managed to resolve my issues but can anyone answer the following

    1) how can i get the div to center via html rather than css

    2) why is it when i make a css box for text the text always goes outside the box or starts further doen the box half in and half out ? (is it better to do this in html ?)

    3) Is it better to use "pageimage" as a css background or a html image ?


  •  

    Posting Permissions

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