3 replies [Last post]
KeithT
KeithT's picture
Offline
newbie
Cheyenne, WY
Last seen: 2 years 40 weeks ago
Cheyenne, WY
Timezone: GMT-7
Joined: 2011-11-21
Posts: 3
Points: 4

Hello Everyone, I'm having some issues with a site I'm working on. I found a 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

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. 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:

/*
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:

<!--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>

KeithT
KeithT's picture
Offline
newbie
Cheyenne, WY
Last seen: 2 years 40 weeks ago
Cheyenne, WY
Timezone: GMT-7
Joined: 2011-11-21
Posts: 3
Points: 4

Just to elaborate on the

Just to elaborate on the problems, 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.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 2 weeks 16 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2037
Points: 2256

First, remove the quirks mode

First, remove the quirks mode silliness at the top. Then we'll see what needs to be done. Smile

I consider this a Triumph.

KeithT
KeithT's picture
Offline
newbie
Cheyenne, WY
Last seen: 2 years 40 weeks ago
Cheyenne, WY
Timezone: GMT-7
Joined: 2011-11-21
Posts: 3
Points: 4

Well crap... now i feel like

Well crap... now i feel like an idiot... That was in the template I found and didn't even think about taking that out because I have no idea what it's for! Thanks so much!