SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)

    "Jello Mold" Layout - IE7 faux column issue

    I am wanting to use a jello layout for a site that I am preparing to build. I have found a three column layout that suits my needs, but it seems to have problems displaying the faux columns in IE7. You can see about 5px of the background images peeking below the header. The layout is found here.
    I would appreciate any input about a fix for this.

    I would also like to put a navigation bar under the header.

    Thanks, Rayzur

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's a better way of going about this. My question therefore will be (since I'm going to show you how to do it) how many menu items do you want in the horizontal menu, and will it be a regular CSS menu or a CSS dropdown menu?

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    It will just be a regular horizontal menu like this one here

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, so a regular menu then. One last question. How wide do you want the side columns to be?

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    175px should be fine for side column widths

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I encountered a WEIRD problem with IE 6 forcing the left sidebar to literally disappear until a link was hovered over, so rather than try to fix it, I worked around it. You won't have the min/max width, but that can be "worked around" by adding the min/max width style rule to the body property, then hacking for IE 6 using an expression. Unfortunately the one I used wouldn't work in IE 6 which is really weird given that I have a reputation for getting AROUND these bugs in the first place.

    Anyway, here's the HTML:

    HTML 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>
    		<title>Untitled Document</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<meta http-equiv="Content-Style-Type" content="text/css" />
    		<meta http-equiv="imagetoolbar" content="no" />
    		<meta name="description" content="A brief description of the current page goes here." />
    		<meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished" />
    		<link rel="stylesheet" type="text/css" href="screen.css" media="screen,projection" />
    	</head>
    	<body>
    		<div id="container">
    			<div id="header">
    				<img src="#" width="200" height="80" alt="(Web Site Title) Logo" title="" />
    			</div>
    			<ul id="menu">
    				<li><a href="#">Page One</a></li>
    				<li><a href="#">Page Two</a></li>
    				<li><a href="#">Page Three</a></li>
    				<li><a href="#">Page Four</a></li>
    				<li><a href="#">Page Five</a></li>
    				<li><a href="#">Page Six</a></li>
    			</ul>
    			<div id="content">
    				<div class="wrapper">
    					<h1>Web Page Title</h1>
    					<p>
    						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat.
    						Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et,
    						cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis
    						ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla
    						facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie
    						fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo
    						bibendum, est.
    					</p>
    					<h2>Second Level Heading</h2>
    					<p>
    						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat.
    						Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et,
    						cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis
    						ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla
    						facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie
    						fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo
    						bibendum, est.
    					</p>
    					<h2>Second Level Heading</h2>
    					<p>
    						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat.
    						Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et,
    						cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis
    						ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla
    						facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie
    						fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo
    						bibendum, est.
    					</p>
    				</div>
    			</div>
    			<div id="sidebar1">
    				<p>Text 1</p>
    			</div>
    			<div id="sidebar2">
    				<p>Text 2</p>
    			</div>
    			<div id="footer">
    				<em>
    					Copyright &#38;#169; 2006-2008, The Monster Under the Bed. All Rights to Scare
    					Unsuspecting Children Reserved.
    				</em>
    			</div>
    		</div>
    	</body>
    </html>
    And the CSS that goes with it.

    Code CSS:
    /* My take on the CSS Reset */
    	a, abbr, acronym, address, area, b, bdo, big, blockquote, body, button, caption, cite,
    	code, col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4,
    	h5, h6, hr, html, i, img, ins, kbd, label, legend, li, map, object, ol, p, param, pre,
    	q, samp, small, span, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead,
    	tr, tt, ul, var {
    		margin: 0;
    		padding: 0;
    	}
     
    	body {
    		background: #FFF;
    		color: #000;
    		/* the font "Lucida Console" is included for development only - remove it when you're finished, but don't change anything else */
    		font: 85&#37;/150% "lucida console", tahoma, verdana, arial, helvetica, sans-serif;
    		letter-spacing: 1px;
    		margin: 0 auto;
    		width: 750px;
    	}
     
    	fieldset {
    		border: 0;
    		display: inline;									/* this squashes an IE bug */
    	}
     
    	h1, h2, h3, h4, h5, h6 {
    		font-family: georgia, garamond, "times new roman", times, serif;
    		font-weight: bold;
    	}
     
    	h1 {
    		font-size: 1.5em;
    		font-weight: normal;
    		line-height: 1.8em;
    	}
     
    	h2 {
    		font-size: 1.25em;
    	}
     
    	h3 {
    		font-size: 1em;
    	}
     
    	h4 {
    		font-size: 0.95em;
    	}
     
    	h5 {
    		font-size: 0.85em;
    	}
     
    	h6 {
    		font-size: 0.75em;
    	}
     
    	img {
    		border: 0;											/* this squashes a Firefox bug */
    		vertical-align: bottom;								/* this squashes an IE bug */
    	}
     
    	table {
    		border: 0;
    		border-collapse: collapse;
    		border-spacing: 0;
    	}
    		caption, th, td {
    			font-weight: 400;
    			text-align: left;
    		}
     
    /* ok, now that the "reset" is out of the way, let's get to the layout, shall we? */
    	#container {
    		background: #EEE;
    		color: inherit;
    		height: 1%;
    	}
    		#header {
    			background: #FCD;
    			color: inherit;
    			height: 80px;									/* set the height so that Firefox doesn't collapse the DIV if the image doesn't appear */
    		}
     
    		#menu {
    			background: #0CF;
    			color: inherit;
    			height: 2em;
    			line-height: 2em;
    		}
    			#menu li {
    				display: inline;
    				list-style: none;
    				white-space: nowrap;
    			}
    				#menu li a {
    					background: #0E0;
    					color: inherit;
    					float: left;
    					height: 2em;
    					margin: 0 2px 0 0;
    					padding: 0 0.5em;
    					text-decoration: none;
    				}
     
    				#menu li a:hover, #menu li a:active, #menu li a:focus {
    					background: #FF8;
    					color: #000;
    				}
     
    		#content {
    			float: left;
    			width: 100%;
    		}
    			#content .wrapper {
    				background: #FFF;
    				color: inherit;
    				margin: 0 175px;
    				overflow: hidden;
    			}
     
    		#sidebar1, #sidebar2 {
    			float: left;
    			width: 175px;
    		}
     
    		#sidebar1 {
    			margin: 0 0 0 -100%;
    		}
     
    		#sidebar2 {
    			margin: 0 0 0 -175px;
    		}
     
    		#footer {
    			background: #FFC;
    			clear: left;
    			color: inherit;
    			height: 1%;
    		}
    			#footer em {
    				display: block;
    				font-style: normal;
    				padding: 0.25em 0 0.25em 1em;
    			}

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    You won't have the min/max width, but that can be "worked around" by adding the min/max width style rule to the body property, then hacking for IE 6 using an expression. Unfortunately the one I used wouldn't work in IE 6 which is really weird given that I have a reputation for getting AROUND these bugs in the first place.
    The Min/Max width was my main goal, and to make it cross-browser compatible.
    That is the beauty of the Jello layout. I like how the body margins scale down as the browser window is sized down. It really is an ingenious layout and I have read up on how it works.

    I see that you tried to apply min/max , and as you said the one you used wouldn't work in IE6.

    This site here gives an example of a jello layout that works correctly in IE7, Firefox & Opera, but it is a 2-column and as you know I am after a 3-column just like the code you gave me produced. I am not sure how it behaves in IE6 as I don't have it anymore, I know IE6 doesn't support min/max and thus the need for expressions.

    Just curious, does the original layout example I gave display the faux columns properly in IE6.

    What I am after is something like 700pxmin/950max width. And of course cross-browser compatible.

    By the way, thanks for helping me out with this Dan, I do appreciate it!

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, like I said, the only browser that doesn't support it is IE 6 (and 5, but who cares about 5 in 2008 anyway?). You can use an expression, though the one I tried (which defaults to a fixed width if the expression doesn't work) failed to trigger. It could be something to do with my standalone copy of IE 6, or it could be an IE 6 bug - who knows.

    I can take another stab at it for you if you like.

  9. #9
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I can take another stab at it for you if you like.
    Oh Yes, Please don't stop now. I was just thanking you for volunteering your help.

    I guess I need to set up IE6 again so I can see what's going on with it.

    Just curious, does the original layout example I gave display the faux columns properly in IE6.
    So does it work in IE6?

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From what I can tell, it appears to work.

  11. #11
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    OK, that's good to know! So it is an IE7 issue like my thread title states.

    Now, about the code you provided. I just need to set min & max widths in the body div, and then give an IE expression in the html. That is when we find one that works.
    I want about a 250px difference, 700-950 or 750-1000
    So the CSS should look something like this right?

    Code:
        body {
            background: #FFF;
            color: #000;
            /* the font "Lucida Console" is included for development only - remove it when you're finished, but don't change anything else */
            font: 85%/150% "lucida console", tahoma, verdana, arial, helvetica, sans-serif;
            letter-spacing: 1px;
            margin: 0 auto;
            min-width: 700px;
            max-width: 950px;
        }

  12. #12
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep. And then IE 6 gets the expression. Note that if you put the expression in and give it a backup fixed width, you'll have to trip hasLayout on the #container, which I did by adding height: 1&#37; to the style rule.

  13. #13
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    OK Dan, I played around with the code some more. I don't know if what I've done is standards compliant but it gives me the look I was after in the Jello layout.

    I plan on having a fixed background image on the body and want some margin for it to show until the min-width is reached.

    I have added a set width of 85% above the min/max and it seems to do what I am after. Is that legitimate, it seems to work, in Firefox anyway. It keeps it at 85% of the browser window in between min & max.

    Let me know when you find an IE6 expression, at your convenience.

    Here is what I added

    Code:
    body {
            background: #FFF;
            color: #000;
            /* the font "Lucida Console" is included for development only - remove it when you're finished, but don't change anything else */
            font: 85%/150% "lucida console", tahoma, verdana, arial, helvetica, sans-serif;
            letter-spacing: 1px;
            margin: 0 auto;
    	width: 85%;
            min-width: 700px;
    	max-width: 950px;
    		
        }


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
  •