It works but

HTML & CSS
1
  1. the background .png and the image are (were) both 169px high, but all browsers I used (listed below) rendered the img much larger.
  2. Though I’ve specified height on my “#rotator” and “#banner” (top section floated right), I find that I have to set the margins below this top section as margin-top: -92px.

As the title says, this works – on the latest Firefox, Explorer, Safari, Opera and Chrome.

Here’s the HTML snippet

	<div id="banner">
		<img src="images/banner.png" alt="Brian L Case is The Private Computer Tutor" height="100px" width="365px" />
	</div> <!-- end div banner -->
	<div id="rotator">
		<img src="images/stress5.jpg" id="animimage" alt="stressed lady" height="169px" width="125px" />
	</div> <!-- end div rotator -->
	<div class="clearit"></div>
	<div id="ribbon">
		<ul>
			<li><a href="instruction.html" name="instruction" title="software and hardware instruction">instruction</a></li>
			<li><a href="internet.html" name="internet" title="setup and use of internet">internet</a></li>
			<li><a href="convenience.html" name="convenience" title="convenience of personal tutor">convenience</a></li>
			<li><a href="remotehelp.html" name="help" title="remote help via email or sign in to your computer">help</a></li>
			<li><a href="rates.html" name="rates" title="rates">rates</a></li>
			<li><a href="contactus.html" name="contactus" title="contactus">contact</a></li>
			<li id="current"><a href="#" name="home" title="Private Computer Tutor home page">home</a></li>
		</ul>
	</div> <!-- end div ribbon -->

	<div id="content">
					<h3>in the Chicagoland Area</h3>
			<p>Nothing is more exasperating than installation instructions that don't make sense.</p>

			<p>Do your often wonder if there might be a better way to use your Excel and Word  and other applications?</p>
			<p>The local office guru and the whiz kid down the street are treasures, but you don't want to become a nuisance. Sure, you can take classes, but they can be expensive, inconvenient and may waste your time teaching you much of what you already know.</p>
			<p>Wouldn't it be nice if you could have someone come to your location when you wanted and take as much time as you need to show you how to make the most of your computer applications? </p>
			<p>Patient, thorough, friendly, knowledgeable and at your pace in your home or office, the  <span class="pcc">Private Computer Tutor</span> is here to help.</p>
	</div> <!-- end div content -->
	<div id="leftcol">
		<a href="appointment.php" name="appointment" title="make an appointment">
			Make An<br />
				<img src ="images/scheduleappt.gif" alt="scehdule appointment" />
			<br />Appointment
		</a>
	</div> <!-- end div leftcol -->

And here’s all but the ribbon css (that has no effect other than it, too, must be adjusted – the symptoms remain the same when I remove it)

<!--
		body {
			margin: 0px;
			padding: 0px;
			width: 100%;
			background: #ffd9b3;
		}
		h1, h2, h3 {text-align:center;}
		
		#wrapper {
			width:800px;
			margin:0px auto;
			border:3px solid #ca6500;
			background-image:url('images/toppad.png');
			background-repeat:repeat-x;
			background-size: 10px 200px;
		}	
		#rotator {
			float: right;
			width: 125px;
			height: 169px;
			border-top: 62px solid #ca6500;
			margin-bottom: 0px;
		}
		#banner {
			float: right;
			width: 490px;
			margin-top: 75px;
			height: 169px;
			margin-left: 75px;
			margin-bottom: 0px;
		}
		.clearit{clear:both;}
		#leftcol {
			padding: 0px;
			margin-top: -92px;
			padding-top: 25px;
			float: right;
			width: 110px;
			text-align: center;
			font-weight: bold;
			border-top: 3px solid #ca6500;
		}
		#leftcol img {
			border: none;
		}
		#leftcol a{color: #ca6500;}
		#content {
			float: right;
			padding :0px 15px;
			margin-top: -92px;
			width: 535px;
			border-left: 125px solid #ca6500;
			background-color: #ffffff;
			color: #000000;
		}
		#rightcontent {
			float: right;
			width: 275px;
			padding-right: 15px;
		}
		#leftcontent {
			float:right;
			width: 230px;
			padding-left: 15px;
		}
		#footer {
			padding:2px 2px 2px 90px;;
			background: #ca6500;
			color: #ffd9b3;
		}
		#footer a {
			color: white;
			font-weight: bold;
		}
	-->

[Note the top-margin on “rotator” is to provide a vertical brown column on the top which would intersect the wrapper background.png except that I positioned the “rotator” image at that intersection. Same thinking for the left-margin of the content to simulate continue the column down the page --knowing that the content will always be the longest column – yes, I tried everything else I could find on the 'Net and couldn’t make it work]

It works, but it scares me that I don’t understand why.

Regards,

grNadpa

2

Hi,

  1. The element is exactly the size you set and no bigger so I’m not quite sure what you mean.

  2. If you add a background colour to #ribbon "#ribbon{background:red} " then you will see that your content starts after #ribbon finishes and that is why you have had to drag it back upwards. If the html for #ribbon was longer then you’d need to increase the margin so this is not a viable prospect.

If you give #ribbon a suitable width and float of it then the content will rise up by itself.

I can’t really tell what the page is supposed to look like from that snippet but it looks very disjointed. I’d need to see the whole page or at least a drawing of how it should look to give specific advice.

3

If you give #ribbon a suitable width and float of it then the content will rise up by itself.

Please note the statement in the original post should have read that removing the ribbon had an effect, but still left a sizable top margin. The tip of using a different background color is obvious in retrospect. I’ll see if that doesn’t point out the problem.

I’d need to see the whole page or at least a drawing of how it should look to give specific advice.

Please see www.brianlcase.com

but it looks very disjointed.
Apparently the SEO advice I have is not correct. I’m trying to move the content as lexically close to the top of the page as possible. Someone else (in reply to another draft of this troublesome website rendition) now suggests that such repositioning is wasted effort and that the H1 is the bigger draw (and I don’t have one).

Regards,

grNadpa

4

Hi,

There are some errors on your logic and dimensions.

#banner is only 100px high but you have made it 169px high.

#ribbon ul is not 100px high either.

The only element that needs a negative margin is that nav because you have cleared the element above and it seems you want to drag it into that gap.



#ribbon {margin: -54px -5px 0;}
#ribbon ul{height:auto}
#leftcol,#content{margin-top:0}
#banner{height:100px}
5

Thank you for being so helpful.

All of these issues may well trace back to the first issue I mentioned: The image and the original banner were both 169px tall. MS Paint confirmed this. But when I moved them to the page, the image rendered much larger than the banner. Hence all this goofing around.

The reason the ribbon is moved up is because the repeat-x background I have for it will not stretch to the width of the content. So I dropped the background and moved the ribbon up into the banner for visual effect.

Obviously the acronym C.S.S. stands for something entirely different from my perspective.

grNadpa