1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Z-index bug in IE6/7

Discussion in 'CSS' started by Tibiacity, Mar 22, 2010.

  1. #1
    I'm creating a mega drop down area which is above my other content.

    You can see it here: http://sub.exhiti.com/


    Works fine in FireFox, Safari, Chrome, IE8. The box is placed too high in Opera, IE6 and IE7. Can't find why and how to fix. Any idea how to fix?


    Furthermore the menu is behind the content on IE6 and IE7 when you move over "Top experience".
     
    Last edited: Mar 22, 2010
    Tibiacity, Mar 22, 2010 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    1) you appear to be using javascript to do CSS' job.

    2) You seem to have a DIV, Table and separate UL's for no good reason.

    3) you use the same ID more than once in the document

    4) You seem to have a LOT of extra DIV and classes for something so simple. If the CSS is as convoluted as the markup, I'd not be surprised you are having trouble.

    I'm headed to bed right now, but I'll take a deeper look in the morning. Pretty much though it's a drop-down menu, you shouldn't be having to **** with z-index in the first place.
     
    deathshadow, Mar 22, 2010 IP
  3. Tibiacity

    Tibiacity Active Member

    Messages:
    190
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    73
    #3
    Found a fix on the net by adding z-index: -1; to the content area so everything is behind it. This disables the page from being clicked though so no good solution as it's not really usable anymore.

    Changed the double id to a class. Thanks for letting me know.

    Reason why I'm using JS to make the box visible is because of the guy who's article I followed said: there’s a pesky problem with Internet Explorer 6, which only supports :hover on anchor elements
    Article URL: http://www.sitepoint.com/blogs/2009/03/31/make-a-mega-drop-down-menu-with-jquery/
     
    Last edited: Mar 22, 2010
    Tibiacity, Mar 22, 2010 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Can't sleep, the clowns will eat me.

    Which is why you send the scripting assist to JUST IE6/earlier using something like Peterned's hoveranywhere, instead of that type of asshattery.

    ... and what fine asshattery it is. Here's a tip, anyone tells you jquery is good, they don't know jack **** and you should ignore EVERYTHING they tell you. Christmas on a cracker that "armatige" person is in some heavy duty need of a full scale bitch-slap with a wet trout over that article - though I say that about most everything these days... But then there's only one person writing for them who's worth a damned, Ian Lloyd... Everyone else is writing these bloated convoluted train wrecks that make the crap on dynamic drive look good.

    That said, I'm one of the few people that these "mega menus" COMPLETELY PISSES OFF - See the bloated bandwidth chewing PILE OF SHIT that vBulletin 4 is saddling us with... on this very website.

    First step towards getting you out of this hell is going to be to take a giant axe to two thirds of that javascript; basically anything that isn't your google ads needs to go! Here's another tip, when you have more javascript present than you have HTML, you're probably taking advice from the wrong people.

    But... your markup ALONE shows that.

    Oh, and excuse my... eloquence - I'm in a bit of a mood.

    Step one, let's get this markup the *** out of the 1990's.

    Tranny is for supporting old outdated crap, so let's switch over to the MODERN (well, as of 1998) STRICT doctype so we aren't even trying to use tags and attributes that have no place on a properly written page.

    Delete the handful of metas and links that don't do jack... delete the wasteful markup, toss a MEDIA type on the CSS include... and while we're at it let's delete all those pointless redundant <script> open/closes in the header... Wait, why do you have an ID on TITLE? You can't style TITLE!?! No reason to script hook it either... That's a wierd one.

    Another big tip - just something I'm coming across in rewriting this a modern way; if you end up doing <div class="title"> or <div class="heading">... /FAIL/ - we have heading tags, use them. Likewise if you have a paragraph of text, or multiple paragraphs, double breaks == /FAIL/. We have a paragraph tag, use it for paragraphs of text... and don't use it on non-flow text like 'more info' or images - again, this is where the sitepoint nimrods and I radically disagree... **** em... There were only three people over there worth a damn and the BEST of them is dead... and he'd be ripping ALL of them an new hole in their posterior over promoting techniques like the ones you've been learning.

    Let's see... swap all those 'title' div for heading tags, swap all those div in the form for fieldsets and the heading for a legend (with a span hook), delete the target attribute since there is no such thing in modern markup (and that's a behavior you shouldn't FORCE on the user. They want it in a new window/tab they can choose to do so in their browser... TARGET was deprecated for a REASON)...

    So that would neuter the markup down to:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    /> 
    
    <meta
    	name="keywords"
    	content="experience, history, tibia, news, top, 1000, gameworld"
    />
    
    <meta
    	name="description"
    	content="News about experience histories in Tibia."
    /> 
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <!-- 
    
    	Don't forget to implement these later!
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="print.css"
    	media="print"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="handheld.css"
    	media="handheld"
    />
    
    -->
    
    <script type="text/javascript"
    	src="http://partner.googleadservices.com/gampad/google_service.js"
    ></script>
    <script type="text/javascript">
    		GS_googleAddAdSenseService("ca-pub-5140848718800365");
    		GS_googleEnableAllServices();
    		GA_googleAddSlot("ca-pub-5140848718800365","Exhiti_top");
    		GA_googleAddSlot("ca-pub-5140848718800365","Exhiti_home_right");
    		GA_googleAddSlot("ca-pub-5140848718800365","Exhiti_exp_hist_right");
    		GA_googleFetchAds();
    </script>
    
    
    <title>
    	Experience History Tibia - Exhiti
    </title>
    
    </head><body>
    
    <!--
    	empty tags like SPAN and B below are image sandbags for
    	sliding doors or glider-levin replacement - do not remove!!!
    	
    	Horizontal rules and .jumpto menus should be removed by CSS
    	and are present for CSS off users only.
    -->
    
    <div id="pageWrapper">
    
    	<h1>
    		EX<span>HI</span>TI<br />
    		<small>By Tibia<span>ml</span></small>
    		<b></b>
    	</h1><hr />
    	
    	<div id="topAdvert">
    		<!-- ca-pub-5140848718800365/Exhiti_top -->
    		<script type="text/javascript">
    				GA_googleFillSlot("Exhiti_top");
    		</script>
    	</div>
    
    	<ul id="mainMenu">
    		<li><a href="/">News</a></li>
    		<li>
    			<a href="/top_experience/">Top experience â–¼</a>
    			<ul>
    				<li class="medal"><a href="/top_experience/">Top 1000</a></li>
    				<li class="country"><a href="/top_countries/">Top countries</a></li>
    				<li class="country"><a href="/top_experience/country/">By country</a></li>
    				<li class="world"><a href="/top_worlds/">Top worlds</a></li>
    				<li class="world"><a href="/top_experience/gameworld/">By gameworld</a></li>
    			</ul>
    		</li>
    		<li><a href="/logs/">Logs</a></li>
    		<li><a href="/faq/">FAQ</a></li>
    	</ul><hr />
    	
    	<div id="contentWrapper"><div id="content">
    		<div class="article">
    			<h2>Exhiti launched</h2>
    			<p>
    				The first version of our new statistics website is now ready for the public. We cover statistics related to the experience history of characters ranked in the top 300 of a gameworld of the MMO Tibia. We bring you various statistics about this. In the future we plan to expand and add the other statistics to our website but for now we want to assure the good functionality of the experience statistics.
    			</p>
    			<div class="info">
    				Posted on <i>Tuesday March 16th 2010</i>
    			</div>
    		<!-- .article --></div><hr />
    		
    		<div class="article">
    			<h2>Monthly summary February 2010</h2>
    			<p>
    				February is over already so time for our monthly viewback. Ranked on the top of the experience highscores in February 2010 are the following players:
    			</p>
    			<table class="monthlyTop">
    				<thead>
    					<tr>
    						<th>Rank</th>
    						<th>Name</th>
    						<th>Gameworld</th>
    						<th>Level</th>
    					</tr>
    				</thead>
    				<tbody>
    					<tr>
    						<td>1</td>
    						<td><a href="http://www.exhiti.com/experience_history/tomurka/">Tomurka</a></td>
    						<td>Candia</td>
    						<td>461</td>
    					</tr><tr>
    						<td>2</td>
    						<td><a href="http://www.exhiti.com/experience_history/scorpion_andree/">Scorpion Andree</a></td>
    						<td>Harmonia</td>
    						<td>450</td>
    					</tr><tr>
    						<td>3</td>
    						<td><a href="http://www.exhiti.com/experience_history/spaaw/">Spaaw</a></td>
    						<td>Furora</td>
    						<td>434</td>
    					</tr><tr>
    						<td>4</td>
    						<td><a href="http://www.exhiti.com/experience_history/maurolkit/">Maurolkit</a></td>
    						<td>Magera</td>
    						<td>428</td>
    					</tr><tr>
    						<td>5</td>
    						<td><a href="http://www.exhiti.com/experience_history/denizito/">Denizito</a></td>
    						<td>Calmera</td>
    						<td>406</td>
    					</tr><tr>
    						<td>6</td>
    						<td><a href="http://www.exhiti.com/experience_history/crowfox/">Crowfox</a></td>
    						<td>Pacera</td>
    						<td>404</td>
    					</tr><tr>
    						<td>7</td>
    						<td><a href="http://www.exhiti.com/experience_history/gremar/">Gremar</a></td>
    						<td>Furora</td>
    						<td>400</td>
    					</tr><tr>
    						<td>8</td>
    						<td><a href="http://www.exhiti.com/experience_history/francois_xelix/">Francois Xelix</a></td>
    						<td>Refugia</td>
    						<td>393</td>
    					</tr><tr>
    						<td>9</td>
    						<td><a href="http://www.exhiti.com/experience_history/leo_ballard/">Leo Ballard</a></td>
    						<td>Xantera</td>
    						<td>390</td>
    					</tr><tr>
    						<td>10</td>
    						<td><a href="http://www.exhiti.com/experience_history/sir'vegito/">Sir'vegito</a></td>
    						<td>Pythera</td>
    						<td>387</td>
    					</tr>
    				</tbody>
    			</table>
    			<p>
    				That was it for February. If you want to know what the top 10 is at the end of March then keep an eye on our <a href="http://www.exhiti.com/top_experience/">top 1000 experience</a>.
    			</p>
    			<div class="info">
    				Posted on <i>Friday March 12th 2010</i>
    			</div>
    		<!-- .article --></div><hr />
    		
    	<!-- #content, #contentWrapper --></div></div>
    	
    	<div id="sideBar">
    	
    		<div class="sideBox">
    			<h2>What is Exhiti?</h2>
    			<p>
    				This website covers everything about the experience history of the top 300 players of each Tibia gameworld. We save the history of your experience evolution and display these data in charts and etc.
    			</p>
    		<!-- .sideBox --></div><hr />
    		
    		<form action="#" method="post" class="sideForm">
    			<!-- don't use 'get', it's sloppy/insecure -->
    			<fieldset>
    				<legend><span>Find a Character</span></legend>
    				<input type="hidden" name="section" value="experience_history" />
    				<input type="text" name="a" />
    				<input type="submit" value="Search" />
    			</fieldset>
    		</form><hr />
    		
    		<div class="sideBox">
    			<h2>Advertisement</h2>
    			<div>
    				<!-- ca-pub-5140848718800365/Exhiti_home_right -->
    				<script type="text/javascript">
    						GA_googleFillSlot("Exhiti_home_right");
    				</script>
    			</div>
    		<!-- .sideBox --></div><hr />
    		
    		<div class="sideBox">
    			<h2>Links</h2>
    			<ul>
    				<li><a href="http://en.tibiaml.com">Tibia ML</a></li>
    				<li><a href="http://www.tibiacity.org">Tibiacity</a></li>
    				<li><a href="http://tibia.fi/">Tibia.fi</a></li>
    			</ul>
    		<!-- .sideBox --></div><hr />
    
    	<!-- #sideBar --></div>
    
    	<div id="footer">
        &copy; 2010 Exhiti all rights reserved. Tibia is copyrighted by CipSoft GmbH.<br />
        Exhiti is part of the <a href="http://en.tibiaml.com/">Tibia ML</a> website network.
    	<!-- #footer --></div>
    	
    <!-- #pageWrapper --></div>
    
    </body></html>
    Code (markup):
    Expands it in a few spots, shrinks it in others, but trims away all the unneccessary jquery bull. 7.2k vs. 9.6k, we've got to be doing SOMETHING right - especially when doing away with 27-30k of javascript in the process. (though we'll be adding a little 2.9k .htc file for IE6/earlier ONLY using three lines of CSS)

    EVERYTHING else going on there belongs in the CSS... Which hopefully I'll get to in the morning or on my next bout of insomnia, whichever comes first.

    -- edit -- hah, I hadn't even noticed you were trying to use CSS3 rounded corners since you didn't declare them with the REAL CSS3 values and instead used the vendor-specific versions... NOT that you should be using ANY CSS3 properties on a production website since that **** won't be real world deployable for a decade. Ok, that'll take 3 more DIV to make rounded corners that work everywhere.
     
    deathshadow, Mar 22, 2010 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    No sugar tonight (in my coffee), no sugar tonight (in my tea)...

    Ok, here's how I'd handle all that:

    http://www.cutcodedown.com/for_others/tibiaCity/template.html

    as with all my examples the directory:

    http://www.cutcodedown.com/for_others/tibiaCity

    is unlocked so you can grab the gooey bits. I ripped out all the adverts because I started raging over "what the **** is this **** *** ****ogtry" on google ads that apparantly now need that FAT BLOATED SHIT jquery to function? Christ is every script kiddie on the planet hopping on the "let's bloat out our websites for nothing" brigade or something?!? Tell ya, five minutes away from walking into the nearest data center with a shotgun.

    In any case, valid XHTML 1.0 Strict, has your borders WITHOUT that non-real world deployable CSS3 bullcookies, tested working flawless in IE6, 7 & 8, Opera 10.10 and 10.51 RC3, Firefox 2 & 3, and the latest flavors of chrome and safari. Pure CSS for all browsers except IE, which we throw peterned's hover-anywhere at (csshover3.htc). The layout itself works in IE 5.5, though the dropdown menu has some problems thanks to the broken box model - you COULD probably code around that issue, but honestly - why bother? We're talking IE5.x, if the page is usable, CLOSE ENOUGH.

    I did drop the font sizes to what I use for my 'norm' as they were fist in the face huge on my large font/120dpi system. You were using pt, I went with %/em since that's what the WCAG says to use. Tweaked your form elements to make them fill that sidebar better, and changed it to an 'accessible' form with fieldsets and legend. The span inside the legend is to work around that you cannot reliably style legend cross-browser, so dump in a span, absolute position it and style that instead.

    As you can see I added a tiled background image for that top area - sometimes it's better to NOT use code to make certain elements; likewise with the rounded corners though both only add one image apiece to the entire thing; to make up for that I condensed your three little icons in the menu to a single file - so it's the same number of handshakes over-all. The logo image I pre-composited to the background as a palettized image so you don't need any sort of alpha.pngfix bull there - and that opens the door to gilder-levin image replacement which means images off the page is still relatively fully functional.

    Dig into that menu, and you'll see all those extra containers; div, table, tr, td - GONE. All those extra classes - GONE. They're not neccessary, get rid of 'em. The only hook we need for that type of menu is the id on the topmost UL. We can inherit from there!

    For hacks - they're all in the CSS, I documented most of them. Big two as always are haslayout triggers, avoiding the 100% width float ride-down using a targeted negative margin, the 1px font-size for minimum element height, and of course occasionally tossing display:inline on floats.

    Hope this helps... and again, sorry about the abusive language - it's been one of those days that reminds me why I'm retired...
     
    deathshadow, Mar 22, 2010 IP
    Tibiacity likes this.
  6. Tibiacity

    Tibiacity Active Member

    Messages:
    190
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    73
    #6
    Hiya :)

    First of all thanks for all the information and ofcourse the fix of the template. I'm going to recode it and use your design after dinner.

    However I'll still need jQuery for the tablesort I'm using on the experience highscores, so can't remove these 2 scripts unless you know something less heavy to use for tablesort instead of this one: http://www.frequency-decoder.com/2006/09/16/unobtrusive-table-sort-script-revisited

    I've no idea why I added an id to the title, that's indeed odd. Wrote the code myself so don't know how it got there ;p.

    Why did you remove shortcut icon and canonical from the head? Isn't canonical good for SEO to build higher rank for similar pages?

    Checked my visitors browsers for the last month and none uses IE5.5 so that's no problem, we can ignore this browser.


    Btw I dont think you need jQuery for AdSense but I load the jQuery from the Google servers because it doesn't take bandwidth from my side then :p.
     
    Last edited: Mar 23, 2010
    Tibiacity, Mar 23, 2010 IP
  7. Tibiacity

    Tibiacity Active Member

    Messages:
    190
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    73
    #7
    Want to add something:

    Combining the script tags on top stops the ads from working. Odd but true :p. Also not all my pages have a sidebar so making some changes to that CSS.
     
    Tibiacity, Mar 23, 2010 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    Uhm... What tablesort? I figured that was dead code since it wasn't actually being called or doing anything for your page on my end. Lemme guess, broken in Opera and FF 3.6?

    I didn't, at least not in the final copy; I didn't upload your favicon image, but the LINK tag is there in the production copy. I do this crazy thing of putting all the META together as a group, then all the LINK, and then putting TITLE last.

    Completely meaningless tag - think about it; DUH, I'm POINTING AT MYSELF... There's a lot of bullshit meta that don't do jack that some SEO scammers seem to think has meaning. CONTENT has meaning, worry about that and not the **** the visitor will never see or use.

    No, then it just takes even longer for your page to load, sitting there hung for 10-15 seconds where you can't even click on anything in some browsers.

    Sorry, but jquery - mootools, hell, 99% of the bullshit people are using javascript for now makes me RAGE something fierce. It is NOT the solution to every damned problem - and usually causes more problems in terms of accessibility and excessive bandwidth use than it's worth. We're seeing websites blowing MEGABYTES of code and images on delivering 2k of content to the point where, well - I'll just go to some other website, and I suspect most other people will do the same.

    I'd really like to see you NOT end up heading down the road where you have 300k of javascript being applied to 10k of HTML.
     
    deathshadow, Mar 23, 2010 IP
  9. Tibiacity

    Tibiacity Active Member

    Messages:
    190
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    73
    #9
    It's used on other pages, e.g. on this one: http://sub.exhiti.com/top_experience/ - This also requires the jQuery.


    http://googlewebmastercentral.blogspot.com/2009/02/specify-your-canonical.html - Google seems to take care of it and they designed the tag.
     
    Tibiacity, Mar 23, 2010 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #10
    deathshadow, Mar 24, 2010 IP
  11. Tibiacity

    Tibiacity Active Member

    Messages:
    190
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    73
    #11
    The tablesort works in all browsers here, odd, will check it out.

    We don't offer duplicate content, but somethimes people can change the URL by using a dropdown area which gives ? and & in the URL. I want to canonical this to one nicely formatted URL, thus why the canonicals.
     
    Tibiacity, Mar 24, 2010 IP