17 replies [Last post]
Lave
Lave's picture
Offline
Regular
Last seen: 11 years 51 weeks ago
Timezone: GMT+2
Joined: 2009-09-07
Posts: 12
Points: 0

Hi,
I have made a horizontal menu with submenues in css with a behaviourfile that I found on the net. It works in all browsers except IE 5,5 and 6. When I hover the submenues doesn't appear. Please I would be eternally grateful it someone could help me with this. And please let me know if you need more information.

Here is the code for the menu:

Namnlöst dokument

Here is the css:

body {
behavior: url(csshover.htc);
}

#leftcolumn a {
color: #000;
text-decoration: none;
}

#leftcolumn ul {
list-style: none;
margin: 0;
padding: 0;
width:130px;
text-align: right;
}

#leftcolumn ul li {
font: bold 11px/16px arial, helvetica, sans-serif;
height:100%;
background:#1F1B3C;
border-bottom:1px solid #fff;
position: relative;
float:left;
width:100%;
line-height: 30px;
display: inline-block;
}

#leftcolumn ul li ul li{
background:#1F1B3C;
}

#leftcolumn ul li a{
display:block;
padding: 2px 3px;
color:#FFFFFF;
}

#leftcolumn ul li a:hover {
background: #6F7383;
border-right:1px solid #fff;
border-left:1px solid #fff;
background: #6F7383;
color:#1F1B3C;
}

#leftcolumn ul li ul li a:hover{
background: #6F7383;
border-left:1px solid #fff;
color:#1F1B3C;
}

#leftcolumn ul ul {
position: absolute;
top: 0;
display:none;
}

#leftcolumn ul li:hover ul{
display: block;
left:131px;
}

Here is the behaviourfile in javascript:

/**
* HOVER - V1.11.040203 - whatever:hover in IE
* ---------------------------------------------
* Peterned - http://www.xs4all.nl/~peterned/
* (c) 2004 - Peter Nederlof
*
* Credits - Arnoud Berendsen
* for finding some really -sick- bugs
*
* howto: body { behavior:url("csshover.htc"); }
* ---------------------------------------------
*/

var currentSheet, doc = window.document;
function parseStylesheets() {
var sheets = doc.styleSheets, l = sheets.length;
for(var i=0; i

ljbailey
ljbailey's picture
Offline
Enthusiast
Scotland
Last seen: 10 years 45 weeks ago
Scotland
Joined: 2009-01-10
Posts: 224
Points: 59

Try this

Before I even go anywhere near that massive amount of code, try adding this into the head section:

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

It makes IE6 behave like IE7 (close enough). I would forget about IE5.5 if I was you, you will not get it to work and hardly anyone uses it (if anyone)

Liam Bailey is director of Galloway Web Services, a Stranraer web design company, sister of SEO copywriting services company Write About Property.

Lave
Lave's picture
Offline
Regular
Last seen: 11 years 51 weeks ago
Timezone: GMT+2
Joined: 2009-09-07
Posts: 12
Points: 0

Thank you ... one more question though!!

The script worked thank you so much!! But it said a warning when I opened it in IE 6. It said: A fault has occured with the script on this side do you want to continue to run the script? Fault: Permission denied. When I click yes it works anyway but there must be something wrong. I put the script in the body-tag is that wrong?
I looked again now and it seems to be a conflict between the script I have for the hover of submenues and your script.

I know IE 5 (we have a few percent of our clients still using it) is so old do you have a script that warns when a user has IE 5 and tells him to update to a later version?

Thank you so much again for taking the time to help.

regards Lave

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 48 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

If you're going to use the

If you're going to use the script that Liam linked to, don't use it WITH the csshover. They may conflict.

Also, put the script in the of your page, not the .

When I used the csshover behaviour I was using it on a suckerfish menu where the submenus were pulled offscreen with a large left: -9999em (which is safer for screen readers than display: none and display: block!) and while normally we bring the submenus back onscreen on :hover by setting the left to 0, with the csshover script I needed to use "left: auto" (for IE6 only) instead to get it to work. So the csshover script does have its little quirks. BTW are you using version 2 or 3? He has released a version 3 which does :focus as well : )

But remove the htc file entirely when testing the one Liam gave you.

If you have users with IE5 likely they cannot update... most of the IE5 users around here are the local fire department, the library, and corporations who spent a lot of money getting Windows2000 servers. People get annoyed if they get told to update something they cannot update.

But on the other hand, don't knock yourself out making your pages as pretty in IE5 as you would with a modern browser. They can have ugly, but workable pages, while those with modern browsers get all the goodies.

I'm no expert, but I fake one on teh Internets

Lave
Lave's picture
Offline
Regular
Last seen: 11 years 51 weeks ago
Timezone: GMT+2
Joined: 2009-09-07
Posts: 12
Points: 0

ok as a beginner I get a bit confused...

I understood that those scripts conflicted since I got that message but you mean the script from Liam works without the hover behaviour-file? I tried and it seems to work but how? isn't it the script that tells the menu that it has a submenu? I have one more problem using Liams script it doesn't seem to work i safari, the page shows up blank.
So do I get you correctly that your solution is using the hover file instead of Liams file and just change the data like you said? I tried to just take a way the code for the script but it seems to stuff up the page is there another way to take away a script? It seems to take away all my editable regions and I have ALLOT of pages linked to this template. Could you show me in code how to put in what you jsut described so I know where to put it in, I am sorry for such dumb questions but I am quite new at this. I don't know which verision of the hover file I have.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 48 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

What I am saying is, use one

What I am saying is, use one or the other. They both do similar jobs, and yes they are very independent of each other. It's like either a glass of orange juice or a glass of apple juice. You don't need the orange juice to get the hydration from the apple juice and vice versa.

I should have looked more closely at your code... you are using version 1 of the css hover and you are adding it in a strange way.

The csshover is saved as a .htc file. This is some goofy special file that just sits on your server, in the same folder as your CSS file (or the root but if you're on shared hosting I would think the css folder is better) which only Internut Exploder can see. It does not go in the HTML like you have it (you have it in script tags). Now, maybe that's how the old version worked? Try the new one: here's his page: http://www.xs4all.nl/~peterned/csshover.html
and here's version 3: http://www.xs4all.nl/~peterned/htc/csshover3.htc though you can also access them at the bottom of his page (he has a human-readable version there, and the one I linked to is the compressed/no-whitespace version you can put on your server).

It's just a text file that sits on your server. Delete your old one.

Now, to get it working in your page: all you do is, in your main css file (I'm assuming you have many css files, so by Main I mean the one every single page loads first), just for IE6 and older, type this (this is also state on Peter's site):

* html body {behavior:url(csshover3.htc);}

I have found that I need to have this as a separate statement from my other body statements, and since it's for IE6 and below only, I go ahead and hide it with the * html hack.

Possibly your problems came from using those tags and that strange Jscript thing.

<attach event="ondocumentready" handler="parseStylesheets" />
<script language="JScript">

That doesn't look legal (might still work). The whole is deprecated, because language attributes now are meant to do something else. A MIME type or something similar is expected for scripts anyway nowadays.

So, the coolness of the csshover is that it's just a file that sits on your server and gets referenced with just one line of code in your CSS only. That's nice. It's still actually javascript, so it still doesn't work in IE5/6 if those browsers have JS turned off (security set to "High" turns all scripting off), but that's a disadvantage of all these scripts, what can you do?

The Dean Edwards IE7 script is a traditional script that DOES sit in your HTML, inside the tags, on every single HTML page.

The script Liam linked to is only for IE6 (and under I guess). IE6 (and under) is the only browser who needs ANY scripts, so if Safari isn't working, it has to do with your HTML/CSS and nothing to do with any scripts (because Safari, Mozilla, Opera, etc cannot even see that you have a script). That's why in Liam's post you see those funny comments with [ifIE] in them. It's a Microsoft-invented IE Conditional Comment, a special Comment that IE sees but no other browsers see (they think it's just a regular comment).

If I remember, it's a Dean Edwards script that makes IE6 (and I guess IE5.5 but not sure) act like IE7, who is also buggy but works much better than IE6 (and most importantly, can :hover over non-anchors). That's all that script does, is use Javascript to do the things IE6 cannot do in its regular rendering engine. A crutch. It does not tell IE6 that there is a submenu. It tells IE6 that when :hover is applied to the li of your menu (or any other element), to do :hover actions like it normally does with an anchor (which your CSS is using to make the submenus appear). You can go to the original site to learn more about it at http://dean.edwards.name/IE7/ or at
http://code.google.com/p/ie7-js/

The code does not get added to the body. I think it would work normally but we consider it dirty to put tags in the body when it's something that belongs in the (tracker scripts are traditionally in the as the very last element, but that's to make them run AFTER the whole page has been loaded without an event loader iirc). So in your HTML page, before your closing tag, you would put that line in that Liam posted, WITH the funny [ifIE] things. Since it references an online script, that's all you need to do: copy-paste Liam's code he posted, and place it right before your closing tag (it can go almost anywhere in the but it's prolly easiest for you to find the tag).

Adding/removing a script like this should NOT be able to screw with your menu or your page. It's either your HTML or CSS, or now I wonder if it's the way you implemented the old version 1 of the csshover file (with the script tags and stuff).

I personally like the csshover myself, but it does not do nearly as many cool things as Dean Edwards script, which basically fixes all the nastiness of the browser we call EVI--er IE6. csshover just hovers (and focusses). Dean's script does just about everything. Pick the one you'd rather have. : )

I'm no expert, but I fake one on teh Internets

Lave
Lave's picture
Offline
Regular
Last seen: 11 years 51 weeks ago
Timezone: GMT+2
Joined: 2009-09-07
Posts: 12
Points: 0

wow thanks...

...for taking the time to explain. I will look into the different methods and I'll get it to work.

Lave
Lave's picture
Offline
Regular
Last seen: 11 years 51 weeks ago
Timezone: GMT+2
Joined: 2009-09-07
Posts: 12
Points: 0

Ok I have tried the hover script and the first script but..

... I don't get it to work in IE 6.

The hover I put in like this:

body {
behavior: url(csshover3.htc);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
background-color: #ccc;
margin: 0px;
}

and I also tried like you wrote:

* html body {behavior:url(csshover3.htc);}

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
background-color: #ccc;
margin: 0px;
}

Or have I misunderstood, did you mean to put the: * html body {behavior:url(csshover3.htc);} text in the html document instead of the css? Is that why it doesn't work?

I also tired the script I got from Liam again and took away the hoverscript and I put it in the head and nothing happens in IE 6.

I know it's hard for you to know what is wrong but please look and see if you can think of anything else. My last resort will be to test that dean edwards script but to be honnest I am not sure how to put it in correctly, sorry again for such dumb questions this is all so new and hard for me but I so much want to learn and I apprehiate sooo much you taking the time to help!!

regards Lave

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 48 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Liam's script is Dean

Liam's script is Dean Edwards I believe.

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
background-color: #ccc;
margin: 0px;
}
* html body {behavior:url(csshover3.htc);}

Is the style I have my csshover in. The url(file) is looking for the file in the same folder as the css sheet itself. Is it there?

But otherwise you had it right, only the CSS calls the csshover file, thje HTML does nothing with it.

When you had the Dean Edwards script that Liam posted, were you able to tell if it worked at all? A simple test is
Make something that is not an anchor (like, a div)
and make it change colour on :hover
like

stuff here

in the CSS
#foo {
background-color: green;
}
#foo:hover {
background-color: red;
}

in all modern browsers, hover the green foo box would make it red. But not in IE6. If either the csshover OR the DE script are working, either one of them are supposed to be able to make IE6 also change it red on :hover.

By the way I have to ask: are you testing on a real IE6 or one of the imitations (Tredosoft, evolt)? Those IE6 simulators have IE6's rendering engine BUT NOT the IE6 Javascript engine! Instead those use IE7's javascript engine! So I hope you are testing on a real IE6! (the csshover works in a tredosoft IE6 I think because I have both a Tredosoft and a native IE6 that I'm usually too lazy to go open and I test my menus in both and I think they both worked).

Next I might have to go take a look-see at the page itself. There might be something simple/stupid going on that happens to have nothing to do with the scripts at all : )

So:
use a real IE6
check to see that either method actually does something!
if it doesn't do anything, can't make a green div turn red while other browsers can, then you know the script isn't working at all
if it DOES turn a green div red then at least you know the script is working correctly and we'll need to look at your menu more closely.

*edit you've sent both your HTML (for a page with the menu at least) and your css through the w3c validator right?

I'm no expert, but I fake one on teh Internets

Lave
Lave's picture
Offline
Regular
Last seen: 11 years 51 weeks ago
Timezone: GMT+2
Joined: 2009-09-07
Posts: 12
Points: 0

ok I tried what you said...

The hover was put in the same file as the css file but still doesn't work.

The green and red works and also the menues in IE 6 now with Liams script but I get a message about an error. I will try and attach the snapshot I took of the screen here. the error message is in Swedish and it says "style is null or not an object" what does that mean what is conflicting?
I can't check my webpage on w3 validator since I only have it local yet.
I don't have a real version of IE6 I use IE tester which tests the page in all different versions, but you think it doesn't show the real thing? I also work on a mac with a PC partition. Can I install a IE 6 version when I allready have a IE 8?
So the summary is that the script is working but I get a warning and not until I say that I want to run the script anyway it works so I guess I have to try and find out what is conflicting.

AttachmentSize
Bild 1.png 128.37 KB
Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 48 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Hm, do all IE's show that

Hm, do all IE's show that error?

IETester, I'm not sure which Javascript engine it has. The browser's javascript engine is what runs scripts. I know the Tredosoft and Evolt versions of IE6 do not use IE6's javascript engine, but IE7's. From what I've heard, IETester has its own Javascrpt engine.

Your error tells you the line where the error is, I suppose you could look at the script in a text editor, but I wonder if a real IE6 would show that error at all?

Quote:

Can I install a IE 6 version when I allready have a IE 8?

Normally, no. All versions of Internet Explorer have the same set of .dll files, a library file set, so if you have IE8 and then download IE6, IE6 will utilise the same dll files IE8 was using-- and IE8 gets replaced (not sure you can even do that in newer versions of Windows?). So Windows only lets you have one copy of IE.

This is why we use things like IETester, Tredosoft IE, or evolt copies. People try to hack the dll files and make fake copies of them or whatever, things to fool each browser into thinking it's the only IE, while the OS doesn't know either.

I don't suppose you know anyone who has a native IE6? I happen to have one, on a VirtualBox: my computer runs three OSes, Linux, and two copies of Windows XP who don't see each other. One has IE6 and the other has IE7 with Tredosoft IE's (IE5.5 and 6, I don't use the other versions it gives). On a machine at work, who is all Windows, I have IE8. Tredosoft and Evolt IE's don't work (yet) on Vista, only XP (so far as I know, unless there's been a change recently).

Quote:

I can't check my webpage on w3 validator since I only have it local yet.

You can check a local page too. You can either choose Validate by File Upload, OR you can choose Validate by Direct Input (I don't know what the character limit is on that though).

Still, that you can get the menus and the hover working with Dean's script is great news. I half-wonder if the error is due to your tester and would possibly not appear in a real IE6.

If everything else is working smoothly, continue working on your site (and validate it) and when you put it online, leave the domain (and index.html or whatever your main page is) blank (put a blank file in there) and have your real page behind another directory (so, example.com/test/therealpagehere.html) so you can have someone with a real IE6 take a look at the page and see if they get the error message.
When I have errors in IE that I see when visiting other pages, I normally get a little yellow icon at the bottom left but don't normally get a popup message.

If it seems that real IE6 see the error, you would then take your temp page down for further testing.

Do all this with backup copies on your computer (or even another computer) and have a robots.txt for the googles telling them NOT to index your page until you're ready to really have it online.

I'm no expert, but I fake one on teh Internets

Lave
Lave's picture
Offline
Regular
Last seen: 11 years 51 weeks ago
Timezone: GMT+2
Joined: 2009-09-07
Posts: 12
Points: 0

Thank you so much for taking the time to help!! :)

Smile

Lave
Lave's picture
Offline
Regular
Last seen: 11 years 51 weeks ago
Timezone: GMT+2
Joined: 2009-09-07
Posts: 12
Points: 0

Thank you so much for taking the time to help!! :)

Smile

Lave
Lave's picture
Offline
Regular
Last seen: 11 years 51 weeks ago
Timezone: GMT+2
Joined: 2009-09-07
Posts: 12
Points: 0

I spoke too soon...

I noticed now that in IE 6 the script seems to throw out the css files on some pages. I didn't notice first since it worked on the page I tested on but then I looked at another it looks *beep*. I know it might be hard to know the problem just by what I am writing. I have valited the page and it has passed so there are no errors as such. Just seems like the script and the css file are conflicting.

Thanks in advance!!

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 48 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Really? When you take just

Really? When you take just the script back out, the way the pages look in IE6 become normal again?

I'm not terribly familiar with Dean Edwards' scripts, and I'm not all that sure what it does. But it's supposed to add abilities to IE6 that it doesn't have (things like :hover on non-links and :focus etc). I don't think it deals with Haslayout so it shouldn't affect layout like that.

You may have to post some code, HTML and CSS for one example page.

I'm no expert, but I fake one on teh Internets

Lave
Lave's picture
Offline
Regular
Last seen: 11 years 51 weeks ago
Timezone: GMT+2
Joined: 2009-09-07
Posts: 12
Points: 0

Yeah when I take the script

Yeah when I take the script out it all becomes fine except that the submenus aren't working of course.
Sorry for all the code didn't what to put in and what not to put in. I will try and use the template that is working and replace it with the one not working and see what happens

Here is the html file:

Välkommen till Söderberg & Haak - Amazone ledande från skörd till skörd

Någon nyhet från Amazone

eller om en produkt som är aktuell för skörden just nu.

 

 

Amazone

1883 grundade Heinrich Dreier företaget Amazonen Werke. Idag har Amazone vuxit ett internationellt företag med en omsättning som överstiger XXX miljoner Euro (2008).

 

Störst i Europa på Teknologi från skörd till skörd

Amazone är Europas ledande tillverkare med ett komplett program för jordbearbetning, sådd, växtkraft och växtskydd.

 

Söderberg & Haak har haft ett långt samarbete med Amazone. Redan i slutet av 1960-talet började vi importera Amazone konstgödselspridare. 1998 introducerades Amazone burna och bogserade sprutor och i början av 2000-talet utökades programmet med såmaskiner och jordbearbetningsredskap.

 

Länk till Amazones internationella webb:

www.amazone.de

) måste textformateringen ligga i css-regeln för #newsheader-->

Aktuellt

från Amazone

Here are the css files
@charset "UTF-8";

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
background-color: #CCCCCC;
margin: 0px;
}

#wrapper {
width: 800px;
height: 730px;
margin-right: auto;
margin-left: auto;
position: relative;
}

#header {
width: 800px;
height: 170px;
background: #FFFFFF url(../amazone/bilder/amazonehuvud.jpg) no-repeat;
clear: both;
position: relative;
}

#header a {
text-decoration: none;
color: #fff;
padding: 5px;
}

#topmenu {
width: 632px;
height: 1.8em; /*höjden behöver egentligen inte anges - anges bara för att den ska synas i layouten*/
top: 134px;
float: none;
position: relative;
clear: both;
background-color: #27253E;
}

#content {
width: 800px;
float: left;
height: 400px;
top: 0px;
position: relative;
}

#leftcolumn {
width: 130px;
height: 475px;
float: left;
position: relative;
background-color: #FFFFFF;
z-index: 100;
}

/*vertikal meny*/
#leftcolumn ul {
margin: 0;
padding: 0px;
list-style: none;
text-align: right;
line-height: 2.5em;
text-decoration: none;
background-color: #6F7383;
}
/*styling för vertikala menyn*/
#leftcolumn a {
color: #000;
text-decoration: none;
}

#leftcolumn ul {
list-style: none;
margin: 0;
padding: 0;
width:130px;
text-align: right;
}

#leftcolumn ul li {
height:100%;
background:#6F7383;
border-bottom:1px solid #fff;
position: relative;
float:left;
width:100%;
line-height: 30px;
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
}

#leftcolumn ul li ul li{
background:#6F7383;
}

#leftcolumn ul li a{
display:block;
padding: 2px 3px;
color:#FFFFFF;
}

#leftcolumn ul li a:hover {
background: #6F7383;
border-right:1px solid #fff;
border-left:1px solid #fff;
background: #1F1B3C;
color:#fff;
}

#leftcolumn ul li ul li a:hover{
background: #1F1B3C;
border-left:1px solid #fff;
color:#fff;
}

#leftcolumn ul ul {
position: absolute;
top: 0;
display:none;
}

#leftcolumn ul li:hover ul{
display: block;
left:131px;
}

#midcolumn {
width: 481px;
float: left;
position: relative;
padding: 15px 5px 5px 15px;
height: 455px;
display: block;
background-color: #FFFFFF;
overflow: auto;
text-align: left;
}
#midcolumn a, #midcolumn a:visited, #midcolumn a:active {
color: #FF0000;
text-decoration: none;
}
#midcolumn a:hover {
font-weight: bolder;
}
#afnamnlista {
text-decoration: none;
font-size: 1.2em;
line-height: 1.3em;
color: #666666;
}
#afnamnlista a:hover {
color:#FF0000;
font-weight: bolder;
}

#rightcolumn {
background: #D06821;
width: 158px;
height: 634px;
float: right;
top: -68px;
position: relative;
color: #FFFFFF;
}
#rightcolumn a, #rightcolumn a:visited, #rightcolumn a:active {
color: #fff;
text-decoration: none;
}
#rightcolumn a:hover {
font-weight: bolder;
color: #3F5333;
}
#newsheader {
position: relative;
float:left;
width: 616px;
height: 20px;
border-bottom: solid 2px #D06821;
padding-left: 15px;
font-size: 1.2em;
font-style: italic;
font-weight: bold;
background-color: #FFFFFF;
color: #000000;
}
#news {
background:#fff;
width: 631px;
height: 60px;
float: left;
padding: 0px;
position: relative;
margin-top: 0px;
clear: left;
}
#news td {
background: url(../sh/bilder/yellarrow.gif) no-repeat 0px .3em;
padding-left: 15px;
width: 165px;
vertical-align: top;
}
#afuppgifter {
}
#afuppgifter td {
padding: 0px 0px 0px 10px;
text-align: left;
}

#footer {
background:#27253E;
width: 621px;
height: 25px;
float: left;
padding: 5px;
position: relative;
color: #FFFFFF;
text-align: center;
clear: left;
top: 0px;
}
#footer a {
color: #FF0000;
text-decoration: none;
}
#footer a:hover {
font-weight: bolder;
color: #FF0000;
}
.float_left {
float: left;
}
.float_right {
float: right;
}

@charset "UTF-8";

/* --- OBS! NEDANSTÅENDE CSS-REGLER FÅR ENDAST ANVÄNDAS FÖR ATT PÅVERKA TEXTEN PÅ SIDAN. CSS FÖR LAYOUT SKA SKAPAS I SEPARATA CSS-REGLER. OBS! --- */

/* --- Wildcard-tecknet (*) påverar texten på hela sidan vad beträffar färg och teckensnitt. Detta kan göras eftersom den mesta texten är vit. Där annan textfärg ska användas anges detta i en separat css-regel */
* {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin:0;
}
/*Huvudheadingen*/
h1 {
font-size: 2em;
}'
/*Secundära headingen*/
h2 {
font-size: 1.5em;
}
/*Underheading*/
h3 {
font-size: 1.1em;
line-height: 1.3 em;
font-weight: bold;
}
/*ingresstext*/
h4 {
font-size: 1.1em;
font-style: italic;
font-weight: normal;
line-height: 1.4em;
}
/*Text för S&H finans ränta behövs egentligen inte i denna mallen så behövs denna för något annat så ta denna*/
h5 {
font-size: 2em;
color: #FFFFFF;
background: #FF0000;
padding: 7px;
}
/*förklaringstext liten och i italic*/
h6 {
font-size: 0.8em;
font-style: oblique;
}

p {
/* --- margine-top ger ett avstånd på 5 px före alla stycken ---*/
margin-top:5px;
}

#rightcolumn {
line-height: 1.4em;
color: #FFFFFF;
padding: 20px 5px 5px 5px;
}

#leftcolumn a {
padding-right: 2px;
}
#news a {
text-decoration: none;
color: #000000;
}
#news a:hover {
font-weight: bold;
}
.nyhet {
font-weight: bold;
color: #FF0000;
}
@charset "UTF-8";

/* Definierar marginaler, indrag och placering av menyns yttre box som innehåller "knapparna"*/
#topmenu ul {
margin: 0;
padding: 0;
float: right;
list-style: none;
}

/* Definierar utseendet på och hur varje knapp ska placeras i förhållande till föregående*/
#topmenu ul li {
float: left;

}

/* Design av utseendet på knapparna och texten*/
#topmenu ul li a:link, #topmenu li a:visited {
color: #FFFFFF;
text-decoration: none;
display: block;
width: auto;
background: #27253E;
padding: .2em .5em;
margin-right: 0.2em;
border-left: solid;
border-left-width: 1px;
}

/* Byter färg på knappar och gränslinjer då pekaren är över resp då länken är aktiv*/
#topmenu ul li a:hover, #topmenu li a:active {
color: #FFFFFF;
font-weight: bold;
}

#topmenu ul ul {
position: absolute;
left: -25em;
z-index: 1020;
}

#topmenu ul li:hover ul, #topmenu ul li:focus ul {
position: absolute;
left: auto;
z-index: 1020;
}

Lave
Lave's picture
Offline
Regular
Last seen: 11 years 51 weeks ago
Timezone: GMT+2
Joined: 2009-09-07
Posts: 12
Points: 0

Yeah when I take the script

Yeah when I take the script out it all becomes fine except that the submenus aren't working of course.
Sorry for all the code didn't what to put in and what not to put in. I will try and use the template that is working and replace it with the one not working and see what happens

Here is the html file:

Välkommen till Söderberg & Haak - Amazone ledande från skörd till skörd

Någon nyhet från Amazone

eller om en produkt som är aktuell för skörden just nu.

 

 

Amazone

1883 grundade Heinrich Dreier företaget Amazonen Werke. Idag har Amazone vuxit ett internationellt företag med en omsättning som överstiger XXX miljoner Euro (2008).

 

Störst i Europa på Teknologi från skörd till skörd

Amazone är Europas ledande tillverkare med ett komplett program för jordbearbetning, sådd, växtkraft och växtskydd.

 

Söderberg & Haak har haft ett långt samarbete med Amazone. Redan i slutet av 1960-talet började vi importera Amazone konstgödselspridare. 1998 introducerades Amazone burna och bogserade sprutor och i början av 2000-talet utökades programmet med såmaskiner och jordbearbetningsredskap.

 

Länk till Amazones internationella webb:

www.amazone.de

) måste textformateringen ligga i css-regeln för #newsheader-->

Aktuellt

från Amazone


Here are the css files:

@charset "UTF-8";

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
background-color: #CCCCCC;
margin: 0px;
}

#wrapper {
width: 800px;
height: 730px;
margin-right: auto;
margin-left: auto;
position: relative;
}

#header {
width: 800px;
height: 170px;
background: #FFFFFF url(../amazone/bilder/amazonehuvud.jpg) no-repeat;
clear: both;
position: relative;
}

#header a {
text-decoration: none;
color: #fff;
padding: 5px;
}

#topmenu {
width: 632px;
height: 1.8em; /*höjden behöver egentligen inte anges - anges bara för att den ska synas i layouten*/
top: 134px;
float: none;
position: relative;
clear: both;
background-color: #27253E;
}

#content {
width: 800px;
float: left;
height: 400px;
top: 0px;
position: relative;
}

#leftcolumn {
width: 130px;
height: 475px;
float: left;
position: relative;
background-color: #FFFFFF;
z-index: 100;
}

/*vertikal meny*/
#leftcolumn ul {
margin: 0;
padding: 0px;
list-style: none;
text-align: right;
line-height: 2.5em;
text-decoration: none;
background-color: #6F7383;
}
/*styling för vertikala menyn*/
#leftcolumn a {
color: #000;
text-decoration: none;
}

#leftcolumn ul {
list-style: none;
margin: 0;
padding: 0;
width:130px;
text-align: right;
}

#leftcolumn ul li {
height:100%;
background:#6F7383;
border-bottom:1px solid #fff;
position: relative;
float:left;
width:100%;
line-height: 30px;
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
}

#leftcolumn ul li ul li{
background:#6F7383;
}

#leftcolumn ul li a{
display:block;
padding: 2px 3px;
color:#FFFFFF;
}

#leftcolumn ul li a:hover {
background: #6F7383;
border-right:1px solid #fff;
border-left:1px solid #fff;
background: #1F1B3C;
color:#fff;
}

#leftcolumn ul li ul li a:hover{
background: #1F1B3C;
border-left:1px solid #fff;
color:#fff;
}

#leftcolumn ul ul {
position: absolute;
top: 0;
display:none;
}

#leftcolumn ul li:hover ul{
display: block;
left:131px;
}

#midcolumn {
width: 481px;
float: left;
position: relative;
padding: 15px 5px 5px 15px;
height: 455px;
display: block;
background-color: #FFFFFF;
overflow: auto;
text-align: left;
}
#midcolumn a, #midcolumn a:visited, #midcolumn a:active {
color: #FF0000;
text-decoration: none;
}
#midcolumn a:hover {
font-weight: bolder;
}
#afnamnlista {
text-decoration: none;
font-size: 1.2em;
line-height: 1.3em;
color: #666666;
}
#afnamnlista a:hover {
color:#FF0000;
font-weight: bolder;
}

#rightcolumn {
background: #D06821;
width: 158px;
height: 634px;
float: right;
top: -68px;
position: relative;
color: #FFFFFF;
}
#rightcolumn a, #rightcolumn a:visited, #rightcolumn a:active {
color: #fff;
text-decoration: none;
}
#rightcolumn a:hover {
font-weight: bolder;
color: #3F5333;
}
#newsheader {
position: relative;
float:left;
width: 616px;
height: 20px;
border-bottom: solid 2px #D06821;
padding-left: 15px;
font-size: 1.2em;
font-style: italic;
font-weight: bold;
background-color: #FFFFFF;
color: #000000;
}
#news {
background:#fff;
width: 631px;
height: 60px;
float: left;
padding: 0px;
position: relative;
margin-top: 0px;
clear: left;
}
#news td {
background: url(../sh/bilder/yellarrow.gif) no-repeat 0px .3em;
padding-left: 15px;
width: 165px;
vertical-align: top;
}
#afuppgifter {
}
#afuppgifter td {
padding: 0px 0px 0px 10px;
text-align: left;
}

#footer {
background:#27253E;
width: 621px;
height: 25px;
float: left;
padding: 5px;
position: relative;
color: #FFFFFF;
text-align: center;
clear: left;
top: 0px;
}
#footer a {
color: #FF0000;
text-decoration: none;
}
#footer a:hover {
font-weight: bolder;
color: #FF0000;
}
.float_left {
float: left;
}
.float_right {
float: right;
}

@charset "UTF-8";

/* --- OBS! NEDANSTÅENDE CSS-REGLER FÅR ENDAST ANVÄNDAS FÖR ATT PÅVERKA TEXTEN PÅ SIDAN. CSS FÖR LAYOUT SKA SKAPAS I SEPARATA CSS-REGLER. OBS! --- */

/* --- Wildcard-tecknet (*) påverar texten på hela sidan vad beträffar färg och teckensnitt. Detta kan göras eftersom den mesta texten är vit. Där annan textfärg ska användas anges detta i en separat css-regel */
* {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin:0;
}
/*Huvudheadingen*/
h1 {
font-size: 2em;
}'
/*Secundära headingen*/
h2 {
font-size: 1.5em;
}
/*Underheading*/
h3 {
font-size: 1.1em;
line-height: 1.3 em;
font-weight: bold;
}
/*ingresstext*/
h4 {
font-size: 1.1em;
font-style: italic;
font-weight: normal;
line-height: 1.4em;
}
/*Text för S&H finans ränta behövs egentligen inte i denna mallen så behövs denna för något annat så ta denna*/
h5 {
font-size: 2em;
color: #FFFFFF;
background: #FF0000;
padding: 7px;
}
/*förklaringstext liten och i italic*/
h6 {
font-size: 0.8em;
font-style: oblique;
}

p {
/* --- margine-top ger ett avstånd på 5 px före alla stycken ---*/
margin-top:5px;
}

#rightcolumn {
line-height: 1.4em;
color: #FFFFFF;
padding: 20px 5px 5px 5px;
}

#leftcolumn a {
padding-right: 2px;
}
#news a {
text-decoration: none;
color: #000000;
}
#news a:hover {
font-weight: bold;
}
.nyhet {
font-weight: bold;
color: #FF0000;
}
@charset "UTF-8";

/* Definierar marginaler, indrag och placering av menyns yttre box som innehåller "knapparna"*/
#topmenu ul {
margin: 0;
padding: 0;
float: right;
list-style: none;
}

/* Definierar utseendet på och hur varje knapp ska placeras i förhållande till föregående*/
#topmenu ul li {
float: left;

}

/* Design av utseendet på knapparna och texten*/
#topmenu ul li a:link, #topmenu li a:visited {
color: #FFFFFF;
text-decoration: none;
display: block;
width: auto;
background: #27253E;
padding: .2em .5em;
margin-right: 0.2em;
border-left: solid;
border-left-width: 1px;
}

/* Byter färg på knappar och gränslinjer då pekaren är över resp då länken är aktiv*/
#topmenu ul li a:hover, #topmenu li a:active {
color: #FFFFFF;
font-weight: bold;
}

#topmenu ul ul {
position: absolute;
left: -25em;
z-index: 1020;
}

#topmenu ul li:hover ul, #topmenu ul li:focus ul {
position: absolute;
left: auto;
z-index: 1020;
}

Lave
Lave's picture
Offline
Regular
Last seen: 11 years 51 weeks ago
Timezone: GMT+2
Joined: 2009-09-07
Posts: 12
Points: 0

I tried..

... to replace the css on the working file with the css on the non working file and it stoped working so there must be something with the css that makes the script throw it out.