Click to See Complete Forum and Search --> : Browser Compatability Issues
bigkahuna
03-15-2007, 07:35 PM
Hey everyone,
I hope someone can help me. I have got my main template pretty much finished and looking like I want it to look in FireFox and IE7. However, when I open up previous versions of IE, it doesn't look good at all. I was hoping some people could look at my site, see if it works for them, and if you have any ideas on how to fix these issues, that would be great! Thanks in advance...
Website (http://www.mu5krun.com/nrotc/)
Will
WebJoel
03-16-2007, 08:31 AM
You've got a few errors in there, -"warnings" actually, but some are potentially page-busters, like this:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Home of the University of Missouri - NROTC Unit</title>
<link type="text/css" rel="stylesheet" href="sddm.css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"</script>
<script type="text/JavaScript">
<!--
function MM_preloadImages() { /...
You are missing the trailing ">" on the opening <script>..
I cleaned-up the true 'warnings' (only the proprietary 'IE-only' remain): attached.
I can't check if this helped because the images are 'relative path' not 'absolute path' to their source (will not display to my editor unless absolute-path).
Using coding which works with your DOCTYPE will probably help: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.mu5krun.com%2Fnrotc%2F
because older versions of IE interpreted coding differently than IE7.
;)
KDLA
bigkahuna
03-16-2007, 01:17 PM
Thanks for all of the help so far...WebJoel, there is one thing...Everything seems to work fine after I copied and pasted your code, however the text for my buttons on the left is not the right format. It is using the correct class from my style sheet and everything, but it just isn't utilizing the attributes. It is only the ones that have non-expandable menus too, under the "singleItem" and "singleItemText" class...Any ideas? They were working before...Thanks a lot for all of the help so far..
Will
bigkahuna
03-16-2007, 01:30 PM
nvm...i fixed that issue...any other ideas you can think of to make my webpage more compatible? I heard that I need to hack it to make it compatible with older versions of IE, but I have never done this before...Thanks a lot for everything so far...
Will
WebJoel
03-16-2007, 02:24 PM
"compatible" would be the next step, -but "correct' is the first. :D You have multiple instances of "missing </a> before <div>" (the anchor link isn't properly closed), and quite a few 'unclosed' tags, -tags that require an explicit close " />". I'm a bit more free today, -I think I'll take your code offline and sweep over it, -see if I can clean it up a bit. :) Like this line:
<td valign="bottom" bgcolor="#00000">
A "color" consists of six digits. Here, you have five. :rolleyes:
WebJoel
03-16-2007, 07:13 PM
-Re: that navigation on the left... -is that supposed to be a drop-down list? I do not see how it is supposed to work as-written. And, if it IS a drop-down list, I would suggest getting rid of the background-image as this might totally mess with the intended effect. It looks rather 'busy', -so many cat-paws. If you're doing this with Accessibility in mind, the distraction might be much. Maybe use the inline-style and have the image, -just the cat's foot, -for items that on-hover launch the drop-down sub-menu(?). I am doing this with TEXT for the anchors, not "images" with embedded text. -Faster download times, reduced bandwidth, greater indexability, etc.
I might get rid of the 'onMouseOver/onMouseOff' effect ("javascript", since some Accessability issues arise with use of *js) and use a CSS-alternative of 'background-image' on the <li> or 'list-style-image:url();' and use 'just the cat's paw' as the 'bullet' for each <li>... Not sure how/if possible to get the roll-over effect of 'illuminated' cat's paw without onMouseOver/onMouseOut unless I used positioning..
At any rate, this could be done with a premium of markup or styling (not have a class="" for every list-item and sub-menu list-item, but a global style that affects 'every li a in DIV #left', and another that affects 'every li li a (the 'drop-down') in DIV #left).
I'm still playing around with faux-columns to make this re-sizeble so as to display upon 800x600 at least, and 1024x768 also. 'Horizontal scrolling' is non-gratia. :( So far I keep getting less than optimal results... I think that central image is just too wide. It is 442px(?) wide, -leaving about 318-px to divide into two for the LEFT and the RIGHT columns (about 160-px each... I need closer to 200-px for LEFT and for RIGHT to prevent horizontal scrollbar at 800x600 res). Hmm...
bigkahuna
03-17-2007, 03:41 PM
thanks for all of the help so far...