Results 1 to 2 of 2

Thread: *Resolved* for now... Assuming Layout Issues

  1. #1
    Join Date
    Nov 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default *Resolved* for now... Assuming Layout Issues

    Hello Everyone, I'm having some issues with a site I'm working on. I found a dynamicdrive template that was close to what I needed and modified it... a lot. Somewhere in the process I'm sure I've messed something up but have no idea where. I've validated all the code so I'm sure it's just a formatting issue, but seeing as I'm just a rookie with CSS I have no idea where to even begin to figure out what's wrong.

    This is the test site: test.shutter-vision.com
    I used this template as my starting point: http://www.dynamicdrive.com/style/la...frames-layout/

    It comes out beautifully in Safari, Chrome, iOS devices, and Dolphin on an android device, but the IE9 and IE7 browsers I've checked just don't like it. The framecontentleft div is supposed to be on the far left and the framecontentright div is supposed to be on the far right. In IE7 it also looks like I'm losing the #navbar li styling. I'm posting the code below. Any help I can get ass soon as possible would be really appreciated!

    As I'm sure you'll notice, and I'm not sure if this will help, I'm setting it up as a wordpress theme. I just want to get it to display correctly before I even start plugging in the WP coding.

    CSS:
    Code:
    /*
    Theme Name: GB Builders
    Theme URI: <a href="http://www.shutter-vision.com" rel="nofollow">http://www.shutter-vision.com</a>
    Author: Keith T. Turbitt Jr.
    Author URI: <a href="http://www.shutter-vision.com" rel="nofollow">http://www.shutter-vision.com</a>
    Description: Basic site Template
    Version: 2011-11-20
    License: NONE
    */
     
    body {
    	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    	background: #040302;
    	margin: 0;
    	padding: 0;
    	color: #000;
    	background-image: url(images/Background.jpg);
    	background-repeat: repeat-x;
    }
     
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
    	padding: 0;
    	margin: 0;
    }
    h1, h2, h3, h4, h5, h6, p {
    	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
    	padding-right: 15px;
    	padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
    }
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
    	border: none;
    }
     
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
    a:link {
    	color: #b5a485;
    	text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    }
     
    a:visited {
    	color: #b5a485;
    	text-decoration: underline;
    }
     
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
    	text-decoration: none;
    }
     
    #container{
    }
     
    #framecontentLeft, #framecontentRight{
    	position: fixed;
    	height:100%;
    	top: 0;
    	left: 0;
    	width: 150px; /*Width of left frame div*/
    	background-image: url(images/sidebar-left.jpg);
    	background-repeat: no-repeat;
    }
     
    #framecontentRight{
    	left: auto;
    	right: 0; 
    	width: 149px; /*Width of right frame div*/
    	overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    	background-image: url(images/sidebar-right.jpg);
    	background-repeat: no-repeat;
    }
     
     
    #maincontent{
    	position: absolute;
    	top: 0;
    	height:auto;
    	left: 150px; /*Set left value to WidthOfLeftFrameDiv*/
    	right: 150px; /*Set right value to WidthOfRightFrameDiv*/
    	bottom: 0;
    	background-image: url(images/Background.jpg);
    	background-repeat: repeat-x;
     
    }
     
    #header {
    	height: 113px;
    	min-width: 600px;
    	overflow:hidden;
    }
     
    #navbar{
    	position: absolute;
    	left: 18px;
    	width: 135px;
    	overflow: hidden;
    	background-image: url(images/navbar-background.jpg);
    	text-align: center;
    	color: #b5a485;
    }
     
    #navbar li {
    	margin: 10px 0 20px 0;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size:20px;
    	line-height: 20px;
    }
     
    #navbar a:link {
    	text-decoration: none;
    	color: #b5a485;
    }
     
    #navbar a:visited {
    	text-decoration: none;
    	color: #b5a485;
    }
     
    #navbar a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
    	text-decoration: none;
    	color: #e1d8c7;
    }
     
    #content{
    	position: relative;
    	left: 150px; /*Set left value to WidthOfLeftFrameDiv*/
    	bottom: 0;
    	min-width: 447px;
    }
     
    .innertube{
    	background-color: #e1d8c7;
    	margin: 30px 210px 30px 30px;
    	min-width: 327px; /*Margins for inner DIV inside each DIV (to provide padding)*/
    }
     
    #footer{
    	bottom: 0;
    	height:20px;
    	margin: 30px 210px 30px 30px;
    	min-width: 327px; /*Margins for inner DIV inside each DIV (to provide padding)*/
    	text-align:center;
    	bottom: 0;
    	color: #b5a485;
    	font-size: 10px;
    }
     
    * html body{ /*IE6 hack*/
    	padding: 0 150px 0 200px; /*Set value to (0 WidthOfRightFrameDiv 0 WidthOfLeftFrameDiv)*/
    }
     
    * html #maincontent{ /*IE6 hack*/
    	height: 100%; 
    	width: 100%;
    	color:  #e1d8c7;
    }
    HTML
    Code:
    <!--Force IE6 into quirks mode with this comment tag-->
    <!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=UTF-8" />
    <title>GB Builders - Cheyenne Wyoming</title>
    <meta name="description" content="GB Builders - Custom home builder located in Cheyenne, WY." />
    <meta name="keywords" content="GB Builders, Cheyenne, SouthEast, Wyoming, Garth, Buresh, #1 Properties, Denise, Moody" />
    <link rel="stylesheet" href="http://test.shutter-vision.com/wp-content/themes/GBBuilders/style.css" type="text/css" media="screen" />
     
    </head>
     
    <body>
     
     
    <div id="framecontentLeft">
    </div>     <!-- end framecontentLeft -->
    <div id="framecontentRight">
    </div>     <!-- end framecontentRight -->
     
    <div id="maincontent">
     
    	<div id="header">
        	<img src="images/header.jpg" width="2020" height="113" alt="Header"/>    
        </div>		<!-- end header -->
     
    	<div id="navbar">
    		<img src="images/navbar-photo.jpg" width="135" height="155" alt="Garth Portrait" />
    		<ul>
        		<li><a href>Meet Garth</a></li>
        		<li>Blog</li>
        		<li>Current Homes</li>
        		<li>Past Homes</li>
        		<li>Our Clients Say it best</li>
        		<li>Facebook</li>
        		<li>Contact</li>
             </ul>
    	</div>		<!-- end navbar -->
     
     
    	<div id="content">
    		<div class="innertube">
     
            	<!-- wordpress loop here -->
     
    			<h1>Dynamic Drive CSS Library</h1>
    			<p style="text-align:center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p>
    		</div>		<!-- end innertube -->
            <div id="footer">
    			- Powered by: <a href="www.ArchitecturalAndInterior.com">www.ArchitecturalAndInterior.com</a> - 2011 Keith T. Turbitt Jr. -
    		</div>		<!-- end footer -->
     
    	</div>		<!-- end content -->
     
     
    </div>		<!-- end maincontent -->
     
    </body>
    </html>
    Last edited by KeithT; 11-22-2011 at 03:37 AM. Reason: resolved

  2. #2
    Join Date
    Nov 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Well I think I got it... For some reason that first line of code in the HTML was throwing everything out of wack, I'm not sure what it does but it was in the original template i was using.

Bookmarks

Posting Permissions

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