Well I'm making a site and of course Firefox and Opera start playing on my nerves (no display) but on the IE6 it's perfect... So I tried to validate this welcome.css stylesheet and Validation says: Lexical error at line 2, column 1. Encountered: "" (0), after : "" No style sheet found So I just to uploaded the darn text and it is a valid CSS!!!! Please don't tell me it's the name of the file... Here's the source: body { background-color: #ffffff; font-family: Verdana; font-style: normal; font-weight: 300; font-size: 60%; } A:link { background-color: #ffffff; font-family: verdana; font-size: 110%; font-weight: bold; text-decoration: none; color:#9c0000; } A:visited { background-color: #ffffff; font-family: verdana; font-size: 110%; font-weight: bold; text-decoration: none; color:#9c0000; } A:active { background-color: #ffffff; font-family: verdana; font-size: 110%; font-weight: bold; text-decoration: none; color:#9c0000; } A:hover { background-color: #ffffff; font-family: verdana; font-size: 110%; font-weight: bold; text-decoration: none; color:#ff9c00; } #welcome { background-color:#ffffff; padding:10px; margin-left: 35px; width:700px; height:404px; background-image: url(../images/welcome.jpg); background-repeat: no-repeat; } a.rules { background-color: #ffffff; width:196px; height:54px; padding:0px; margin-top:-234px; margin-left:392px; background-image: url(../images/rules.jpg); } a.rules:hover { background-color: #ffffff; width:196px; height:54px; padding:0px; margin-top:-234px; margin-left:392px; background-image: url(../images/rulesh.jpg); } a.tips { background-color: #ffffff; width:157px; height:54px; padding:0px; margin-top:-237px; margin-left:590px; background-image: url(../images/tips.jpg); } a.tips:hover { background-color: #ffffff; width:157px; height:54px; padding:0px; margin-top:-237px; margin-left:590px; background-image: url(../images/tipsh.jpg); } a.wallpapers { background-color: #ffffff; width:177px; height:85px; padding:0px; margin-top:-180px; margin-left:411px; background-image: url(../images/wallpapers.jpg); } a.wallpapers:hover { background-color: #ffffff; width:177px; height:85px; padding:0px; margin-top:-180px; margin-left:411px; background-image: url(../images/wallpapersh.jpg); } a.coming { background-color: #ffffff; width:157px; height:85px; padding:0px; margin-top:-182px; margin-left:590px; background-image: url(../images/coming.jpg); } a.coming:hover { background-color: #ffffff; width:157px; height:85px; padding:0px; margin-top:-182px; margin-left:590px; background-image: url(../images/comingh.jpg); } a.fiction { background-color: #ffffff; width:196px; height:54px; padding:0px; margin-top:-234px; margin-left:392px; background-image: url(../images/rules.jpg); } a.fiction:hover { background-color: #ffffff; width:196px; height:54px; padding:0px; margin-top:-234px; margin-left:392px; background-image: url(../images/fictionh.jpg); } a.quiz { background-color: #ffffff; width:157px; height:54px; padding:0px; margin-top:-237px; margin-left:590px; background-image: url(../images/tips.jpg); } a.quiz:hover { background-color: #ffffff; width:157px; height:54px; padding:0px; margin-top:-237px; margin-left:590px; background-image: url(../images/quizh.jpg); } a.pros { background-color: #ffffff; width:177px; height:85px; padding:0px; margin-top:-180px; margin-left:411px; background-image: url(../images/wallpapers.jpg); } a.pros:hover { background-color: #ffffff; width:177px; height:85px; padding:0px; margin-top:-180px; margin-left:411px; background-image: url(../images/prosh.jpg); } a.custom { background-color: #ffffff; width:157px; height:85px; padding:0px; margin-top:-182px; margin-left:590px; background-image: url(../images/coming.jpg); } a.custom:hover { background-color: #ffffff; width:157px; height:85px; padding:0px; margin-top:-182px; margin-left:590px; background-image: url(../images/customh.jpg); } #qa { background-color: #ffffff; padding:0px; margin-left:20px; margin-top:50px; } #quotes { background-color: #ffffff; padding:0px; margin-left:20px; margin-top:50px; }
Give us a link, so we can see for ourselves. Bye the bye, if Firefox and Opera render differently from IE, and you think IE looks right, you've got some screwed up code—either or both css and html. cheers, gary
well I thought of posting a link but wasn't quite sure if it's permited around here... Here's the link to my index.html I hope it will lighten things up www.eragra.gr/new Enjoy!
For some reason, the stylesheets' text encoding is not coming up right, like Chinese instead of Western. This may be because you didn't include a !DOCTYPE line. Try adding one and specify the Western encoding.
My bad the css was in unicode not UTF-8! I've fixed that but why the heck opera and firefox don't display the webpage properly??? BTW Happy New Year Everyone!!!!
Three things before going any further: Without a complete and proper DTD, IE screws up even more than usual. It does not even follow css1 correctly, much less css2 (which has been accepted since 1998). In standards mode (triggered by the DTD), IE at least tries to act sanely. Remove the javascript until the html + css is working correctly. In fact, don't add the css until your plain html makes sense. Why in hell do you have a 418kB image on any page anywhere? Get that sucker below 30kB at the maximum. cheers, gary
Well I'm done thanks to kk5st's precious tips, I'm valid now! Wooooweeee! But still those links in Opera nad Firefox don't have the backgound image! Of course if I'm not missing something...
Better. Still not 'good'. Remove the xml declaration. It is inappropriate for a document delivered as text/html, and it is yet another IE screwup, triggering quirks mode in IE6. Your editor (a MSFT product?) is also adding the unicode BOM, which is not needed for utf-8, and will also trigger quirks mode. Be sure to save as plain utf-8 without signature (or whatever MS calls it). The big image is still too large. Crank up the compression some more. Your javascript file is served with the wrong MIME type. It should be text/javascript. Talk to the server admin about fixing the configuration. The link element is empty and it is forbidden to use a closing tag. So, this is wrong; <link rel="shortcut icon" href="images/favicon.ico"></link> <link rel="stylesheet" type="text/css" href="css/welcome.css"></link> Code (markup): and this is how it should be; <link rel="shortcut icon" href="images/favicon.ico" /> <link rel="stylesheet" type="text/css" href= "css/index-mozilla.css" /> Code (markup): Notice that the IE source and Firefox source do not match. Where are the missing Firefox lines? IE: <body> <div id="welcome"><a href="#" onclick="switchMenu('welcome');" title="Close the welcome screen">Click here to close the welcome screen</a></div> <div id="qa"><img src="images/qa.gif" border="0" alt="Questions Answered"></img></div> [color=red]<a class="rules" href="rules.html" target="iframe"></a> <a class="tips" href="tips.html" target="iframe"></a> <a class="wallpapers" href="wallpapers.html" target="iframe"></a>[/color] <a class="coming" href="coming.html" target="iframe"></a> <div id="quotes"><img src="images/quotes.gif" border="0" alt="Famous Quotes"></img></div> <a class="fiction" href="fiction.html" target="iframe"></a> <a class="quiz" href="quiz.html" target="iframe"></a> <a class="pros" href="pros.html" target="iframe"></a> <a class="custom" href="custom.html" target="iframe"></a> </body> Code (markup): Firefox: (cleaned up by Tidy) <body> <div id="item"> <div> <a class="header1" href="news.html" target="iframe"></a> </div> <div> <a class="header2" href="books.html" target="iframe"></a> </div> <div> <a class="header3" href="contact.html" target="iframe"></a> </div> <div> <a class="header4" href="http://eragra.proboards33.com" target= "_blank"></a> </div> <div id="header5"> <p class="c1"> <a href="http://validator.w3.org/check?uri=referer"><img src= "http://www.w3.org/Icons/valid-xhtml10" alt= "Valid XHTML 1.0 Transitional" height="15" width="40" border= "0" /></a> </p> </div> </div> <div id="content-center"> <iframe name="iframe" src="welcome.html" width="100%" height= "730px" class="iframe" frameborder="0" scrolling="no" marginwidth="15px" marginheight="15px"></iframe> </div> <div id="end"></div> <div id="footer"> <div id="footer-links"> <a href="javascript:SeeMehelp('help.html');"><b>° help</b></a> <a href="artists.html" target="iframe"><b>° artists</b></a> <a href="map.html" target="iframe"><b>° duelists map</b></a> <a href="tutorial.html" target="iframe"><b>° tutorial</b></a> <a href="index.html"><b>° home</b></a> </div> <div id="footer-team"> <a class="q-workshop" href="http://q-workshop.com/" target= "_blank"></a> <p class="c1"> <br /> <br /> <span class="c2"><b>Copyright ©2007 MAGE Co. All rights reserved</b></span> </p> </div> </div> </body> Code (markup): Why different urls? There is no sane reason to browser sniff and serve different html, css or javascript to different browsers. The page makes no sense when styles are turned off. Get the content structure and html markup right before worrying about anything else. cheers, gary
I still have a lot to learn!!! Thank you Gary for helping me out on this one (and of course spending your time on my account ) since it means a lot for me. I reduced the image but please don't aske me to reduce it much more, I'm in pain right now looking at a 16 color gif . I'm using notepad as an editor so that BOM thingy was quite bizarre, since I am saving the files as straight utfs... Maybe my pc's the cause of it all (bangs the screen with his elbow)!!! I have all the javascript type set to text/javascript by now (I was changing them earlier to see if there's any difference, silly me). The thing about multiple urls is not my cup of tea either but I didn't find any other way to align that page in all the browsers. Regs, Mike
That's why it's so important to use a proper DTD and have absolutely nothing precede it. In standards mode, IE is still a PoS, but it at least tries to act civilized. In standards mode, it groks the margin: auto thingie. Remember that the web is not print. Tattoo that on your forehead. You expect 1200 dpi out of your printer, while the browser delivers 72 or 96 pseudo pixels per inch. Have your image manipulation program fix a palette and then compress a jpeg image ruthlessly. View the output in your browser; you'll be surprised how many bytes you can squeeze out. If you do both print and web images, you can stick with PS. If you're doing primarily web images, you'd do well to download the GIMP. It will do as much as PS, or as near as doesn't matter, but has the advantage of being built from the ground up for web images. Get IE into standards mode with the DTD switch, and you can lose the separate source codes. Squeeze another 200kB or so out of the big image. Make the page work with plain html before all else. cheers, gary
I'd clean that up a lot further, actually. You have a few lists of links in there, yet you're using DIV containers for each one. Why not mark them up as lists, since that's what they are? Hold on and I'll re-write that for you so I can show you what I mean. Bear in mind that it won't work with your stylesheet.
Ok, here's my take on the XHTML code... bear in mind you will need a new stylesheet for this, and may have to re-master your graphics as well. You'll notice a few empty spans; those are there to act as hooks for a CSS image replacement technique I love to use: http://www.sitepoint.com/article/header-images-css-xhtml Notice how I was able to reduce your 43 lines of code down to 28 (just in the BODY section alone). 26 if you remove the two comments I inserted that are on their own lines. <!-- the document is XHTML 1.0 Transitional; however I am only providing the BODY element and its children --> <body> <h1><span></span>Eragra™ Online</h1> <h2 class="skipLink">Main Menu (<a href="#content">Skip to Content</a>)</h2> <ul id="menu"> <li><a href="news.html" id="newsLink" target="iframe"><span></span>News</li> <li><a href="books.html" id="booksLink" target="iframe"><span></span>Books</li> <li><a href="contact.html" id="contactLink" target="iframe"><span></span>Contact</li> <li><a href="http://eragra.proboards33.com" id="forumLink" target="_blank"><span></span>Forums</li> </ul> <div id="content"> <!-- this is a major accessibility issue - you should provide alternative content for those who can't access or navigate iFrames --> <iframe name="iframe" src="welcome.html" width="100%" height="730px" class="iframe" frameborder="0" scrolling="no" marginwidth="15px" marginheight="15px"></iframe> </div> <div id="footer"> <ul> <li><a href="javascript:SeeMehelp('help.html');">help</a></li> <li><a href="artists.html" target="iframe">artists</a></li> <li><a href="map.html" target="iframe">duelists map</a></li> <li><a href="tutorial.html" target="iframe">tutorial</a></li> <li><a href="index.html">home</a></li> </ul> <p>Copyright © 2007 MAGE Co. All Rights Reserved.</p> <a href=href="http://q-workshop.com/" id="q-workshop" target="_blank"><span></span>Q-Workshop</a> </div> <div id="w3cValid"> <!-- if you decide to add a CSS link, then turn this DIV into a list --> <a href="http://validator.w3.org/check?uri=referer" id="valid-xhtml"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="15" width="40" border="0" /></a> </div> </body> Code (markup):
I guess I'll start from scratch then (prepares a 9mm with one silver bullet)... But why the welcome.html links work in IE and not in firefox and opera?? Is it because of the iframe??? The css is basically the same so I don't think this is the problem.
In your iframe tag: <iframe name="iframe" src="welcome.html" width="100%" height="730px" [B]class="iframe"[/B] frameborder="0" scrolling="no" marginwidth="15px" marginheight="15px"></iframe> Code (markup): Change class="iframe" to id="iframe" then adjust your stylesheet accordingly.
That is the problem. The index.html links are the same as welcome.html +css but they don't seem to show in firefox and opera! Even if you call the page outside the iframe... the class in iframe I've set is just for future purpose since I don't have any iframes stated in the stylesheet. Or should I? I will be making sometime this week another page for fastload and I will definitely use your pointers on this one .
Still no luck with those links. Tried to add the class in the div instead of the link and I got the effect, but then the link wasn't working... Black Magic!!! Surely I've got something wrong but what? BTW I've fixed the aligment so now its just only one index.