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 4 of 4

Thread: Coding Problem

  1. #1
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Coding Problem

    Well, I'm a n00b when it comes to coding, and I started tweaking this template I found and got it to be almost perfect but there's a problem.


    Opera


    Internet Explorer

    That box of solid color is really starting to piss me off, and I don't really know what i'm doing. I'm using Dreamweaver CS3 to code, but i'm a n00b.


    This is the code that i'm using.
    Code:
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Hidden Memory</title>
    <style>
    h1, h2, h3 {
    	font-weight: normal;
    	color: #FFFFFF;
    }
    
    h1 { font-size: 197%; }
    h2 { font-size: 167%; }
    h3 { font-size: 100%; font-weight: bold; }
    
    p, ul, ol {
    	font-size: 100%;
    }
    
    p {
    }
    
    ul {
    }
    
    ol {
    }
    
    blockquote {
    }
    
    a {
    	color: #000000;
    }
    
    a:hover {
    	text-decoration: none;
    }
    </style>
    <style>
    
    body {
    	margin: 0;
    	padding: 0;
    	background: #000000 url() no-repeat center top;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	color: #000000;
    }
    </style>
    
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="theisland/default.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    .style1 {
    	color: #FFFFFF;
    	font-weight: bold;
    }
    -->
    </style>
    </head>
    
    
    
    
    <body>
    <div id="wrapper">
    	<div id="header">
    	  <style>
        #header {
    	width: 680px;
    	height: 110px;
    	margin: 0 auto;
    }
    
    #header h1, #header p {
    	margin: 0;
    	font-weight: bold;
    }
    
    #header h1 {
    	padding: 30px 0 0 20px;
    	text-transform: lowercase;
    	font-size: 229%;
    }
    
    #header p {
    	margin: -5px 0 0 0;
    	padding: 0 0 0 20px;
    	text-transform: uppercase;
    	font-size: 85%;
    }
    
    #header a {
    	text-decoration: none;
    	color: #FFFFFF;
    }
          </style>
    	  <h1>&nbsp;</h1>
      </div>
    <!-- end header -->
    	<div id="menu">
        <style>
        #menu {
    	width: 680px;
    	height: 51px;
    	margin: 0 auto;
    	background: url(http://aycu14.webshots.com/image/31693/2002072873327035935_rs.jpg) no-repeat;
    }
    </style>
    
    		<h2>Main Menu</h2>
            <style>
            #menu h2 {
    	display: none;
    }
    </style>
    	  <ul>
            <style>
            #menu ul {
    	margin: 0;
    	padding: 20px 0 0 20px;
    	list-style: none;
    }
    </style>
    
    		<li class="active">
                <style>#menu li {
    	display: inline;
    }</style>
    <a href="#"><style>#menu a {
    	display: block;
    	float: left;
    	height: 22px;
    	padding: 8px 20px 0 20px;
    	border-right: 1px solid #2A2C2F;
    	text-transform: lowercase;
    	text-decoration: none;
    	text-align: center;
    	font-size: 11px;
    	color: #DFE8F2;
    }</style>
    
    <li class="active"><a href="#">Home</a></li>
                <li><a href="#">TEXT</a></li>
                <li><a href=#">TEXT</a></li>
    			<li><a href="#">Pictures</a></li>
    			<li><a href="#">Games</a></li>
    			<li><a href="#">Forums</a></li>
    			<li><a href="#">Contact</a></li>	
                <style>
                #menu a:hover, #menu .active a {
    	background-color: #000000;
    }		
    </style>
    	  </ul>
    	</div>
    	<!-- end menu -->
        
        
        
        <style>
        #page {
    	width: 680px;
    	margin: 0 auto;
    	background: #0F1720 url(http://aycu37.webshots.com/image/30996/2000030649166574605_rs.jpg) repeat-y;
    }
    </style>
      <div id="page">
     <style>
     #content {
    	float: left;
    	width: 375px;
    	padding: 20px 25px 0 40px;
    	background: url() no-repeat;
    }
    </style>
        <div id="content">
      
    
    	  <h1 class="title"><span>Welcome to Hidden Memory</span></h1>
    			<p><strong>Hidden Memory</strong> </p>
    			<p>An ordered list example:</p>
    			<ol>
    				<li>TEXT</li>
    				<li>TEXT</li>
    				<li>TEXT</li>
    			</ol>
                
                <style>
    .boxed {
    	background: #121B23;
    	border: 1px dotted #000000;
    }
                </style>
                <div class="boxed">
                <style>.boxed .title {
    	margin: 0;
    	padding: 5px 20px;
    	background: #000000;
    	text-transform: uppercase;
    	font-size: 100%;
    	font-weight: bold;
    }</style>
    			  <h2 class="title">TEXT</h2>
                  <style>.boxed .content {
    	padding: 20px;
    }</style>
    				<div class="content">
                    
    
                    
    				  <p>TEXTTEXTTEXTTEXT</p>
    					<h3>TEXTTEXTTEXTTEXT</h3>
    					<p>TEXTTEXTTEXTTEXTTEXT</p>
    					<blockquote>
    						<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>
    					</blockquote>
    				</div>
    			</div>
    	</div>
    		<!-- end content -->
           
    		<div id="sidebar">
        <style>
            #sidebar {
    	float: left;
    	width: 220px;
    	padding: 20px 20px 0 0;
    	background: url(http://aycu02.webshots.com/image/29441/2000002352535411884_rs.jpg) repeat-y;
    }
    </style>
    
    			<ul></form>
    			  </li>
                    
                    
                    
    				<li id="submenu">
    				  <h2>Other Links</h2>
    					<ul>
    						<li><a href="#">LINK HERE</a></li>
    						<li><a href="#">LINK HERE</a></li>
    						<li><a href="#">LINK HERE</a></li>
    						<li><a href="#">LINK HERE</a></li>
    						<li><a href="#">LINK HERE</a></li>
    						<li><a href="#">LINK HERE</a></li>
    						<li><a href="#">LINK HERE</a></li>
    					</ul>
    				</li>
    				<li id="news">
    					<h2>News and Updates</h2>
    					<ul>
    						<li>
    							<h3>DATE</h3>
    							<p><a href="#">LINK HERE</a></p>
    						</li>
    						<li>
    							<h3>DATE</h3>
    							<p><a href="#">LINK HERE</a></p>
    						</li>
    						<li>
    							<h3>DATE</h3>
    							<p><a href="#">LINK HERE</a></p>
    						</li>
    						<li><span class="style1">DATE</span>
    						  <p><a href="#">LINK HERE</a></p>
    						</li>
    					</ul>
    				</li>
    			</ul>
    	</div>
    		<!-- end sidebar -->
    		<div style="clear: both;">&nbsp;</div>
      </div>
    	<!-- end page -->
    	<div id="footer">
    <style>
    	#footer {
    	width: 680px;
    	height: 100px;
    	margin: 0 auto;
    	padding: 40px 0 0 0;
    	background: url(http://aycu02.webshots.com/image/29481/2000077142628290558_rs.jpg) no-repeat;
    }
    #footer p {
    	margin: 0;
    	padding: 0 0 0 40px;
    	font-size: 77%;
    	color: #0F1720;
    }
    
    #footer a {
    	color: #0F1720;
    }
    </style>
    		<p id="legal">Copyright &copy; 2007 The Island. All Rights Reserved. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
    		<p id="links"><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p>
    	</div>
    	<!-- end footer -->
    </div>
    </ul>
    </body>
    </html>
    This is the CSS code [I merged it with some HTML on the final-ish version]
    Code:
    * {
    	margin-top: 0;
    }
    
    h1, h2, h3 {
    	font-weight: normal;
    	color: #FFFFFF;
    }
    
    h1 { font-size: 197%; }
    h2 { font-size: 167%; }
    h3 { font-size: 100%; font-weight: bold; }
    
    p, ul, ol {
    	font-size: 100%;
    }
    
    p {
    }
    
    ul {
    }
    
    ol {
    }
    
    blockquote {
    }
    
    a {
    	color: #7EBCFF;
    }
    
    a:hover {
    	text-decoration: none;
    }
    
    /* Header */
    
    #header {
    	width: 680px;
    	height: 110px;
    	margin: 0 auto;
    }
    
    #header h1, #header p {
    	margin: 0;
    	font-weight: bold;
    }
    
    #header h1 {
    	padding: 30px 0 0 20px;
    	text-transform: lowercase;
    	font-size: 229%;
    }
    
    #header p {
    	margin: -5px 0 0 0;
    	padding: 0 0 0 20px;
    	text-transform: uppercase;
    	font-size: 85%;
    }
    
    #header a {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    
    /* Menu */
    
    #menu {
    	width: 680px;
    	height: 51px;
    	margin: 0 auto;
    	background: url(images/img02.jpg) no-repeat;
    }
    
    #menu h2 {
    	display: none;
    }
    
    #menu ul {
    	margin: 0;
    	padding: 20px 0 0 20px;
    	list-style: none;
    }
    
    #menu li {
    	display: inline;
    }
    
    #menu a {
    	display: block;
    	float: left;
    	height: 22px;
    	padding: 8px 20px 0 20px;
    	border-right: 1px solid #2A2C2F;
    	text-transform: lowercase;
    	text-decoration: none;
    	text-align: center;
    	font-size: 11px;
    	color: #DFE8F2;
    }
    
    #menu a:hover, #menu .active a {
    	background-color: #000000;
    }
    
    /* Page */
    
    #page {
    	width: 680px;
    	margin: 0 auto;
    	background: #0F1720 url(images/img03.gif) repeat-y;
    }
    
    /* Content */
    
    #content {
    	float: left;
    	width: 375px;
    	padding: 20px 25px 0 40px;
    	background: url(images/img04.jpg) no-repeat;
    }
    
    .boxed {
    	background: #121B23;
    	border: 1px dotted #000000;
    }
    
    .boxed .title {
    	margin: 0;
    	padding: 5px 20px;
    	background: #000000;
    	text-transform: uppercase;
    	font-size: 100%;
    	font-weight: bold;
    }
    
    .boxed .content {
    	padding: 20px;
    }
    
    /* Sidebar */
    
    #sidebar {
    	float: right;
    	width: 220px;
    	padding: 20px 20px 0 0;
    	background: url(images/img05.jpg) no-repeat;
    }
    
    #sidebar ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    
    #sidebar li {
    }
    
    #sidebar li ul {
    	padding: 20px;
    }
    
    #sidebar li li {
    	margin: 0;
    	padding: 5px 0;
    	background: url(images/img06.gif) repeat-x left bottom;
    }
    
    #sidebar h2 {
    	margin: 0;
    	padding: 10px;
    	background: #000000;
    	border-top: 1px solid #23282E;
    	border-bottom: 1px solid #23282E;
    	text-transform: lowercase;
    	font-size: 100%;
    	font-weight: bold;
    	color: #DFE8F2;
    }
    
    #sidebar h3 {
    	margin: 0;
    }
    
    #sidebar p {
    	margin: 0;
    }
    
    #sidebar a {
    	text-decoration: none;
    }
    
    #sidebar a:hover {
    	text-decoration: underline;
    }
    
    /* Search */
    
    #search {
    }
    
    #search fieldset {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    
    #search legend {
    	display: none;
    }
    
    #search input {
    	float: right;
    	margin-bottom: 5px;
    	background: #5A83AE;
    	border: 1px solid #000000;
    	text-transform: lowercase;
    	font: bold 100% Arial, Helvetica, sans-serif;
    	color: #000000;
    }
    
    #searchform {
    	margin: 0;
    	padding: 10px 20px 20px 20px;
    }
    
    #searchfield {
    	width: 165px;
    	padding: 2px 5px;
    }
    
    #searchsubmit {
    }
    
    /* Submenu */
    
    #submenu a {
    	padding-left: 15px;
    	background: url(images/img07.gif) no-repeat left center;
    }
    
    /* Footer */
    
    #footer {
    	width: 680px;
    	height: 100px;
    	margin: 0 auto;
    	padding: 30px 0 0 0;
    	background: url(images/img08.jpg) no-repeat;
    }
    
    #footer p {
    	margin: 0;
    	padding: 0 0 0 40px;
    	font-size: 77%;
    	color: #0F1720;
    }
    
    #footer a {
    	color: #0F1720;
    }
    This it the HTML code

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>The Island by Free Css Templates</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="default.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="wrapper">
    	<div id="header">
    		<h1><a href="#">The Island</a></h1>
    		<p><a href="http://www.freecsstemplates.org/">By Free CSS Templates</a></p>
    	</div>
    	<!-- end header -->
    	<div id="menu">
    		<h2>Main Menu</h2>
    		<ul>
    			<li class="active"><a href="#">Home</a></li>
    			<li><a href="#">Products</a></li>
    			<li><a href="#">Services</a></li>
    			<li><a href="#">Forums</a></li>
    			<li><a href="#">Support</a></li>
    			<li><a href="#">About</a></li>
    			<li><a href="#">Contact</a></li>
    		</ul>
    	</div>
    	<!-- end menu -->
    	<div id="page">
    		<div id="content">
    			<h1 class="title"><span></span></h1>
    			<p><strong></strong><em></em></p>
    			<p></p>
    			<ol>
    				<li></li>
    				<li></li>
    				<li></li>
    			</ol>
    			<div class="boxed">
    				<h2 class="title"></h2>
    				<div class="content">
    					<p></p>
    					<h3></h3>
    					<p></p>
    					<blockquote>
    						<p></p>
    					</blockquote>
    				</div>
    			</div>
    		</div>
    		<!-- end content -->
    		<div id="sidebar">
    			<ul>
    				<li id="search">
    					<form id="searchform" method="get" action="">
    						<fieldset>
    						<legend>Search</legend>
    						<input id="searchfield" type="text" name="q" value="" />
    						<input id="searchsubmit" type="submit" value="Search" />
    						</fieldset>
    					</form>
    				</li>
    				<li id="submenu">
    					<h2>Other Links</h2>
    					<ul>
    						<li><a href="#">Semper vestibulum</a></li>
    						<li><a href="#">Vestibulum luctus</a></li>
    						<li><a href="#">Integer rutrum</a></li>
    						<li><a href="#">Etiam malesuada</a></li>
    						<li><a href="#">Elementum facilisis</a></li>
    						<li><a href="#">Ut tincidunt</a></li>
    						<li><a href="#">Odio sagittis</a></li>
    					</ul>
    				</li>
    				<li id="news">
    					<h2>News &amp; Updates</h2>
    					<ul>
    						<li>
    							<h3>25th May</h3>
    							<p><a href="#">Pellentesque quis elit non lectus gravida blandit&hellip;</a></p>
    						</li>
    						<li>
    							<h3>23rd May</h3>
    							<p><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing&hellip;</a></p>
    						</li>
    						<li>
    							<h3>21st May</h3>
    							<p><a href="#">Phasellus nec erat sit amet nibh pellentesque congue&hellip;</a></p>
    						</li>
    						<li>
    							<h3>17th May</h3>
    							<p><a href="#">Maecenas vitae orci vitae tellus feugiat eleifend&hellip;</a></p>
    						</li>
    					</ul>
    				</li>
    			</ul>
    		</div>
    		<!-- end sidebar -->
    		<div style="clear: both;">&nbsp;</div>
    	</div>
    	<!-- end page -->
    	<div id="footer">
    		<p id="legal">Copyright &copy; 2007 The Island. All Rights Reserved. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
    		<p id="links"><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p>
    	</div>
    	<!-- end footer -->
    </div>
    <!-- end wrapper -->
    </body>
    </html>

    Does anyone know what is causing that box to stick out like that?

    and on internet explorer there is a 3 pxl jog on the menu bar. Anyone know about that?

    if you can solve it then i'd really appreciate it.

  • #2
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Bump.

    C'mon, I really need to solve this problem.

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    No, you really need to read the Rules and Posting Guidelines before posting a thread.

    At first glance it looks like you need to clear your floats. See the FAQ thread in this forum.

  • #4
    New Coder
    Join Date
    Oct 2007
    Posts
    22
    Thanks
    0
    Thanked 4 Times in 4 Posts
    and you need to validate your code it looks big mess (those styles should be in the head) http://validator.w3.org/ loves to answer such questions


  •  

    Posting Permissions

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