CSS Anthology page 302 described technique does not work in IE8

I’m working on a Web site and have floated two images to the left within a container DIV (second image below the first). I tried using the method described in CSS Anthology page 302 using class selector, .clear {clear:both} to position the text belonging to the second image to the right and beginning below the first image (instead of following the paragraph of text belonging to the first image, which it would normally do). However, I found that this does not work in IE8. When I used my developer tools to emulate IE7, it worked as expected.

I fudged it using some additional DIV elements. Is there another way to make this work in IE8?

Hi,

We’d need to see the code you were using as we don’t all have that book :slight_smile:

Are you sure you have that correct as its IE7 that has a problem with clearing floats and not IE8?

When you float sections like that then its best to wrap the image and test ina div so that you can both contain and then clear the floats in each section and avoid all browsers issues.

Assuming you don’t need visible overflow then I would do it like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.wrap {
	width:50%;
	clear:both;
	overflow:hidden;/* contain floats */
	border-bottom: 1px dotted #000;
	margin:10px 0;
	padding:10px;
}
.image {
	float:left;
	width:200px;
	height:200px;
	background:red;
	margin:0 10px 20px;
}
.content {
	overflow:hidden;/* for a rectangualr block to the side of a float*/
	zoom:1.0;/* similar for ie6 and 7*/
}
</style>
</head>

<body>
<div class="wrap">
		<div class="image">Image</div>
		<div class="content">
				<p>Lorem isum text goes here Lorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes here </p>
		</div>
</div>
<div class="wrap">
		<div class="image">Image</div>
		<div class="content">
				<p>Lorem isum text goes here Lorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes here </p>
		</div>
</div>
</body>
</html>


Yes, I’m sure. Using IE8 developer tools, I switched to browser mode IE7 and it worked perfectly. So, I figured there is a bug in IE8. But, I’ll look at it again. I played with it for several hours trying to figure out what I was doing wrong before trying it in IE7. Perhaps I was missing something though. Sometimes when we step away from a problem, and then go back a while later (next day) a problem becomes obvious. There isn’t that much code involved here yet; only a header DIV, sidebar DIV and the main content area where the two photos reside. I’ll recode it the way I had it and see if something shows up that I missed. I believe I did have the photos wrapped in their own DIV at one time, which I floated left, but I’ll try what you posted above and see if something changes.

That Site Point book is very good, by the way (all of them are). I refer to it often, as I often forget how to do a particular thing (I’m old … hahaha!). This is just a sample I’m working on for my portfolio … I thought it would be a good idea, and give me an advantage to have some pre-coded sites ready to use for a particular client (if I had some clients!). It’s just too much fun playing with this stuff, so I don’t mind redoing it and messing around. Thanks for your suggestions.

IE8 does have some bugs but on the whole it is miles ahead of IE7 which is very buggy. IE7 doesn’t clear floats properly in some circumstances and seems to match what you were saying however I don’t rule out that you have encountered an IE8 bug.

BTW the IE developer tools don’t really provide a full emulation of the browsers listed as they miss most of the actual bugs but generally they can give a good idea of how the page looks. IE7 is getting pretty old now so I tend not to spend too much time on it and let it have simpler styles where something is not working.

I agree, about IE7. I had a client once (she left me, thank God - she was a real PITA), that would complain about something not looking right on her husbands computer. Turned out he was using IE7, and they would never update to IE8. I got tired of messing around to make things work in IE7, but I was usually able to. Now she has a really crappy site hosted on GoDaddy, and a Sommerce WordPress theme, instead of the custom site I had built for her! I laughed when I saw it. It’s really ugly.

These days, I’m not going to even bother with old outdated browsers. If people can’t keep updated, it’s not my problem, the way I look at it. What is my problem is I still use WindowsXP Media Center, so I can’t go beyond IE8 myself. I hate to think of trying to update my machine to Windows 7 (but I think it should be possible), and then have to reinstall Apache and PHP 5.3, MySQL etc. all over again. Not that it’s so hard… just a pain, and I don’t want to go through it. Sooner or later, I’m going to have to though.

Okay, I give up on this little problem. I have tried everything, but I notice that it doesn’t matter which browser I use, it still doesn’t work. As I noted above, it works in IE7. I can only conclude that either I am doing something wrong (though I can’t figure out what) or this technique just isn’t going to work in the newer browsers.

Here is my code, if you care to look at it.

Hi,

I don’t see any difference in IE7 or IE8 with the code above so there must be something else going on. Have you made sure the php is being parsed and not leaving any traces above the doctype. Anything above the doctype will throw IE into quirks mode and then all bets are off. (If you had posted the code from View Source we would have been able to see this for ourselves.)

You do have an error here in the css where you have added a rules in the middle of another rule.


.main {
	font-family: arial, helvetica, sans-serif;
	font-size: 16px;
	height: 200px;
	text-indent: 1em;
	line-height: 1.3;
	padding: 10px 15px 10px 0px;
	color: #9a9a9a;
[B] ) .clear {
 clear: both[/B];
}


It should be:


.main {
	font-family: arial, helvetica, sans-serif;
	font-size: 16px;
	height: 200px;
	text-indent: 1em;
	line-height: 1.3;
	padding: 10px 15px 10px 0px;
	color: #9a9a9a;
[B]
}
 .clear {
 clear: both;
}
[/B]

However the code you posted runs the same in IE7 or 8:


<!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-US" >
<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
body {
	margin: 0;
	padding: 0;
	background-color: #000000;
	color: #ffffff;
}
#date {
	float:left;
	margin-left:1082px;
	margin-top: -25px;
	width: 200px;
	height: 25px;
	font-family: century gothic;
	font-size: 14px;
	text-align: right;
	color: #9a9a9a;
}
#header {
	position: relative;
	margin-top: 35px;
	height: 150px;
	width: 100%;
	background-image: url(/images/background/gridbkg.png);
	background-repeat: repeat-x;
}
#logo {
	margin-left: 590px;
	margin-top: 25px;
}
#tagline {
	font-family: century gothic, verdana;
	font-size: 18px;
	color: #ffffff;
	text-align: center;
	width: 420px;
	height: 25px;
	margin-left: 590px;
	padding-top: 5px;
}
#sidebar {
	float: left;
	margin-left: 320px;
	margin-top: -185px;
	height: 900px;
	width: 200px;
	background-color: #2d2d2d;
	background-image: url(/images/background/sidebargradient.png);
	background-repeat: repeat-x;
}
#content {
	float: left;
	margin-top: 30px;
	margin-left: 30px;
	width: 730px;
	height: 690px;
	background-image: url(/images/background/copyblockgradient.png);
}
.image {
	float: left;
	margin: 10px 20px 10px 10px;
	height: 200px;
	width: 200px;
}
.border { border: 1px solid #ffffff; }
h2 {
	font-family: "century gothic";
	text-align: center;
	margin: 10px auto;
	font-size: 20px;
	font-weight: normal;
	color: #ffffff;
}
.main {
	font-family: arial, helvetica, sans-serif;
	font-size: 16px;
	height: 200px;
	text-indent: 1em;
	line-height: 1.3;
	padding: 10px 15px 10px 0px;
	color: #9a9a9a;
}
.clear {
 clear: both;
}
</style>
</head>

<body id="home">
<div id="header">
		<div id="date">Date</div>
		<img id="logo" src="../../images/background/logo.png" alt="logo"/>
		<div id="tagline">
				<p>Custom Designer Jewelry Since 1970</p>
		</div>
</div>
<!-- header -->
<div id="sidebar">
		<div id="navigation">
				<ul id="navmain">
						<li id="navhome"><a href="">Home</a></li>
						<li id="navabout"><a href="">About</a></li>
						<li id="navcontact"><a href="">Contact</a></li>
				</ul>
		</div>
</div>
<!-- sidebar -->

<div id="content">
		<h2>All our jewelry is hand crafted by our own artisans.</h2>
		<div class="image"> <img src="/images/product/gold_ring_set.jpg" height="200" width="200" alt="rings" /> </div>
		<p class="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero elit, venenatis consequat fringilla quis, ultrices sit amet lectus. Pellentesque sed dolor at lectus semper volutpat. Ut at urna sit amet turpis posuere fermentum sed viverra ligula. Proin laoreet placerat eleifend. Cras ante est, suscipit at cursus non, laoreet eu ante. Aenean arcu ipsum, elementum ac pulvinar id, suscipit accumsan metus. Pellentesque aliquam tincidunt aliquet. </p>
		<div class="image"> <img class="border" src="/images/product/diamond.jpg" height="200" width="200" alt="diamond" /> </div>
		<p class="main">Quisque condimentum risus ac est pulvinar cursus non placerat est. Suspendisse ultrices condimentum lacus, ut gravida lectus laoreet ac. Praesent at mi gravida sapien mattis porttitor. Nulla odio leo, pellentesque a gravida eu, lacinia non risus. Vestibulum eget diam magna, sed rutrum purus. Sed mi augue, convallis sed fermentum nec, tempus ut enim. In elementum, arcu bibendum aliquam volutpat, ante nisl ultrices massa, id pretium mi quam luctus diam.</p>
</div>
</body>
</html>


If you don’t mind me pointing them out there are a number of logic errors in your code though and you can’t really construct pages in the manner that you have.


#date {margin-left:1082px;}


You never want to do something like that unless you have a fixed width page but then you would want to float right anyway.


#sidebar {
float: left;
margin-left: 320px;
margin-top: -185px;


Same problem in that you start your page layoot 320px from the edge of the page leaving a dead space gap that helps no one (least of all those users with a 320px wide screen). The margin-top:-185px is a magic number and you should have floated the elements so that they fit without negative top margins like that as that will soon break should content change.

If you have a fixed width page layout then wrap the page in a wrapper of the correct width and center it using margin:auto. Don’t offset something 320px from the left of the window and create an unusable dead space at the side.


#content {	height: 690px;}
.main{height:200px}

You will rarely want a height on your content as that will limit the content and indeed overflow if users have larger text size settings by default. Any container that holds text content should be a fluid height or at least sized in ems. Or you can use min-height if you want an initial height.


#sidebar {
    height: 900px;
}

Same problem here and 900px is another magic number plucked out of the air. You don’t want a height here and a full length sidebar effect could be created by repeating a background image in the main parent wrapper (that I mentioned you should be using).

On your page if the window is smaller than the one on your computer (which only you have) the main content will drop below the sidebar and be mostly unusable.

Hope that helps anyway but feel free to post any questions. It would help in the future if you just pasted your code in here from “View Source” to expedite matters as it takes a while to put all those snippets you attached together :slight_smile:

Thanks for your comments. Just when I thought I had a pretty good handle on desinging with CSS (though I’ve never used tables)! I cut my Web design teeth on CSS. You have now left me with a lot of questions that I didn’t have before.

First things first. I didn’t know what you meant when you said that I had added a rule in the middle of another rule. I didn’t see that, but on close inspection, I noticed I had a ) instead of a } ending the .main rules. I’m surprised it worked at all. Come to think of it, I’m wondering if that’s why I couldn’t make the .clear {clear: both} work? I’ll have t re-code it that way and see if it now works. Perhaps that was my problem all along.

On to the rest of your comments (logic errors???).

This is just a simple layout at this point. It is just two columns, with the page width of 960 pixels, which includes the sidebar (200 px), a 30 px margin to the right, and the main content area of 730 px.

Perhaps I am misinformed, but I thought that the only way to make one element (the sidebar) overlap another element (the header, in my layout) was to use a negative margin. That is why my sidebar has a negative top margin of 185 px, which pushes it all the way to the top of the viewport (the header is set to margin-top: 35px (I don’t like pages pushed all the way to the top of the screen). It was also my desire to have the header span the entire width of the screen, thus the “width: 100%” declaration.

To me, a Web page is artwork, and the code is written to display the art that has been created (I mocked it up first in Paint Shop Pro), as well as the site content, of course.

I use a lot of floats, as they seem to be the easiest way to achieve the design I’m after with the least amount of trouble.

I floated the date line to the left with a large left margin (1082 px) so that it stays put with it’s right margin aligned with the right edge of the page if the page is zoomed in or out. If I floated it right, as you suggest, it scoots all the way over to the right edge of the screen. That’s not what I want. I placed it in the header div and gave it a negative top margin to push it into the space above the header, where I wanted it. That seemed to be the easiest way (I messed around trying to put it up there, outside of the header div, and I wasted a lot of time trying to make it work, as it changed everything else, as one might expect. I finally decided to do it the easy way, and it works.

Yes, my PHP is parsed, or the date wouldn’t show up, and I would be getting nothing but a PHP error message. I’m attaching a screen shot of the source code from my browser.

I don’t see anything very complex or exotic in my CSS or my template. It seems pretty straight forward to me, and it works. What more can I ask? I don’t see why I can’t construct a page this way. Why is this wrong? It gives me the results I want. Isn’t that what it’s all about?

You also said, “Same problem in that you start your page layoot 320px from the edge of the page leaving a dead space gap that helps no one (least of all those users with a 320px wide screen). The margin-top:-185px is a magic number and you should have floated the elements so that they fit without negative top margins like that as that will soon break should content change.” This I don’t understand at all. Who has a 320px wide screen??? The “dead space gap” is in the margin of the page. Again, the page width is 960px (though as I said above, it was my desire to run the header all the way across. That is the design, so as not to look like everybody else does, looking like a box, with some content. Ugh, and how boring. “Should content change?” Who’s going to change it but me? And any content within the sidebar (perhaps some text containing store location info, or perhaps another short vertical menu, shouldn’t affect the positioning of the sidebar. How would it? There won’t be much text in the main content area (copy), as too much copy isn’t going to be read anyhow. People don’t want to wade through a lot of text, unless the site is for the purpose of providing information (a blog, or other site).

I guess I could have used a “wrapper” and set the width to 960px and margin: 35 auto;, but then I would have to have used a negative margin still to get my header graphic all the way to the left of the screen. I guess there are any number of ways this could have been constructed. I chose what seemed to be the least complex.

I welcome your comments.

When he says that you have a rule in the middle of other rule he means that you didn’t close the first rule properly and the second starts in the same line.

Let me “zoom” what he meant



.main {     
        font-family: arial, helvetica, sans-serif;     
        font-size: 16px;
        height: 200px;
        text-indent: 1em;    
        line-height: 1.3;     
        padding: 10px 15px 10px 0px;     
       color: #9a9a9a; [B] [SIZE=4]) [/SIZE].clear {  clear: both[/B]; }

that ) should be a }. And then, .clear should have stated in the next line (for cleaness)

As for the rest, I need to read the previous posts :wink:

Paul is referring to the fact that you have controled the position of your #date using the margin … but you want it on the right… shouldn’t it be floated to the right? and then control its position with the right margin? That makes more sense. It is more logical :wink: We tend to control everything from the left but it is not the only way :slight_smile:

Well, you could also use positiong but since it is a floated element and thus taken out of its natural position according to its order, negative margin in this case is fine.

I think so too :slight_smile:

Already covered

If I floated it right, as you suggest, it scoots all the way over to the right edge of the screen.
Use margin-right to control that :wink:

I don’t see anything very complex or exotic in my CSS or my template.[/quote`] Welcome to the real world… where what seems easy… well, may be not that easy :lol: (sorry, couldn’t help to do a bad joke… that’s me, I’m afrarid)

[quote]It seems pretty straight forward to me, and it works. What more can I ask? I don’t see why I can’t construct a page this way. Why is this wrong? It gives me the results I want. Isn’t that what it’s all about?
Now, I’m confused… :confused: Didn’t you ask for help because it didn’t work? :scratch: But if it works, then I agree with you… you can’t ask for more.

You also said, "Same problem in that you start your page layoot 320px from the edge of the page leaving a dead space gap that helps no one (least of all those users with a 320px wide screen).
Well, let me try to explain it better (Paul, correct me if I understood it wrong). If I browse your page using my mobile (320px width) and you set your layout with a margin of 320px from the left… I will see nothing. If my mobile allows it, I can scroll to the right but the first impression will not be good. Let’s be fluid! :wink:

The margin-top:-185px is a magic number and you should have floated the elements so that they fit without negative top margins like that as that will soon break should content change." This I don’t understand at all. Who has a 320px wide screen??? The “dead space gap” is in the margin of the page.
My mobile, your mobile… any mobile! We have 320px screens! :smiley:

Again, the page width is 960px
for 15-17" screens…
(though as I said above, it was my desire to run the header all the way across. That is the design, so as not to look like everybody else does, looking like a box, with some content.
I like your design :slight_smile:

Ugh, and how boring. “Should content change?” Who’s going to change it but me?
Who knows… maybe in the future you will hire someone to do the job while you’re relaxing at the beach…
And any content within the sidebar (perhaps some text containing store location info, or perhaps another short vertical menu, shouldn’t affect the positioning of the sidebar. How would it? There won’t be much text in the main content area (copy), as too much copy isn’t going to be read anyhow. People don’t want to wade through a lot of text, unless the site is for the purpose of providing information (a blog, or other site).

I guess I could have used a “wrapper” and set the width to 960px and margin: 35 auto;, but then I would have to have used a negative margin still to get my header graphic all the way to the left of the screen. I guess there are any number of ways this could have been constructed. I chose what seemed to be the least complex.
I understand why you wanted to save yourself from using a wrapper… but sometimes it is necessary to avoid browser bugs… well, I would say that most of the times is necessary.

I welcome your comments.
Oooops… these are my comments… but I hope that you don’t mind if I got here in the middle :smiley: (yes, another lame joke ;))

Aren’t these moblie devices really just toys? Seriously, with a screen width that small, who can do any serious Web browsing? My monitor is a wide screen, 20" I think. I don’t think anyone has those old format screens anymore, unless they just have an old computer.

I do see your point, however, with my layout begining 320 px from the left in that case. Perhaps I should modify it to center it no matter what. I’ll play around with it; but I want that header running across the entire page.

I mentioned that I caught that error (missing the closing curly brace). I suspect that is why I couldn’t clear my float (which was my original and only question).

I love the Site Point books. I have learned almost everything I know from Site Point books, but I also have Matt Doyle’s “Beginning PHP 5.3.” I love using server side scripting. It makes building a Website so much easier, and I can use one template for all pages (unless the page layout actually must change significantly), and assign variables for the content, which are defined in the index.php for the particular page. In any case, it’s fun stuff! It ought to be illegal!

Thanks for your comments.

Oh yes, I do! I use my mobile and my Galaxy Tab as much as I use my laptop and my computer… it saved me from having to take my laptop with me so many times! And they are much lighter. And trends say that their use will increase. Mobiles can’t be ignored in a professional web world

Never assume. You never know who’s behind that screen… and there are more people with old screens than you think… in the same way that there more people on dial up connections that you think… and you’ve got to serve them all :slight_smile:

good job if you caught it… I’m afraid that I didn’t catch your comment though :frowning: Sorry about that

Glad that you’re enjoying yourself :smiley:

Hi,

First of all don’t take this comments to heart as we have all made the same mistakes and unless someone points out what’s wrong with an approach then we will never learn the best way to do it.:slight_smile:

Sorry, and I will try and answer as best I can.

First things first. I didn’t know what you meant when you said that I had added a rule in the middle of another rule. I didn’t see that, but on close inspection, I noticed I had a ) instead of a } ending the .main rules. I’m surprised it worked at all. Come to think of it, I’m wondering if that’s why I couldn’t make the .clear {clear: both} work? I’ll have t re-code it that way and see if it now works. Perhaps that was my problem all along.

Yes that’s what I meant and that clear:both rule will not work because it is treated as a malformed selector and ignored.

On to the rest of your comments (logic errors???).

This is just a simple layout at this point. It is just two columns, with the page width of 960 pixels, which includes the sidebar (200 px), a 30 px margin to the right, and the main content area of 730 px.

Then you should create a wrapper of 960px width to hold the columns and get it to center with auto margins. That will allow the design to fit on 960px monitors at least whereas in your example you have set the whole 960px layout 320px from the left of the screen:

e…g


#sidebar {margin-left: 320px;}

That leaves 320px dead space in the left of the viewport (640px in IE6 due to the double margin bug). That;s a waste of your users monitor space and serves no purpose.

Perhaps I am misinformed, but I thought that the only way to make one element (the sidebar) overlap another element (the header, in my layout) was to use a negative margin. That is why my sidebar has a negative top margin of 185 px, which pushes it all the way to the top of the viewport (the header is set to margin-top: 35px (I don’t like pages pushed all the way to the top of the screen). It was also my desire to have the header span the entire width of the screen, thus the “width: 100%” declaration.

Sometimes when working with a fixed height image or fixed height content then you can use neagtive margins but usually when the element you are spanning contains mostly text then you cannot guarantee that 180px is the right height as I may have set my text size to 20px and the text will spill out all over the layout. By letting the height be fluid and avoiding situations where things may overlow or are dependent on fixed criteria you make your layout more robust. There are always exceptions to the rule and sometimes you have no choice but you should always say to yourself “What if?”.

To me, a Web page is artwork, and the code is written to display the art that has been created (I mocked it up first in Paint Shop Pro), as well as the site content, of course.

Unfortunately that is really the wrong approach and a website is all about its content. It should be content first and then design around how the content needs to be presented. In reality it’s a mixture of both but a webpage is not a fixed piece of paper. It’s a living breathing thing that has no boundaries. It has no size that you know about and the size of the content can be changed by the user and out of your control. All you can do is prepare containers that will work for those situations which means letting go of control a little and letting the content dictate the presentation and not the reverse.

When people visit a site the number one reason they visit is for the content. If you have a beautiful site but bad content you will get no return visitors. The ideal is to have a beautiful site and good content of course but content should be the priority.

I use a lot of floats, as they seem to be the easiest way to achieve the design I’m after with the least amount of trouble.

Floats are good as long as you don’t go overboard. You should only float when needed and make sure your floats are contained and cleared when necessary (they are different concepts).

I floated the date line to the left with a large left margin (1082 px) so that it stays put with it’s right margin aligned with the right edge of the page if the page is zoomed in or out.

Too reliant on magic numbers. Just float it right or align the text right. If you used a suitable wrapper then it will all sit well.

Yes, my PHP is parsed, or the date wouldn’t show up, and I would be getting nothing but a PHP error message. I’m attaching a screen shot of the source code from my browser.

Yes that looks ok and I can’t see any problems above the doctype so we can rule out quirks mode.

I don’t see anything very complex or exotic in my CSS or my template. It seems pretty straight forward to me, and it works. What more can I ask? I don’t see why I can’t construct a page this way. Why is this wrong? It gives me the results I want. Isn’t that what it’s all about?

No, it’s all about the results that your visitors want:) The problem with CSS is that there are many ways to do the same thing but very often there is only one right way of doing it and that depends on the dynamics of the page and what comes next.

You also said, “Same problem in that you start your page layoot 320px from the edge of the page leaving a dead space gap that helps no one (least of all those users with a 320px wide screen). The margin-top:-185px is a magic number and you should have floated the elements so that they fit without negative top margins like that as that will soon break should content change.” This I don’t understand at all. Who has a 320px wide screen??? The “dead space gap” is in the margin of the page.

As Nuria said above many mobile users have a 320px screen and will get some nice blank space. If your layout is only 960px wide then don’t force users to open their windows to 960px + 320px to see it. If you have something going in that 320px then that’s a different matter but generally you would want the page to center and to shrink to at least the 960px width of your main container. I have as 27" monitor but I have many windows open at the same time and my browser window at the moment is less that 800px wide.

Again, the page width is 960px (though as I said above, it was my desire to run the header all the way across. That is the design, so as not to look like everybody else does, looking like a box, with some content. Ugh, and how boring. “Should content change?” Who’s going to change it but me?

No I will change it when I increase my font-size to 20px to read the text as will millions of others with bad eyesight.

I welcome your comments.

99% of designing a page is about controlling the dynamics of the content. The design is almost secondary and must adapt to the criteria that the content requires. That’s why a lot of top end designers advocate designing in the browser.

If I’ve understood your requirements properly then I would use an approach like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin:0;
	padding:0;
	height:100%;
}
body {
	background-color: #000;
	color: #fff;
}
#outer {
	width:960px;
	margin:auto;
	min-height:100%;
	position:relative;
	background:#202020;
	z-index:1;
}
* html #outer { height:100% }/* for ie6 as it doesn;t understand min-height but treats height as a minimum- remove if support not required */
#main {
	float:right;
	width:730px;
	padding:0 0 1px;
}
#header {
	position: relative;
	min-height: 140px;
	background:red url(/images/background/gridbkg.png) repeat-x;
	overflow:hidden;
	margin:0 0 10px -30px;
	padding:5px 30px;
}
* html #header { height:150px }
.date {
	text-align:right;
	font-family: century gothic;
	font-size: 85%;
	text-align: right;
	color: #9a9a9a;
	margin:0;
	line-height:35px;
	padding:0 10px 0 0;
}
#logo { float:left }
.tagline {
	font-family: century gothic, Verdana, sans-serif;
	font-size: 18px;
	color: #ffffff;
	text-align: center;
	padding-top: 5px;
	clear:left;
	margin:0;
}
#sidebar {
	padding:35px 0 1px;
	width:200px;
	position:relative;
	z-index:2;
	background: #2d2d2d;
}
/* this next elements creates the full length sidebar background but isn't supported in ie7*/
/* for ie7 you would need to repeat a 200px image down the left side of #outer */
#outer:before {
	content:" ";
	width:200px;
	display:block;
	position:absolute;
	background:#2d2d2d;
	top:0;
	bottom:0;
	left:0;
	z-index:1;
}
#outer:after {
	content:"";
	display:block;
	clear:both;
	height:0;
	visibility:hidden;
}
.sidenav {
	margin:0;
	padding:0;
	list-style:none;
}
.sidenav a {
	color:#000;
	text-decoration:none;
	display:block;
	padding:10px;
	background:#ccc;
	color:#fff;
	border:1px solid #fff;
}
.sidenav a:hover { background:#333 }
.wrap {
	clear:both;
	overflow:hidden;/* contain floats */
	border-bottom: 1px dotted #000;
	margin:10px 0;
	padding:10px;
	zoom:1.0;/* ie7 haslayout*/
}
.image {
	float:left;
	width:200px;
	height:200px;
	background:red;
	margin:0 10px 20px;
}
.content {
	overflow:hidden;/* for a rectangular block to the side of a float*/
	zoom:1.0;/* similar for ie6 and 7*/
}
.overlay {
	position:absolute;
	z-index:0;
	top:35px;
	left:0;
	width:100%;
	min-width:960px;
	height:150px;
	background:red url(/images/background/gridbkg.png) repeat-x 0 0;
}
</style>
</head>

<body>
<div id="outer">
		<div id="main">
				<p class="date">Thursday, Nov 29, 2012</p>
				<div id="header">
						<div id="logo"><img  src="../../images/background/logo.png" alt="logo"></div>
						<p class="tagline">Custom Designer Jewelry Since 1970</p>
				</div>
				<div class="content">
						<div class="wrap">
								<div class="image">Image</div>
								<div class="content">
										<p>Lorem isum text goes here Lorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes here </p>
								</div>
						</div>
						<div class="wrap">
								<div class="image">Image</div>
								<div class="content">
										<p>Lorem isum text goes here Lorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes hereLorem isum text goes here </p>
								</div>
						</div>
				</div>
		</div>
		<div id="sidebar">
				<ul class="sidenav">
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
						<li><a href="#">Link</a></li>
				</ul>
		</div>
</div>
<div class="overlay"></div>
</body>
</html>

I wouldn’t actually use the overlay class shown above but assuming the body isnt carrying an image already I would repeat the image on the body element instead.

Thanks for that. I had not noticed my error previously, and that is the reason that my float was not clearing. It now works. Actually, my .clear selector did start on a new line. That is how I do it.

Glad its sorted.:slight_smile:

(Not to worry but I just look through the files you sent originally and you haven’t utilised the clear class in your html which is why I said it was a css error but as such did not affect the html you gave us.)

Actually, my .clear selector did start on a new line. That is how I do it.

Yes sorry, that was my editor which reformats the code and you helps you spot some typos straight away.

It’s always worth running your CSS through the css validator as it will spot typos like that straight away and stop you pulling your hair out :slight_smile:

Hi Paul,

Questions, questions, questions. I was looking at your code above, and see a lot of confusing things; things I have not run into nor found anything about in my books. But first, I do not even try to design for IE6. That is a total waste of time, in my opinion. It is too out dated, was buggy, and didn’t support much. I don’t use Windows 98 anymore either, and my CPU isn’t a 100Mhz (kidding here, but you get my point). Even IE7, is like a Model T Ford.

While I may put my design concept together in a graphics program (useful when working for a client, because changes are simple, and can be quickly emailed for approval. As I’m designing in the graphics program, I have a pretty good idea how it will be structured in the code, so it saves time there too.

First question:
Could you explain z-index? What is it, what does it do, and how do I use it? Is it supported by IE8? It would imply that it is a stacking order, so I get the impression it could be used to overlap two divisions, such as my sidebar overlapping the header in my design. Would I be correct?

In your code example above, you have:
<style type=“text/css”>
html, body {
margin:0;
padding:0;
height:100%;
}

What is the purpose of “html” preceeding “body” in that style declaration? This is what I am familiar with:

  • {
    margin: 0;
    padding: 0;
    }

body {
margin: 0;
padding: 0;
background-color: #000000;
color: #ffffff;
}

Explain this line and why is it separate from the #header ID selector above it?

  • html #header { height:150px }

What is “min-height” and what does it do? Why is there a “overflow: hidden;” rule in the #header seletcor? I know what “overflow” normally does (add’s scroll bars), but I don’t see the reason it would be in the #header?

Why would I want a full length sidebar? I could understand on a Web site that scrolls down seemingly forever (I hate sites like that), but I like a defined page height. Too much scrolling is an annoyance, unless it’s a blog or some other kind of “informational” site, and even many of them break up the content on several pages, a much better way, in my opinion.

What in the world is all this, and what does it do?

#outer:before {
content:" “;
width:200px;
display:block;
position:absolute;
background:#2d2d2d;
top:0;
bottom:0;
left:0;
z-index:1;
}
#outer:after {
content:”";
display:block;
clear:both;
height:0;
visibility:hidden;
}

Many more questions. What is .overlay? What is zoom: 1.0? These are things I cannot find explained in anything I have. I havn’t run into them anywhere. Maybe I need to check out Alistapart for some answers?

Your design philosophy is certainly different than mine. I see no reason to think of a Website any differently than when facing a blank piece of paper and envisioning the design coming together to fill the space.

I think one of the reasons we have so many ugly Websites on the Net is because too many “designers” are programers only and have no artistic ability whatsoever. To me, design is everything. “Content” should be made to fit the design, and become part of it (unless the purpose of the site is only for information, in which case you are really just creating a “paper.”

A company Website is to create an image. It also is for the purpose of creating an emotional response (favorable, of course) so that a visitor will make a decision to call for more information, for an appointment, etc. I like to say that a Website is “your company’s ‘face’ on the Web.” It better look good.

Too much copy on a company Website isn’t going to be read. A well thought out headline (the purpose of which is to get the viewer to read the next line, i.e., the copy) is important. The copy should be well written, and elicit a response, but too much of it will lose the visitor. Tell about your product or service, but brevity is king. A good source on copy writing that I would reccomend to anyone creating Websites is “The Copywriter’s Handbook”, by Robert W. Bly.

A company Website is an advertisement. That is why design is so important. It should quickly grab the attention of the visitor. An ugly Website isn’t going to do that, but will elicit a negative response. There are far too many Websites with too much “content” and not enough “design.” That’s because they weren’t designed by artists, but technicians. People who know nothing about advertising art.

I have an advantage over them. I am a graduate of The Art Institute of Pittsburgh (1964), and I have attended some good advertising seminars, lead by a “powehouse” in advertising, Jack Trout.

If all anyone wants on a Website is “content,” then just create a Wordpress blog and be done with it. That is what my former client did, and she is now the proud owner of one of the ugliest Websites on the Net. Design is nonexistant, and in my opinion, she destroyed her image. But, we had “issues;” she always had changes and additions for me to do, but she didn’t like paying for them.

I do always validate my CSS and my HTML on every Website. Any errors I get I fix. And I always advertise the fact that the code is validated, by placing the little graphic at the bottom of the page. :slight_smile:

However, since the Website we have been discussing only exists on my machine at present, and is not a live site, I cannot use the validator.

Paul, I meant to ask you before, what do you mean when you say “magic number” pulled out of the air?

No worries - That’s how you learn and its good to ask:)

Some of my replies may souind as though I am being awkward but I am just putting forward the other side of the coin and are meant in a light hearted way.

But first, I do not even try to design for IE6. That is a total waste of time, in my opinion.

No that’s fine and most people have dropped IE6 support now anyway. I still support IE6 but only at a minimum level. I know all the bugs and what to avoid so its no problem for me as I cut my teeth on ie5 and 6 but for others it would be time consuming to work out all the bugs.

First question:
Could you explain z-index? What is it, what does it do, and how do I use it? Is it supported by IE8? It would imply that it is a stacking order, so I get the impression it could be used to overlap two divisions, such as my sidebar overlapping the header in my design. Would I be correct?

Yes z-index determine how “positioned” elements are stacked on the page. It is supported in all browsers right back to the beginning although earlier browsers did have numerous bugs.

There are a couple of important things you should know about z-index:

  1. Only positioned elements can have a z-index (position:absolute,position:fixed or position:relative).

Therefore if you have a static (position:static - the default) element then z-index will not work alone. you would first need to add position:relative and then the z-index will take effects. Adding position:relative without co-ordinates will have no visual effect on the element but will allow z-index to work.

  1. Ultimately its the positioned parent (with a z-index other than auto) that determines the stacking context of its children. A parent with a z-index of one will be “atomic” for all its children and even if a child has z-index of 9999999 it will not lie on top of any element outside its current stacking context that has a z-index of 2.

  2. IE7 applies z-index:0 by default to all positioned elements which means that children can never escape from the confines of a positioned parent. This is an error and it should be z-index:auto by default which allows the children to interact outside that structure.

  3. If no z-index is applied then elements that follow later in the html will generally have precedence in the stacking order where overlaps are concerned.

In your code example above, you have:
<style type=“text/css”>
html, body {
margin:0;
padding:0;
height:100%;
}

What is the purpose of “html” preceeding “body” in that style declaration? This is what I am familiar with:

When you create styles you can use a comma separated lists where property values may be shared between elements.

If for example you had these rules:


h1{margin:0 0 1em;color:red;background:#fff}
h2{margin:0 0 1em;color:red;background:#fff}
p{margin:0 0 1em;color:red;background:#fff}

Then you could use the comma separated list instead and save tons of code:


h1,h2,p{margin:0 0 1em;color:red;background:#fff}

The comma just separates the selectors just as though they were in example one. There is no relationship between the selectors in the comma separated list. They are all individual.

Explain this line and why is it separate from the #header ID selector above it?

  • html #header { height:150px }

That is the IE6 hack and as you don’t support IE6 the code can be removed. It is a mechanism to supply styles to IE6 only using a flaw in its parsing mechanism. Its valid code but nonsense as the html element has no parent so the universal selctor (*) should fail at that position. IE6 gets this wrong and is therefore a 100% safe hack to use for giving styles to only IE6 and has been the lifeblood for many a coder.

We hide the height:100% from other browsers because that would limit the height to an initial 100% and thus content would spill out when exceeded. However IE6 treats height as min-height and will always expand a container to fit its contents.


What is "min-height" and what does it do? Why is there a "overflow: hidden;" rule in the #header seletcor? I know what "overflow" normally does (add's scroll bars), but I don't see the reason it would be in the #header?

min-height sets a minimum height for the page. I set height:100% for html and body (this s the only place you can really use height:100%) and then the first wrapper on the page can utilise min-height:100% and thus stretch all the way to the bottom of the viewport. You can’t nest min-height inside another min-height with a percentage value as that defaults to auto so the only time this construct is useful is on the page wrapper where the min-height:100% is based on the body’s height:100%.

The overflow:hidden was used to contain the floats in the header. there are many ways to contain floats but when you don’t need visible overflow then overflow:hidden is one of the easiest. If an element contains only floats then it has no height because floats are removed from the flow so you need ot contain the float when you want the parent to wrap around it.

Why would I want a full length sidebar?

That looked like what you were aiming for with your 900px high sidebar. Another magic number you plucked out of the air that has no relevance on your page (You can read up on the magic number here).

I could understand on a Web site that scrolls down seemingly forever (I hate sites like that),

Well you just created one foe me :slight_smile: When I open your page in my browsers your sidebar scrolls down for 500px below the viewport yet there is no content down there. That’s a sure sign of a bad design concept. If you look at my example the sidebar goes to the bottom of the viewport and there is no vertical scrollbar. However my sidebar will increase in height should content in that column exceed the available viewport height as required.


 but I like a defined page height. 

The Number 1 newbie mistake I’m afraid.:slight_smile: Fixed heights just don’t work on the web unless its a fixed height photo gallery with no real content but even then it would be in ems and not px so that it grows on font resize.

There was a campaign about Fixed heights and the slogan was "Just say No " :slight_smile:


Too much scrolling is an annoyance,

…and that’s exactly what your page does for me. It gives me a great big vertical scrollbar and I have to go and look and see what’s there and find out there’s nothing there. So you’ve not only given me a vertical scrolbar you’ve made me look foolish for going and looking :slight_smile:

unless it’s a blog or some other kind of “informational” site, and even many of them break up the content on several pages, a much better way, in my opinion.

I know what you were getting at and long pages can be a sign that the author has not thought enough about the content they want to present so pages that go on forever are a turn off also.

However you never need to define the height and just let the content define the height and in that way users can resize the text and you can add or remove content withoot changing line of code.

What in the world is all this, and what does it do?

#outer:before {
content:" “;
width:200px;
display:block;
position:absolute;
background:#2d2d2d;
top:0;
bottom:0;
left:0;
z-index:1;
}
#outer:after {
content:”";
display:block;
clear:both;
height:0;
visibility:hidden;
}

That’s just the css3 pseudo elements and allows us to place certain content/effect into the page via css.

I used #outer:before to apply the full length sidebar background to the page without the need for adding an extra element. The #outer:after rules were another float clearing technique and you can read up on it here along with the more advanced version.

Many more questions. What is .overlay?

That was an empty element I placed n the page to create that full width red background. As I mentioned above that stripe could be added a s a simple repeating background image to the body element instead - assuming you didn’t have another image on the body.

What is zoom: 1.0?

It is proprietary IE code (invalid but harmless) and used a s a trigger for haslayout. Most of IE’s bugs (IE6/7) are down to the element not having haslayout and you can read up on it in that link I just gave.

These are things I cannot find explained in anything I have.

Then you didn’t buy my book :slight_smile: They are all mentioned in the Sitepoint reference which is takes from the book of which I was co author. You will also find a mention of most of these points in the CSS faq (link in my sig).

Your design philosophy is certainly different than mine. I see no reason to think of a Website any differently than when facing a blank piece of paper and envisioning the design coming together to fill the space.

Yes it is a fundamental change and I approach it from a coders point of view as drawings just don’t give the real picture :slight_smile:

Designing on paper is fine but it only tells a fraction of the story. If I asked you to draw a picture on your piece of paper and then say tear it in half and see if the picture stills fit you couldn’t do it. Yet that’s exactly what we have to cope with on the web. We have no fixed drawing surface. We don’t even have control of the pencil.

A good website is a marriage of the two. Good design and a good user interface.

I think one of the reasons we have so many ugly Websites on the Net is because too many “designers” are programers only and have no artistic ability whatsoever. To me, design is everything. “Content” should be made to fit the design, and become part of it (unless the purpose of the site is only for information, in which case you are really just creating a “paper.”

No that’s the totally wrong way again and another common mistake - especially from designers. Content is king. There have been many surveys carried out and the one over-riding factor is that users will continue to revisit a site even if it is ugly but as long as the content is good and the site easily used. On the other hands flashy but unusable sites just die. As I said you want the best of both worlds but design should not outweigh content.

A company Website is to create an image. It also is for the purpose of creating an emotional response (favorable, of course) so that a visitor will make a decision to call for more information, for an appointment, etc. I like to say that a Website is “your company’s ‘face’ on the Web.” It better look good.

No - it better work or you will lose customers. It’s no good someone saying “ooh that looks nice” and then trying to click underlined text that’s not a link or fill in a contact form that doesn’t work or a page that is badly broken on the resolution they are viewing at.

Too much copy on a company Website isn’t going to be read. A well thought out headline (the purpose of which is to get the viewer to read the next line, i.e., the copy) is important. The copy should be well written, and elicit a response, but too much of it will lose the visitor. Tell about your product or service, but brevity is king. A good source on copy writing that I would reccomend to anyone creating Websites is “The Copywriter’s Handbook”, by Robert W. Bly.

Good content is good content It can be short or long depending on the requirements but usually on the web shorter is better as surfers have quick attention spans which is why they switch off a site that wont work for them. Many established surfers switch off images anyway to surf faster. I had connection problems for six weeks during sept/oct and the only way I could surf was with images and js disabled.

Remember google doesn’t see your images and for an ugly site google must be at the top yet it is one of the most popular because its so easy and quick to use. No splash page, no irrelevant features. Just straight to the point.

A company Website is an advertisement. That is why design is so important. It should quickly grab the attention of the visitor. An ugly Website isn’t going to do that, but will elicit a negative response. There are far too many Websites with too much “content” and not enough “design.” That’s because they weren’t designed by artists, but technicians. People who know nothing about advertising art.

I have an advantage over them. I am a graduate of The Art Institute of Pittsburgh (1964), and I have attended some good advertising seminars, lead by a “powehouse” in advertising, Jack Trout.

If all anyone wants on a Website is “content,” then just create a Wordpress blog and be done with it. That is what my former client did, and she is now the proud owner of one of the ugliest Websites on the Net. Design is nonexistant, and in my opinion, she destroyed her image. But, we had “issues;” she always had changes and additions for me to do, but she didn’t like paying for them.

The web is unlike any other medium and designers and experts from outside this medium have little relevance. A good design is important and fundamental design concepts and artistic qualities are also important but they are all secondary to the way that the web works. The best designers on the web are the ones that can marry those distinct qualities into a usable webpage.

These days its even more important to design with care as more and more clients are demanding responsive websites which cannot follow any single drawing.

I understand the designers view as I work with them all the time as I mainly code templates for designers but quite often I get designs from experienced designers that just won’t work on the web. Not everything is possible or feasible and just because you can draw it doesn’t mean it can be coded into a satisfactory working layout.:slight_smile:

However after saying all that I still urge you to be creative and to think outside the box. Good design doesn’t have to be boring design - it just has to work. Don’t take my word for it either :). Do some research and come to your own conclusions.

That’s old hat I’m afraid and validation is a means to an end. No one’s interested in the little logos (we all had them years ago :)). However it does show you are keen to get a valid site which is good. The problem these days is that with vendor prefixes so prevalent and necessary it is not possible to get 100% valid code for every site.

However, since the Website we have been discussing only exists on my machine at present, and is not a live site, I cannot use the validator.

You can just paste your code onto that link I l already gave you. No need to be live. I keep the tab open in the browser and paste in my code frequently during development. Never wait until the end as that’s too late and you may build your page on a foundation that’s not solid. If you have Firefox then you can the html validator extension which shows errors immediately in the status bar even for local sites.