15 replies [Last post]
Steiner
Offline
Regular
Last seen: 17 years 34 weeks ago
Joined: 2005-06-09
Posts: 39
Points: 0

Hi all

I've made a first attempt at an all CSS page but it needs 2 fixes which needs to be XHTML1 transitional friendly in IE:

1. My top menus are made up of 2 'columns' and I'd like to control the color change of one when I role over the other. At the moment they just act independantly of each other. How can I alter this with CSS?

http://www.condottiero.com/rework/pano_tours4c2.html

2. In this sample, the header is screwed up and is caused by me simply adding a hyperlink to the logo graphic at the top left. Why is this??

http://www.condottiero.com/rework/pano_tours4c3.html

Thanks in advance!
Steiner

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

XHTML1 fixes required

1) You need to use javascript to do that.

2) You should specify which browser (IE) gives you trouble. The use of empty divs with bg images is trouble coming. The resizing of my IE window is impolite.

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.

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

XHTML1 fixes required

Quote:
XHTML1 transitional friendly in IE
IE does not support xhtml. Only modern browsers do.

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

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

XHTML1 fixes required

Well that page has just been closed smartish, I know Gary has mentioned this, but in case it wasn't clear, never, never mess with the users browser ever; it's not impolite it's downright invasive and not the province of the web designer to decide what size the users browser may be and you can not use it as a means to satisfy constraints in your design.

Remove that piece of code Smile

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

Steiner
Offline
Regular
Last seen: 17 years 34 weeks ago
Joined: 2005-06-09
Posts: 39
Points: 0

Oops

OK thanks for the candid feedback - I've removed that script (I wasn't convinced by it anyway as it served no real purpose).

Re. my original questions however, any ideas on what's causing the problem with #2? (forget about #1 - I'm handling it differently)

Steiner
Offline
Regular
Last seen: 17 years 34 weeks ago
Joined: 2005-06-09
Posts: 39
Points: 0

XHTML1 fixes required

kk5st wrote:
1) You need to use javascript to do that.

2) You should specify which browser (IE) gives you trouble. The use of empty divs with bg images is trouble coming. The resizing of my IE window is impolite.

cheers,

gary

Gary, sorry - the IE browser I'm using is version 6.0.2... sp2.

Re. the issue of empty divs with big images being trouble - could you expand on this? I'm not quite sure I follow?

Thanks!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

XHTML1 fixes required

The W3 says that UAs (browsers) should ignore empty <p></p>s, and they strongly suggest that all empty block elements be ignored. If a browser should someday follow the suggestion, and it will happen in +xml pages, you'll be missing all those images. If the image is a part of the page, make it foreground. Assume that all background images will be ignored and that all empty block elements will be ignored. If that messes up your page, you have a problem. Wink

Since you removed the script, I went back to view your page in IE and found that the link was gone. Are you no longer pursuing that issue?

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.

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

XHTML1 fixes required

Yes that's very laudable of the W3C Gary, but a bit of a bugger to observe!

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

XHTML1 fixes required

Hugo wrote:
Yes that's very laudable of the W3C Gary, but a bit of a bugger to observe!

In what way? If the background image is the only thing in the element, why not make it foreground? If there is other content besides the bg image, why then, there's no problem. But, my experience isn't all that broad, so there are very likely situations that my 'law' Shock doesn't apply to.

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.

Steiner
Offline
Regular
Last seen: 17 years 34 weeks ago
Joined: 2005-06-09
Posts: 39
Points: 0

XHTML1 fixes required

Quote:

Since you removed the script, I went back to view your page in IE and found that the link was gone. Are you no longer pursuing that issue?

Gary, nope - they're still there. Click here:

http://www.condottiero.com/rework/pano_tours4c3.html

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

XHTML1 fixes required

There are those situations where one is asked to code in all sorts of fiddly graphic embellishments, little arrows that must drop down into and over a backgrounds, little corner markers over elements already containing background graphics.They tend to be images that you wouldn't really want as foreground and as background elements have no real content as such.

Hugo.

Apologies Steiner for taking your thread slightly off topic.

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

Steiner
Offline
Regular
Last seen: 17 years 34 weeks ago
Joined: 2005-06-09
Posts: 39
Points: 0

XHTML1 fixes required

No problem Hugo - but do you have any idea why the header graphics are throwing my layout out after a simple addition of a hyperlink to itself :?:

For an example view of what it looks like in IE 6:

[/img]

My guess is that IE adds a surrounding pixel to an image with a hyperlink - thus making it think it's too wide to fit the enclosing space. But if that's the case, is there a work around?

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

XHTML1 fixes required

It's this line in your text rules css sheet:

a{ 
	text-decoration: none; 
	display:block; 
	color:#ffffff; 
	font-style: normal; 
>>>height: 100%; <<<<<<< 
}


Not sure why you want to make your generic anchor elements block level, they are an inline element, just make them block for specific instances of navigation etc.

All the height was doing is expanding the width across the header pushing the other elements down, if you were trying to gain a full clickable header then I think you'll have to find another way.

I have to say that your rules seem vastly complicated and probably a little overstated in places it makes following things rather difficult.

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

Steiner
Offline
Regular
Last seen: 17 years 34 weeks ago
Joined: 2005-06-09
Posts: 39
Points: 0

XHTML1 fixes required

Hugo - you're a bloody star! That block element had been placed there as an experiment many moons ago - I simply forgot about it.

Re. my css being vastly complicated - I can well believe it. I'm trying to teach myself and in the process am getting alot of help from friends. The combination of these factors is probably leading to dogs breakfast style, style sheets. Wink

Anyway - that aside, this helps a great deal and your help is much appreciated.

Many thanks!
Steiner

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

XHTML1 fixes required

Good catch, Hugo. I figured it was in the a rules, but there are, what, 53 of them? Smile

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.

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

XHTML1 fixes required

It was a bit of a job locating that text rule sheet to start with. Smile

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