5 replies [Last post]
Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I've done a redesign of my company's site using CSS and have a couple of issues:

    I'm trying to do CSS image rollovers (a la Pixy's model) at the same time as doing image replacement. My problem is that I can't get the text to disappear. If I set the relevant tag to display: none; the image and text disappear. The effect I'm trying to achieve is nearly right when viewing in Firefox (except that there's still text there), but there's something weird going on in IE. I'm also using a resizing background image for the entire page (thanks goes to D. Elliot for this one). It looks fine in Firefox, IE and Opera, but it's doing something weird with the scrolling - it works if you use the scrollbar, but not if you use the scroll wheel on your mouse. :?
    Finally, I've got a <div> containing 3 float left <div>s with logos and captions that doesn't look like it's centering properly (looks OK on screen, but if you use the 'Outline Block Level Elements' that comes with Firefox's Web Developer extension, you can tell they're not). Also in IE, the logos don't clear the list above properly but in Firefox/Opera they do. And ideally, I'd like the logos to align along their baselines with the captions aligning along the top, but that might be asking too much :roll:

The URL for the page is http://www.kbs.com.au/index1.asp

Hope that's not too many questions. :oops:

[/]

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 23 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

CSS rollovers and other problems

Hi Tyssen,
With the image replacement you should put the link text in a span that is set to visibility:none; That should hide the text but leave the image visible.

<div id="ed"><h3><a href="/education/" title="Primary, secondary and tertiary education resources"><span>Education</span></a></h3></div> 
 
H3 span{visibility:hidden;}
To center the logos try adding this to #logos
margin-left:auto; margin-right:auto; 
text-align:center;

Hope that helps

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

CSS rollovers and other problems

Thanks for your answers Tony, they both worked! Tongue (I thought you'd be watching the Lions on TV though Wink )

Couple of questions though:

Why is the <span> needed? Why doesn't it work on the <h3> tag? I have the <h1> tag (although it's not also a link) set to display: none and it works fine. :? And which is better, display: none or visibility: hidden?

Also, I have margin: 0 auto; and text-align: center; set for #container (which contains the whole page) and text-align: center; set for the body. I thought these settings would flow on through to all other elements contained within them. Is that not so?

And what's going on with IE?? Sad One of the rollover images is appearing in multiple places where it's not s'posed to, the bullets don't appear on the list text (which also overlap the images below) and the text in my <h2> tag which is positioned nicely in Firefox & Opera is too far to the left in IE! :roll:

Something else I've just noticed: when I resize my page to 640 x 480, part of the left side of my page disappears.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 23 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

CSS rollovers and other problems

Hi Tyssen,
What's a TV Smile
The way you had it set up before setting the H3 to hide either with display or visibility would hide everything inside it. That would have meant the link and background-image would have disappeared.

Span is an inline element and as such is one of the few elements you can have within a link.

Setting the span to visibility:hidden; still reserves the space for the span just makes it invisible. On the other hand if you use display:none; it would effectively take the span away altogether so the space reserved for it would be used by other elements. You don't want that to happen as then the background-image would have no where to show up.

I can't see the Problem in IE with the rollover image.

The hidden left side is to do with the centering of the page and possibly the absolute positioned container.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

CSS rollovers and other problems

Tony wrote:
Setting the span to visibility:hidden; still reserves the space for the span just makes it invisible. On the other hand if you use display:none; it would effectively take the span away altogether so the space reserved for it would be used by other elements. You don't want that to happen as then the background-image would have no where to show up.

I get the same result for both display: none and visibility: hidden in Firefox, IE6 and Opera 7. Is that s'posed to happen?

Tony wrote:
I can't see the Problem in IE with the rollover image.

Not only is it happening in IE, but it's also happening in Firefox now too, but only when I view the pages served from the Internet: if I view the pages locally, they look fine. The only browser that gives me the same result local and remote is Opera.

I've added a couple of screenshots to show what I mean.

This is Firefox local:

This is Firefox remote:

The Business Services rollover is appearing in 2 additional (unwanted places).

And this is IE:

It's thrown in a couple of extra instances of the image for good measure. :?

Anyone know why this is happening? And is anyone else actually seeing the image duplication, or is it just me? :?:

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 23 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

CSS rollovers and other problems

Hi Tyssen,
I still don't see the second image in Firefox Shock

If you have a container without a width set and you set it's contents to display none the width of the container will contract, but if you used visibility hidden the container will stay the same size.
There are other things which can affect the outcome but that is the basic concept.