SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need a bit of help with CSS

    Hey guys, I'm a CSS noob in training you could say, anyway I'm developing a site and I've been spoiled by Firefox. Before I went trying to fix things it worked just as I wanted it to in Firefox but then I just tried chrome and its nothing at all like Firefox, IE behaves the same way as Chrome.

    Basically my Navbar is static when resizing the window on Firefox, but on Chrome or IE it will resize the buttons and clump them together. I just recently battled a translucent box to fit into the page behind both the navbar and the content box, that was a chore, it still isnt how I want it, its using width: 100%, but I'd like it to be as tall as my content div and have auto margins on the left and right but they have no effect.

    Here is the CSS

    Code:
    /* Overrides page defaults */
    /* 		 				   */
    /* 			3-25-11		   */
    /* 	     				    */
    /*   CSS for rest of pages */
    
    * {
    	
    	margin: 0;
    
    }
    
    body {
    	
    	background-color: rgb(51,51,51);
    	font-family:Arial,Helvetica,sans-serif;
    	font-size:10px;
    	
    } 
    
    #wrapper 
    {
    	width: 100%;
        color:#FFFFFF; 
    	overflow: hidden;
    	
    }
    
    #header {
    
        background: url('../images/navbar.gif') repeat scroll 0 0;
    	margin-left: auto;
        height: 49px;
    
    	color: white;
        padding: 7px 0 0 7px;
    
    	
    }
    
    #navBar
    {
    	font-size: 125%;
    	font-weight: bold;
    	color: white;
    	height: 48px;
    	padding: 16px 0px 0 0;
    	text-align: center;
    	position: absolute;
    	top: 7px;
    	left: 300px;
    	right: 300px; 
    }
    
    #navBar a
    {
    	color: white;
    	padding: 10px 20px;
    	text-decoration: none;
    }
    
    #navBar a:hover {
    
    	/*background-color: rgb(102, 102, 102);*/
    	background-image: url('../images/hover.gif');
    	color: black;
    
    }
    
    #contentcontainer  {
    
    
    	position: relative;
    	width: 700; /* remember to set a width */
    	color:#FFFFFF;
    	clear: both;
    
    }
    
    .overlay {
    
    
    	  position: absolute;
    	  top: 0; /* These positions makes sure that the overlay */
    	  bottom: 0;  /* will cover the entire parent */
    	  left: 0;
    	  width: 100%;
    	  background: black;
    	  margin: 0;
    	  opacity:0.3;  
          filter:alpha(opacity=30);  
          -moz-opacity:0.3; 
    }
    
    
    /*#wrapper #contentcontainer #transparency {
    
     
        background-color: red;  
    	height: 700px; /* Take off when content exists 
    	width: 400px
    	margin-top: 82px;
    	margin-bottom: 40px;
        position:absolute;  
        top:0px;  
        left:0px;  
        z-index: -1;
    	opacity:0.5;  
        filter:alpha(opacity=50);  
        -moz-opacity:0.5; 
    
    } */
    
    #contentcontainer .content
    {
    
    	width: 700px;
    	margin-top: 82px;
    	margin-bottom: 40px;
    	width: auto;
    	position: relative;
    	clear: both;
    	
    		
    
    }
    
    .content {
    
    	position: relative;
    	
    }
    
    img.logo
    {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    
    }
    
    #content h1 {
    	text-align: center;
    	font-weight: bold;
    }
    
    #content p {
    
    	text-align: center;
    	font-size: 16px;
    	color: white;
    	font-weight: bold;
    
    }
    
    .getStarted {
    	
    	text-align: center;
    	color: white;
    	font-size: 20px;
    	font-weight: bold;
    
    }
    
    .getStarted p {
    	font-size: 15px;
    }
    
    table {
    	
    	text-align: center;
    	margin-left: auto;
    	margin-right: auto;
    
    }
    
    #footer 
    {
        background: none repeat scroll 0 0 black;
    	color: white;
    	width: 100%;
        height: 20px;
    	color: white;
        padding: 7px 0px 0px 0px;
    	
    	/* Opacity settings */
    	filter: alpha(opacity:0.6);
        KHTMLOpacity: 0.6;
        MozOpacity: 0.6;
        -khtml-opacity: .60;
    	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        -moz-opacity:.60;
        filter:alpha(opacity=60);
        opacity:.60;
    }
    
    #text p {
    	
    	margin: 0;
    	padding: 0;
    	color: white;
    	font-size: 120%;
    	background-color: black;
    	text-align: center;
    	font-variant: small-caps;
    
    }
    Very messy I know, if you need the HTML source let me know....

    Basically the problems are,

    1. Resizing is fine in Firefox, but everything clumps together in IE and Chrome, I'd like to know how to make it static,

    2. Can the transparent box be made to be margin-left: auto and right? Also it doesnt work on IE8...its just all black, I assume I need a different type of opacity filter...

    3. Also, I'd like the footer to be dynamic, as in it expands and contracts depending on the content size, its static right now and I'm kinda afraid to mess with it...

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Make sure to post your HTML too, or preferably a link. (You've got a lot more chance of a useful answer if we can see this in action)

  3. #3
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Make sure to post your HTML too, or preferably a link. (You've got a lot more chance of a useful answer if we can see this in action)
    Thanks for the reply here is a live link of the site live - Final project So if you try and resize the website with it in the browser the entire page will clump together, where firefox gracefully lets it stay in one place...

    IIS is having a problem with the server side includes so the footer and navbar are unavailable at the moment, trying to find a fix....okay, they're fixed, IIS uses "include file", not "include virtual".

    HTML for the index page

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html>
    
    	<head><!-- Head Begin -->
    	
    		<title>Final project</title>
    		<link rel="stylesheet" type="text/css" href="css/main.css" />
    
    	</head>	<!-- End of Head -->
    	
    	
    	<body> <!-- Body begin -->
    		
    		<div id="wrapper">  <!-- Wrapper div begin -->
    			
    			<!--#include virtual="includes/header.html" -->
    
    			
    		<div id="contentcontainer">
    			
    			<div class="overlay"></div>
    	
    			<div class="content"> 
    			
    				<img class="logo" src="http://www.sitepoint.com/forums/images/logo.png" alt="" />
    						  
    					&nbsp;
    					&nbsp;
    					&nbsp;
    					<br />
    					
    
    			
    				<div class="getStarted">
    									<p>(Pronounced 'In General'), is a website giving you my knowledge, <br/>and the parts of the internets knowledge in one convenient location.</p>
    				
    					<br />
    					<br />
    				To get started, click below on something that interests you, or browse the buttons at the top.
    					<br />
    					<br />
    				</div>			
    			
    			<div id="hugetable">
    			
    			<table id="Table_01" width="701" height="401" border="0" cellpadding="0" cellspacing="0">
    	<tr>
    		<td colspan="11">
    			<img src="http://www.sitepoint.com/forums/images/indexSiteGUI_01.png" width="700" height="55" alt=""></td>
    		<td>
    			<img src="http://www.sitepoint.com/forums/images/spacer.gif" width="1" height="55" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="2" rowspan="3">
    			<img src="http://www.sitepoint.com/forums/images/indexSiteGUI_02.png" width="146" height="106" alt=""></td>
    		<td colspan="6">
    			<a href="news.shtml">
    				<img src="http://www.sitepoint.com/forums/images/newsBtn.png" width="409" height="74" border="0" alt="News"></a></td>
    		<td colspan="3" rowspan="3">
    			<img src="http://www.sitepoint.com/forums/images/indexSiteGUI_04.png" width="145" height="106" alt=""></td>
    		<td>
    			<img src="http://www.sitepoint.com/forums/images/spacer.gif" width="1" height="74" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="6">
    			<img src="http://www.sitepoint.com/forums/images/indexSiteGUI_05.png" width="409" height="18" alt=""></td>
    		<td>
    			<img src="http://www.sitepoint.com/forums/images/spacer.gif" width="1" height="18" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="3">
    			<img src="http://www.sitepoint.com/forums/images/indexSiteGUI_06.png" width="127" height="14" alt=""></td>
    		<td rowspan="2">
    			<a href="about.shtml">
    				<img src="http://www.sitepoint.com/forums/images/indexSiteGUI_07.png" width="145" height="39" border="0" alt="About Me"></a></td>
    		<td colspan="2">
    			<img src="http://www.sitepoint.com/forums/images/indexSiteGUI_08.png" width="137" height="14" alt=""></td>
    		<td>
    			<img src="http://www.sitepoint.com/forums/images/spacer.gif" width="1" height="14" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="7">
    			<img src="http://www.sitepoint.com/forums/images/indexSiteGUI_09.png" width="48" height="239" alt=""></td>
    		<td colspan="3" rowspan="3">
    			<a href="videos.shtml">
    				<img src="http://www.sitepoint.com/forums/images/videosBtn.png" width="196" height="77" border="0" alt="Videos"></a></td>
    		<td rowspan="5">
    			<img src="http://www.sitepoint.com/forums/images/indexSiteGUI_11.png" width="29" height="120" alt=""></td>
    		<td rowspan="5">
    			<img src="http://www.sitepoint.com/forums/images/indexSiteGUI_12.png" width="35" height="120" alt=""></td>
    		<td colspan="3" rowspan="3">
    			<img src="http://www.sitepoint.com/forums/images/picturesBtn.png" width="196" height="77" alt="Pictures"></td>
    		<td rowspan="7">
    			<img src="http://www.sitepoint.com/forums/images/indexSiteGUI_14.png" width="51" height="239" alt=""></td>
    		<td>
    			<img src="http://www.sitepoint.com/forums/images/spacer.gif" width="1" height="25" alt=""></td>
    	</tr>
    	<tr>
    		<td>
    			<img src="http://www.sitepoint.com/forums/images/indexSiteGUI_15.png" width="145" height="30" alt=""></td>
    		<td>
    			<img src="http://www.sitepoint.com/forums/images/spacer.gif" width="1" height="30" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="2">
    			<a href="contact.shtml">
    				<img src="http://www.sitepoint.com/forums/images/contactBtn.png" width="145" height="39" border="0" alt="Contact Me"></a></td>
    		<td>
    			<img src="http://www.sitepoint.com/forums/images/spacer.gif" width="1" height="22" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="3" rowspan="2">
    			<img src="http://www.sitepoint.com/forums/images/indexSiteGUI_17.png" width="196" height="43" alt=""></td>
    		<td colspan="3" rowspan="2">
    			<img src="http://www.sitepoint.com/forums/images/indexSiteGUI_18.png" width="196" height="43" alt=""></td>
    		<td>
    			<img src="http://www.sitepoint.com/forums/images/spacer.gif" width="1" height="17" alt=""></td>
    	</tr>
    	<tr>
    		<td>
    			<img src="http://www.sitepoint.com/forums/images/indexSiteGUI_19.png" width="145" height="26" alt=""></td>
    		<td>
    			<img src="http://www.sitepoint.com/forums/images/spacer.gif" width="1" height="26" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="2" rowspan="2">
    			<img src="http://www.sitepoint.com/forums/images/indexSiteGUI_20.png" width="103" height="119" alt=""></td>
    		<td colspan="6">
    			<a href="information.shtml">
    				<img src="http://www.sitepoint.com/forums/images/infoBtn.png" width="409" height="74" border="0" alt="Information"></a></td>
    		<td rowspan="2">
    			<img src="http://www.sitepoint.com/forums/images/indexSiteGUI_22.png" width="89" height="119" alt=""></td>
    		<td>
    			<img src="http://www.sitepoint.com/forums/images/spacer.gif" width="1" height="74" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="6">
    			<img src="http://www.sitepoint.com/forums/images/indexSiteGUI_23.png" width="409" height="45" alt=""></td>
    		<td>
    			<img src="http://www.sitepoint.com/forums/images/spacer.gif" width="1" height="45" alt=""></td>
    	</tr>
    	<tr>
    		<td>
    			<img src="http://www.sitepoint.com/forums/images/spacer.gif" width="48" height="1" alt=""></td>
    		<td>
    			<img src="http://www.sitepoint.com/forums/images/spacer.gif" width="98" height="1" alt=""></td>
    		<td>
    			<img src="http://www.sitepoint.com/forums/images/spacer.gif" width="5" height="1" alt=""></td>
    		<td>
    			<img src="http://www.sitepoint.com/forums/images/spacer.gif" width="93" height="1" alt=""></td>
    		<td>
    			<img src="http://www.sitepoint.com/forums/images/spacer.gif" width="29" height="1" alt=""></td>
    		<td>
    			<img src="http://www.sitepoint.com/forums/images/spacer.gif" width="145" height="1" alt=""></td>
    		<td>
    			<img src="http://www.sitepoint.com/forums/images/spacer.gif" width="35" height="1" alt=""></td>
    		<td>
    			<img src="http://www.sitepoint.com/forums/images/spacer.gif" width="102" height="1" alt=""></td>
    		<td>
    			<img src="http://www.sitepoint.com/forums/images/spacer.gif" width="5" height="1" alt=""></td>
    		<td>
    			<img src="http://www.sitepoint.com/forums/images/spacer.gif" width="89" height="1" alt=""></td>
    		<td>
    			<img src="http://www.sitepoint.com/forums/images/spacer.gif" width="51" height="1" alt=""></td>
    		<td></td>
    	</tr>
    </table>
    			
    			
    				</div> <!-- Huge table end -->
    			
    				</div>
    			
    			</div>  <!-- Content div end -->
    			
    			</div> 	<!-- Content container div end -->
    			
    			<!--#include virtual="includes/footer.html" -->
    			
    		</div>  <!--Wrapper div end -->
    	
    
    	</body>
    
    </html>


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
  •