Internet explorer problem

Hi,
I’m having a problem with my site in ie. In my case it’s ie 9(and I’m sure the other versions). Adobe browserlab shows my site viewing properly in ie 9, but on my machine the right sidebar shows outside of the site layout. Adobe browserlab doesn’t show the problem until ie7, but as i said the problem occurs for me in ie9 on windows 7. It displays properly in other browsers I’ve viewed it in, even mobile browsers. I assume this is a css issue. Can someone please have a look at it and help me diagnose and fix the problem. I’m certainly no css guru. The URL is: the VINDICTIVES – The Official Website Of The Chicago Based Punk Rock Band the VINDICTIVES

Thanks in advance!
-d

Hm, looks fine in IE9, Win 7 to me. Are you in compatability mode?

See what happens if you set an explicit width here:

.art-content {
  position: relative;
  [COLOR="Red"]width: 670px;[/COLOR]
  z-index: 1;
}

With the endless horde of DIV for nothing, span for nothing, nonsensical heading orders, non-semantic markup of the wrong tags around just about EVERY element, IE conditionals on a layout that shouldn’t warrant their use (not that there is EVER a legitimate reason to use IE CC’s for CSS), tranny doctype meaning old/outdated code, and invalid/poor accessibility forms – much less the undersized fixed metric fonts – I’d say an intermittent IE9 layout issue is the LEAST of your problems.

Though if I were to guess, I’d say trying to use display:table-cell instead of floats and faux-columns is your most likely culprit.

Literally about 40-50% of your HTML should be pitched in the trash before even THINKING about layout issues… something like this:


<!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="description"
	content="The Official Website of the Chicago Based Punk Rock Band the VINDICTIVES"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<link
	rel="shortcut icon"
	href="/wp-content/themes/vindictives_V1/favicon.ico"
/>

<!-- start WP crap -->
<link rel="pingback" href="http://www.vindictivesmusic.com/xmlrpc.php" />
<link rel="shortcut icon" href="http://www.vindictivesmusic.com/wp-content/themes/vindictives_V1/favicon.ico" />
<link rel="alternate" type="application/rss+xml" title="the VINDICTIVES - The Official Website Of The Chicago Based Punk Rock Band the VINDICTIVES &raquo; Feed" href="http://www.vindictivesmusic.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="the VINDICTIVES - The Official Website Of The Chicago Based Punk Rock Band the VINDICTIVES &raquo; Comments Feed" href="http://www.vindictivesmusic.com/comments/feed/" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.vindictivesmusic.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.vindictivesmusic.com/wp-includes/wlwmanifest.xml" />
<link rel='index' title='the VINDICTIVES &#8211; The Official Website Of The Chicago Based Punk Rock Band the VINDICTIVES' href='http://www.vindictivesmusic.com/' />
<link rel='prev' title='the VINDICTIVES Bio' href='http://www.vindictivesmusic.com/bio/' />
<link rel='next' title='Music Downloads' href='http://www.vindictivesmusic.com/music-downloads/' />
<link rel='canonical' href='http://www.vindictivesmusic.com/' />
<!-- end WP crap -->

<title>
	The VINDICTIVES
<title>

</head><body>

<div id="pageWrapper">

	<h1>
		<span>The</span> VINDICTIVES
		<b><!-- image replacement --></b>
	</h1>

	<ul id="mainMenu">
		<li class="current"><a href="/">Home</a></li>
		<li><a href="/bio/">Bio</span></a></li>
		<li><a href="/message-board-2/">Message Board</a></li>
		<li><a href="/music-downloads/">Music Downloads</a></li>
	</ul>

	<div class="columnWrapper">

		<div id="contentWrapper"><div id="content">

			<div class="subsection">
				<div class="bordertop"><div></div></div>
				<div class="borderSides">

					<h2>Welcome To The VINDICTIVES Online!</h2>
					<p>
						Welcome to the only official VINDICTIVES website. Here you may download the entire VINDICTIVES discography &#8211; for FREE!
					</p><p>
						Paypal Donations of any amount are sincerely appreciated (but not required).
					</p><p>
						Register for our site to access the FREE music downloads and stop by the message board to catch up on VINDICTIVES news, or just to say &#8220;hi&#8221;.
					</p><p>
						Our deepest and most sincere thanks for listening to our music for all of these years. (We&#8217;re still not done).
					</p><p>
						- Enjoy!
					</p><p>
						<em>*(this website has been approved and paid for by Joey Vindictive, 2011)</em>
					</p>

				<!-- .borderSides --></div>
				<div class="borderBottom"><div></div></div>
			<!-- .subSection --></div>

		<!-- #content, #contentWrapper --></div></div>

		<div id="sideBar">

			<form id="ifYouLike" action="https://www.paypal.com/cgi-bin/webscr" method="post">
				<fieldset>
					<legend><span>If you feel like it...</span></legend>
					<input type="hidden" name="cmd" value="_s-xclick" />
					<input type="hidden" name="hosted_button_id" value="B53D28MLGWGWC" />
					<input
						type="image"
						src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif"
						alt="PayPal - The safer, easier way to pay online!"
					/>
				</fieldset>
			</form>

			<form id="loginform1" action="/?action=login&#038;instance=1" method="post">
				<fieldset>
					<label for="user_login1">Username</label>
					<br />
					<input type="text" name="log" id="user_login1" class="input" value="" size="20" />
					<br />
					<label for="user_pass1">Password</label>
					<br />
					<input type="password" name="pwd" id="user_pass1" class="input" value="" size="20" />
					<br />
					<input name="rememberme" type="checkbox" id="rememberme1" value="forever" />
					<br />
					<label for="rememberme1">Remember Me</label>
					<br />
					<input type="submit" name="wp-submit" id="wp-submit1" value="Log In" />
					<input type="hidden" name="redirect_to" value="/wp-admin/" />
					<input type="hidden" name="testcookie" value="1" />
					<input type="hidden" name="instance" value="1" />
					<ul>
						<li><a href="/?action=register&#038;instance=1" rel="nofollow">Register</a></li>
						<li><a href="/?action=lostpassword&#038;instance=1" rel="nofollow">Lost Password</a></li>
					</ul>
				</fieldset>
			</form>

			<img
				src="/sparky.jpg"
				alt="the VINDICTIVES Sparky"
				class="plate"
			/>

			<ul class="socialLinks">
				<li>
					<a
						href="http://www.facebook.com/pages/The-Vindictives/207856985925116"
						title="the VINDICTIVES Official Facebook Page"
					>
						<img
							src="/facebook.png"
							alt="the VINDICTIVES Official Facebook Page"
						/>
					</a>
				</li><li>
					<a
						href="http://twitter.com/#!/joeyvindictive"
						title="Joey Vindictive on Twitter"
					>
						<img
							src="/twitter 2.png"
							alt="Joey Vindictive on Twitter"
						/>
					</a>
				</li>
			</ul>

		<!-- #sideBar --></div>

	<!-- .columnWrapper --></div>

	<div id="footer">
		&copy; The VINDICTIVES 2011. All Rights Reserved.
	<!-- #footer --></div>

</body></html>

Everything else should be done in the CSS.

Yeah, even in compatibility mode the sidebar is still outside of the wrapper in ie9 for me. I tried your advice ralph and I’m still getting the same results.
deathshadow, I made that wp theme in artisteer because I needed to get the site up fast. Right now I’m looking for a quick fix for it to display properly. I intened on going in by hand and cleaning everything up, as i know artisteer writes heavy code. I’ve used it before and just gone in and cleaned up later.

Oops, I take that back. Thanks ralph. YOur suggestion did work. I’d forgotten to save the stylesheet before up;oading it. Thanks! :slight_smile:

deathshadow, I will also be taking your advice as well and cleaning up the clunky code. As I said, I’ve done it before when using artisteer for quick custom templates!

Great, I’m glad that helped. As I say, it displayed fine for me in IE9 and 8 anyway, but setting widths does tend to make things more bulletproof. As ds60 says, it could all be done better anyway. I presume those IE6 & 7 specific style sheets take account of their lack of support for display: table too. (Too lazy to look right now. :slight_smile: )

Can’t say I’ve heard of Artisteer, but if it’s something for turdpress that’s hardly surprising. You have to spend so much time shoving one’s… fist… down wordpress’ throat to even TRY to get it to output sane markup, you couldn’t pay me to work on it.