PDA

View Full Version : Help with CSS Template



prote
Mar 20th, 2010, 03:28 PM
Hello, I used a CSS Template called 3 columns or something like that, anyway it works great, but ONLY on IE which is quite annoying, when i try to open the webpage on FF or Opera, the left and right columns show up great, but the center column with all the content is blank. I think it might have somthing to do with the fact I had to modify the template a bit because of my custom flash menu, but if it works on IE, there has to be a way for it to work on other browsers, please help, this is quite urgent, the site is www.mountfichetcastle.com and the style sheet is here:
http://mountfitchetcastle.com/_Theme/Castle.css

If you find a way to help me even slightly, please leave a reply, I will appreciate ANY help.

abduraooft
Mar 20th, 2010, 03:42 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> Your DOCTYPE (http://www.alistapart.com/articles/doctype) is incomplete. I'd recommend to to use
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> instead.

btw, you don't need to apply float+width on all the three column to make a three column layout. Instead, apply float+width on the two columns to be placed on either sodes adn then set a suitable margin-left & margin-right to the centre column. Refer http://bonrouge.com/3c-hf-fluid.php

prote
Mar 21st, 2010, 12:43 AM
thank you for your suggestions and I think I finally found what exactly is the problem: the z-indexes of my menu and columns. When I started to randomly change them, the middle column with all the content was visible, BUT the menu didn't show up on top of the text when hovered. This is the css code that changes the menu z-index of my menu. Note that the z-index of my middle column is 50

.menu
{
z-index:49;
position:absolute;
top:200px;
left:13%;
}
.menu:hover
{
z-index:100;
}
it makes the menu to appear above text when hovered, but below when not active. Works fine on IE but not on Opera nor FF, if i remove the hover part everything (but the menu) works alright. Any ideas how to make it work on anything other than IE? Maybe javascript? I'll try to come up with something by tomorrow.
All suggestions are welcome.

EDIT: Managed to fix it, now i need the logo to show up on Opera and FF, can anyone tell me whats wrong with this code?


Castle.css

.logo
{
width: 800px;
height: 170px;
background-image : url("../images/site/logo-a.png");
background-repeat : no-repeat;
color: #ffffff;
margin-left:auto;
margin-right:auto;
z-index:150;
position:relative;
display:inline;
}


Index.html

<div id="header">
<img class="logoleft" width="84" height="139" src="images/site/logo1.png" alt=""></img>
<div class="logo">&nbsp;</div>
<img class="logoright" width="84" height="139" src="images/site/logo1.png" alt=""></img>
<div class="spacer">&nbsp;</div><br>

...

</div>

again, it works fine on IE, but not on Opera or FF, tried nearly everything, still all I see on my Opera is a single space(&nbsp;) between two side logos