Querky CSS issues

Discussion in 'CSS' started by ehime, Sep 29, 2008.

0
  1. #1
    Getting two strange issues with my coding, anyone able to spot them?

    Here's the two issues I'm having right now.
    [​IMG] and [​IMG]

    CSS:
    

/*   Globals
=====================================*/
* {margin:0px; padding:0px;}
p, ul, h1, h2, h3, h4, h5 {margin-bottom:10px;}
li {line-height:1.5em; margin-left:20px;}

a {color:#2E5051; text-decoration:none; font-weight:bold;}
a:hover {color:#000; text-decoration:none;}
a img {border:none;}

/*  IE uses font-size, Mozilla uses line-height  */
h1 {font-size:24px; line-height:24px; color:#fff; font-family:Arial, Helvetica, sans-serif; font-weight:normal;}

/*   Side Bar
=====================================*/
#sideBar{
	position:absolute;
	width:auto;
	height:auto;
	top:117px;
	right:772px;
	background-image:url(images/background.gif);
	background-position:top left;
	background-repeat:repeat-y;
}

#sideBarTab{
	float:left;
	height:137px;
	width:28px;
}

#sideBarTab img{
	border:0px solid #FFFFFF;
}

#sideBarContents{
	overflow:hidden !important;
	float:left;
}
	
#sideBarContentsInner{
	width:200px;
}


/*   Body and Wrappers
=====================================*/
body {
	background:#2e2e2e url(BG000000.jpg) 0 0 repeat;
	font:72%/1.3em Verdana, Arial, Helvetica, sans-serif;
	color:#2e2e2e;
}
#shell {
	background:url(bodyBG00.jpg) 0 0 repeat-y;
	margin:0px auto;
	position:relative;
	overflow:hidden;
	width:800px;
}
#container {
	background:url(headBG00.jpg) 0 0 no-repeat;
	position:relative;
	overflow:hidden;
	width:100%;
}

/*   Content Styles
=====================================*/
#content {
	clear:both;
	padding:20px 0 25px 0;
	margin-left:270px;
	width:500px;
	min-height:225px;
	_height:225px; /* for IE6 */
}


/*   Footer Styles
=====================================*/
#footer {
	background:#2e2e2e url(footBG00.jpg) 0 0 no-repeat;
	font:normal 10px/1.3em Verdana, Arial, Helvetica, sans-serif;
	margin:0px auto;
	width:100%;
	height:52px;
	}
#footSpace{height:20px;}
#foot_info {
	color:#CC9966;
	margin:0px auto;
	text-align:center;
	line-height:1.5em;
	letter-spacing:-1px;
}
#foot_info a {color:#CC9966; font-weight:normal;}
#foot_info a:hover {color:#D0FAF9;}
    Code (markup):
    And HTML

    

<!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" xml:lang="en" lang="en"> 
        <head>

<title>Products by OmniSistem Lights & Effects</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="expires" content="-1" />
<meta http-equiv= "pragma" content="no-cache" />
<meta name="author" content="Jon Daniel" />
<meta name="robots" content="all" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Products by OmniSistem Lights & Effects." />
<meta name="keywords" content="omni, sistem, system, omnsistem, lighting, club, party, rave, fx, effects, lasers" />

<link rel="stylesheet" type="text/css" href="simple.css" />
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/side-bar.js"></script>

        </head>
		
	<body>


 	 <div id="shell">
	 <div id="container">
	 <div id="topFlash" style="width:775px; height:315px; margin-left:12px;"></div>
		<!-- reserve for future flash
		<script type="text/javascript">

		var so = new SWFObject("flash_top.swf", "flashanim2", "775", "315", "6", "ffffff");
		 so.addParam("quality", "best");
		 so.addParam("wmode", "transparent");
		 so.addParam("flashvars", "0");
		 so.write("topFlash");

		 </script> -->

		 	<div id="sideBar">
	
	<a href="#" id="sideBarTab"><img src="images/slide-button.gif" alt="sideBar" title="sideBar" /></a>
	
	<div id="sideBarContents" style="width:0px;">
		<div id="sideBarContentsInner">
			<h2>side<span>bar</span></h2>
			
			<ul>
				<li><a href="#">Link One</a></li>
				<li><a href="#">Link Two</a></li>
				<li><a href="#">Link Three</a></li>
				<li><a href="#">Link Four</a></li>
				<li><a href="#">Link Five</a></li>
			</ul>
			
		</div>
	</div>
	
</div>

<div id="content">


</div><!-- "content" -->
</div><!-- "container" -->

<div id="footer"><div id="footSpace"></div>
<div id="foot_info">
<p>2008&copy; <a href="http://omnisistems.com/disclaimer.asp" title="Disclaimer">All Rights Reserved</a>&nbsp;|&nbsp;<a href="http://omnisistems.com/forms/hipaa.pdf" target="_blank" title="Privacy Policy">Privacy Policy</a>&nbsp;|&nbsp;Website Design By: <a href="emailto:dodmeki@gmail.com" target="_blank" title="JD">Jon Daniel&reg;</a></p>
</div><!-- "foot_info" -->
</div><!-- "footer" -->

</div><!-- "shell" -->

	</body>
</html>
    Code (markup):
    Thanks ahead of time for the help, going live soon and am scratching my
    head over this. Cheers!
     
    ehime, Sep 29, 2008 IP
  2. rikun

    rikun Peon

    Messages:
    85
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Try giving the sidebar a z-index of 10 or something. I don't think you can apply z-indexing on the body, but if it's going over the body's background, consider putting that background in a div instead and apply position: relative; and z-index: 1 to that div.
     
    rikun, Sep 30, 2008 IP
  3. ehime

    ehime Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Didn't work, or atleast I couldn't get it to work right...
    Anyone else care to take a guess? I'm thinking that
    there really is something going on with the Z-Indexing
    I just can't figure out what where or how.... go figure.
     
    ehime, Sep 30, 2008 IP
  4. rikun

    rikun Peon

    Messages:
    85
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #4
    could you point us to your site? seeing the code is helpful and all, but being able to see the actual thing in action will be even more helpful.
     
    rikun, Sep 30, 2008 IP
  5. ehime

    ehime Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I actually got those parts fixed after dinking with it for a good 3hrs.
    new problem now, position: absolute isn't liquid and moves my bar as
    page resizes. Is there a place that I can upload to?
     
    ehime, Sep 30, 2008 IP