3 replies to this topic

[ferdri3]

Hello everyone,

I got a small problem with CSS and SSI
First I want to tell that my server DOES support SSI and I did make a .htaccess file on my server as instructed by the hostingservice themselves.
The main file has been saved as index.shtml and I used

<!--#include virtual="menu.txt" -->

to include the menu file.

In this menu file is this:

	

<div id="menu">

<div class="nav1">

<a href="#"><img src="images/mainmenu/office.png" alt="" /></a></div>

<!--Button 1 static image-->



<div class="nav2">

<a href="#"><img src="images/mainmenu/media.png" alt="" /></a></div>

<!--Button 2 static image-->


<div class="nav3">

<a href="#"><img src="images/mainmenu/internet.png" alt="" /></a></div>

<!--Button 3 static image-->


<div class="nav4">

<a href="#"><img src="images/mainmenu/develop.png" alt="" /></a></div>

<!--Button 4 static image-->


<div class="nav5">

<a href="#"><img src="images/mainmenu/web.png" alt="" /></a></div>

<!--Button 5 static image-->


<div class="nav6">

<a href="#"><img src="images/mainmenu/skype.png" alt="" /></a></div>

<!--Button 6 static image-->

</div>

This is all working fine (at least everything is shown correctly)
But the problem starts with the swapping images. This is (a part of) my CSS file which is related to the swapping images:

/*Start button 1*/

div.nav1 {

	position: relative;

	width: 125px;

	height: 298px;

	float: left;

	margin-left: 20px;

	margin-right: 10px;

	margin-bottom: 20px;

	background-image:url("images/mainmenu/office_pressed.png");

}


div.nav1 a, div.nav1 a:link, div.nav1 a:visited {display:block;}


div.nav1 img {width:100%;height:100%;border:0;}


div.nav1 a:hover img {visibility:hidden;}

/*End button 1*/


/*Start button 2*/

div.nav2 {

	position: relative;

	width: 125px;

	height: 298px;

	float: left;

	margin-left: 10px;

	margin-right: 10px;

	margin-bottom: 20px;

	background-image:url("images/mainmenu/media_pressed.png");  

}


div.nav2 a, div.nav2 a:link, div.nav2 a:visited {display:block;}


div.nav2 img {width:100%;height:100%;border:0;}


div.nav2 a:hover img {visibility:hidden;}

/*End button 2*/

etc.

I am calling the CSS file into my index.shtml file and it works as far as showing the main pictures and the divs. But the swapping never happens.
I have tryed a javascript code (auto code from expressionweb3) and it didnt work with SSI either.

Anyone can point me in the right direction please?

Thanks in advance!
Ferdri3

[ferdri3]

now I tryed this CSS code:

/*Start button 1*/

#nav1 {

	position: relative;

	width: 125px;

	height: 298px;

	float: left;

	margin-left: 20px;

	margin-right: 10px;

	margin-bottom: 20px;

}

/*End button 1*/


/*Start button 2*/

#nav2 {

	position: relative;

	width: 125px;

	height: 298px;

	float: left;

	margin-left: 10px;

	margin-right: 10px;

	margin-bottom: 20px; 

}

/*End button 2*/

etc

and changed the txt file into a html file with this html code for swapping my img:

<div id="menu">

		<div id="nav1">

			<a href="MicrosoftOffice.shtml"><img src="images/mainmenu/office.png" onmouseover="this.src='images/mainmenu/office_pressed.png'" onmouseout="this.src='images/mainmenu/office.png'" style="width: 125px; height: 298px;" alt="" /></a>

		</div>

		<div id="nav2">

			<a href="MultiMedia.shtml"><img src="images/mainmenu/media.png" onmouseover="this.src='images/mainmenu/media_pressed.png'" onmouseout="this.src='images/mainmenu/media.png'" style="width: 125px; height: 298px;" alt="" /></a>

		</div>

		<div id="nav3">

			<a href="Internet.shtml"><img src="images/mainmenu/internet.png" onmouseover="this.src='images/mainmenu/internet_pressed.png'" onmouseout="this.src='images/mainmenu/internet.png'" style="width: 125px; height: 298px;" alt="" /></a>

		</div>

		<div id="nav4">

			<a href="Develop.shtml"><img src="images/mainmenu/develop.png" onmouseover="this.src='images/mainmenu/develop_pressed.png'" onmouseout="this.src='images/mainmenu/develop.png'" style="width: 125px; height: 298px;" alt="" /></a>

		</div>

		<div id="nav5">

			<a href="WebPaden.shtml"><img src="images/mainmenu/web.png" onmouseover="this.src='images/mainmenu/web_pressed.png'" onmouseout="this.src='images/mainmenu/web.png'" style="width: 125px; height: 298px;" alt="" /></a>

		</div>

		<div id="nav6">

			<a href="Skype.shtml"><img src="images/mainmenu/skype.png" onmouseover="this.src='images/mainmenu/skype_pressed.png'" onmouseout="this.src='images/mainmenu/skype.png'" style="width: 125px; height: 298px;" alt="" /></a>

		</div>

	</div>

Still the same thing happens. I see the right margin etc correctly, I see the starting img perfectly, but the swapping never happens..


PS. I tested the swapping code in a normal html page and it worked.. so why doesnt it work in SSI?

[Alexander]

The tag should replace itself with the intended file you have chosen (regardless of extension, imagine it is completely replaced with the contents and then sent to the browser.)

There is likely something Javascript fails on,Google Chrome can display Javascript errors, and I believe Firefox has a Javascript error console somewhere of which can give hints to why the code does not work. Try to attempt to do the mouseover a few times so that errors can populate if they do.

You maybe could replace the SSI with the file completely and see if that works, if it doesn't then it likely would just be harder to debug with the SSI.

[ferdri3]

thanks for the reply Alexander,

I tryed it by replacing the SSI tag and made a plain html file of it and it worked perfectly. Thats why I dont get it lol.
It executes the CSS fine (margin, float, etc) except for the swapping part. Same go's for the html-swapping and the javascript swapping.

At this point I would be more happy to hear its impossible to swap images with SSI then to try another way to swap it lol. Till now Ive used 6 ways
of which 2 js scripts, 2 CSS, 1 php (total fail lol) and 1 html.

I use google chrome as my main browser and tested the code online aswell as offline.. Also tested it in firefox.

After saying this, I guess there is nothing that could fix it lol..