Elfano
March 26, 2011, 8:05am
1
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
/* 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,
Resizing is fine in Firefox, but everything clumps together in IE and Chrome, I’d like to know how to make it static,
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…
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…
ralphm
March 26, 2011, 9:26am
2
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)
Elfano
March 26, 2011, 6:24pm
3
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
<!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="" />
<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>