1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Container issue

Discussion in 'HTML & Website Design' started by SeventhSin, Jan 14, 2009.

0
Page 1 of 2
  1. #1
    Hey guys just a question of which im guessing many have dealt with/
    I have an issue with in my html/css
    of which in internet explorer it displays a coloured box and stretches the container to that box (in height as the width is not an issue).
    But in firefox on the other hand it doesnt show the box or even start the container.
    ???
     
    SeventhSin, Jan 14, 2009 IP
  2. crath

    crath Well-Known Member

    Messages:
    661
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    100
    #2
    if you can either post the code or a link to the code that would be helpful. thanks
     
    crath, Jan 14, 2009 IP
    Pixel T. likes this.
  3. SeventhSin

    SeventhSin Peon

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    html and the relevant bits from the css


    <div id="container">
    <div class="c1" id="top_left_cont">
    <br />
    <span class="c8">REGENCY</span><br />
    <br />
    <span class="c8">- COINS UK LTD -</span></div>
    <div id="header"><img src="header.gif" width="596" height="150" class="c2" alt="** PLEASE DESCRIBE THIS IMAGE **" /></div>
    <div id="search_cont">

    <FORM METHOD=post ACTION="/cgi-bin/example.cgi">
    <font color="#FFFFFF" size="-2" face="Arial, Helvetica, sans-serif" style="margin-left:11">Site Search</font>
    <center>
    <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="2"><TR><TD BGCOLOR="#c3ba86"><INPUT type="text" size="19" MAXLENGTH="30"></TD><TD BGCOLOR="#c3ba86" VALIGN="Middle"><INPUT type="image" name="submit" src="go.gif"></TD></TR></TABLE></center>
    </FORM></div>

    <div id="navigation">

    <img src="space.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" /><a href="home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','home1.gif',1)"><img src="home.gif" alt="Home" name="Home" width="98" height="53" border="0" id="Home" /></a><img src="space.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" /><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About','','about1.gif',1)"><img src="about.gif" alt="About Us" name="About" width="98" height="53" border="0" id="About" /></a><img src="space.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" /><a href="contacts.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contacts','','contacts1.gif',1)"><img src="contacts.gif" alt="Contact Us" name="Contacts" width="98" height="53" border="0" id="Contacts" /></a><img src="space.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" /><a href="services.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Services','','services1.gif',1)"><img src="services.gif" alt="Services" name="Services" width="98" height="53" border="0" id="Services" /></a><img src="space.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" /><a href="archive.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Archive','','archive1.gif',1)"><img src="archive.gif" alt="Archive" name="Archive" width="98" height="53" border="0" id="Archive" /></a><img src="space.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" /><a href="links.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Links','','links1.gif',1)"><img src="links.gif" alt="Links" name="Links" width="96" height="53" border="0" id="Links" /></a><img src="space1.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" /></div>
    <div id="main_box"></div>
    </div>
    </body>
    </html>


    /* CSS Document */
    body {
    width: 900px;
    margin: auto;
    font-family: .8em Georgia, "Arial Unicode MS", Arial, sans-serif, serif;
    background-color:#333333;
    text-decoration: none;
    }
    #container {
    width: 800px;
    height: ;
    margin: auto;
    background-color: #FFFFFF;
    }
    #header {
    width: 598px;
    height: 150px;
    padding: 0px;
    margin-left: 202px;
    }
    #navigation {
    width: 599px;
    height: 53px;
    border: 0px;
    padding: 0px;
    margin: auto;
    float: right;
    }
    #main_box {
    width: 599px;
    height: ;
    float: right;
    background-color: #33CCCC;
    }
    #top_left_cont {
    width : 200px;
    height : 150px;
    margin-left : 1px;
    background-color : #515151;
    float : left;
    }
    #search_cont {
    width : 200px;
    height : 53px;
    background-color : #c3ba86;
    float : left;
    margin-left : 1px;
    }


    oh just so were clear the container not stretching is the issue i want the box to be there
     
    SeventhSin, Jan 14, 2009 IP
  4. crath

    crath Well-Known Member

    Messages:
    661
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    100
    #4
    This is a prime example of why to practice pretty code :p I tabbed it all out to find that you you didn't close your last div tag.

    <html>
<head>
	<style type="text/css">
		body {
			width: 900px;
			margin: auto;
			font-family: .8em Georgia, "Arial Unicode MS", Arial, sans-serif, serif;
			background-color:#333333;
			text-decoration: none;
		}
		#container {
			width: 800px;
			height: ;
			margin: auto;
			background-color: #FFFFFF;
		}
		#header {
			width: 598px;
			height: 150px;
			padding: 0px;
			margin-left: 202px;
		}
		#navigation {
			width: 599px;
			height: 53px;
			border: 0px;
			padding: 0px;
			margin: auto;
			float: right;
		}
		#main_box {
			width: 599px;
			height: ;
			float: right;
			background-color: #33CCCC;
		}
		#top_left_cont {
			width : 200px;
			height : 150px;
			margin-left : 1px;
			background-color : #515151;
			float : left;
		}
		#search_cont {
			width : 200px;
			height : 53px;
			background-color : #c3ba86;
			float : left;
			margin-left : 1px;
		}
	</style>
</head>
<body>
	<div id="container">
		<div class="c1" id="top_left_cont">
			<br />
			<span class="c8">REGENCY</span><br /><br />
			<span class="c8">- COINS UK LTD -</span></div>
			<div id="header">
				<img src="header.gif" width="596" height="150" class="c2" alt="** PLEASE DESCRIBE THIS IMAGE **" />
			</div>
			<div id="search_cont">
				<form method="post" action"/cgi-bin/example.cgi">
					<font size="-2" face="Arial, Helvetica, sans-serif" style="margin-left:11;color:#fff;">Site Search</font>
					<center>
						<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="2">
							<TR>
								<TD BGCOLOR="#c3ba86"><INPUT type="text" size="19" MAXLENGTH="30"></TD>
								<TD BGCOLOR="#c3ba86" VALIGN="Middle"><INPUT type="image" name="submit" src="go.gif"></TD>
							</TR>
						</TABLE>
					</center>
				</form>
			</div>
			<div id="navigation">
				<img src="space.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" />
				<a href="home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','home1.gif',1)"><img src="home.gif" alt="Home" name="Home" width="98" height="53" border="0" id="Home" /></a>
				<img src="space.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" />
				<a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About','','about1.gif',1)"><img src="about.gif" alt="About Us" name="About" width="98" height="53" border="0" id="About" /></a>
				<img src="space.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" />
				<a href="contacts.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contacts','','contacts1.gif',1)"><img src="contacts.gif" alt="Contact Us" name="Contacts" width="98" height="53" border="0" id="Contacts" /></a>
				<img src="space.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" />
				<a href="services.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Services','','services1.gif',1)"><img src="services.gif" alt="Services" name="Services" width="98" height="53" border="0" id="Services" /></a>
				<img src="space.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" />
				<a href="archive.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Archive','','archive1.gif',1)"><img src="archive.gif" alt="Archive" name="Archive" width="98" height="53" border="0" id="Archive" /></a>
				<img src="space.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" />
				<a href="links.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Links','','links1.gif',1)"><img src="links.gif" alt="Links" name="Links" width="96" height="53" border="0" id="Links" /></a>
				<img src="space1.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" />
			</div>
			<div id="main_box"></div>
		</div>
	</div>
</body>
</html>
    Code (markup):
     
    crath, Jan 14, 2009 IP
    steelfrog likes this.
  5. SeventhSin

    SeventhSin Peon

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Ahhh dang i counted them to >.<
    I will do pretty code from now on.
    Problem is... this container issue is still here it just is not showing in Fire Fox...
     
    SeventhSin, Jan 15, 2009 IP
  6. crath

    crath Well-Known Member

    Messages:
    661
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    100
    #6
    I don't know what the problem is because I tested it in firefox and it seemed fine.

    Maybe take a screenshot of both browsers and use paint to point out the issue?
     
    crath, Jan 15, 2009 IP
  7. SeventhSin

    SeventhSin Peon

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    hey Crath , firstly i want to thank for your input so far.

    The code you did was using an internal css, so i didnt use it. plus i closed the last </div> this morning with no change.

    although i have found something thats odd, let me test now and i will be back you. wont be a mo :)
     
    SeventhSin, Jan 15, 2009 IP
  8. SeventhSin

    SeventhSin Peon

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    ok so my hunch is correct but why it is caused i do not know, i found this earlier by mistake but as my daughter was kind enough to crack her head open i have been up the hospital all night :(

    So this is what i have spotted please shed some light on the situation.

    When i remove the float:left ; margin-left:1px; from the div "information_cont" i get my container back and in full stretch.
    But not confirmed as i need to re write it, but im certain it didnt allow me to close the information_cont div in the html.

    If your still intrested i will tidy the code now, re write it and if you want make a small file of which you could download and look? maybe on msn? or i can host it what ever suits your fancy.
     
    SeventhSin, Jan 15, 2009 IP
  9. crath

    crath Well-Known Member

    Messages:
    661
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    100
    #9
    if you want to just post the file here in the thread in a [ code ] brackets that would be fine. After you tidy it up and lay everything out how you want it.

    PS: hope your daughter is ok
     
    crath, Jan 15, 2009 IP
  10. SeventhSin

    SeventhSin Peon

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    well i thought you may want the images too?

    And yes she is fine thanks, luckly the glue heads back together now days :) about a 4inch split on her forehead though.
     
    SeventhSin, Jan 15, 2009 IP
  11. SeventhSin

    SeventhSin Peon

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11 
    <!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/html; charset=iso-8859-1" />
<title>Welcome to the homepage of Regency Coins UK Ltd</title>
<link href=" body.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//<![CDATA[
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
	</style>
		</head>
			<body onload="MM_preloadImages('home1.gif','about1.gif','contacts1.gif','services1.gif','archive1.gif','links1.gif')">

					<div id="container">
					<div class="c1" id="top_left_cont">
						<br />
        					<span class="c8">REGENCY</span><br />
            					<br />
        					<span class="c8">- COINS UK LTD -</span>
                    	</div>

					
                    <div id="header">
                    		<img src="header.gif" width="596" height="150" class="c2" alt="** PLEASE DESCRIBE THIS IMAGE **" />
                    	</div>

					
                    <div id="search_cont">
                    	</div>

					<div id="navigation">
<img src="space.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" /><a href="home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','home1.gif',1)"><img src="home.gif" alt="Home" name="Home" width="98" height="53" border="0" id="Home" /></a><img src="space.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" /><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About','','about1.gif',1)"><img src="about.gif" alt="About Us" name="About" width="98" height="53" border="0" id="About" /></a><img src="space.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" /><a href="contacts.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contacts','','contacts1.gif',1)"><img src="contacts.gif" alt="Contact Us" name="Contacts" width="98" height="53" border="0" id="Contacts" /></a><img src="space.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" /><a href="services.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Services','','services1.gif',1)"><img src="services.gif" alt="Services" name="Services" width="98" height="53" border="0" id="Services" /></a><img src="space.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" /><a href="archive.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Archive','','archive1.gif',1)"><img src="archive.gif" alt="Archive" name="Archive" width="98" height="53" border="0" id="Archive" /></a><img src="space.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" /><a href="links.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Links','','links1.gif',1)"><img src="links.gif" alt="Links" name="Links" width="96" height="53" border="0" id="Links" /></a><img src="space1.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" />
					</div>

				<div id="information_cont">
                <div class="c1">
					<br />
						<span class="c8">INFORMATION</span>
							<hr width="180px" size="4" color="#b7ad71" />
                            	
                    </div>
									<span class="info_header">Merry Christmas.</span>
										<br />
										<span class="info_text">25.12.2008<br />
Santa will come and he is hungry,<br />
so leave him a mince pie.
											<p>
										</p>
               					</span>

									<span class="info_header">Merry Christmas.</span>
										<br />
										<span class="info_text">25.12.2008<br />
Santa will come and he is hungry,<br />
so leave him a mince pie.
											<p>
										</p>
                                </span>

									<span class="info_header">Merry Christmas.</span>
										<br />
										<span class="info_text">25.12.2008<br />
Santa will come and he is hungry,<br />
so leave him a mince pie.
											<p>
										</p>
                                </span>


				<div class="c1">
                	<br />
					<br />
					<br />
						<span class="c9">All Major Cards Accepted</span> 
							<img src="cards.gif" class="c7" alt="** PLEASE DESCRIBE THIS IMAGE **" />
               			</div>
								<br />


				<div class="c1">
					<span class="c8">ADDRESSES</span>
						<hr width="180px" size="4" color="#b7ad71" />
                 			</div>

					<span class="addresses">Regency Coins UK Ltd,<br />
					Unit 1, First Floor,<br />
						The Capricorn Center,<br />
							Cranes Farm Rd,<br />
								Basildon, Essex,<br />
									SS14 3JA.<br />
										0871 423 8871.</span>
                   	 </div>

                <div id="image_text_box">
				<div id="main_image">
                	</div>

				<div id="text_box">
					<h1 style="margin-top:10px">The Latest Design From The Mint.</h1>
						<span class="maintext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec dolor. Suspendisse nec tellus.<br />
Nullam porttitor, lacus in porttitor euismod,neque velit tempor odio, dictum facilisis nulla pede id leo.Nullam porttitor, lacus in porttitor euismod, neque velit tempor odio, dictum facilisis nulla pede id leo.Suspendisse pretium. lacus in porttitor euismod, neque velit tempor odio, dictum facilisis nulla pede id leo.Suspendisse pretium.</span>
					</div>
                    	</div>

				<div id="top_cont">
					<h1>The Latest Design From The Mint.</h1>
						<span class="maintext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec dolor. Suspendisse nec tellus.<br />
Nullam porttitor, lacus in porttitor euismod,neque velit tempor odio, dictum facilisis nulla pede id leo.Nullam porttitor, lacus in porttitor euismod, neque velit tempor odio, dictum facilisis nulla pede id leo.Suspendisse pretium.</span>

							<br />
								<span class="maintext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec dolor. Suspendisse nec tellus.<br />
Nullam porttitor, lacus in porttitor euismod,neque velit tempor odio.</span>
					</div>


				<div id="middle_cont">
				<div id="infoBox1">
                <div id="pic_box">
                	<img src="pic2.gif" height="50" width="50" />
                    	</div>	
                <div id="pic_box_text">
					<span class="main_news_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec dolor. Suspendisse nec tellus.
Nullam porttitor, lacus porttitor</span>
									</div>
                                    	</div>
				
                <div id="infoBox2">
				<div id="pic_box_text">
					<span class="main_news_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec dolor. Suspendisse nec tellus.
Nullam porttitor, lacus porttitor</span>
									</div>
                                    	</div>


				<div id="infoBox3">
				<div id="pic_box_text">
					<span class="main_news_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec dolor. Suspendisse nec tellus.
Nullam porttitor, lacus porttitor</span>
									</div>
                                    	</div>


				<div id="infoBox4">
				<div id="pic_box_text">
					<span class="main_news_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec dolor. Suspendisse nec tellus.
Nullam porttitor, lacus porttitor</span>
									</div>
                                    	</div>

					
                    <span class="news_text">Nullam porttitor, lacus in porttitor euismod, neque velit tempor. Pullam porttitor, lacus in porttitor euismod,</span>
				</div>


				<div id="bottom_cont">
				<div id="newsBox1">
					<h3 style="margin-top:10px">Intrests.</h3>
						<span class="news_text">Lorem ipsum dolor sit amet, consectetur adipiscing elite.<br />
Nullam porttitor, lacus in porttitor euismod, neque velit tempor odio</span>
					</div>

				<div id="newsBox2">
					<h3 style="margin-top:10px">Latest Information.</h3>
						<span class="news_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Suspendisse nec dolor. Suspendise.</span>
                    </div>

				<div id="newsBox3">
					<h3 style="margin-top:10px">Sign up for our Newsletter.</h3>
						<span class="news_text">Lorem ipsum dolor sit amet, consectetur suspendise.</span>
					</div>
						</div>
							</div>


				<div class="c1"><span class="txtSiteDocs">Designed and Coded by<br />
S7N</span>
</body>
</html>
    Code (markup):
    

/* CSS Document */
 body {
 width: 900px;
 margin: auto; 
 font-family: .8em Georgia, "Arial Unicode MS", Arial, sans-serif, serif;
 background-color:#333333; 
 text-decoration: none;
 } 
 #container {
 width: 800px;
 height: ;
 margin: auto; 
 background-color: #FFFFFF;
 }
 #header {
 width: 598px;
 height: 150px;
 padding: 0px; 
 margin-left: 202px;
 }
 #navigation {
 width: 599px;
 height: 53px;
 border: 0px; 
 padding: 0px; 
 margin: auto;
 float: right;
 } 
 #main_box {
 width: 599px;
 height: ;
 float: right; 
 background-color: #33CCCC;
 }
 #top_left_cont { 
 width : 200px; 
 height : 150px; 
 margin-left : 1px;
 background-color : #515151; 
 float : left;
 } 
 #information_cont{
 width: 200px;
 height: 597px;
 float: left;
 margin-left: 1px; 
 background-color: #515151;
 }
 #search_cont { 
 width : 200px; 
 height : 53px;  
 background-color : #c3ba86; 
 float : left; 
 margin-left : 1px;
 }
 #top_cont { 
 width : 597px; 
 height : 110px; 
 border : 0; 
 padding : 0; 
 margin-left : 0px; 
 margin-top: 0px;
 float : left;
 }
 #image_text_box { 
 width : 597px; 
 height : 150px; 
 float : left; 
 border : 0; 
 padding : 0; 
 margin-right :0px; 
 margin-top : 0px;
 }
 #main_image { 
 width : 200px; 
 height : 130px; 
 float: left;
 border : 0; 
 padding : 0; 
 margin-left : 10px; 
 margin-top : 10px; 
 background : url(pic1.gif); 
 }
 #text_box { 
 width : 367px; 
 height : 130px; 
 float : right; 
 border : 0; 
 padding : 0; 
 margin-right :20px; 
 margin-top : 0px;  
 }
 #middle_cont { 
 width : 597px; 
 height : 217px; 
 border : 0; 
 padding : 0; 
 margin-left : 1px; 
 float : left;
 }
 #archive_cont { 
 width : 798px; 
 height : 550px; 
 border : 0; 
 padding : 0; 
 margin : auto; ; 
 background-color : #515151; 
 } 
 #infoBox1 { 
 width : 287px; 
 height : 80px; 
 float : left; 
 border : 0; 
 padding : 0; 
 margin-left : 10px; 
 margin-top : 10px;
 } 
 #infoBox2 { 
 width : 287px; 
 height : 80px; 
 float : left; 
 border : 0; 
 padding : 0; 
 margin-left : 2px; 
 margin-top : 10px; 
 } 
 #infoBox3 { 
 width : 287px; 
 height : 80px; 
 float : left; 
 border : 0; 
 padding : 0; 
 margin-left : 10px; 
 margin-top : 2px; 
 } 
 #infoBox4 { 
 width : 287px; 
 height : 80px; 
 float : left; 
 border : 0; 
 padding : 0; 
 margin-left : 2px; 
 margin-top : 2px;  
 }
 #pic_box { 
 width : 50px; 
 height : 80px; 
 float : left; 
 border : 0; 
 padding : 0; 
 margin-left : 0; 
 margin-top : 0; 
 margin-right :0px; 
 }
 #pic_box_text { 
 width : 237px; 
 height : 80px; 
 float : right; 
 border : 0; 
 padding : 0; 
 margin-left : 0; 
 margin-top : 0; 
 margin-right : 0px;
 }
 #bottom_cont { 
 width : 597px; 
 height : 120px; 
 border : 0; 
 padding : 0; 
 margin-left : 0; 
 float : left;
 } 
 #newsBox1 { 
 width : 195px; 
 height : 120px; 
 float : left; 
 border : 0; 
 padding : 0; 
 margin-left : 2px; 
 margin-top : 0px; 
 background-color : #f1efef; 
 } 
 #newsBox2 { 
 width : 198px; 
 height : 120px; 
 float : left; 
 border : 0; 
 padding : 0; 
 margin-left : 1px; 
 margin-top : 0px; 
 background-color : #f1efef; 
 } 
 #newsBox3 { 
 width : 199px; 
 height : 120px; 
 float : right; 
 border : 0; 
 padding : 0; 
 margin-right : 1px; 
 margin-top : 0px; 
 background-color : #f1efef;
 }
 .maintext { 
 border : 0; 
 padding : 0; 
 font-family : Arial, Helvetica, sans-serif; 
 font-style : normal; 
 font-size : 11px;
 margin-left: 10px;
 float: left; 
 color : #6d6c6c; 
 } 
 .news_text { 
 font-family : Arial, Helvetica, sans-serif; 
 font-style : normal; 
 font-size : 9px; 
 color : #6d6c6c; 
 margin-left : 10px; 
 float : left; 
 text-align : left; 
 }
 .main_news_text { 
 font-family : Arial, Helvetica, sans-serif; 
 font-style : normal; 
 font-size : 10px; 
 color : #6d6c6c; 
 margin-left : 0px; 
 float :left;
 margin-left: 10px;
 text-align : left; 
 }
 .news_header {  
 font-family : Arial, Helvetica, sans-serif; 
 font-style : normal; 
 font-size : 11px;
 margin-left: 0px; 
 color : #b7ad71; 
 }
 .info_text {
 font-size : 12px; 
 color : #b7ad71;
 font-family: Arial, Helvetica, sans-serif;  
 float : left; 
 margin-left : 10px;
 }
 .info_header {
 width : 180px; 
 font-size : 14px; 
 color : #FFFFFF; 
 float : left; 
 margin-left : 10px;
 }  
 .addresses { 
 font-family : Arial, Helvetica, sans-serif; 
 font-style : normal; 
 font-size : 10px; 
 color : #ffffff; 
 float : left; 
 margin-left : 10px;
 } 
 .txtSiteDocs { 
 font-family : Arial, Helvetica, sans-serif; 
 font-size : 10px; 
 color : #999999; 
 }
 img.c7 {margin-top:10px}
 span.c6 {color: #FFFFFF; font-size: 51%; margin: auto}
 span.c8 {color: #c3ba86; font-family: "Times New Roman", Times, sans-serif; font-size: 90%}
 span.c9 {color: #FFFFFF; font-family: "Times New Roman", Times, sans-serif; font-size: 85%}
 span.c5 {margin-bottom:16px}
 hr.c4 {margin-top:0px}
 span.c3 {color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 64%; margin-left: 1px}
 img.c2 {margin-left:1px}
 div.c1 {text-align: center; margin:auto;}
 h1 {border : 0; padding : 0; font-family : Arial, Helvetica, sans-serif; font-style : oblique; font-size : 14px; color : #b7ad71; margin-left: 10px;}
 h3 {border : 0; padding : 0; font-family : Arial, Helvetica, sans-serif; font-style : oblique; font-size : 11px; color : #b7ad71; margin-left: 10px;}
    Code (markup):

    No laughing at my tidying up either :p
    Also padding and borders you probaly notice i dont use them is that bad? if so how and were can i learn to use them?
     
    SeventhSin, Jan 15, 2009 IP
  12. crath

    crath Well-Known Member

    Messages:
    661
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    100
    #12
    I will work on this code later on tonight after I take a nap (I think I have the flu) and I will get back to you on ideas on how to improve your code, as well as look at what may be causing your issue.
     
    crath, Jan 15, 2009 IP
  13. SeventhSin

    SeventhSin Peon

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Hey crath,
    listen no problem now dude. i will iupload all finshed html in a bit. looking forward to some picking at tidyness etc.
    Hope flu isnt to bad :)
     
    SeventhSin, Jan 16, 2009 IP
  14. SeventhSin

    SeventhSin Peon

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    ok so here its is, its all working now.

    
<!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/html; charset=iso-8859-1" />
<title>Welcome to the homepage of Regency Coins UK Ltd</title>
<link href=" body.css" rel="stylesheet" type="text/css" />

		
				<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
						<body onload="MM_preloadImages('home1.gif','about1.gif','contacts1.gif','services1.gif','archive1.gif','links1.gif')">

							<div id="container">
                            <div class="c1" id="top_left_cont">
								<br />
                            		<span class="c8">REGENCY
                                		</span>
                                    		<br />
            									<br />
        											<span class="c8">- COINS UK LTD -
                                                		</span>
                            
                            	</div>
                                
                            <div id="header">
                            	<img src="header.gif" width="597" alt="Go Back Home" longdesc="http://index.html" />
                            		
                                </div>
                                     
                                     <div id="navigation">
                                     
                                     <div id="search_cont">
                                     
                            	 <FORM METHOD=post ACTION="/cgi-bin/example.cgi">
									<font color="#FFFFFF" size="-2" face="Arial, Helvetica, sans-serif" style="margin-left:11px">Site Search
                                    	</font>
  											<center>
												<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="2">
                                                	<TR>
                                                    	<TD BGCOLOR="#c3ba86">
                                                        	<INPUT type="text" size="19" MAXLENGTH="30">
                                                            	</TD>
                                                                	<TD BGCOLOR="#c3ba86" VALIGN="Middle">
                                                                    	<INPUT type="image" name="submit" src="go.gif">
                                                                        	</TD>
                                                                            	</TR>
                                                                                	</TABLE>
                                                                                    	</center>
    																						</FORM>
                                            
                              
							  </div>
							
                         
                             <img src="space.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" /><a href="home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','home1.gif',1)"><img src="home.gif" alt="Home" name="Home" width="98" height="53" border="0" id="Home" /></a><img src="space.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" /><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About','','about1.gif',1)"><img src="about.gif" alt="About Us" name="About" width="98" height="53" border="0" id="About" /></a><img src="space.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" /><a href="contacts.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contacts','','contacts1.gif',1)"><img src="contacts.gif" alt="Contact Us" name="Contacts" width="98" height="53" border="0" id="Contacts" /></a><img src="space.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" /><a href="services.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Services','','services1.gif',1)"><img src="services.gif" alt="Services" name="Services" width="98" height="53" border="0" id="Services" /></a><img src="space.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" /><a href="archive.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Archive','','archive1.gif',1)"><img src="archive.gif" alt="Archive" name="Archive" width="98" height="53" border="0" id="Archive" /></a><img src="space.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" /><a href="links.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Links','','links1.gif',1)"><img src="links.gif" alt="Links" name="Links" width="96" height="53" border="0" id="Links" /></a><img src="space1.gif" alt="** PLEASE DESCRIBE THIS IMAGE **" />
                             
							
                            
                           
                       		  </div>
                            
                            <div id="main_area">
                            <div id="information_box">
                            <div class="c1">

				<br />
								<span class="c8">INFORMATION</span>
									<hr width="180px" size="4" color="#b7ad71" />
                                    
                               </div>

								<span class="info_header">Merry Christmas.
                                	</span>
				<br />

								<span class="info_text">25.12.2008<br />
									Santa will come and he is hungry,<br />
										so leave him a mince pie.
											<p>
												</p>
                                                	</span>
								<span class="info_header">Merry Christmas.
                                	</span>
				<br />

								<span class="info_text">25.12.2008<br />
									Santa will come and he is hungry,<br />
										so leave him a mince pie.
											<p>
												</p>
                                                	</span>
								<span class="info_header">Merry Christmas.
                                	</span>
				<br />

								<span class="info_text">25.12.2008<br />
									Santa will come and he is hungry,<br />
										so leave him a mince pie.
											<p>
												</p>
                                                	</span>

						<div class="c1"><br />
							<br />
							<br />
								<span class="c9">All Major Cards Accepted
                                	</span> 
										<img src="cards.gif" class="c7" alt="** PLEASE DESCRIBE THIS IMAGE **" />
                                        	</div>

							<br />

						<div class="c1">
							<span class="c8">ADDRESSES
                            	</span>
									<hr width="180px" size="4" color="#b7ad71" />
                                    	
                                        </div>
											
                                            <span class="addresses">Regency Coins UK Ltd,<br />
												Unit 1, First Floor,<br />
													The Capricorn Center,<br />
														Cranes Farm Rd,<br />
															Basildon, Essex,<br />
																SS14 3JA.<br />
																	0871 423 8871.
																		</span>
								</div>
                            
                            
                            <div id="image_text_box">
							<div id="main_image">
                            
                            	</div>
							<div id="text_box">

									<h1 style="margin-top:10px">The Latest Design From The Mint.</h1>
										<span class="maintext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec dolor. Suspendisse 						 											nec tellus.<br />
												Nullam porttitor, lacus in porttitor euismod,neque velit tempor odio, dictum facilisis nulla pede id 								 													leo.Nullam porttitor, lacus in porttitor euismod, neque velit tempor odio, dictum facilisis nulla pede id 														leo.Suspendisse pretium. lacus in porttitor euismod, neque velit tempor odio, dictum facilisis nulla 						 															pede id leo.Suspendisse pretium.
                                                				</span>
								</div>
                                	</div>

							<div id="top_cont">
								
                                <h1>The Latest Design From The Mint.</h1>
									<span class="maintext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec dolor. Suspendisse nec 		 										tellus.<br />
 											Nullam porttitor, lacus in porttitor euismod,neque velit tempor odio, dictum facilisis nulla pede id leo.Nullam   												porttitor, lacus in porttitor euismod, neque velit tempor odio, dictum facilisis nulla pede id  				 													leo.Suspendisse pretium.
                                            			</span>
											<br />
                                            
									<span class="maintext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec dolor. Suspendisse nec 			 										tellus.<br />
 											Nullam porttitor, lacus in porttitor euismod,neque velit tempor odio.
                                            	</span>
								
                                </div>
                                
                                
                                <div id="middle_cont">

								<div id="infoBox1">
                                <div id="pic_box">
                                		<img src="pic2.gif" height="50" width="50" />
                                        
                               		</div>
                               
                               <div id="pic_box_text">
							   		<span class="main_news_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec dolor. Suspendisse  										nec tellus.
 											Nullam porttitor, lacus porttitor</span>
							
                            	</div>
                                	</div>

								<div id="infoBox2">
								<div id="pic_box">
                                			<img src="pic2.gif" height="50" width="50" />
                                
                                	</div>
                                    
                                <div id="pic_box_text">
									<span class="main_news_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec dolor. Suspendisse  										nec tellus.
 											Nullam porttitor, lacus porttitor
                                            	</span>

								</div>
                                	</div>

								<div id="infoBox3">
								<div id="pic_box">
                                			<img src="pic2.gif" height="50" width="50" />
                                 	
                                    </div>
                                
                                <div id="pic_box_text">
									<span class="main_news_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec dolor. Suspendisse  										nec tellus.
 											Nullam porttitor, lacus porttitor
                                            	</span>

								</div>
                                	</div>

								<div id="infoBox4">
								<div id="pic_box">
                                			<img src="pic2.gif" height="50" width="50" />
                                           
                               </div>
                               
                              	
								<div id="pic_box_text">
									<span class="main_news_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec dolor. Suspendisse  										nec tellus.
											Nullam porttitor, lacus porttitor
                                            	</span>

								</div>
                                	</div>

									<span class="news_text">Nullam porttitor, lacus in porttitor euismod, neque velit tempor. Pullam porttitor, lacus in 			 										porttitor euismod,
                                    		</span>
								</div>
                                
                   				<div id="bottom_cont">
								<div id="newsBox1">
									<h3 style="margin-top:10px">Intrests.</h3>
										<span class="news_text">Lorem ipsum dolor sit amet, consectetur adipiscing elite.<br />
											Nullam porttitor, lacus in porttitor euismod, neque velit tempor odio
                                            	</span>
                                                	
                                                    </div>

								<div id="newsBox2">
									<h3 style="margin-top:10px">Latest Information.</h3>
										<span class="news_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Suspendisse nec dolor. Suspendise.
                                        	</span>
                                            	
                                                </div>

								<div id="newsBox3">
									<h3 style="margin-top:10px">Sign up for our Newsletter.</h3>
										<span class="news_text">Lorem ipsum dolor sit amet, consectetur suspendise.
                                        	</span>
                                            	<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
											<font color="#FFFFFF" size="-2" face="Arial, Helvetica, sans-serif" style="margin-left:11px">Site Search
                                    	</font>
  											<center>
												<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="2">
                                                	<TR>
                                                    	<TD BGCOLOR="#f1efef">
                                                        	<INPUT type="text" size="19" MAXLENGTH="30">
                                                            	</TD>
                                                                	<TD BGCOLOR="#f1efef" VALIGN="Middle">
                                                                    	<INPUT type="image" name="submit" src="go.gif">
                                                                        	</TD>
                                                                            	</TR>
                                                                                	</TABLE>
                                                                                    	</center>
    																						</FORM>
                                            
                                            	</div>
                                                	</div>
                                
                                
                                
                            
                            
                            
                            
                            
                            
                            
                           </div> 
                           			
								</div>
		
                            	<center>
                            		<span class="txtSiteDocs">Designed and Coded by<br>
															  S7N</span>
                                    	</center>
                           

</body>
</html>
    Code (markup):
    you can look at the homepage on http://mattbarber.primaldesigns.co.uk/site/
     
    SeventhSin, Jan 16, 2009 IP
  15. crath

    crath Well-Known Member

    Messages:
    661
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    100
    #15
    There ya go :) your doing good, but here are some pointers anyway

    When you are tabbing out your code, make sure when taht tag is opend, it is tabbed in the same amount of times when its closed. i guess i dont know how to explain it, so i made a picture

    http://i40.tinypic.com/2ewibo5.jpg

    see before and after

    that way, its easier to read and follow things
     
    crath, Jan 16, 2009 IP
  16. SeventhSin

    SeventhSin Peon

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Yes i see, lol u probaly couldnt of explained that :)

    im sure we will have some problems soon :) well infact i have one but i need to get alittle further in the devolpment of this site :)

    Many Thanks Buddy!
     
    SeventhSin, Jan 16, 2009 IP
  17. crath

    crath Well-Known Member

    Messages:
    661
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    100
    #17
    I just realized, the second line of my revised code, (the <font tag) should be tabbed => one more. Ooops :)
     
    crath, Jan 16, 2009 IP
  18. steelfrog

    steelfrog Peon

    Messages:
    537
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #18
    Wow crath, way to make us all look bad with our short answers, hah hah. I'll shoot you some rep. We rarely see quality answers like these.
     
    steelfrog, Jan 16, 2009 IP
  19. crath

    crath Well-Known Member

    Messages:
    661
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    100
    #19
    Haha, thanks. For some reason I enjoy helping people :p
     
    crath, Jan 16, 2009 IP
  20. SeventhSin

    SeventhSin Peon

    Messages:
    61
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #20
    Yippe back so soon :)
    Nice easy one here, reason i ask as i dont know so much about js but how comes i get a border in internet explorer?
    And how do i lose it? i know it will simple...

    I could always float another box in and add colour, but this is not the correct way.

    Please advise. Oh i added to rep i belive :)

    ttp://mattbarber.primaldesigns.co.uk/site/contacts.html
     
    SeventhSin, Jan 16, 2009 IP
Page 1 of 2