19 replies [Last post]
tachi
Offline
Regular
Last seen: 15 years 35 weeks ago
Timezone: GMT-5
Joined: 2004-04-03
Posts: 11
Points: 0

http://becauseollie.knows.it/

ok, i know it's not finished yet but im trying to figure out why this works in IE and not mozilla...I won't even imagine what it does in opera :/

also, wondering how i can get the boxes that do come up in IE to be clickable, so I can click in them, scroll, etc, without them just collapsing.

any comments, suggestions, criticisms welcome

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

CSS fun :P

Hi

Is this a late April fool's joke?

Looks fine in IE 6 Win.

Looks the same in Firefox 0.8 Win

In Opera 7.23 Win there is no vertical gap between the squares and the mouseover rollover of images doesn't work.

Looks cool, whatever it is. Real nice use of graphics. Is it a girl? Yes, I think it is.

Trevor

tachi
Offline
Regular
Last seen: 15 years 35 weeks ago
Timezone: GMT-5
Joined: 2004-04-03
Posts: 11
Points: 0

CSS fun :P

aprils fools? no O.o

I fixed some of the problems I was having with IE, so now my text boxes appear and will stay when clicked, and even have a little hover image to close the middle box. This is all looks great in IE, but now in firefox....

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 15 years 46 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

CSS fun :P

I have a feeling that this will only work in IE.
What you have is a nested link (a link within a link) and that is not allowed.
<a href="#"><a href=""></a></a>

IE appears to cope with it but Firefox is probably doing it right.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

tachi
Offline
Regular
Last seen: 15 years 35 weeks ago
Timezone: GMT-5
Joined: 2004-04-03
Posts: 11
Points: 0

CSS fun :P

hmm, you're probably right about that. but i know that the text boxes werent coming up in mozilla before i put those nested links in. my other sites use the same basic thing and it works pretty well in both ie and mozilla.

tachi
Offline
Regular
Last seen: 15 years 35 weeks ago
Timezone: GMT-5
Joined: 2004-04-03
Posts: 11
Points: 0

CSS fun :P

ok, i took out the nested links and it at least looks ok in mozilla, but the boxes i have named #panel still only come up in IE, they are supposed to come up on the right, left, and middle of the screen when you click on an image in the grid.

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 15 years 46 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

CSS fun :P

They do on :hover

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

MalphasWats
Offline
Regular
Last seen: 13 years 5 weeks ago
Joined: 2004-03-22
Posts: 45
Points: 0

CSS fun :P

it's all lovely, but *what* does ollie know?!?

http//www.michael-watts.com

"Never put your face in a bag of angry squirrels"

tachi
Offline
Regular
Last seen: 15 years 35 weeks ago
Timezone: GMT-5
Joined: 2004-04-03
Posts: 11
Points: 0

CSS fun :P

lol MalphasWats. The site is going to be a collection of verse. poetry, lyrics etc. each image of the grid will have a separate piece of work.

Stu, I'm not sure what you mean. Are you saying the text boxes that come up in Mozilla come up on hover? I can only get the images to opaque when i hover over them in firefox, and nothing happens when I click either. but when I click in IE, the text boxes that I want come up just fine.

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 15 years 46 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

CSS fun :P

If you change the :active to :hover then Firefox will display the hidden <p>s
although they are slightly lower than in IE.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

tachi
Offline
Regular
Last seen: 15 years 35 weeks ago
Timezone: GMT-5
Joined: 2004-04-03
Posts: 11
Points: 0

CSS fun :P

ok yes, i see that. it makes the boxes appear in moz now, but how do i get them to stay when clicked, and if possible not hover. because, with the hover like that, the middle spaces of the grid are inaccessible

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 15 years 46 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

CSS fun :P

I have found that Firefox works with :focus and IE works with :active

http://www.stunicholls.myby.co.uk/book/index.html

But that does not appear to work with your setup.

I would try getting it to work with just one image first then build up the picture.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 15 years 46 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

CSS fun :P

As a very basic trial this works in both ~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> active </title>
<style type="text/css">
a, a:visited {color:#000;}
a span, a:visited span {display:none;}
a:hover {color:#000;}
a:active {color:#000; background:#fff;}
a:active span {display:block;}
a:focus span {display:block;}
</style>
</head>

<body>
<a href="#">This is some text<span>and this is some more</span></a>
</body>
</html>

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

tachi
Offline
Regular
Last seen: 15 years 35 weeks ago
Timezone: GMT-5
Joined: 2004-04-03
Posts: 11
Points: 0

CSS fun :P

http://becauseollie.home.comcast.net/test.html

Ok I tried doing it with one picture :? doesnt seem like i'll be able to get it to function the same way in each browser... looked great in IE, too bad I use firefox heh

tachi
Offline
Regular
Last seen: 15 years 35 weeks ago
Timezone: GMT-5
Joined: 2004-04-03
Posts: 11
Points: 0

CSS fun :P

http://becauseollie.home.comcast.net/test.html

ok start over lol, i decided to go about this a little different way, this test page will be what the content pages will look like, the index will look about the same as it is now but im going to just put hovers on all the left and right boxes numbered 1-8 that will extend to the left and right just like before. they won't need to scroll like the contents need to, so i figured the hover will do, since it works in firefox and IE.

on the test page the boxes don't quite line up in firefox, but i can fix that later. the thing i can't figure out is why the body, where the content is, won't opaque like it does in IE. the background for the text should be a dark opaque black.

and...the boxes 1-8 dont even show up in moz...but the body is opaqued...heh

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 15 years 46 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

CSS fun :P

It is possible to get this to work, but you cannot use an image in the Mozilla/Firefox link. The :focus doesn't appear to work using images.

So I have set up a small demo that uses a background image.

http://stunicholls.myby.co.uk/cssforum/active.html

Note also that you cannot use a scroll box for the text because as soon as you try to use the vertical scroll then the :focus / :active will no longer apply and the text will vanish.
IE will allow the mousewheel to scroll but this is not good practice.

So you could set up your image grid as a background and superimpose the links as necessary.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

tachi
Offline
Regular
Last seen: 15 years 35 weeks ago
Timezone: GMT-5
Joined: 2004-04-03
Posts: 11
Points: 0

CSS fun :P

lol, thats what i started doin this morning Tongue i noticed earlier that the scrolling was messed up between browsers with the way i had it. the way the test page is now though, you can scroll with both IE, firefox and mozilla, but in firefox and mozilla you have to click the scrollbar in order to get it to work. in IE you can scroll everyway, with the mousewheel, arrows, and the scrollbar itself.

but the test looks terrible in mozilla and firefox. the alignment stuff I can fix pretty easily between browsers but I can't figure out why firefox won't opaque the body like moz and IE does. also can't figure out why moz isnt drawing the link boxes...

tachi
Offline
Regular
Last seen: 15 years 35 weeks ago
Timezone: GMT-5
Joined: 2004-04-03
Posts: 11
Points: 0

CSS fun :P

http://becauseollie.home.comcast.net/test3.html

ok, gettin there, slowly but it's happening. this looks great in IE, but for some reason I cant get it to look right in firefox, when i change the #fixright position it won't move in firefox. does the same for moz.

tachi
Offline
Regular
Last seen: 15 years 35 weeks ago
Timezone: GMT-5
Joined: 2004-04-03
Posts: 11
Points: 0

CSS fun :P

ok finally got it almost finished. the css is almost done, now all I'm trying to do is get the index.html to redirect to indexm.html if the browser is moz, etc. the css needs a little work for moz/firefox, just a few number changes. I was hoping someone could suggest a way, if there is one, to redirect to a different css file if the browser is IE or moz. if not I'll just have to keep trying to do it with javascript.

http://becauseollie.knows.it/

please let me know if any IE users see some issues. i know it looks off position in moz, but it looks and works pretty well in IE for me

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 15 years 46 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

CSS fun :P

You could use IE's Conditional Comments to check if the browser is IE and if so load the IE.css as an alternative.

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk