Problem with IE

BTC · April 11, 2011, 12:41pm

I’m rebuilding this a website for a local club and I have encountered some problems with IE. The site looks good in Firefox (except the navigation bar). When I visit in IE, the right column overlaps the left column?

Also I cannot figure out how to center the navigation bar in the left column in firefox?

Any help is appreciated!!

Link:
Windsor Yacht Club

HTML

<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta http-equiv="imagetoolbar" content="no" />
	<meta http-equiv="Content-Language" content="en" />
	<title>Windsor Yacht Club</title>
	<meta name="description" content="The Windsor Yacht Club is the friendliest Little Yacht Club on the Great Lakes." />
	<meta name="keywords" content="windsor yacht club, yacht club, club, windsor, great lakes, boat, boat, dining" />

	<link rel="stylesheet" type="text/css" href="css/style.css" media="screen,projection,tv" />
	<link rel="stylesheet" type="text/css" href="css/screen.css" media="screen,projection,tv" />
	<!--[if IE]><link rel="stylehseet" type="text/css" href="css/ie.css" /><![endif]-->
</head>

<body>
	<div id="Parent">
		<div id="Parent_Left">
			<div id="Parent_Left_Content">
				<p><img src="graphics/wyc.jpg" alt="The Windsor Yacht Club" width="130" height="130" /></p>
				<p class="slogan">The Friendliest Little<br />Yacht Club on the<br />Great Lakes</p>
				<hr class="left_column" />
				
				<!-- Navigation Bar --><ul id="nav">
				<li><a href="#">HOME</a></li>
				<li><a href="#">CLUB INFORMATION</a></li>
				<li><a href="#">DINING</a></li>
				<li><a href="#">RACE</a></li>
				<li><a href="#">VISITORS</a></li>
				<li><a href="#">MEMBERSHIP</a></li>
				<li><a href="#">CLUB EVENTS</a></li>
				<li><a href="#">HERITAGE</a></li>
				<li><a href="#">CONTACT US</a></li>
				</ul><!-- End Navigation Bar -->
				<hr class="left_column" />
				
				<div class="directions">
				<p><span>Latitude:</span> 42 20 29 N</p>
				<p><span>Longitude:</span> 82 56 00 W</p><br />
				<p><span>Phone:</span> (519) 945-1863</p><br />
				<address>9000 Riverside Drive East<br />Windsor, Ontario, Canada<br />N8S 1H1</address>
				</div>
				<br />
			</div>
		</div>

		<div id="Parent_Right"><div class="footer_border"><div id="Corner_Left"><div id="Corner_Right">
			<div id="Parent_Right_Content">
				<h1>Windsor Yacht Club</h1>
				<hr class="header" /><br />
				<p><img src="graphics/wycwater.jpg" alt="Windsor Yacht Club from Water" /></p><br />
				<p>Established in 1937 and having been completely renovated in the early 2001, the Club is located at the mouth of the Detroit River. With Peche Island providing a scenic background and Lake St Clair minutes away, WYC is a gathering place for avid boaters. It is also one of Windsor's most prestigious social venues with a spectacluar bar and patio and an outstanding galley. Enjoying a reputation for warm hospitality, world-class boating and outstanding dining, Club members and guests value and respect this tradition of the Friendliest little yacht club on the Great Lakes</p><br /><br />
				<h2>What's New</h2>
				<ul id="whatsnew">
					<li><a href="#">Upcoming Events</a></li>
					<li><a href="#">Daily Specials</a></li>
					<li><a href="#">Take Out Menu</a></li>
				</ul>
				<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />	
			</div>
		</div></div></div><div id="Footer">Copyright &copy; 2010 - Windsor Yacht Club - All rights reserved - Designed by Joshua Jorgensen</div></div>
	</div>
</body>
</html>

CSS

/* Universal Styles */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}
img,fieldset{border:none}
a{cursor:pointer}

/* Document Structure */
	html{height:100%; cursor:default}
	body{background:#ffffff; cursor:default; height:100%; verdana,kalimati,sans-serif; color:#000}

	#Parent{width:960px}

	#Parent_Left{background:#003366; position:fixed; display:table; float:left; width:200px; height:100%}
	#Parent_Left_Content{text-align:center; display:table-cell; vertical-align:top; padding:10px 10px}

	#Parent_Right{float:right; position:relative; width:750px; border-top:#003366 solid 50px; border-right:#003366 solid 10px}
	#Parent_Right_Content{margin:0px 10px 100px 10px; padding:50px 25px; z-index:1; text-align:left}
	
	#Footer{font:12px "Trebuchet MS", sans-serif; line-height:20px}
	
	/* Corner Images */
	#Corner_Left{background:transparent url(../graphics/cl.jpg) no-repeat top left}
	#Corner_Right{background:transparent url(../graphics/cr.jpg) no-repeat top right}
	
	/* Lines & Borders */
	hr.header{line-height:20px; border-bottom:groove 1px #0C005F}
	hr.left_column {border-bottom:groove 1px D8D8D8; margin:15px 0px}
	div.footer_border{border-bottom:#003366 solid 10px}
	
	/* Directions */
	div.directions {margin-bottom:20px; color:#D8D8D8; text-align:left}
	div.directions span {font-weight:bold; color:#fff}
	div.directions address{font:15px 'Arial',Helvetica,sans-serif}

/* Text */
	h1{font:bold italic 23pt/19pt 'Georgia',serif; color:#0C005F; margin:0px 0px 20px 0px}
	h2{font:20pt/16pt 'Georgia',serif; color:000; margin:0px 0px 30px 0px}
	h3{font:18pt/15pt 'Georgia',serif; color:#003366; margin:0px 0px 20px 0px}
	
	.slogan {color:#fff; font-style:italic}
	
/* Links */
	#whatsnew, #whatsnew ul{
		width:100%; 
		margin:0; padding:0; 
		list-style-type:none; list-style-position:outside; 
		position:relative; 
		line-height:25px;
	}
	#whatsnew li{display:inline; margin-right:25px}
	#whatsnew a{
		background:#0C005F;
		text-align:center; text-decoration:none;
		padding:7px;  
		color:#fff; 
		border:#A3C1FF solid 3px
		-webkit-border-radius:3px;
		-moz-border-radius:3px;
		border-radius:3px;
		-webkit-box-shadow:#666 0px 2px 3px;
		-moz-box-shadow:#666 0px 2px 3px;
	}
	#whatsnew a:visited{color:#fff}
	#whatsnew a:hover{background:#FDD017; color:#003366}

CSS - IE

/* Document Structure */
	html{height:100%}
	body{background:#ffffff; cursor:default; height:100%; verdana,kalimati,sans-serif; color:#000}

	#Parent{width:960px}

	#Parent_Left{background:#003366; position:fixed; display:table; float:left; width:200px; height:100%}
	#Parent_Left_Content{display:table-cell; text-align:center; vertical-align:top; padding:10px 10px}

	#Parent_Right{float:right; position:relative; width:750px; border-top:#003366 solid 50px; border-right:#003366 solid 10px}
	#Parent_Right_Content{margin:0px 10px 100px 10px; padding:50px 25px; z-index:1; text-align:left}
	
	#footer{font:12px "Trebuchet MS", sans-serif; line-height:20px}

/* Links */
	#whatsnew, #whatsnew ul{
		width:100%; 
		margin:0; padding:0; 
		list-style-type:none; list-style-position:outside; 
		position:relative; 
		line-height:25px;
	}
	#whatsnew li{display:inline; margin-right:25px}
	#whatsnew a{
		background:#0C005F;
		text-align:center; text-decoration:none;
		padding:7px;  
		color:#fff; 
		border:#A3C1FF solid 3px
		border-radius:3px;
		box-shadow:#666 0px 2px 3px;
		behavior:url(css/PIE.htc);
	}
	#whatsnew a:visited{color:#fff}
	#whatsnew a:hover{background:#FDD017; color:#003366}

ralphm · April 11, 2011, 1:14pm

For the nav bar centering, try this:

#nav {
  list-style-position: outside;
  list-style-type: none;
  [COLOR="Red"]margin: 0 auto;[/COLOR]
  padding: 0;
  position: relative;
  [COLOR="Red"]width: 154px;[/COLOR]
}

Regarding IE, which version do you mean? There are four of them in common use, all quite different.

BTC · April 11, 2011, 1:44pm

ralph_m:

For the nav bar centering, try this:
#nav {
  list-style-position: outside;
  list-style-type: none;
  [COLOR="Red"]margin: 0 auto;[/COLOR]
  padding: 0;
  position: relative;
  [COLOR="Red"]width: 154px;[/COLOR]
}
Regarding IE, which version do you mean? There are four of them in common use, all quite different.

Thank you for the code corrections. When you use “auto” for margin or padding, does that always center the content relative to “top-bottom” & “left-right”?

For IE, I am using 8.

ralphm · April 11, 2011, 2:05pm

No, just left and right. Margin: 0 auto; means top and bottom margin of zero and left and right margin of “auto”, which centers the element horizontally (as long as it has a width set of less than 100%).

“0 auto” is an abbreviation of “0 auto 0 auto”.

For IE, I am using 8.

I see no overlap of right and left columns in IE8. Is your browser using “compatibility mode” by any chance?

BTC · April 11, 2011, 3:01pm

I apologize, I am using IE 7.4. I unchecked “display intranet sites in Compatibility View” and the webpage looked correct. What is the purpose of this compatibility function? Will having this checked affect how IE renders a “live website”?

Also, the corners and dropshadow for “PIE” in the navigation bar and “What’s New” buttons are not rendering in IE. When I change the path to “css/PIE.htc” in “style.css”, the background disappears in the navigation bar?

Thank you once again for your help, it is greatly appreciated! I apologize for my ignorance, I am still new to this stuff.

ralphm · April 11, 2011, 3:36pm

To be honest, I know very little about IE, being a Mac user. I was only aware of “compatability view” for IE8. When this is chosen, sites basically render as if the browser were IE7, making them more likely to break. So I assume the same mode in IE7 shoves the whole process one step further back, to IE6? Someone else can probably confirm that. Having that mode on certainly does affect live sites on the web in IE8, so far as I know.

Anyhow, viewing your site on IE7 confirms that there is an overlap problem anyway. I can’t easily determine why, though. Maybe those inner divs used for corners are blowing things out somehow.

Sorry I can’t be of more help with the other problems too. I find debugging older versions of IE very hard, especially when I don’t have the files to play with. There are some others around here who will sort you out, though, so hang on.

BTC · April 13, 2011, 1:23pm

ralph_m:

To be honest, I know very little about IE, being a Mac user. I was only aware of “compatability view” for IE8. When this is chosen, sites basically render as if the browser were IE7, making them more likely to break. So I assume the same mode in IE7 shoves the whole process one step further back, to IE6? Someone else can probably confirm that. Having that mode on certainly does affect live sites on the web in IE8, so far as I know.

Anyhow, viewing your site on IE7 confirms that there is an overlap problem anyway. I can’t easily determine why, though. Maybe those inner divs used for corners are blowing things out somehow.

Sorry I can’t be of more help with the other problems too. I find debugging older versions of IE very hard, especially when I don’t have the files to play with. There are some others around here who will sort you out, though, so hang on.

Thank you for your advice Ralph, it’s greatly appreciated! Oh what a world we would live in if Microsoft wasn’t always trying to re-invent the wheel and create their own standards!

ralphm · April 13, 2011, 1:36pm

Yes, MS has a lot to answer for. But still, you have to be practical in web design. It’s really important to check your work in various browsers as you go, to spot trouble when it arises. Then you know at which point the problem has been caused and sort it out. Otherwise multiple mistakes can be built one upon another. It’s a much harder job to sort out problems once the site is done. Even if you fix one problem, it can lead to others. There are various ways to check your work along the way, even if you don’t have all the browsers available to you.

doogso · April 13, 2011, 4:57pm

Delete ‘position: fixed’ from your ‘Parent_Left’ css selector. (as shown)

#Parent_Left{background:#003366; display:table; float:left; width:200px; height:100%}

Amend ‘float: right’ to ‘float: left’ and delete ‘position: relative’ from your 'Parent_Right css selector (as shown)

#Parent_Right{float:left; width:750px; border-top:#003366 solid 50px; border-right:#003366 solid 10px}

That’s it!

doogso · April 13, 2011, 5:49pm

Update to my previous post. I now see why you have used position: fixed; (you want the right side of the page to scroll and the left static)

Try this:

#Parent_Left{background:#003366; position: fixed; left: 0px; top: 0px; width:200px; display:table; height:100%}

#Parent_Right{float: left; margin-left: 200px; width:750px; border-top:#003366 solid 50px; border-right:#003366 solid 10px}

In IE7 that will leave you with a gap between the two <divs> so you will need to throw an IE conditional comment at that browser to reduce the left margin:

<!–[if IE 7]>
<style>
#Parent_Right
{float: left; margin-left: 182px; width:750px; border-top:#003366 solid 50px; border-right:#003366 solid 10px;
}
</style>
<![endif]–>

BTC · April 13, 2011, 7:29pm

Thank you very much for your help, I updated the live link with the code you gave me:
Windsor Yacht Club

Here is what the site looks like with compatibility unchecked:

The structure of the website is correct
The background color and PIE.htc effect disappears in the navigation bar.
Round corners on the “what’s new” buttons are not showing, neither is the drop shadow for PIE.htc

Here is what the website looks like with compatibility checked:

The left column becomes the right column
background and rounded edges are showing for PIE.htc in the navigation bar, but are not vertically centering with text.
The PIE.htc effect for the “whats new” buttons seem to have no effect.

screen.css

/* Universal Styles */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}
img,fieldset{border:none}
a{cursor:pointer}

/* Document Structure */
	html{height:100%; cursor:default}
	body{background:#ffffff; cursor:default; height:100%; verdana,kalimati,sans-serif; color:#000}

	#Parent{width:960px}

	#Parent_Left{background:#003366; position:fixed; display:table; float:left; width:200px; height:100%}
	#Parent_Left_Content{text-align:center; display:table-cell; vertical-align:top; padding:10px 10px}

	#Parent_Right{float:right; position:relative; width:750px; border-top:#003366 solid 50px; border-right:#003366 solid 10px}
	#Parent_Right_Content{margin:0px 10px 100px 10px; padding:50px 25px; z-index:1; text-align:left}
	
	#Footer{font:12px "Trebuchet MS", sans-serif; line-height:20px}
	
	/* Corner Images */
	#Corner_Left{background:transparent url(../graphics/cl.jpg) no-repeat top left}
	#Corner_Right{background:transparent url(../graphics/cr.jpg) no-repeat top right}
	
	/* Lines & Borders */
	hr.header{line-height:20px; border-bottom:groove 1px #0C005F}
	hr.left_column {border-bottom:groove 1px D8D8D8; margin:15px 0px}
	div.footer_border{border-bottom:#003366 solid 10px}
	
	/* Directions */
	div.directions {margin-bottom:20px; color:#D8D8D8; text-align:left}
	div.directions span {font-weight:bold; color:#fff}
	div.directions address{font:15px 'Arial',Helvetica,sans-serif}

/* Text */
	h1{font:bold italic 23pt/19pt 'Georgia',serif; color:#0C005F; margin:0px 0px 20px 0px}
	h2{font:20pt/16pt 'Georgia',serif; color:000; margin:0px 0px 30px 0px}
	h3{font:18pt/15pt 'Georgia',serif; color:#003366; margin:0px 0px 20px 0px}
	
	.slogan {color:#fff; font-style:italic}
	
/* Links */
	#whatsnew, #whatsnew ul{
		width:100%; 
		margin:0; padding:0; 
		list-style-type:none; list-style-position:outside; 
		position:relative; 
		line-height:25px;
	}
	#whatsnew li{display:inline; margin-right:25px}
	#whatsnew a{
		background:#0C005F;
		text-align:center; text-decoration:none;
		padding:7px;  
		color:#fff; 
		border:#A3C1FF solid 3px
		-webkit-border-radius:3px;
		-moz-border-radius:3px;
		border-radius:3px;
		-webkit-box-shadow:#666 0px 2px 3px;
		-moz-box-shadow:#666 0px 2px 3px;
	}
	#whatsnew a:visited{color:#fff}
	#whatsnew a:hover{background:#FDD017; color:#003366}

ie.css

/* Document Structure */
	html{height:100%}
	body{background:#ffffff; cursor:default; height:100%; verdana,kalimati,sans-serif; color:#000}

	#Parent{width:960px}

	#Parent_Left{background:#003366; position:fixed; left:0px; top:0px; width:200px; display:table; height:100%}
	#Parent_Left_Content{display:table-cell; text-align:center; vertical-align:top; padding:10px 10px}

	#Parent_Right{float:left; margin-left:200px; width:750px; border-top:#003366 solid 50px; border-right:#003366 solid 10px}
	#Parent_Right_Content{margin:0px 10px 100px 10px; padding:50px 25px; z-index:1; text-align:left}
	
	#footer{font:12px "Trebuchet MS", sans-serif; line-height:20px}

/* Links */
	#whatsnew, #whatsnew ul{
		width:100%; 
		margin:0; padding:0; 
		list-style-type:none; list-style-position:outside; 
		position:relative; 
		line-height:25px;
	}
	#whatsnew li{display:inline; margin-right:25px}
	#whatsnew a{
		background:#0C005F;
		text-align:center; text-decoration:none;
		padding:7px;  
		color:#fff; 
		border:#A3C1FF solid 3px
		border-radius:3px;
		box-shadow:#666 0px 2px 3px;
		behavior:url(css/PIE.htc);
	}
	#whatsnew a:visited{color:#fff}
	#whatsnew a:hover{background:#FDD017; color:#003366}

html

<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta http-equiv="imagetoolbar" content="no" />
	<meta http-equiv="Content-Language" content="en" />
	<title>Windsor Yacht Club</title>
	<meta name="description" content="The Windsor Yacht Club is the friendliest Little Yacht Club on the Great Lakes." />
	<meta name="keywords" content="windsor yacht club, yacht club, club, windsor, great lakes, boat, boat, dining" />

	<link rel="stylesheet" type="text/css" href="css/style.css" media="screen,projection,tv" />
	<link rel="stylesheet" type="text/css" href="css/screen.css" media="screen,projection,tv" />
	<!--[if IE]><link rel="stylehseet" type="text/css" href="css/ie.css" /><![endif]-->
	<!--[if IE 7]>
	<style>
	#Parent_Right{float:left; margin-left:182px; width:750px; border-top:#003366 solid 50px; border-right:#003366 solid 10px}
	</style>
	<![endif]-->
</head>

<body>
	<div id="Parent">
		<div id="Parent_Left">
			<div id="Parent_Left_Content">
				<p><img src="graphics/wyc.jpg" alt="The Windsor Yacht Club" width="130" height="130" /></p>
				<p class="slogan">The Friendliest Little<br />Yacht Club on the<br />Great Lakes</p>
				<hr class="left_column" />
				
				<!-- Navigation Bar --><ul id="nav">
				<li><a href="#">HOME</a></li>
				<li><a href="#">CLUB INFORMATION</a></li>
				<li><a href="#">DINING</a></li>
				<li><a href="#">RACE</a></li>
				<li><a href="#">VISITORS</a></li>
				<li><a href="#">MEMBERSHIP</a></li>
				<li><a href="#">CLUB EVENTS</a></li>
				<li><a href="#">HERITAGE</a></li>
				<li><a href="#">CONTACT US</a></li>
				</ul><!-- End Navigation Bar -->
				<hr class="left_column" />
				
				<div class="directions">
				<p><span>Latitude:</span> 42 20 29 N</p>
				<p><span>Longitude:</span> 82 56 00 W</p><br />
				<p><span>Phone:</span> (519) 945-1863</p><br />
				<address>9000 Riverside Drive East<br />Windsor, Ontario, Canada<br />N8S 1H1</address>
				</div>
				<br />
			</div>
		</div>

		<div id="Parent_Right"><div class="footer_border"><div id="Corner_Left"><div id="Corner_Right">
			<div id="Parent_Right_Content">
				<h1>Windsor Yacht Club</h1>
				<hr class="header" /><br />
				<p><img src="graphics/wycwater.jpg" alt="Windsor Yacht Club from Water" /></p><br />
				<p>Established in 1937 and having been completely renovated in the early 2001, the Club is located at the mouth of the Detroit River. With Peche Island providing a scenic background and Lake St Clair minutes away, WYC is a gathering place for avid boaters. It is also one of Windsor's most prestigious social venues with a spectacluar bar and patio and an outstanding galley. Enjoying a reputation for warm hospitality, world-class boating and outstanding dining, Club members and guests value and respect this tradition of the Friendliest little yacht club on the Great Lakes</p><br /><br />
				<h2>What's New</h2>
				<ul id="whatsnew">
					<li><a href="#">Upcoming Events</a></li>
					<li><a href="#">Daily Specials</a></li>
					<li><a href="#">Take Out Menu</a></li>
				</ul>
				<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />	
			</div>
		</div></div></div><div id="Footer">Copyright &copy; 2010 - Windsor Yacht Club - All rights reserved - Designed by Joshua Jorgensen</div></div>
	</div>
</body>
</html>

doogso · April 14, 2011, 7:25am

This ‘compatibility’ testing. Just drop it because it’s pointless and incorrect. The only way to test a page is in the actual browser itself.

I’ve been doing web stuff for over ten years and this is the first time I’ve encountered it or come across anyone on any forum using it. There are other software products (Dreamweaver) which have a similar feature which is also useless and unreliable.

Let’s address some issues first. The only IE browser that you will see rounded corners (using css) is IE9. Versions below that do NOT support rounded corners (css) on any element. IF you want rounded corners (without using images) you have to jump through hoops using Jquery or some other solution. NONE are reliable and will break down at some point. The ONLY way at present to have rounded corners in all versions of IE is to use images I’m afraid.

Also you are using attributes such as display: table, display: table-cell; again only IE8 and IE9 have support for this, IE7 does NOT. Personally I would forget IE6 completely unless you have been specifically commissioned to address that browser.

So what we have now, if you include my suggested css amendments, is your page displays correctly in IE7, IE8 BUT without the rounded corners.

It displays correctly in IE9 with the rounded corners.

BTC · April 15, 2011, 12:22pm

doogso:

This ‘compatibility’ testing. Just drop it because it’s pointless and incorrect. The only way to test a page is in the actual browser itself.

I’ve been doing web stuff for over ten years and this is the first time I’ve encountered it or come across anyone on any forum using it. There are other software products (Dreamweaver) which have a similar feature which is also useless and unreliable.

Let’s address some issues first. The only IE browser that you will see rounded corners (using css) is IE9. Versions below that do NOT support rounded corners (css) on any element. IF you want rounded corners (without using images) you have to jump through hoops using Jquery or some other solution. NONE are reliable and will break down at some point. The ONLY way at present to have rounded corners in all versions of IE is to use images I’m afraid.

Also you are using attributes such as display: table, display: table-cell; again only IE8 and IE9 have support for this, IE7 does NOT. Personally I would forget IE6 completely unless you have been specifically commissioned to address that browser.

So what we have now, if you include my suggested css amendments, is your page displays correctly in IE7, IE8 BUT without the rounded corners.

It displays correctly in IE9 with the rounded corners.

Why are you saying that the corners are not working in IE7 & IE8? The corners are images, not jquery?

doogso · April 15, 2011, 12:50pm

Your css corners, on the left navigation menu and the blue buttons at the bottom of the page will not show in IE7 and IE8.

Yes, of course the two large left and right arc images at the top of the page will show, they are images.

BTC · April 15, 2011, 3:10pm

So what would be your advice if I want to have the corners in the design to work in IE? Would I have to make individual <div>'s for each corner? I made this code below and the same result happens (no corners).

CSS

/* Left */
	#Parent_Left{background:#003366; position:fixed; left:0px; top:0px; width:200px; display:table; height:100%}
	#Parent_Left_Content{display:table-cell; text-align:center; vertical-align:top; padding:10px 10px}
		
	/* Corner Images */
	.tl{background:transparent url(../graphics/nav_tl.jpg) no-repeat top left}
	.tl:hover{background:transparent url(../graphics/nav_tl_a.jpg) no-repeat top left}
	.tr{background:transparent url(../graphics/nav_tr.jpg) no-repeat top right}
	.tr:hover{background:transparent url(../graphics/nav_tr_a.jpg) no-repeat top right}
	.bl{background:transparent url(../graphics/nav_bl.jpg) no-repeat bottom left}
	.bl:hover{background:transparent url(../graphics/nav_bl_a.jpg) no-repeat bottom left}
	.br{background:transparent url(../graphics/nav_br.jpg) no-repeat bottom right}
	.br:hover{background:transparent url(../graphics/nav_br_a.jpg) no-repeat bottom right}
		
/* Naviagtion Bar */
	#nav, #nav ul{
	width:154px;
	margin:0 auto; padding:0;
	list-style-type:none; list-style-position:outside;
	position:relative;
	}
	#nav a{
	width:150px;
	margin-bottom:5px;
	display:block;
	font:12px verdana, Geneva, sans-serif; text-decoration:none;
	background:#3D5B9E; color:#fff; border:solid 2px #A3C1FF;
	line-height:25px;
	}
	#nav a:hover{background:#FDD017 scroll no-repeat center; color:#003366; font-weight:bold}

HTML


<div class="tl"><div class="tr"><div class="bl"><div class="br"><li><a href="#">HOME</a></li></div></div></div></div>
<div class="tl"><div class="tr"><div class="bl"><div class="br"><li><a href="#">CLUB INFORMATION</a></li></div></div></div></div>
<div class="tl"><div class="tr"><div class="bl"><div class="br"><li><a href="#">DINING</a></li></div></div></div></div>
<div class="tl"><div class="tr"><div class="bl"><div class="br"><li><a href="#">RACE</a></li></div></div></div></div>
<div class="tl"><div class="tr"><div class="bl"><div class="br"><li><a href="#">VISITORS</a></li></div></div></div></div>
<div class="tl"><div class="tr"><div class="bl"><div class="br"><li><a href="#">MEMBERSHIP</a></li></div></div></div></div>
<div class="tl"><div class="tr"><div class="bl"><div class="br"><li><a href="#">CLUB EVENTS</a></li></div></div></div></div>
<div class="tl"><div class="tr"><div class="bl"><div class="br"><li><a href="#">HERITAGE</a></li></div></div></div></div>
<div class="tl"><div class="tr"><div class="bl"><div class="br"><li><a href="#">CONTACT US</a></li></div></div></div></div>

doogso · April 15, 2011, 3:51pm

No, I’d set the top corner images on your navigation items as a background image on the ‘a’ tag and the bottom corner images on the <span> tag

Effectively what you are doing is creating two images which slide apart if the user enlarges the text by zooming it in their browser.

Here’s and example of the css you would use:

#nav a {
display: block;
padding: 6px 10px;
background-image: url(topCorners.png)
background-repeat: no-repeat;
}

#nav a span {
background-image: url(bottomCorners.png)
background-repeat: no-repeat;
background-position: left bottom;
}

That’s the basic idea but you may have to use some padding or display: block; on the <span> tag to achieve the desired effect.

Once you get that correct set the mouseOver event:

#nav a:hover {
background-image: url(topCornersOver.png)
}

#nav a span:hover {
background-image: url(bottomCornersOver.png)
}

Some just cheat and use just one image on the ‘a’ anchor tag but that is NOT flexible if the text gets enlarged.

BTC · April 19, 2011, 12:45pm

doogso:

No, I’d set the top corner images on your navigation items as a background image on the ‘a’ tag and the bottom corner images on the <span> tag

<a href=“#”><span>Link</span></a>

Effectively what you are doing is creating two images which slide apart if the user enlarges the text by zooming it in their browser.

Here’s and example of the css you would use:

#nav a {
display: block;
padding: 6px 10px;
background-image: url(topCorners.png)
background-repeat: no-repeat;
}

#nav a span {
background-image: url(bottomCorners.png)
background-repeat: no-repeat;
background-position: left bottom;
}

That’s the basic idea but you may have to use some padding or display: block; on the <span> tag to achieve the desired effect.

Once you get that correct set the mouseOver event:

#nav a:hover {
background-image: url(topCornersOver.png)
}

#nav a span:hover {
background-image: url(bottomCornersOver.png)
}

Some just cheat and use just one image on the ‘a’ anchor tag but that is NOT flexible if the text gets enlarged.

I think I am misunderstanding your concept of the images. I tried this and it doesn’t work.

I attached the two images, top and bottom corners. Is this what your referring to? How will these images expand without pixelation? I apologize for my ignorance, I am new to this. Thank you once again for your help!

BTC · April 25, 2011, 7:56pm

Forget the last post, I gave up on the rounded corners. I am going to stay with boxes for now. Thank you for all your help!

system · April 26, 2011, 5:40am

Ok, I’m going to be brutally frank here…

If you are having to send that much CSS to IE via conditionals, your method for building the page is SO FLAWED you might as well scrap it and start over. There is NO reason for such a simple layout to need to be messing around with so many IE conditionals and tricks – it is in fact such a simple layout I cannot fathom what most of that CSS is even FOR.

There’s an old saying, CSS is only as good as the markup it’s applied to – and your markup has… issues. If this is new/rewrite what’s with the tranny doctype as transitional is for supporting old/outdated/half-assed code, not for building new sites, again the IE conditionals for NOTHING, a whole slew of DIV for nothing, paragraphs around non-paragraph elements, presentational image in the markup, nonsensical heading orders, slew of line-breaks for no good reason, and that fixed sidebar? Makes scrolling painful on lesser machines and screws up handhelds, so axe that. There’s a REASON you don’t see a lot of websites doing that… especially since with it fixed if the display is too small you can’t scroll it down.

First, clean out the markup a little:

<!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 Windsor Yacht Club is the friendliest Little Yacht Club on the Great Lakes."
/>

<meta
	name="keywords"
	content="windsor yacht club, yacht club, club, windsor, great lakes, boat, boat, dining"
/>

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

<title>
	Windsor Yacht Club
</title>

</head><body>

<div id="pageWrapper">

	<div id="sideBar">
		<h1>
			Windsor Yacht Club<br />
			<small>The Friendliest Little <span>Yacht Club on the</span> Great Lakes</small>
			<b><!-- image replacement --></b>
		</h1>

		<ul id="mainMenu">
			<li><a href="#">HOME</a></li>
			<li><a href="#">CLUB INFORMATION</a></li>
			<li><a href="#">DINING</a></li>
			<li><a href="#">RACE</a></li>
			<li><a href="#">VISITORS</a></li>
			<li><a href="#">MEMBERSHIP</a></li>
			<li><a href="#">CLUB EVENTS</a></li>
			<li><a href="#">HERITAGE</a></li>
			<li><a href="#">CONTACT US</a></li>
		</ul>

		<div class="directions">
			<span>Latitude:</span> 42 20 29 N<br />
			<span>Longitude:</span> 82 56 00 W<br /><br />
			<span>Phone:</span> &#40;519&#41; 945-1863<br />
			9000 Riverside Drive East<br />
			Windsor, Ontario, Canada<br />
			N8S 1H1
		<!-- .directions --></div>

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

	<div id="content">
		<h2>Windsor Yacht Club</h2>
		<img
			src="graphics/wycwater.jpg"
			alt="Windsor Yacht Club from Water"
			class="plate"
		/>
		<p>
			Established in 1937 and having been completely renovated in the early 2001, the Club is located at the mouth of the Detroit River. With Peche Island providing a scenic background and Lake St Clair minutes away, WYC is a gathering place for avid boaters. It is also one of Windsor's most prestigious social venues with a spectacluar bar and patio and an outstanding galley. Enjoying a reputation for warm hospitality, world-class boating and outstanding dining, Club members and guests value and respect this tradition of the Friendliest little yacht club on the Great Lakes
		</p>

		<h2>What's New</h2>
		<ul id="whatsnew">
			<li><a href="#">Upcoming Events</a></li>
			<li><a href="#">Daily Specials</a></li>
			<li><a href="#">Take Out Menu</a></li>
		</ul>
	<!-- #content --></div>

<!-- #pageWrapper --></div>

<div id="footer">
	<!-- inner DIV is for positioning trick -->
	<div>
		&copy; 2010 - Windsor Yacht Club - All rights reserved - Designed by Joshua Jorgensen
	</div>
<!-- #footer --></div>

</body></html>

Uhg, it’s getting late, but I’ll try to remember to toss together an example CSS that would go with that markup in the morning.

system · April 26, 2011, 8:05am

Insomnia sucks. I ended up taking a lot of liberties as I’m kind-of assuming you do not want that ugly white expanse to the left… and I centered the whole thing.

Of course I missed it, but MOST of your problems was wasting time on CSS3 when it’s not ready for deployment – in particular that pie.htc NONSENSE.

Ok, here’s what I came up with:
Windsor Yacht Club

As always the directory:
Index of /for_others/btc/take2

is unlocked for easy access to it’s bits and pieces. Valid XHTML 1.0 Strict, would be valid CSS 2.1 if not for a few IE workarounds, page tested working just fine IE 5.5, 6, 7, 8 and 9, FF 3.5 and latest, and the latest flavors each of Opera, Saffy and Chrome.

CSS3 is often ‘cute’ – but if you want to do the same appearance some htc file for roundeds isn’t going to cut it… and if you do it right with the images the page isn’t any larger.

Case in point, my rewrite totals 18k… your original is 38k…

I took a LOT of stylistic liberties though… like new rounded corners that are more round, the body background, the centering… the use of dynamic fonts on the content and sans-serif for body text…

Really serif fonts should be avoided for normal document text – it’s hard to read on screen. It’s fine for when you have giant blown up headers or for styling on ‘non-content branding’ like that side text, but using it on normal paragraphs in the document? Not so much.

In getting rid of the fixed sidebar (which was next to useless on my netbook for example even in browsers where it worked) I made up for it by switching the whole thing to a 100% min-height layout, which when the screen is taller than the content keeps that footer at the bottom of the display. this required some z-index ‘trickery’ to make sure the bottom image doesn’t erase the content and that the content background doesn’t erase the footer – but it worked out with no real issues.

No need for bloating out the markup with IE conditional nonsense, no targeting specfic browser with different measurements apart from using height instead of min-height for IE6-… a lot simpler all-around.