ok, I've given up all hope of finding out how to make my page render well on IE (works fine on FF and Netscape) so is it possible to put something in the <head> of my document to tell IE browsers to go into Quirks mode or something and then change the code, or direct to a seperate page, for these browsers?
Any links on where I can find if this is possible, if it will work and how to do it?
This is the page I'm having trouble with, won't display in IE (http://www.kite.com.au/newindex.htm)
Kravvitz
10-13-2006, 06:54 PM
There is a way to force IE6 into quirks mode. I don't recommend it though.
I suggest you use conditional comments to supplement your main style sheet with one or more for IE/Win to add fixes where needed. Just remember that only IE5+/Win supports them.
About Conditional Comments (http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp)
Some more information on conditional comments can be found on this page. (http://www.positioniseverything.net/articles/multiIE.html)
QuirksMode.org : Conditional comments (http://www.quirksmode.org/css/condcom.html)
http://www.google.com/search?q=IE+conditional+comment
WebJoel
10-13-2006, 07:03 PM
Why would you want to encourage ineptitude (quirks mode) reading of your web page? I can hear the answer 'so that it will look okay in Internet Exploder"...
I see when using IE that "slices2" sort-of doesn't line-up with "slices" in IE.. Checking your code I noted:
#slices {
width: 320px;
float: right;
}
#slices2 {
float: right;
width:auto;
}
-Why would you want "slices2" to be "width:auto;" but the ajoining-top "slices" be 320px (stated actual width)? Perhaps stating "slices2" it's actual width will cause it to line-up (due to "float:right;") as it should... If it doesn't, -why not just *combine "slices and slices2" into ONE navigation, -problem solved that way. :)
Chris Robson
10-13-2006, 07:15 PM
WebJoel,
Thanks for the suggestion. I think I've tried those 3 possibilities but I'll try them again now. My initial response is this...
In playing around, I've discovered a possible source of the non-alignment in IE of the bottom set of slices. It's got to do with the relative size of the smallest and largest slices. If I group all of the slices into the one div (id=slices) with a width of either auto or 480px, the bottom two align properly but I loose the top 4 because the first and second move to fit on the one line and the third and fourth move to fit on the one line. They can do this because the total length of these 2 slices is equal to or less then the length of the bottom one. e.g. slice 1 of 190px and slice 2 of 190px is less then the eighth (bottom) slice at 467px.
What I don't follow is why the top slices do this. I've aligned them 'right' so why do they take any given opertunity to, effectively, align left.
(ah, so my grandfather was right when he used to say, 'don't leave a space in life son because, sure as eggs, something will come along to fill it'!)
More to the point, how can I stop them? I've tried 'block' as a property in 'slices' but this didn't help. Is there some way I can keep them in vertical line or such?
I've got to take my son to his football game right now but when I get back, I will set do each of your suggestions and post the results. Thanks Chris
Kravvitz
10-13-2006, 07:21 PM
Try this.
#slices a {
float: right;
clear: right;
}
Chris Robson
10-13-2006, 07:43 PM
Apparently football doesn't start for another hour so here are a few alternatives
I tried.
I tried making 'slices2' 470px wide (http://www.kite.com.au/newindexslices2at470px.htm)
then
I scrapped 'slices2' and had al slices in one (http://www.kite.com.au/newindexslices2removed.htm)
then
I tried auto width on 'slices' with no 'slices2' (http://www.kite.com.au/newindexslices2removedsliceswidthauto.htm)
and lastly
changed that auto width to 467px, the exact width of bottom slice (http://www.kite.com.au/newindexslices2removedsliceswidth467.htm)
so, where to now?
WebJoel
10-13-2006, 07:45 PM
I just read your reply to me, -was going to suggest "float:right; clear:right;" but Kravvitz got it next. This will work.
Now, -and this took me far longer to screen-capture and edit w/ PaintPro than it took to actually 'comment out' the "slices2", -but look what is happening... (see attached images)...
I got all but that last link to behave in IE... (whatup with that!??) :confused:
WebJoel
10-13-2006, 07:47 PM
Apparently football doesn't start for another hour ...
in a hurry to leave? Me too. I will save your code offline and tweak around with it tomorrow. I for one would like to not have to use "images" as slices to do what you doing, but use an UL and LI. -Wonder if it can be done 'on the curve'... Hmm...
g'nite
Chris Robson
10-13-2006, 11:54 PM
Why won't the last one behave? Well ,my theory is this. That last slice is 467px wide....more than twice the 190 + 190 of the first two, while the second last slice is only
346 wide, smaller than the combined 380 of slice 1 and 2. (or 3 and 4 for that matter.)
So...the dilemma seems to be that getting the last slice to 'behave' mucks up the first 4 and fixing the first 4 mucks up the last one!
I've just tried making a third slices div but that doesn't help either. Anyway, that is getting even further away from whatever the problems is, not closer to solving it.
I take your point about slices. I spent a month trying to come up with an alternative but it was the only way I could think of to achieve the somewhat conflicting aims of getting away from squares, having rollovers, living links and a pretty picture.
Chris
Kravvitz
10-14-2006, 01:18 AM
Why did you give the <img>s names and IDs?
No more Transitional DOCTYPEs, please (http://www.456bereastreet.com/archive/200609/no_more_transitional_doctypes_please/)
It's Time To Kill Off Transitional DOCTYPES (http://accessites.org/gbcms_xml/news_page.php?id=23)
Transitional vs. Strict Markup (http://24ways.org/advent/transitional-vs-strict-markup)
Try this.
#slices {
width: 467px;
float: right;
margin: 0;
padding: 0;
}
#slices li {
margin: 0;
padding: 0;
float:right;
clear: right;
list-style-type: none;
}
#slices li a img {
border: 0 none;
vertical-align: bottom;
}<ul id="slices">
<li><a href="singlestring.htm" onmouseover="flvFSTI1('indexphoto','images/indexphotosingles.jpg',0,0,0.5,1)"><img src="images/images/slice-singles.jpg" alt="Single line kites for kids" name="singles" id="singles" width="190"></a></li>
<li><a href="dualcontrol.htm" onmouseover="flvFSTI1('indexphoto','images/indexphotoduals.jpg',0,0,5,1)"><img src="images/images/slice-duals.jpg" alt="2 line steerable dual control kites" name="duals" id="duals"></a></li>
<li><a href="../lekite/surfing/kite%20surfing.htm" onmouseover="flvFSTI1('indexphoto','images/indexphotokiteboarding.jpg',0,0,0.5,1)"><img src="images/images/slice-kiteboarding.jpg" alt="Kiteboarding stuff - Kites, boards and gear for kitesurfing, buggying and power kiting" name="kiteboarding" id="kiteboarding"></a></li>
<li><a href="feathers.htm" onmouseover="flvFSTI1('indexphoto','images/indexphotobanners.jpg',0,0,0.5,1)"><img src="images/images/slice-banners.jpg" alt="Eye catching banners and flags for shop front displays" name="banners" id="banners"></a></li>
<li><a href="windsocks.htm" onmouseover="flvFSTI1('indexphoto','images/indexphotowindsock.jpg',0,0,0.5,1)"><img src="images/images/slice-windsocks.jpg" alt="Decorative windsocks to blow in the breeze" name="windsocks" id="windsocks"></a></li>
<li><a href="schools.htm" onmouseover="flvFSTI1('indexphoto','images/indexphotoschools.jpg',0,0,0.5,1)"><img src="images/images/slice-schools.jpg" alt="Kite kits, pland and materials for schools, teachers and groups" name="schools" id="schools"></a></li>
<li><a href="links.htm" onmouseover="flvFSTI1('indexphoto','images/indexphotolinks.jpg',0,0,0.5,1)"><img src="images/images/slice-links.jpg" alt="Links to our friends (and foes!)" name="links" id="links"></a></li>
<li><a href="schoolmaterials.htm" onmouseover="flvFSTI1('indexphoto','images/indexphotomain.jpg',0,0,1,1)"><img src="images/images/slice-repairs.jpg" alt="Spare parts and materials" name="repairs" id="repairs"></a></li>
</ul>
Edit: I fixed the paths that Firefox changed when I downloaded it.
Am I correct in that you cannot have 'space(s)' in an image name, -is the same true for an URL? I know that "%20" is the correct code for " " (a blank space).
I'd rename the file "kite_surfing.htm" (that is an underscore). Maybe we're picking up something bad from that...
------------------------------------
Just' playing around to get myself interested again, -but why is this patch working...?
<a href="schoolmaterials.htm" onMouseOver="flvFSTI1('indexphoto','http://www.kite.com.au/images/indexphotomain.jpg',0,0,1,1)"><img src="http://www.kite.com.au/images/images/slice-repairs.jpg" alt="Spare parts and materials" name="repairs" border="0" align="top" id="repairs" style="position:relative; right:47px;"></a>
This shoves the bottom link 47-px to the left from it's right-hand edge, works in IE and Fx except in Fx now the footer is beneith the links... hmm
WebJoel
10-14-2006, 12:28 PM
Okay, -I have got this looking better now. Don't understand why, but that last link needs some 47-px margin-right to balance it, but there it is.
(for benefit of our readers, -what I did was) change your headerlinks DIV width to 752px (the footer nav-links part) to equal width of main content, and got rid of that gawd-awful TABLE-based navigation list that it contained. -This is a list of links, so let's make it an unordered list and I styled it according to your TABLE you were using for that purpose (reduced bytes by more than a few in so doing), and centered it accordingly.
I also replaced the top navigation links (also TABLE-based) with the SAME list (they share the same CLASS="". Great idea now... -make this navigation_list into a seperate *php and merely place the 'hyperlink" for it in both locations for this navigation to be shown, -save yourself some additional KBs).
Other small changes, too un-noteworthy to mention. Things like adding title="" attribute to my <UL>'s <LI>s, etc.
My UL navigation list attempt needs further tweaking most likely (unless you do not mind the 'shiver' size-change I applied to the :hover psuedo-class. For the vertical nav-link 'dividers', note that I got rid of the [SHIFT]+key " | " and gave the <li> a width and a "border-right:1px solid black;" (see: NOTE, below), which is a neater, cleaner way to achieve this 'vert/line' effect (which is a pixel or two TALLER than "|" anyway because it's based upon height of <li>, not "line-height" of the occupying anchor-text), and along with enough padding left-to-right to space it out sweetly. :p
You've put quite a bit of work into this and this has been a fun excercise for me. :)
NOTE: that "border-right:1px solid black;" creates a vertical "|" but the LAST link item doesn't want/need this, so the LAST <li> has the inline style of "<li style="border-right:0;">foo~" to REMOVE the STYLE's border-right. Examine code to see what I mean.
abz
10-15-2006, 06:31 PM
if you want to have different CSS rules for IE and other browsers, then you can try this:
h1{
color:red;
}
html>body h1{
color:blue;
}
IE cant understand the selector of the second definition, so shows the h1 as red, but other browsers will read the re-definition and make the text blue.
Kravvitz
10-15-2006, 09:04 PM
Has anyone actually tried the code I posted?
IE6 doesn't support the direct child selector (>), but IE7 does.
The best way to give CSS styles to IE5-7/Win only is to use their conditional comments. Just remember that only IE5+/Win supports them.
About Conditional Comments (http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp)
Some more information on conditional comments can be found on this page. (http://www.positioniseverything.net/articles/multiIE.html)
QuirksMode.org : Conditional comments (http://www.quirksmode.org/css/condcom.html)
http://www.google.com/search?q=IE+conditional+comment
Chris Robson
10-16-2006, 06:47 AM
to WebJoel and Kravvitz,
Well I do believe it's finally there!
I've spent a day or two checking and sorting out links and redoing images but I reckon it's lookin' pretty good thanks to you two.
I've spent weeks pouring over this code trying to see a way around it and you two solve all my problems in a few short keystrokes!
There are a few things I think can be improved so I'll work on those in coming days.
Thank you both very, very much. If you're ever coming to Australia, let me know and we can show you around (and go kite flying.)
Chris
p.s. You know, we collectively spend a lot of time and thought being concerned with the 'bad people' on the internet....the spammers, the schemers etc..... but, in my meagure experience, I feel that there are heaps more web people willing to help and assist. more 'goodies' than 'baddies'.
WebJoel
10-16-2006, 08:49 AM
....I've spent a day or two checking and sorting out links and redoing images but I reckon it's lookin' pretty good thanks to you two.
-We're proof that you don't have to be a farmer to outstanding in your field... :D
But you know what they say: -None of us is smarter than all of us.
I still have to load & try Kravvitz' suggestion. Always eager to see how someone else solves the same problem and usually I end up needing to emulate/borrow/steal their methods!
p.s. You know, we collectively spend a lot of time and thought being concerned with the 'bad people' on the internet....the spammers, the schemers etc..... but, in my meagure experience, I feel that there are heaps more web people willing to help and assist. more 'goodies' than 'baddies'.
Agreed. Back in the States I raised Bearded Dragons as a hobby a few years ago with some small monetary benefits (I think you call them "Jew Lizards"?) for about 10 years, and probably raised interest in the uninformed about many things-Australian. Got alot of people to watch "Croc Hunter" (real shame 'bout that recent incident! :( )
Anyway, kite-flying and put some shrimp on the barbie for me. :D
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.