Forum Moderators: not2easy
The things I cannot figure out:
1. The navigation should be directly under the large image (in the bordered box) and the image should display above it.
2. The images are slightly to the left in Firefox but look perfect in IE (IE 6 anyway).
3. The navigation goes behind the images but I am thinking this will straighten out once the nav is in the correct place?
Can anyone tell me how to fix these? I have tweaked until I am blue in the face. Thanks
[edited by: jatar_k at 10:01 pm (utc) on June 2, 2008]
[edit reason] no urls thanks [/edit]
First off: personal URL's aren;t allowed, I guess a moderator will fix that soon.
Please submit some code (minimal) that till exhibits the problem.
most of us out here warn against developing in IE: there are way too many bugs in IE that pt you on the wrong foot. Develop in any browser you like but IE: (Firefox, safari, opera, ...). Fix it al lin those before you look at it in IE.
To then fix it in IE has a nice trick: conditional comments: yoou can make one for IE6 and one for IE7 (their bugs differ) and fix it for them without needing to touch the layout in the more standards compliant browsers. It'll save you tons of frustration and time if you go that way.
To get inspired there are literally hundreds of examples similar to what you're trying to do in the image gallery category.
Also you have nested tables in there, that'll not get you good marks out here ;-)
So let's start over.
You want a menu that upon hover displays a 800x269 image relevant to each of them.
The body should be centered, but I'm unsure how you want the buttons to appear.
Still lets start with html like this:
<ul id="menu">
<li><a href="#1">First red<img src="1.jpg" alt="red" /></a></li>
<li><a href="#2">Second green<img src="2.jpg" alt="green" /></a></li>
<li><a href="#3">Third blue<img src="3.jpg" alt="blue" /></a></li>
<li><a href="#4">Fourth yellow<img src="4.jpg" alt="yellow" /></a></li>
</ul>
I'll take this more as a teaching opportunity than as a here is code that'll fix your problem approach, so stick with me and have some patience as well as some tries on your own.
#menu a img {
display:none;
}[/quote][/pre]does that for me
next we want the <ul> to display as a menu, not as a list.
plenty of options around but haivng seen some of your site
let's say I want relatively big boxes that sit under the large image
Remember I'm not even looking at it in IE at this point, I could not care less how it looks there.Before I add more, I'm going to zap the default paddings and margins as they'll work against me.
[quote][pre]
* {
margin:0;
padding:0;
}
So now I want the <a> displayed as big blocks, 200pix wide, text centered in them and somewhat tall:
#menu a {
float: left;
width: 200px;
height: 3em;
}
Ah, now we see the bullets, they'll have to go.
and the text seems not centered in the boxes.
Now how do I know where the boxes go ?
I use the webmaster toolbar in firefox, it shows me ... if you don't use such a thing, try adding borders or outlines on the elements.
#menu {
list-style:none;
}
To center the text in the large <a> tags
#menu a {
float: left;
width: 200px;
height: 1em;
padding:1em 0;
text-align:center;
border:1px solid orange;
background-color: black;
color:white;
text-decoration:none;
}
Ok, so now this needs to move down, again we get a number of options,
but it's easiest if we do not remove it from the flow if we are going to have content after this, so lets add a 269px margin above it:
#menu {
list-style:none;
margin-top:269px;
}
Looks better already.
So now the images need to come back on hover and we're almost there:
#menu a:hover img {
display:block;
position:absolute;
top:0;
left:0;
}
Ok, so that leaves me with:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style>
* {
padding:0;
margin:0
}
#menu a img {
display:none
}
#menu a {
float:left;
width:200px;
height:1em;
padding:1em 0;
text-align:center;
border:1px solid orange;
background-color: black;
text-decoration:none;
color:white;
}
#menu {
list-style:none;
margin-top:269px;
}
#menu a:hover img {
display:block;
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div id="wrapper">
<ul id="menu">
<li><a href="#1">First red<img src="1.jpg" alt="red" /></a></li>
<li><a href="#2">Second green<img src="2.jpg" alt="green" /></a></li>
<li><a href="#3">Third blue<img src="3.jpg" alt="blue" /></a></li>
<li><a href="#4">Fourth yellow<img src="4.jpg" alt="yellow" /></a></li>
</ul>
</div>
</body>
</html>
I next tested it in safari, works exactly the same.
So that leaves testing it in IE (I don't do that for fun), but I would add conditional comments to add any fixes I need there.
I took in the above two things I know about IE into account already:
- can't layout the body like you want, you often need that wrapper div
- can't hover on other things than an <a> tab, so that's the one we hover.
Testing IE is left as an exercise for now.
<style>
<style type="text/css">
It does work if you have the images as existing files ... seems not to do much if you don't have the referenced images.
When I added the orange border on #menu a, I actually increased size of the block by 2 pixels, in order to match up withthe images, I'll need to reduce width on the content by those 2 pixels
(note: IE's broken box model will mess with your head here)
So that should become:
#menu a {
float: left;
width: 198px;
height: 1em;
padding:1em 0;
text-align:center;
border:1px solid orange;
background-color: black;
color:white;
text-decoration:none;
}
or I could use an outline instead of a border. (outlines take up no space)
Next let's center the wrapper on the page as that'll bring some interesting stuff into play.
To center the wrapper we set it's width and left and right margins to auto:
#wrapper {
width:800px;
background-color:black;
color:white;
margin:0 auto;
}
Hmm, this images didn;t follow along, as they are out of the flow, so we need to center absolutely positioned elements. Since we know the size of out images, we can center them by using negative margins. First, let's put their left margin at 50%, and then go 400pixels back with the margin.
#menu a:hover img {
display:block;
position:absolute;
top:0;
left:50%;
margin-left:-400px;
}
(there are a number of other techniques to center absolutely positioned elements, this one seems the neatest here)
But wait a second, that #wrapper had a black background, why don't we see a huge black section in the middle of the page ?
Well the #wrapper is collapsing: there's nothing with content in it just yet: the <ul> contains floats (removed from the flow), and our html has nothing else for now.
So we could end up with something like this in the end:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
body {
background-color:gray;
}
#wrapper {
width:800px;
background-color:black;
color:white;
margin:0 auto;
}
#menu a img {
display:none;
}
#menu a {
float:left;
width:198px;
height:1em;
padding:1em 0;
text-align:center;
border:1px solid orange;
background-color: black;
text-decoration:none;
color:white;
}
#menu {
list-style:none;
margin-top:269px;
}
#menu a:hover img {
display:block;
position:absolute;
top:0;
left:50%;
margin-left:-400px;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Untitled</h1>
<ul id="menu">
<li><a href="#1">First red<img src="1.jpg" alt="red" /></a></li>
<li><a href="#2">Second green<img src="2.jpg" alt="green" /></a></li>
<li><a href="#3">Third blue<img src="3.jpg" alt="blue" /></a></li>
<li><a href="#4">Fourth yellow<img src="4.jpg" alt="yellow" /></a></li>
</ul>
<h2>Ipso</h2>
<p>Ipso lorem</p>
</div>
</body>
</html>
Again: I'd be surprised if it worked in IE, but that's to be fixed in two conditional comments.
As to why conditional comments:
Cause you're dealing with buggy implementations, that we only can hope will go away. Relying on more parsing bugs (hacks) is likely to work counterproductive as MSFT will use it as a reason not to make IE8 or 9 or whatever version they eventually will drop their old ways.
I just found it strange you had given code to a 'newby' (hate that word) that only worked in one browser, and then only by chance. The code above fails (doesn't look right) in IE (all versions) opera and safari. The reason is due to the LI element.
Add this to the CSS to see whats going wrong
li {border: 2px solid #fff;}
And one of my pet peevs is people not adding focus for keyboard users. (#menu a:hover img, #menu a:focus img).
Does (#menu a:hover img) even work in IE6 sorry I don't have a copy to test.
Can I do better ;) yes. But... you started it now finish it properly. [said with a cheesy grin and a hug]
Top tip move your A tag CSS into the LI
eg
#menu li {
float:left;
width:198px;
height:1em;
padding:1em 0;
text-align:center;
border:1px solid orange;
background-color: black;
}
#menu a {
text-decoration:none;
color:white;
}
Oh and if you did the above it looks ok in IE8beta2 ;)
I don't have an Opera copy right now - if it fails there, then sure it should be fixed. If it fails in safari for windows, ... then I'll learned something as well (always good to learn), but bad to hear that safari for windows and for mac might render different (what was he problem you saw in safari, what version of safari? (I might have missed it as well of course).
I wasn't so much saying this is the final best code. I was merely trying to show a way to get there without copying, without being handed a "this will do it all, now go". I was more trying to show how *I* get there from nothing to start with except for some CSS knowledge.
What I was mainly trying to achieve was to try to give a rendering of the thought process, on how to start it from scratch.
I think the thought process in getting there is more important than the code itself. I have myself looked at a few advanced "how did they do that in CSS" examples, and often wondered: nice, and the code will tell me ho it works, but how to you get to that from nothing isn't mostly indicated in any way.
I will most likely continue for IE if I've the time and courage, -I normally don't touch IE, not even with a flagpole unless I really have to (or get paid to do it)-.
That said (without trying, but I'm pretty sure) if you only make the li large instead of the a that you end up with a small clickable area inside a large button..., and you won't be able to let the colors change on hover without adding the hover on the li (IE...) (that hover something I was going to try to show too)
I think I like myself sliding door for menus, but I thought getting a relatively new person on with all the fine things of sliding doors is something for lesson 2 or even a bit later than that.
Even then, a float on the li might be enough, and as I said, you discover it when you add layout, and then fix what you did, that's the process you use when discovering things vs. knowing it up front.
So I *fully* agree (and I even wrote it) that in all likelihood it'll not work in IE (and I don't really care all that much at the early stages), the point I was trying to make is to ignore IE and finish what you want it to do in the other browsers first.
Oh and BTW: there are some more intentional errors in it, seems you need to search deeper ;-), I was/am teaching the way to get there, the surprises along the way etc, not how it looks when you are there.
Basically I'm threating the roadtrip itself as the important part of the vacation, not the beach.
Problem is that I don't really know what the OP wanted, so if he could jump in that'd be nice to set me a few more simple goals.
But conditional comments nah not for this.
Also is there a need for the A tag? its not a link. Unless its there cos IE5 doesnt do mouseover on anything else.
anyhoo carry on
The <li>s (without border) have nothing to show for themselves (They only contain a floated element and hence should collapse out of the way. The li was one of the things I'd be expecting IE to stumble over, (borked box model...). Since I had no look as of yet at it in IE, I just hope I didn't trigger too many bugs, cause they often give me loads of headaches before I get them fixed/worked around.
Appi2: don't worry about being wrong, the easiest way not to make mistakes is do nothing, by doing things you take chances of being wrong. There's nothing to be done about that.
There are a few problems remaining: there's now a white border around the hovering images. Those are "normal" for images inside an <a>, either we could do a reset for all borders in the layout of "*" or we could simply add it to:
#menu a img {
display:none;
border:none;
}
Ok, another one is that having added the <h1> above the menu pushed down the menu while leaving the images up there. Now I'm gong to have to make choices ... and it seems that'll choose to have something up there, but not just a simple text, lets make sure we can add more in there. So lets make it give the h1 a wrapping div with an id and style it to sit in the 800x269px area, holding e.g. that h1, but perhaps some more text paragraphs as well.
Either we can try to absolute position it, or we can try to make it the size of the image and then remove the margin that's been pushing the menu down.
Let's keep it easy and go for the absolute positioning that we already have for the images.
So the <h1> becomes:
<div id="banner">
<h1>Untitled</h1>
<p>ipso lorum</p>
</div>
And I'll try to add the #banner to the css already there for the images:
#banner, #menu a:hover img {
display:block;
position:absolute;
top:0;
left:50%;
margin-left:-400px;
}
Hmm, now I lost the black background up there again (as #wrapper container is again collapsing), and I notice also that while the positioning looks ok, it's not as that div does have the same size as the images, so giving them all the right size should work:
#banner, #menu a:hover img {
display:block;
position:absolute;
top:0;
left:50%;
margin-left:-400px;
width:800px;
height:269px;
background-color:black;
}
Now this gives the images their size (note I didn't do it in the html, so that's good, and I also added a black background under the images (might be an issue if they were not jpegs, but the OP's layout was rather dark so I'm not going to run into trouble with imgaes that expect a white background in his case.
Note the images now touch the buttons, so you can hover nto the image and click there too.
Ok, now some more decoration of the bottons, to make them look more interesting to click on:
#menu a:hover {
color:orange;
background-color:silver;
}
Seems to work nicely in opera, firefox and safari:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
body {
background-color:gray;
}
#wrapper {
width:800px;
background-color:black;
color:white;
margin:0 auto;
}
#menu a img {
display:none;
border:none;
}
#menu a {
float:left;
width:198px;
height:1em;
padding:1em 0;
text-align:center;
border:1px solid orange;
background-color: black;
text-decoration:none;
color:white;
}
#menu a:hover {
color:orange;
background-color:silver;
}
#menu {
list-style:none;
margin-top:269px;
}
#banner, #menu a:hover img {
display:block;
position:absolute;
top:0;
left:50%;
margin-left:-400px;
width:800px;
height:269px;
background-color:black;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="banner">
<h1>Untitled</h1>
<p>ipso lorum</p>
</div>
<ul id="menu">
<li><a href="#1">First red<img src="1.jpg" alt="red" /></a></li>
<li><a href="#2">Second green<img src="2.jpg" alt="green" /></a></li>
<li><a href="#3">Third blue<img src="3.jpg" alt="blue" /></a></li>
<li><a href="#4">Fourth yellow<img src="4.jpg" alt="yellow" /></a></li>
</ul>
<h2>Ipso</h2>
<p>Ipso lorem</p>
</div>
</body>
</html>
Ok, next time we fire up IE.
[edited by: SuzyUK at 8:31 am (utc) on June 7, 2008]
[edit reason] smilies in code [/edit]
Looking at it in IE7 the layout is messed up (as appi2 said).
Seems like the LI isn't fully collapsing, so instead of trying it do disappear, let's float it out of the way (actually the li will stay around, ready to be styled if we need it.
We can either do that in all browsers, but then I'd have to test it there again, or we can use a conditional comment. I'm going to go for the latter, although I'll readily admit I might in real life go for the first, but it seems I triggered too few IE7 bugs, so for the educational value of showing how to do conditional comments:
Add below the style in there:
<!--[if IE 7]>
<style type="text/css">
#menu li {
float: left;
}
</style>
<![endif]-->
That was easy, over to the other virtual machine that's still on IE6 ...
For the standards compliant browsers the above is a comment, they'll ignore it fully.
IE6 is next
<!--[if lte IE 6]>
<style type="text/css">
#menu li {
float: left;
}
</style>
<![endif]-->
Note I also let it apply to older version than IE6, I'm not sure if they need it (as I don't have them to test any longer, but I guess it'll help them.
Now there's much more up with it, and I'm not sure I encountered all of them before but let's fix those I know how to fix.
Now some out here will tell me to rip out my xml header to keep IE6 out of quirks mode (and it'll behave marginally better there (but by far not complete))
Our wrapper isn't centering. A common thing for IE to play on you.
The solution is to center the text in the body and to undo that on the wrapper:
body {
text-align:center;
}
#wrapper{
text-align:left;
}
now I'm sure I'll get comment to get out of quirks mode as then it would be fixed (but I like my code to validate a lot, and it will not fix all trouble)
Also the buttons shrank, that's the broken box model at work for you:
So we add this in the IE6 conditional comment (note that I have at some point fixed it to account for the border being drawn around the content of a certain size. Well to mess with your understanding, IE6 often doesn't work like that, so you need to do it the wrong way:
#menu a {
width:200px;
}
While this fixes my initial problem with the width of the buttons nicely, all of a sudden now the text under the buttons gets pushed way down ...
Yeah, IE6 can drive you nuts ...
Seems it's the <ul> that's behaving badly, but you have to guess it on your own as as soon as you touch it with e.g. a border it behaves entirely different.
What does help is to float it out of the way ... (it's only got floats in it anyway)
#menu {
float:left;
}
Now there's a few problems left I'm going to have to use some googling for as I've never encountered it before:
once you hover over the buttons, the images appear (intended), but wen you stop hovering, they're not going away ...
Also the banner is a no show (I can make it appear by stopping being in quirks mode, but the hover trouble remains.)
So I guess I'm in trouble here for now (I said I hated IE...).
If anybody wants to jump in (I'm falling asleep where I sit, so it'll be for in the few days): this is the code:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
body {
background-color:gray;
}
#wrapper {
width:800px;
background-color:black;
color:white;
margin:0 auto;
}
#menu a img {
display:none;
border:none;
}
#menu a {
float:left;
width:198px;
height:1em;
padding:1em 0;
text-align:center;
border:1px solid orange;
background-color: black;
text-decoration:none;
color:white;
}
#menu a:hover {
color:orange;
background-color:silver;
}
#menu {
list-style:none;
margin-top:269px;
}
#banner, #menu a:hover img {
display:block;
position:absolute;
top:0;
left:50%;
margin-left:-400px;
width:800px;
height:269px;
background-color:black;
}
</style>
<!--[if IE 7]>
<style type="text/css">
#menu li {
float: left;
}
</style>
<![endif]-->
<!--[if lte IE 6]>
<style type="text/css">
body {
text-align:center;
}
#menu {
float:left;
}
#menu li {
float: left;
}
#menu a {
width:200px;
}
#wrapper{
text-align:left;
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="banner">
<h1>Untitled</h1>
<p>ipso lorum</p>
</div>
<ul id="menu">
<li><a href="#1">First red<img src="1.jpg" alt="red" /></a></li>
<li><a href="#2">Second green<img src="2.jpg" alt="green" /></a></li>
<li><a href="#3">Third blue<img src="3.jpg" alt="blue" /></a></li>
<li><a href="#4">Fourth yellow<img src="4.jpg" alt="yellow" /></a></li>
</ul>
<h2>Ipso</h2>
<p>Ipso lorem</p>
</div>
</body>
</html>
[edited by: SuzyUK at 8:31 am (utc) on June 7, 2008]
[edit reason] those darn smilies [/edit]
thanks for writing it up swa :)
as appi2 noted along the way there is more than one way to skin a cat with this CSS thing, but swa's write up covers the journey quite well IMO.
Doesn't this
#banner, #menu a:hover img {
...
width:800px;
height:269px;
...
}
Mean that on hover the image will be 800x269.
You would be better to have a separate container for the images.
I think your IE6 problems stem from the same block, on hover the image gets set to position absolute but previously
#menu a img {
display:none;
border:none;
}
Replacing it with this
#menu img {
position:absolute;
left:-999px;
border:none;
}
would solve the sticky problem.
Anyhoo ,good morning, carry on.
Appi2: Thanks for the suggestions, I'll try to get them incorporated, was too tired last night to continue it all.
FWIW: The images the OP was using were 800x269 ...
I'll be back later today to finish it up (I hope and try not to underestimate the curve balls IE6 can throw)
So we add
#menu a img {
display:block;
position:absolute;
left: -10000px;
}
to the conditional comment for IE6, and yep then it works (still find the what IE6 does with the original code *weird* Seems :hover's limited support is even more limited than I realized.
Now on to the #banner that's still missing painfully.
I've no idea of what the actual bug is, so I first tried to position it away from the area where the images end up (not under the #menu), but it just isn't appearing.
Next I tried giving it haslayout (adding zoom:1): still no luck.
Position:relative: yep that one works, but obviously creates the double of the height we need. No wsince we're fixing bugs, I'll go ahead and remove the top margin of #menu instead of actually finding the bug and fixing it.
So that leaves me with:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
body {
background-color:gray;
}
#wrapper {
width:800px;
background-color:black;
color:white;
margin:0 auto;
}
#menu a img {
display:none;
border:none;
}
#menu a {
float:left;
width:198px;
height:1em;
padding:1em 0;
text-align:center;
border:1px solid orange;
background-color: black;
text-decoration:none;
color:white;
}
#menu a:hover {
color:orange;
background-color:silver;
}
#menu {
list-style:none;
margin-top:269px;
}
#banner, #menu a:hover img {
display:block;
position:absolute;
top:0;
left:50%;
margin-left:-400px;
width:800px;
height:269px;
background-color:black;
}
</style>
<!--[if IE 7]>
<style type="text/css">
#menu li {
float: left;
}
</style>
<![endif]-->
<!--[if lte IE 6]>
<style type="text/css">
body {
text-align:center;
}
#wrapper{
text-align:left;
}
#menu {
float:left;
margin-top:0;
}
#menu li {
float: left;
}
#menu a {
width:200px;
}
#menu a img {
display:block;
position:absolute;
left: -10000px;
}
#banner {
position:relative;
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="banner">
<h1>Untitled</h1>
<p>ipso lorum</p>
</div>
<ul id="menu">
<li><a href="#1">First red<img src="1.jpg" alt="red" /></a></li>
<li><a href="#2">Second green<img src="2.jpg" alt="green" /></a></li>
<li><a href="#3">Third blue<img src="3.jpg" alt="blue" /></a></li>
<li><a href="#4">Fourth yellow<img src="4.jpg" alt="yellow" /></a></li>
</ul>
<h2>Ipso</h2>
<p>Ipso lorem</p>
</div>
</body>
</html>
Now we could go to the next step of it (which is debatable) and see what of these IE fixes still work in the standards compliant browsers and get them there too.
I personally am against doing that: it are bugfixes for broken implementations in my mind. If I can write code for Firefox, safari and Opera and all 3 handle it with different implementations without a glitch, the code should be sound enough. I'm hope writing more future proof code by doing my thing with in in the code all browsers get.
That way the browser crafters at Microsoft get no excuse from me to continue what they did wrong in their next version of IE, they get served nothing but what I understand how CSS works from the standard.
[I've in the past (before I knew about/used conditional comments) often added IE stuff in the rest of my CSS, but I'm happy to have stopped doing that.]
I guess that concludes the tutorial for now.
I think I spent more time on writing it up, than on figuring things out, except for the IE6 part, there's always tons of work to get it working in IE, I think I do about 1.5 times original amount for the 2 IE versions. For me IE always defeats logic as its "ways" aren't documented.
Thanks for the encouragements, reading this far, and all feedback.
I hope it sets you off to a good start creativeone.
For menus: search a bit for "sliding doors menu", it'll help you getting a very fancy menu that is both graphically appealing as has text based text in them to be friendly to users and search enignes alike ... But if you replace my static colors with background images, you can get a long way.
[edited by: SuzyUK at 5:38 am (utc) on June 9, 2008]
[edit reason] smileys in code [/edit]
#menu a:hover, #menu a:focus
#banner, #menu a:hover img, #menu a:focus img
Opens firefox safari... Yay we can now use keyboard.
Opens IE... oh for...
ok lets try
#menu a:hover, #menu a:focus, #menu a:active
#banner, #menu a:hover img, #menu a:focus img, #menu a:active img
Opens firefox, safari, IE... Yay we can now use keyboard.
Opens Opera ... Presses tab key. oh for...
Reads Use Opera without a Mouse [opera.com]
Presses A key presses Q key... hmmm. Reads more. Tries random key pressing, still no luck.
Finds a test page wCAG2.0 [w3.org] Look what doesn't happen in the top right menu of that page in Opera. Oh Opera what have you done!
Oh and while I'm on this subject, for you IE sucks people (who me?). Look at the difference between how IE7 shows the focus on the links just below "This failure relates to" and IE. Sorry firefox fans IE wins that one.
And finally
well done swa66
No conditional comments.
Any image size less than 800x267
JS cheat for opera.
have fun.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
body {
background-color:gray;
/*Set a fontstyle then we can elimimate different browser font defaults */
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
}
#wrapper {
width:800px;
background-color:black;
color:white;
margin:0 auto;
text-align:left;
}
#banner {
width:800px;
height:269px;
}
#menu { list-style:none; }
#menu li { float: left; }
#menu a {
float:left;
width:198px;
height:1em;
padding:1em 0;
text-align:center;
border:1px solid orange;
text-decoration:none;
color:white;
}
#menu a:hover, #menu a:active, #menu a:focus {
color:#000;
background-color:silver;
text-decoration:underline;
}
#menu a img {
display:block;
position:absolute;
top:0;
left: -10000px;
border:none;
}
#menu a:hover img, #menu a:active img, #menu a:focus img {
left:50%;
margin-left:-400px;
}
</style>
<script type="text/javascript">
function init() {
if (window.opera) {
var aTags = document.getElementsByTagName("A");
for (var i=0; i<aTags.length; i++) {
aTags[i].onblur = function() {
this.getElementsByTagName("IMG")[0].style.left = "-999px";
}
aTags[i].onfocus = function() {
this.getElementsByTagName("IMG")[0].style.left = "50%";
this.getElementsByTagName("IMG")[0].style.marginLeft = "-400px";
}
}
}
}
</script>
</head>
<body onLoad="init()">
<div id="wrapper">
<div id="banner">
<h1>Untitled</h1>
<p>ipso lorum</p>
</div>
<ul id="menu">
<li><a href="http://www.example.com/red.htm" title="The red page">First red<br>
<img src="1px-red.gif" width="800px" height="269px" alt="red"></a></li>
<li><a href="http://www.example.com/green.htm" title="The green page">Second green<br>
<img src="1px-green.gif" width="800px" height="269px" alt="green"></a></li>
<li><a href="http://www.example.com/blue.htm" title="The blue page">Third blue<br>
<img src="1px-blue.gif" width="400px" height="269px" alt="blue"></a></li>
<li><a href="http://www.example.com/yellow.htm" title="The yellow page">Fourth yellow<br>
<img src="1px-yellow.gif" width="200px" height="169px" alt="yellow"></a></li>
</ul>
<h2>Ipso</h2>
<p>Ipso lorem</p>
</div>
</body>
</html>
I'm really not trying to criticize or pick a fight or so.
I can see value in navigation with keyboards, esp. for those with some sort of special need, but those latter will have it suited for them without me adding it (they can use local style sheets, adapted browsers, ...), and I didn't violate the rules AFAIK that make it hard for them (e.g. I'm not using dotted outlines, I'm not removing default :focus rules, ...). Still I can see that value.
But if I get it right the price to pay to not using conditional comments and to have keyboard navigation is to have to use javascript in Opera (one of the most compliant browsers out there)? I'm sorry but I've no idea how/why that would be better.
Let's assume I'm relatively new to CSS and I see:
body {
...
text-align:center;
}
#wrapper {
width:800px;
...
margin:0 auto;
text-align:left;
}
I don't have time right now to try it, but how did you solve the borked box model giving the wrong width in IE6 to the <a>'s ?
One of the things I see relatively new people have trouble with is not understanding why and how it all works, and seeing us add in *magic* to make it all work. The point of the exercise above was to dispel some of that magic.
I'm not sure what you want to achieve, I guess I don't see it. E.g. the benefit of avoiding conditional comments at all cost (or a lot) escapes me. I'm on the contrary more and more convinced to use them even when I could easily avoid them in the current landscape of browsers ...
Esp. if -as it looks now- IE8 has a tiny chance of being standards compliant when released, I'm looking at some of my sites to make sure I'll not hand it any bit more than absolutely needed to get my layouts to work in FF, Safari and Opera.
Perhaps, instead of bickering, we need to start a discussion thread on it's own.
I can see value in navigation with keyboards, esp. for those with some sort of special need, but those latter will have it suited for them without me adding it (they can use local style sheets, adapted browsers, ...)
But if I get it right the price to pay to not using conditional comments and to have keyboard navigation is to have to use javascript in Opera (one of the most compliant browsers out there)? I'm sorry but I've no idea how/why that would be better.
No the loss of conditional comments have nothing to do with keyboard nav. While opera is a great browser, they have made a mess of the implementation of keyboard focus. They've done a microsoft and gone there own way. Opera is an excellent browser for accesabillity and usability but on this issue it fails. So because were web designers we try overcome this browsers error. Hence the javascript. Try the script, disable js in opera and use A or Q to navigate. The images will not display. I really hope I'm wrong on this and there some keyboard combo that means we don't need the js.
One of the things I see relatively new people have trouble with is not understanding why and how it all works, and seeing us add in *magic* to make it all work. The point of the exercise above was to dispel some of that magic.
Esp. if -as it looks now- IE8 has a tiny chance of being standards compliant when released
instead of bickering
And with the biggest cheesy grin ;)
swa66: don't worry about being wrong, the easiest way not to make mistakes is do nothing, by doing things you take chances of being wrong. There's nothing to be done about that.
