15 replies [Last post]
premier69
Offline
Regular
Last seen: 14 years 29 weeks ago
Joined: 2006-04-05
Posts: 20
Points: 0

hi this should work, but i can't figure out why it doesn't in IE when it works fine in Firefox.
It's supposed to be a navigation menu located on the left side of the screen, when mouse moves over image changes from blurry to sharp and is a link. The links work in IE but not the hover effect.

there are 2 files, the external css and the html

This is the CSS file

body { color #030202 ; background-color #ebecf0; }

Alink { color #ff1d1d; background-image none; background-repeat repeat; background-attachment scroll; background-position 0 0; text-decoration none }
Avisited { color #b3b4ab; text-decoration none }
Aactive {text-decoration none}
Ahover {text-decoration underline; color red;}
#pbarnk { background-image url(bilder/button6.jpg); background-repeat no-repeat; background-attachment scroll; background-position left top; text-indent 80px; position absolute; top 440px; left 5px; width 80px; height 80px; display block; }
#pbarnkhover { background-position left bottom; }
#pforetag { background-image url(bilder/button5.jpg); background-repeat no-repeat; background-attachment scroll; background-position left top; text-indent 80px; position absolute; top 360px; left 5px; width 80px; height 80px; display block; }
#pforetaghover { background-position left bottom; }
#pklass { background-image url(bilder/button4.jpg); background-repeat no-repeat; background-attachment scroll; background-position left top; text-indent 80px; position absolute; top 280px; left 5px; width 80px; height 80px; display block; }
#pklasshover { background-position left bottom; }
#konf { background-image url(bilder/button3.jpg); background-repeat no-repeat; background-attachment scroll; background-position left top; text-indent 80px; position absolute; top 200px; left 5px; width 80px; height 80px; display block; }
#konfhover { background-position left bottom; }
#bild { background-image url(bilder/button2.jpg); background-repeat no-repeat; background-attachment scroll; background-position left top; text-indent 80px; position absolute; top 120px; left 5px; width 80px; height 80px; display block; }
#bildhover { background-position left bottom; }
#besk{ height 80px; width 80px; text-indent 80px; overflow hidden; background url(bilder/button1.jpg) no-repeat left top; position absolute; top 40px; left 5px; display block; }
#beskhover{ background-position left bottom; }

--------------------------------------------------------------------------------

And this is the HTML

<html>
<head>
<link rel="Shortcut Icon" href="favicon.ico">
<title>Ostkustens Aktivitets Centrum - Äventyrsbanan i Havslätt Oskarshamn</title>
<style type="text/css">
@import url(rollover.css);
</style>
</head>
<body>
<a href=beskrivning.html><div id="besk"></div></a>
<a href=beskrivning.html><div id="bild"></div></a>
<a href=beskrivning.html><div id="konf"></div></a>
<a href=beskrivning.html><div id="pklass"></div></a>
<a href=beskrivning.html><div id="pforetag"></div></a>
<a href=beskrivning.html><div id="pbarnk"></div></a>
</body>
</html>

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Re: Works in FF, why not IE?

premier69 wrote:
hi this should work, but i can't figure out why it doesn't in IE when it works fine in Firefox.

Did you read the stickies? Specifically the bit about IE needing a doctype to do anything right?

What am I talking about, of course you haven't . . . .

Verschwindende wrote:
  • CSS doesn't make pies

premier69
Offline
Regular
Last seen: 14 years 29 weeks ago
Joined: 2006-04-05
Posts: 20
Points: 0

Re: Works in FF, why not IE?

thepineapplehead wrote:
premier69 wrote:
hi this should work, but i can't figure out why it doesn't in IE when it works fine in Firefox.

Did you read the stickies? Specifically the bit about IE needing a doctype to do anything right?

What am I talking about, of course you haven't . . . .

You guessed correcly, my appologies.

I have now read through the:
"DocTypes: HTML or XHTML, Which is best ?"

And, sorry it's not obvious too me why it doesn't work.

The html file and CSS file are located here:

http://www.premier69.cjb.net/experiment/main.html

or if you want to download the files:

http://www.premier69.cjb.net/experiment.rar

If the source code i pasted in the thread is a nuisance.

drhowarddrfine
Offline
Leader
Last seen: 10 years 46 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

Works in FF, why not IE?

To emphasize the sticky piney pointed you to:
YOU WILL NEVER, EVER GET IE TO DISPLAY THE SAME AS MODERN BROWSERS WITHOUT A DOCTYPE!

See my link below. Use html4 strict. Then we can better help you.

In addition, re: hover, :hover only works on <a> tags in IE. Only modern browsers properly use the :hover tag on other elements.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Works in FF, why not IE?

Sorry if I was a bit harsh, but you've been here long enough and have enough topics to realise IE doesn't work without a doctype.

dr is right, IE only supports :hover on <a> elements. Google for the whatever:hover file, should do what you want Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

premier69
Offline
Regular
Last seen: 14 years 29 weeks ago
Joined: 2006-04-05
Posts: 20
Points: 0

Works in FF, why not IE?

thepineapplehead wrote:
Sorry if I was a bit harsh, but you've been here long enough and have enough topics to realise IE doesn't work without a doctype.

dr is right, IE only supports :hover on <a> elements. Google for the whatever:hover file, should do what you want Laughing out loud

Yes, I'm beginning to understand that the differences between IE and FF are more than what I thought just a few weeks ago.

premier69
Offline
Regular
Last seen: 14 years 29 weeks ago
Joined: 2006-04-05
Posts: 20
Points: 0

Works in FF, why not IE?

yes that did it!

I added this text in the header:

<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]--><!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}

</style>
<![endif]-->

and got the csshover.htc file

I shall prize you with moonshine!

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 26 weeks 3 days ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

Works in FF, why not IE?

But there is still no doctype there Evil

IT MUST HAVE A DOCTYPE Sad

premier69
Offline
Regular
Last seen: 14 years 29 weeks ago
Joined: 2006-04-05
Posts: 20
Points: 0

Works in FF, why not IE?

DisinfectedBarfbag wrote:
But there is still no doctype there Evil

IT MUST HAVE A DOCTYPE Sad

i beg to differ. it works, still what version of the doctypes would you say fits the best?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Works in FF, why not IE?

If you beg to differ , then stand by your convictions and stick to no DocType, but be assured when you do run into problems, you'll get a resounding "told you so" and a disinclination from members to help when CSS unpredictability is likely to occur.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 26 weeks 3 days ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

Works in FF, why not IE?

premier69 wrote:
i beg to differ. it works, still what version of the doctypes would you say fits the best?


Well if that's your attitude then you obviously know little about why it is imperative that there is one declared. As mentioned above you will run into all sorts of problems when you try to update it and to get help. I take it you haven't read up much about the subject.

As to which doctype, well if you did a bit of reading on this forum or on the W3C site you wouldn't have to ask. A simple google for it would enlighten you. And normally when it is suggested, folks see the reasoning behind it, you on the other hand can't. Oups

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 43 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Works in FF, why not IE?

premier69 wrote:
Quote:

IT MUST HAVE A DOCTYPE Sad

I beg to differ. it works, still what version of the doctypes would you say fits the best?

Well, who would know better, you or the people who defined the language and put the requirement for a doctype in the definition?

I know who I'd bet on.....

:idea:

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

premier69
Offline
Regular
Last seen: 14 years 29 weeks ago
Joined: 2006-04-05
Posts: 20
Points: 0

Works in FF, why not IE?

stop flaming me.
I Did read about doctypes, it's just VERY fresh to me, I had not heard of untill just recently.
No I'm not really sure just HOW important it is yet.
I'll get it eventually.
There where simply so many different doctypes and while i could exlude a few of them i'm not sure if this is pure html 4 or a form of xml, what makes it xml and so.
There are no frames on the project I'm working on, I saw one doctype for that.

In adobe golive when i use layers they're apparently DIV tags, is that CSS? or is it some sort of xml-html hybrid?

See? I'm confused.
I still think i'm making progress, 2 weeks ago I'd never heard of CSS.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 hours 16 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Works in FF, why not IE?

Use html 4.01 strict. HTML 4.01 because it is the current standard, and if you are not sure, there is no reason to add a new level of complexity with xhtml. Strict, because there is no good reason to use deprecated elements or attributes in a new document.

Use the full DTD, including the url because that puts IE into standards mode where it is more likely to follow the rules.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

premier69
Offline
Regular
Last seen: 14 years 29 weeks ago
Joined: 2006-04-05
Posts: 20
Points: 0

Works in FF, why not IE?

kk5st wrote:
Use html 4.01 strict. HTML 4.01 because it is the current standard, and if you are not sure, there is no reason to add a new level of complexity with xhtml. Strict, because there is no good reason to use deprecated elements or attributes in a new document.

Use the full DTD, including the url because that puts IE into standards mode where it is more likely to follow the rules.

cheers,

gary

that helped, thanks

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Works in FF, why not IE?

premier69 I'm sorry the Doctype post wasn't clear enough it was an attempt to clear up a lot of confusion in as simple a manner as possible.

To attempt to add some further clarity; as regards HTML/ XHTML they should not be regarded as two completely different things. whatever you do you are writing HTML , all XHTML is is an extension to html code that allows it to interoperate with the XML standard.

XML requires much stricter syntax to the markup, all XHTML is is straightforward html code but written to the stricter syntax, this essentially means that all open tags such as <br> <image> <link> etc that normally do not have a closing tag , as does say <p></p> need to be closed as all tags must be closed in XML and thus XHTML so the the empty image tag must end so <img... ="100" /> and <br />. As well as closing tags all tags and attributes must be lowercase letters.

So you are still writing HTML Just to a stricter syntax.

Writing to HTML 4.01 is still perfectly valid and will remain so, the strict definition of the DTD does not allow you to use tags and attributes that have been deemed to be redundant and replaced by better methods, and if you want to write good code you should write to this strict definition of the markup rules.

The DTD as a two fold purpose, as it largely hangs around doing nothing much it was seen as a useful way of switching browsers between two modes of rendering. Without it's presence browsers would use a quirky set of rules to determine how to interpret the CSS rules, with the DTD present and as long as it was of a certain configuration (either 'strict' or 'transitional' along with a url) it would switch browsers to 'Standards mode' where browsers would attempt to follow the official CSS specs far more closely, this is important as IE does many odd things when in quirks mode such as describe a dimensioned box along with it's borders ,padding very differently from the standards method resulting in vastly different widths and heights, where Firefox in quirks mode would still follow the standards method also IE does not implement certain rules if in Quirks mode.

As for the layers point firstly and most importantly 'Layers' is not an descriptive term for any property /object/tag in CSS/HTML put it out of your mind, it's something that Dreamweaver coined to describe their predilection for placing every element in the page as position absolute.

There are two types of generic element in HTML these are divs and spans they group or contain other elements and allow you to apply grouped rules and position nested sections of a layout , divs are block level and can hold all other elements spans are inline and are used to style specific portions of inline (text) elements both these tags in themselves carry no semantic( meaning) value.

So divs are an HTML tag/element not CSS as such but can and are styled through CSS but they exist as the most fundamental and basic element used in HTML to group and nest other semantic elements together.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me