SitePoint Sponsor

User Tag List

Results 1 to 23 of 23

Thread: Problem with IE

  1. #1
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with IE

    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
    Code:
    <!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
    Code:
    /* 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
    Code:
    /* 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}

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    For the nav bar centering, try this:

    Code:
    #nav {
      list-style-position: outside;
      list-style-type: none;
      margin: 0 auto;
      padding: 0;
      position: relative;
      width: 154px;
    }
    Regarding IE, which version do you mean? There are four of them in common use, all quite different.

  3. #3
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    For the nav bar centering, try this:

    Code:
    #nav {
      list-style-position: outside;
      list-style-type: none;
      margin: 0 auto;
      padding: 0;
      position: relative;
      width: 154px;
    }
    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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by BTC View Post
    When you use "auto" for margin or padding, does that always center the content relative to "top-bottom" & "left-right"?
    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?

  5. #5
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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".



    I see no overlap of right and left columns in IE8. Is your browser using "compatibility mode" by any chance?
    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.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by BTC View Post
    What is the purpose of this compatibility function? Will having this checked affect how IE renders a "live website"?
    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.

  7. #7
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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!

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  9. #9
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  10. #10
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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]-->

  11. #11
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by doogso View Post
    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]-->
    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
    Code:
    /* 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
    Code:
    /* 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
    Code:
    <!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>

  12. #12
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  13. #13
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by doogso View Post
    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?

  14. #14
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by doogso View Post
    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.
    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
    Code:
    /* 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
    Code:
    <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>

  16. #16
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  17. #17
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by doogso View Post
    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!
    Attached Images Attached Images

  18. #18
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  19. #19
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    <!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.

  20. #20
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

  21. #21
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I agree with Crusty about nixing the fixed-position sidebar: any screen smaller (not as tall) as that menu simply can never get to it. Which is one of those user-frustration-moments you see where people yank their hair out by the handful and scream so loud their uvula is screaming too.


    Quote Originally Posted by doogso
    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.
    I learned something interesting from one of my bosses the other day:
    he said "Hey why does the menu of the [rewritten site who's only sitting on the dev server] look short?"
    I knew this was my display: table menu set for IE7 and 6, but he claimed he was viewing in 8 and the other boss has a copy of IE9. I asked him to check if he had accidentally turned on Compatibility view (since this would make IE8 render like IE7).

    He came back later and said that while he hadn't turned it on himself, that it was on by default for pages rendered on an intranet which is what our dev server is.

    I've never heard this before, but if it's true across the board then it's something we devs should be aware of: once these dev sites go online, if they are not to remain on an intranet, no need to worry about someone turning on compat view (and if they did choose to do so, fine: you can either force them back to IE8 or 9 mode with an ugly retarded meta tag called "Edge", or they simply get the site as you built it for IE7, no disaster there).

  22. #22
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    He came back later and said that while he hadn't turned it on himself, that it was on by default for pages rendered on an intranet which is what our dev server is.
    I'm pretty sure someone else noted that in the forums quite recently (unless I read it somewhere else). A very weird choice by Microsoft.

  23. #23
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    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.
    Wow! Thank you once again, you are a blessing! I really appreciate you taking your time to help me!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •