57 replies [Last post]
Max71
Offline
Regular
Last seen: 11 years 1 week ago
Timezone: GMT-7
Joined: 2008-09-24
Posts: 26
Points: 0

I did it last night before I changed just the background and other non essentials. Now its whacked. I'm been working on it for 5 hours. I'm blind.

Help, please. The text box needs to be aligned top between the photos.

http://hipnoticinc.com/alpha/alpha.reptile.bearded-dragons.for-sale.html

Yet, somehow I got it to work last night here. But I can't duplicate it with just a color block above and a different bg.

http://hipnoticinc.com/alpha/alpha.reptile.chameleon.for-sale.html

Here's the page 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"><!-- InstanceBegin template="/Templates/alpha template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Alpha Reptile Bearded Dragons for Sale</title>
<!-- InstanceEndEditable --><link href="alpha.css" rel="stylesheet" title="alpha.css" type="text/css" />
<style type="text/css" ></style>
<script type="text/javascript" src="p7pm/p7popmenu.js"></script>
<style type="text/css" media="screen">
<!--
@import url(p7pm/p7pmh0.css);
-->
</style>
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
</head>
<body onload="P7_initPM(1,7,1,-20,10)">
<div id="wrapper">
<div><a href="index.html" target="_self">
<div id="header"></div></a></div>
<div id="navbar">
  <ul id="p7PMnav">
    <li><a href="#" class="p7PMtrg">Breeders</a>
        <ul>
          <li><a href="alpha.reptile.chameleon.breeders.html">Chameleons</a></li>
          <li><a href="alpha.reptile.bearded-dragon.breeders.html">Bearded Dragons</a></li>
          <li><a href="alpha.reptile.snakes.breeders.html">Snakes</a></li>
        </ul>
    </li>
    <li><a href="#" class="p7PMtrg">Available</a>
        <ul>
          <li><a href="alpha.reptile.chameleon.for-sale.html">Chameleons</a></li>
          <li><a href="alpha.reptile.bearded-dragons.for-sale.html">Bearded Dragons</a></li>
          <li><a href="alpha.reptile.snakes.for-sale.html">Snakes</a></li>
          <li><a href="#">More</a></li>
        </ul>
    </li>
    <li><a href="alphareptile.reptile.parties.html">Reptile Parties</a></li>
    <li><a href="alphareptile.care.sheets.html">Care Sheets</a></li>
    <li><a href="alphareptile.testimonials.html">Testimonials</a></li>
    <li><a href="alphareptile.shipping.terms.html">Shipping/Terms</a></li>
    <li><a href="alphareptile.contact.html">Contact</a></li>
    <!--[if lte IE 6]><style>#p7PMnav a{height:1em;}#p7PMnav li{height:1em;}#p7PMnav ul li{float:left;clear:both;width:100%}</style><![endif]-->
    <!--[if IE 6]><style>#p7PMnav ul li{clear:none;}</style><![endif]-->
    <!--[if IE 7]><style>#p7PMnav a{zoom:100%;}#p7PMnav ul li{float:left;clear:both;width:100%;}</style><![endif]-->
  </ul>
</div>
<!-- InstanceBeginEditable name="Alphabody" -->
 
<div id="beardbnavbg">
<div id= "beardbleftnav">
  <p id="sidebarphoto1"><img src="images/sidebar-photo.jpg" width="80" height="60" /> </p>
  <p class="sidebartext"><a href="index.html">Chameleons</a></p>
  <p id="sidebarphoto2"><img src="images/sidebar-photo.jpg" width="80" height="60" /> </p>
  <p class="sidebartext"><a href="index.html">Bearded Dragons</a></p>
  <p id="sidebarphoto3"><img src="images/sidebar-photo.jpg" width="80" height="60" /> </p>
  <p class="sidebartext"><a href="index.html">Snakes </a></p>
</div></div>
 
<div id="beardbbody">
 
  <p id="beardbhead">Alpha Reptile Bearded Dragons for Sale</p>
 
<!---------------PHOTO/TEXT BLOCKS START-------------->
 
 
 
	 <div id= "beardbphoto1"><a href="images/kid_in_tub.jpg"><img src="images/kid_in_tub.jpg" 
width="160" height="120" /></a></div>
 
 <div id= "beardbphoto2"><a href="images/Karma_color.jpg"><img src="images/Karma_color.jpg" 
width="160" height="120" /></a></div>
 
<div id="photoblock">
	<p id= "beardedtitle1">Ambilobe  jljaslk alskjdljk 9dajks asldjla0k </p>
	<br />
  <p id= "beasdedtext1">djldoiu jdlkjasdlkjuasd jlaksd jljkas lasj lkjasdljlasdjlkjads ojue ldsjljasd lkjasoiuwel aslkjladskj owelkjasldkjlask o9e pa jgjhgwj kjhaskjh ask jhsak jhsakj haskjha skjhas kjhas jhdskjh khjd k kshd sdk hkds khsd k </p>
  <p class="beasdedstatustext">Babies Available</p></div>
 
  <!---------------PHOTO/TEXT BLOCKS ENDS-------------->
 
 
 
</div>
<!-- InstanceEndEditable -->
<div id="footer">
<p id="footertext"><strong > <span class="tealtext">We offer a wide range of reptiles: </span><span class="footerblue"><a href="alpha.reptile.chameleon.for-sale.html">Chameleons</a>, <a href="alpha.reptile.bearded-dragons.for-sale.html">Bearded Dragons</a>, <a href="alpha.reptile.snakes.for-sale.html">Snakes</a> & <a href="index.html">More</a></span></strong> 
<strong><br />
<span class="tealtext">Why buy from us?</span></strong> pojewpojew pewj ewpojew jds pjd pewjp ewpj  ewpj ewpojpew pj ewpjewp ewpjo ewpjew pewpj ewpjewpewpjpew jpewjpew jpjewpj ewpjewpjo ewpj epwjpewj pjewpoj ewpjewpojewpoj ewpjoewpojewpojewpojewpojew ;kds ;ds ;kds ;k d; sd;k sd;s dk; s;k d;s ;dk;s kd ;kds; ;k sd;k ;sd;ksd ;ksd; k;sdlk popkdpokds;lksd </p>
 
</div>
</body>
<!-- InstanceEnd --></html></div>
 
 
 
Here is the corresponding CSS:
 
p#beardbhead {
	float:left;
	display:block;
	height:50px;
	width:690px;
	background-color: #021642;
	text-align: center;
	font-size: 14px;
	color:#03feef;
	font-weight: bold;
	margin:0px 0 40px 0;
	letter-spacing: 6px;
	line-height: 50px;
	clear:both;
	}
 
 
#beardbphoto1 {
	background-image:url(images/photo-frame-blue-tall.png);
	float:left;
	margin: 0px 0px 0 20px;
	/*padding: 15px 0px 0px 15px;*/
	width: 178px;
	height: 139px;
 
}
 
#beardbphoto2 {
	background-image:url(images/photo-frame-blue-tall.png);
	float:right;
	margin: 0px 10px 0 0px;
	/*padding: 15px 0px 0px 15px;*/
	width: 178px;
	height: 139px;
 
	}
 
#photoblock {
display:block;
float:left;
padding: 0;
width: 270px;
height: 137px;
/*background-color:#5c6c86;*/
background-image:url(images/bearded-text-bg.png);
margin: 0 0px 0px 220px;
clear: both;
 
}
 
#beardbphoto1  a {
width: 160px;
height: 120px;
display: block;
border: 6px solid #fff;
}
 
 
 
 
#photoblock {
display:block;
float:left;
padding: 0;
width: 270px;
height: 137px;
/*background-color:#5c6c86;*/
background-image:url(images/bearded-text-bg.png);
margin: 0 0px 0px 220px;
clear: both;
 
 
 
 
 
}
 
 
p#beardedtitle1 {
	float:left;
	display:block;
	background-color: #57699f;
	font-size: 11px;
	color: #cadafe;
	font-weight: bold;
	padding-left: 3px;
 
	width:268px;
	height:16px;
	margin: 0px 80px 0px 0px;
 
 
 
}
 
p#beasdedtext1 {
	float:left;
	font-size: 11px;	
 
	padding: 0px 0 0 5px;
	margin: 0 80px 0 0px;
	width: 257px;
	line-height: 20px;
	color: #CCCCCC;
 
	}
 
.beasdedstatustext {
 
	font-size: 10px;
	color: #03feef;
	font-style: italic;
	text-align: left;
	font-weight: bold;
	/*line-height: 20px;*/
	text-align:right;
	width: 257px;
	/*margin-left:200px;*/
 
}

mod edit/ code tags added, please use in future

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 46 weeks 9 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Hours? I've been stumped

Hours? I've been stumped for days at a time. Hours is nothing.

A couple of suggestions:

Use a STRICT document type, not transitional.

Get your html valid. You have too many html errors and there is no CSS standard on invalid html.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Max71
Offline
Regular
Last seen: 11 years 1 week ago
Timezone: GMT-7
Joined: 2008-09-24
Posts: 26
Points: 0

This is my first attempt at

This is my first attempt at a full CSS site after months of studying. I'm not sure the HTML code errors since the code there is very little. Most all the code was generated by PVII for the nav. I just did simple body and footer.

I'm new. Be gentle. I appreciate it. Just trying to learn and improve my skillset in order to get more work.

osgood
Offline
Enthusiast
Last seen: 10 years 50 weeks ago
Joined: 2008-09-24
Posts: 61
Points: 0

Your css is a bit jumbled up

Your css is a bit jumbled up and has many redundant attributes. Copy all of the css/html below (scroll down the page a bit) paste it in your html editor (Dreamweaver) and study it.

If you have repeating css styles for different containers then group them by using a comma between the selectors like:

#containerLeft, #containerRight {
width: 200px;
border: 1px solid #000;
}

COPY HTML/CSS from here on down:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<style type="text/css">
body {
font-family: verdana, arial, helvetica, san-serif;
}
.photoBlockWrapper {
width: 654px;
}
#beardbPhoto1, #beardbPhoto2 {
background-image:url(images/photo-frame-blue-tall.png);
float:left;
width: 172px;
height: 139px;
}
#photoBlock {
float:left;
width: 270px;
margin: 0 20px;
background-image:url(images/bearded-text-bg.png);
}
#beardbPhoto1 a, #beardbPhoto2 a {
width: 160px;
height: 120px;
display: block;
border: 6px solid #fff;
}
a img {
border: none;
}
#photoBlock h1 {
background-color: #57699f;
font-size: 11px;
color: #cadafe;
font-weight: bold;
padding: 3px;
margin: 0 0 3px 0;
}
 
#photoBlock p {
font-size: 11px;	
padding: 0px 0 0 5px;
margin: 0;
line-height: 20px;
color: #CCCCCC;
 }
 
.beasdedstatustext {
font-size: 10px;
color: #03feef;
font-style: italic;
text-align: left;
font-weight: bold;
text-align:right;
}
 
 
</style>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
 
<body>
<div class="photoBlockWrapper">
<div id= "beardbPhoto1"><a href="images/kid_in_tub.jpg"><img src="images/kid_in_tub.jpg" width="160" height="120" /></a></div>
<div id="photoBlock">
<h1>Ambilobe  jljaslk alskjdljk 9dajks asldjla0k</h1>
<p>djldoiu jdlkjasdlkjuasd jlaksd jljkas lasj lkjasdljlasdjlkjads ojue ldsjljasd lkjasoiuwel aslkjladskj owelkjasldkjlask o9e pa jgjhgwj kjhaskjh ask jhsak jhsakj haskjha skjhas kjhas jhdskjh khjd k kshd sdk hkds khsd k </p>
<p class="beasdedstatustext">Babies Available</p>
</div><!-- end photoBlock -->
<div id= "beardbPhoto2"><a href="images/kid_in_tub.jpg"><img src="images/kid_in_tub.jpg" width="160" height="120" /></a></div>
 </div><!-- end photoBlockWrapper -->
</body>
</html>

mod edit/ code tags added, please use in future

osgood
Offline
Enthusiast
Last seen: 10 years 50 weeks ago
Joined: 2008-09-24
Posts: 61
Points: 0

Theres NO correlation in a

Theres NO correlation in a page being valid and a page displaying correctly, NONE what so ever.

The key is to know your code inside out. It doesn't matter if it validates or not as long as YOURE in charge, not the code.

I've seen many posters here,there and everywhere who say. 'My page validates but doesn't display correctly'

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

osgood, meet Seedhouse.

osgood, meet Seedhouse. Seedhouse, osgood.

/sits back/
this should be good...

Max71
Offline
Regular
Last seen: 11 years 1 week ago
Timezone: GMT-7
Joined: 2008-09-24
Posts: 26
Points: 0

Thanks Osgood. You've really

Thanks Osgood. You've really helped me in the Adobe forum as well. The page is working now. I have to keep learning and learning and correcting my mistakes. Right now the site is working on all the browsers I tried. I'm sure there's mistakes which I work on correcting. I let DW scan and correct and it took down the whole site. Pages lost all their headers etc....

Guess its knowing more than letting a program tell you which I guess is your point.

osgood
Offline
Enthusiast
Last seen: 10 years 50 weeks ago
Joined: 2008-09-24
Posts: 61
Points: 0

Bring it on......

Bring it on......

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 46 weeks 9 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

osgood wrote:Theres NO

osgood wrote:

Theres NO correlation in a page being valid and a page displaying correctly, NONE what so ever.

It is a fact, not an opinion, that the CSS specs are written for valid html/xhtml, and that there is no standard of error correction. Browsers are expected to error correct, but the standard does not specify how they are to error correct. That makes sense since there are so many ways to write invalid html and only one way to write valid html.

I have personally seen many sites with layout problems that are fixed by validation - heck I've written sites with problems that are corrected with validation.

Every time you submit invalid code to a browser, even if that browser claims to follow the standards, the standard for that bit goes out the window. If it does not render according to your expectations then you have no complaint.

Correlation is a word that has a specific technical meaning, but you appear to be using it very sloppily. One would not expect any "correlation" between invalid code and incorrect rendering, since there is no incorrect rendering for invalid code. Anything is correct.

The specifications assume valid code, both markup and CSS. If you do not supply valid code then the specification does not apply. If you want a browser to comply with some standard then you must supply it with code that follows the standard.

We are dealing with computers here. They cannot do what you want, they can only do what you tell them to do.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

osgood
Offline
Enthusiast
Last seen: 10 years 50 weeks ago
Joined: 2008-09-24
Posts: 61
Points: 0

Its also a factor, not an

Its also a factor, not an opinion, that validation is worthless beyond pointing out code errors. Errors that MAY or MAY NOT attribute to the page rendering incorrectly or correctly.

I say again there is absolutely no exclusivity between a page that validates and one that renders correctly in a browser.

The validator is simply a helpful tool for novice html/css code writers. Once experienced at both the validator becomes meaningless.

There is also no correct rendering just because the page validates. But because the page validates developers, both new and more advanced, seem to believe their page should show according to their expectations....and they dont always....so whats the point in validation. None.

Unfortunately you know as well as I do that the validator cannot see many attributes that might be causing a page design to fail in a browser, yet it passes it as valid and misleads the blinkered into thinking validation is the key to making a webpage show correctly in a browsers.

The validator can only be of limited help, the rest lies in the hands of a competent operator.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 46 weeks 9 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Well of couse valid markup

Well of couse valid markup does not guarantee a good page. A proper foundation does not guarantee that the rest of the house is well built, either. So are foundations irrelevant to good house design?

Modern browsers make validation easy and quick. Failing to validate shows a sloppy approach that speaks badly about the designer, showing an unprofessional attitude.

And of course the very folks who define the standards recommend that your code be validated, and they went to some expense to make that easy and free, presumably for a reason.

So whom are we to believe, you and I, some guys out of nowhere, or the folks who made the standard in the first place?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

osgood
Offline
Enthusiast
Last seen: 10 years 50 weeks ago
Joined: 2008-09-24
Posts: 61
Points: 0

You can if you wish refer to

You can if you wish refer to failing to validate a page as being sloppy or unprofessional, its your opinion of course.

I'm just presenting the flip side to all those that say 'make your page validate and everything will be great'. It won't necessarily be the case.

The bottom line, in my opinion, is you NEED to know your code, don't place to much emphasis on validation.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 46 weeks 9 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

And your qualifications to

And your qualifications to give this opinion are? As opposed to the opinion of the very people who designed html, what makes you qualified to disagree?

Do you publish web pages that aren't spell checked too?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Max71
Offline
Regular
Last seen: 11 years 1 week ago
Timezone: GMT-7
Joined: 2008-09-24
Posts: 26
Points: 0

I just rant the validator. I

I just rant the validator. I was very confused by the 11 errors as some things have to be there. Speaking as a novice.

http://validator.w3.org/check?uri=www.hipnoticinc.com%2Falpha&charset=%28detect+automatically%29&doctype=Inline&group=0

Line 17 bothers me. This is just a wrapper I placed around the whole site. Its a common wrapper code offered up time and time again on the Adobe forums. Its highlighted in yellow in the CSS doc and the validator said this:

Line 17, Column 0: start tag was here.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 46 weeks 9 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Just run it through html

Just run it through html tidy to fix up the unclosed tags. Then cut and paste the result over your old code. Takes about a minute. If you don't already have the html validator extension to Firefox it will take about five minutes to get that.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Max71
Offline
Regular
Last seen: 11 years 1 week ago
Timezone: GMT-7
Joined: 2008-09-24
Posts: 26
Points: 0

Is the program called HTML

Is the program called HTML tidy? I think I have that in Firefox. I'll check now.

I just ran CSS validator in Firefox and it came back with 1 small dumb error. Then I got:

Congratulations! No Error Found.

Cool.

Now I have to figure out the html errors. I'll search for HTML tidy. Just found it. I'm on a Mac which isn't listed as operating system. Although BeOS is. Wow. It that still around? I remember an incredible demo they gave about 10 years ago.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 46 weeks 9 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

It's the "HTML Validator"

It's the "HTML Validator" add on for Firefox that I use locally - version 0.8.5.2. The url for the extension's home page is http://users.skynet.be/mgueury/mozilla/

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Max71
Offline
Regular
Last seen: 11 years 1 week ago
Timezone: GMT-7
Joined: 2008-09-24
Posts: 26
Points: 0

Thanks!

Thanks!

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 46 weeks 9 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

You're welcome - visiting

You're welcome - visiting the site prompted me to upgrade my own system to the latest version.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Max71
Offline
Regular
Last seen: 11 years 1 week ago
Timezone: GMT-7
Joined: 2008-09-24
Posts: 26
Points: 0

It gave me a .xpi file. I

Ignore my comments. I flailed around enough that I got it installed. My brain hurts. Wink

osgood
Offline
Enthusiast
Last seen: 10 years 50 weeks ago
Joined: 2008-09-24
Posts: 61
Points: 0

I don't need any

I don't need any qualification to give opinions, just like you don't. Who cares about the people who designed html. You obvious hang on their every word. Fortunately I don't live in that kind of narrow minded, blinkered world.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 46 weeks 9 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

osgood wrote:I don't need

osgood wrote:

I don't need any qualification to give opinions, just like you don't. Who cares about the people who designed html. You obvious hang on their every word. Fortunately I don't live in that kind of narrow minded, blinkered world.

I don't think I'll comment on that except to say that it appears to me to be self refuting. Dream on!

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

osgood
Offline
Enthusiast
Last seen: 10 years 50 weeks ago
Joined: 2008-09-24
Posts: 61
Points: 0

Its you who is in dreamland.

Its you who is in dreamland.

Max71
Offline
Regular
Last seen: 11 years 1 week ago
Timezone: GMT-7
Joined: 2008-09-24
Posts: 26
Points: 0

Um guys. I respect you both

Um guys. I respect you both as both have helped me and I have .1% of the knowledge either of you have.

Everything is working well but Line 17 still bothers me. This is just a wrapper I placed around the whole site. Its a common wrapper code offered up time and time again on the Adobe forums. Its highlighted in yellow in the CSS doc and the validator said this:

Line 17, Column 0: start tag was here.

Any ideas? I closed it at the end of the doc.

osgood
Offline
Enthusiast
Last seen: 10 years 50 weeks ago
Joined: 2008-09-24
Posts: 61
Points: 0

Hi max71, If we are

Hi max71,

If we are discussing the link below your code is completely shot away. There's many errors in it.

http://hipnoticinc.com/alpha/alpha.reptile.bearded-dragons.for-sale.html

I'm not an advocate of bad code at all as my replies may imply. Before you can assess any code you need to know how to write it cleanly and correctly in the first instance. Thats not always possible for some one who is new and can take many years to acquire the skill necessary to do so.

I'm afraid that your code is far from what I would call 'acceptable' to work with. If you are going to rely on the validator and are at an early stage of your coding development then you really need to check at every stage of the operation, not wait until the end.

That way you can learn and correct each error as it comes up. Its not by any means the optimum method but the only one available if you do not have the abilities to write cleanly and precisely at this stage.

Max71
Offline
Regular
Last seen: 11 years 1 week ago
Timezone: GMT-7
Joined: 2008-09-24
Posts: 26
Points: 0

Agreed. I was actually

Agreed. I was actually referring to this page:

http://hipnoticinc.com/alpha/

But I see there are 408 errors on the page you referred to which are actually 2 errors repeated over and over. No "alt"

I'm going to have to change the div id for each photo to a class ID or make them individual IDs. Do you have an opinion? I'd like to spare all the time to make what would be 100 unique IDs for the photos. I'm hoping changing it to a class is easier.

The other is my commenting which I didn't realize. Both are easy fixes.

Ok, 2 errors aside form why it hates the "wrapper" problem.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 50 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Wow the original pages have

*edit, pls excuse the word diarrhea, it's something I suffer from regularly and I try to take pills for it but nothing seems to work : ) Maybe some broken fingers. Anyway, I missed a good number of responses while typing this so ignore stuff that was already pointed out like the 408 errors thing.*

Wow the original pages have 408 errors! The good thing about fixing errors is that if you start with the first one, they often vanish in chunks because one error can cascade to a bunch more.

If you wrote the code that's in the alpha link thingie with the wrapper error, then you should see it pretty easily.

An HTML document begins with a Doctype and then the HTML tag. It ends with the closing HTML tag. So, nothing may come after that closing HTML tag. You have

Something is after the End Of The Document, so remove it. If it's really closing a new tag you've added, then you may still have to add in a closing div tag, but you do it where it makes sense (in this case, before the closing body and html tags).

HTML works like this:
Whenever a tag is opened, it gets closed in the opposite order it was opened (if it wasn't an "empty" tag to begin with). Anything that is opened inside that tag needs to be closed itself before the containing tag can be closed. So this:

is valid while this:


is not.
The a was opened in the div, so it needs to close before the div can close.

I will respectfully but strongly disagree with osgood on the validator thing. It's true that once you get a handle on HTML you'll use the validator more for catching typos than anything else, however I am STILL learning things from it. Just not real often : )
It was through the validator that I learned that with HTML4 Strict a legend is expected with a fieldset, while with XHTML it's completely optional (try it).
It was through the validator that I learned that forms need blocks as direct children (so none of this):

Some other things in general:
Go ahead and LEARN HTML. Learn its rules and where it came from (SGML). In case you're ever tempted to use XHTML, learn what it actually is and does and requires.
Reading the specs isn't fun but it's useful though I myself find it easier to use it as a reference for the chunk of code I'm working on.

There's almost NO excuse for using a turd doctype like loose/transitional. Start with Strict so the validator can help you learn your way to better code. I guess you could use Transitional out of stubbornness, and rarely you may need to use it to use a deprecated "something" because your situation gives you a super good reason...

It's hard to read the validator's complaints at first. After you figure them out (or if we help explain them to you) they will become more useful.

Osgood is correct that you can have completely valid code and it can still look like total gar-baage (say it like it's French to get the full effect) on any particular web browser. This is usually due to either of two things:
1. "Valid" code does not mean GOOD code. Your local municipality may have laws against full public nudity. So an obese elderly woman wearing the skimpiest bathing suit that fits her is perfectly LEGAL to walk around in the streets. Legal only means you followed the minimum of rules, and that's not always enough to be a Good Thing
2. Browsers don't always follow the rules. We usually call these BUGZ but sometimes it's just those developers being stubborn (like where every browser does one thing and a single browser decides to be the Rebel and not-- when the specs are undertermined). Yesh Firefox, I'm looking at you.

For instance, this is VALID (HTML4) code.

<div id='masthead'>
<div id="outerheader">
<div id='innerHeader'>
      <p><img class="logo" src="logo.jpg" alt="logo"></p></div>
  <div class="companyHeader">& nbsp;</div>
    <div class="menu"><div id="menu">
     <a class="menu_item" href="blah.com">blah.com</a><span>& nbsp;</span><a class="menu_item" href="blah2.com">Blah2.com</a><span>& nbsp;</span><a class="menu_item" href="blah3.com">Blah3.com</a><span>& nbsp;</span><a class="menu_item" href="blah4.com">Blah4.com</a><span>& nbsp;</span>
    <p>& nbsp;</p>
    <p>& nbsp;</p>
    <p>& nbsp;</p></div></div></div>
<br>
<br>
<br>
<br>
<br>
<br>
</div>

Seriously, that's 100% legal (unless I made a typo?) though I have a space in the non-breaking spaces so they didn't vanish on me here at the forumz. And it should BURN your EYES. You should cry to the sweet mother of the baby Buddha when you see that. VALID != GOOD. Good, however, is pretty much always valid.

So, as you learn your way through HTML, you'll learn a combination of (hopefully) good semantics (using the tags that properly represent the content you're wrapping it with), validity (of course, that goes without saying), accessibility/usability (whole can of worms there but just as important as anything!), and preferably Minimal Markup. As one Crusty Old Guy Who Knows Stuff likes to say, the more code there is, the more code there is to break, so keep it simple. Use the fewest tags necessary to do the job (but still do the job right).

I'm still learning after more than a year how to do it right, so it's a long process. The validator is just one help. Forums and books and articles are others. Some Crusties stepping out of the inky shadows to point you the way with a rant or two about how in the old days they had to walk uphill through snow drifts BOTH WAYS just to make a webpage are a huge help.

Keep building pages, as you find stuff out often only by running into it. I still remember, more than a year ago, my husband writing a page and we were both getting frustrated as hell over this validator error, " not closed" or some such thing, and we could see it right there, . Turns out the tags aren't valid if they don't have a in them. Not that you'd ever know from the way the validator pointed it out. Sheesh.

I'm no expert, but I fake one on teh Internets

Max71
Offline
Regular
Last seen: 11 years 1 week ago
Timezone: GMT-7
Joined: 2008-09-24
Posts: 26
Points: 0

Thanks Stomme. Let me get to

Thanks Stomme. Let me get to work on the fixes. A lot of great information. This is my first attempt at hand coding and very first at CSS. I used to just have DW do all the code. Need to improve my skillset.

osgood
Offline
Enthusiast
Last seen: 10 years 50 weeks ago
Joined: 2008-09-24
Posts: 61
Points: 0

Referring to the link

Referring to the link below:

http://hipnoticinc.com/alpha/

It wont validate with the

outside of the tag (see below). Not sure what that closing

belongs to, possibly nothing. Remove it and see if you get a gold star from the validator.

That should be at least one page sorted.

As for youe other page that has numerous issues as pointed out by Stomme.

Once you have written a page I would expect no more that maybe a handful of errors thrown back by the validator. At that stage you should be able to form an opinion of whether they are worth correcting or not.

Max71
Offline
Regular
Last seen: 11 years 1 week ago
Timezone: GMT-7
Joined: 2008-09-24
Posts: 26
Points: 0

Osgood. I fixed that. It was

Osgood. I fixed that. It was the closing tag for the "wropper" of the whole site. Dumb mistake I won't make again.

As I'm fixing everything any thought about best approach for all the text blocks as I asked in the above question? Appreciate it. I would like to do it right and not have to revisit it later.

OK, now down to 92 errors. Wink

Same two - no alt tags and what to do about defining each photo.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 50 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote:Once you have written

Quote:

Once you have written a page I would expect no more that maybe a handful of errors thrown back by the validator. At that stage you should be able to form an opinion of whether they are worth correcting or not.

It took me more than one page to know which errors would affect my layouts and which are just "Eat your vegetables dear." The missing alt tags on images belong in that group. They're important to have but they will (almost) never affect page layout.
(yeah I can think of a page where the alt text affected the page layout : ) but special case)

*edit (geez you guys are fast!)

Max, it looks like you are using the names to make them do things, and you are repeating everything (pretty much) over and over again. The trick to doing this is learning to make fewer containers, naming them (prolly still with classes) and styling the child elements via the parent.

I'll show you what I mean in a minute. I'll take a screenshot of your page and draw on it and post it here : )

I'm no expert, but I fake one on teh Internets

osgood
Offline
Enthusiast
Last seen: 10 years 50 weeks ago
Joined: 2008-09-24
Posts: 61
Points: 0

No you're not understading

No you're not understading me. ONCE you can write cleanly and precisely, which takes many months, years even, I would then expect the validator to throw back no more than a few very minor errors. Usually those errors won't have any adverse effect on a page rendering correctly.

osgood
Offline
Enthusiast
Last seen: 10 years 50 weeks ago
Joined: 2008-09-24
Posts: 61
Points: 0

Hi max71 As I think I

Hi max71

As I think I mentioned in another forum you can only have one instance per page of an 'id' but as many instances as you like for 'classes'.

I would change your ids for the repeating blocks and the repeating paragraph into classes.

Max71
Offline
Regular
Last seen: 11 years 1 week ago
Timezone: GMT-7
Joined: 2008-09-24
Posts: 26
Points: 0

You did. Murray gave a

You did. Murray gave a warning so I wanted to be sure. Thanks again. And again. And well - thanks :thumbsup:

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

wolfcry911 wrote:osgood,

wolfcry911 wrote:

osgood, meet Seedhouse. Seedhouse, osgood.

/sits back/
this should be good...

rofl

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 50 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

I apologise in advance for

I apologise in advance for both the crappy resolution of this image AND the ginormous filesize... I couldn't have it both ways : (
http://stommepoes.nl/reptiles.jpg

If you give a class to the box (I just pulled "reptiles" out of my butt, name it whatever that box is supposed to hold or be about), then you don't need to give a class to the paragraphs and headers and things, though possible the images since you have two of them.

Also, this is very debatable, but I don't personally stick images in paragraphs cause an image is something very different from a paragraph (Chinese proverbs aside).

An example (CSS may not be all that correct because I'm building out of mah butt and not on a real page):

<div class="reptiles">
  <img src="tehbabies" width="" height="" alt="teh babies" />
  <img class="oppo" src="tehlizardz" width="" height="" alt="teh lizardz" />
  <h3> Header text being the name for the whole box, the paragraph you called "title"</h3>
  <p>here's the jiggetty jiggetty textitty text text text block.  <span>We sell babies.</span></p>
</div>

The general rule of thumb with classes is, you only need to have a class on something if there are other things which are the same element that you need to style differently from the default. So, there are prolly other divs on that page who you don't want styled like "reptiles" is, and inside reptiles you see there are two images and you don't want them acting the same (well, you could, depending on how you CSS'd it).

So, the CSS would be something like this (this is outta mah BUTT so don't try it thinking it'll work, the widths and things are all made up):

div.reptiles {
  width: something wide enough to fit everything;
  any other special attributes?
  overflow: hidden; (cause it wraps floats the easy way)
  clear: both; (optionally, you could float all .reptile divs instead)
}
.reptiles img {
  float: left;
  padding: whatever
  border: whatever
  anything else special you want;
}
.reptiles h3 {
  you only need to style to taste here, including font-size if it's too big;
}
.reptiles p {
  same here;
}
.reptiles .oppo {
  float: right;
}

So, most things don't even need a class, and that would help you reduce your extra id's.

So for another example, instead of doing this:

<div id="menu">
<ul>
<li class="menu_item"><a href="blah"></a></li>
<li class="menu_item"><a href="blah"></a></li>
<li class="menu_item"><a href="blah"></a></li>
<li class="menu_item"><a href="blah"></a></li>
<li class="menu_item"><a href="blah"></a></li>
</ul>
</div>
 
#menu .menu_item {
  styles;
}

which you'll see a lot of out there, you can do this:
<ul id="menu">
<li><a href="blah"></a></li>
<li><a href="blah"></a></li>
<li><a href="blah"></a></li>
<li><a href="blah"></a></li>
<li><a href="blah"></a></li>
<li><a href="blah"></a></li>
</ul>
 
#menu li {
  styles;
}

Which is really really nice. Lots of programmers start out adding classes to everything cause they think everything that's styled needs a class. Instead, give classes to those who are special:

<ul id="menu">
<li><a href="blah"></a></li>
<li><a href="blah"></a></li>
<li class="foo"><a href="blah"></a></li>
<li><a href="blah"></a></li>
<li><a href="blah"></a></li>
<li class="foo"><a href="blah"></a></li>
</ul>
 
#menu li {
  color: red;
}
#menu li.foo {
  color: blue;
}

Something like that.

I'm no expert, but I fake one on teh Internets

Max71
Offline
Regular
Last seen: 11 years 1 week ago
Timezone: GMT-7
Joined: 2008-09-24
Posts: 26
Points: 0

Wow, thanks Stomme! I'm

Wow, thanks Stomme! I'm struggling with it now. That helps. Let me study what you did.

Max71
Offline
Regular
Last seen: 11 years 1 week ago
Timezone: GMT-7
Joined: 2008-09-24
Posts: 26
Points: 0

ok, I successfully changed

ok, I successfully changed the divs to classes without any layout issues.

When I've been trying to duplicate Stomme's code suggestions the layout changes. I worked on it knowing there's issues now with float and margins due to a new div but I can't get it to correct.

Here's a sample link. The first photo text block is what I wrote changing to classes.

The second block is with Stomme's suggestions which I missed something. The background image isn't appearing under the photo.

http://hipnoticinc.com/alpha/alpha.reptile.chameleon.breeders1.html

Here's the new CSS

div.breederphoto {
background-image:url(images/photo-frame-blue-tall.png);
float:left;
margin: 0px 0px 0 100px;
width: 178px;
height: 139px;
clear:both;

}

div.photoblock {
display:block;
float:left;
padding-top: 0;
width: 270px;
height: 137px;
/*background-color:#5c6c86;*/
background-image:url(images/bearded-text-bg.png);
margin: 0 0px 40px 0px;
clear:none;
}

.breedertitle {
float:left;
display:block;
background-color: #57699f;
font-size: 11px;
color: #cadafe;
font-weight: bold;
padding-left: 3px;
width:268px;
height:16px;
margin: 0px 190px 0px 0px;
}

p.breedertext {
float:left;
font-size: 11px;

padding: 0px 0 0 5px;
margin: 0 190px 0 0px;
width: 257px;
line-height: 20px;
color: #CCCCCC;

}

div.breederphoto a {
width: 160px;
height: 120px;
display: block;
border: 6px solid #fff;
}

div.breederphoto a:hover {
border: 6px solid #999;
}

a img {
border: none;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 19 hours 38 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

What's with this,

What's with this, "height:2500px;"?

It is almost never a Good Thing® to fix the height of major elements, especially not those that contain text.

There is a lot of print paradigm nonsense that does not apply to the web. The web page is not a piece of paper with arbitrary dimensions. You will save yourself a pot-load of grief if you realize early on that a web element is just as short or as long as it needs to be.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Max71
Offline
Regular
Last seen: 11 years 1 week ago
Timezone: GMT-7
Joined: 2008-09-24
Posts: 26
Points: 0

So if I don't declare a

So if I don't declare a height it will contract or expand as content is added?

osgood
Offline
Enthusiast
Last seen: 10 years 50 weeks ago
Joined: 2008-09-24
Posts: 61
Points: 0

Hi max71 Yes, declaring no

Hi max71

Yes, declaring no height will allow the content to expand and contract to its 'natural depth, which could be totally different on each end users computer, so its the correct way to go. Let the content find its own height.

So for instance, if you fix a box at 200px high and it has a red background but the content in it, the text, expands to beyond 200px high in someone elses browser because they have a different sized text setting to the one your using, the text will just spill out of the red box which will always be 200px high.

The only time you would need to set a height on a container is in a situation where an image was in it, or you want to use and iframe to restrict text to a given height, or you want a fixed height for some other reason BUT know that fixing the height will not restrict the end-users ability to see the site correctly according to their browser set up

Max71
Offline
Regular
Last seen: 11 years 1 week ago
Timezone: GMT-7
Joined: 2008-09-24
Posts: 26
Points: 0

Very cool - thanks!

Very cool - thanks!

I think you'd be proud. I'm only getting around 3-6 errors and half are alts and the other is it doesn't like the
--endtemplate-- comment from the edit template field.

I worked hard on this my first css site. No way in the world I could've done without people like you Osgood and other on this and the Adobe board. My humble gratitude! :thumbsup:

Oops. I guess there's a design flaw. If I want the left hand nav bar to follow the depth of the body to the right of it I can't do it without content pushing it down. Hmmm.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 50 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Right. And if you do find

Right. And if you do find yourself in such a situation where you need at least x-amount of height because of a background image, you can often get away with min-height for smarter browsers and height for IE6.

Min height means that: minimum height no matter how small the content is, but if content grows, the box can auto-expand beyond your minimum. Which is what IE6 does anyway, which is wrong but oh well, it doesn't understand min-height anyway.

So like, if you had a bg image that's 400px high and your content on your machine only gets it to 200px high...

#box {
min-height: 400px;
background: url(somepic.gif) 0 0 no-repeat;
}
* html #box {height: 400px;}/*cause IE6 is a tard*/

That would do the job.

If you are using something like overflow: hidden to make your container wrap your floats, and also set height for some reason, the text wouldn't spill like it's supposed to, because you've set a height and overlfow: hidden will... hide the overflow : ) As it should.

Uh, sorry, which bg image isn't showing? I'm missing it ('s ok, I often miss things right in front of me).

I'm no expert, but I fake one on teh Internets

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 50 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

I make a note about

I make a note about comments. IE has a nasty, nasty bug re comments, esp in between floats. I've gotten into the habit of doing deathshadow-style comments because of it.

Let's say you have two floated boxes, and a comment after the first one.

stuff...

other stuff...

IE thinks that comment is some sort of content on the page. Not every time, but often, this can result in the Duplicate Content bug. Actually, ANYTHING which is not shown on the page which sits in between floats can set this off. Thanks to Gary for helping me through the last time I ran into this.

When it's just comments, you can save hair by sticking them inside the float instead of in between them.

stuff...

other stuff...

This includes any funky template text that appears on the page.

I'm no expert, but I fake one on teh Internets

Max71
Offline
Regular
Last seen: 11 years 1 week ago
Timezone: GMT-7
Joined: 2008-09-24
Posts: 26
Points: 0

You rock Stomme! I printed

You rock Stomme! I printed out your earlier suggestions and jpg to put in my reference book. I have to study what you said in order to fix the left nave issue.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 50 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Uh, careful. Remember I was

Uh, careful. Remember I was typing that wildly into a forum. I didn't build it or test it. There might be a big nasty buggy-bug in there or I may have left something out of the example that you aren't aware of or whatever.

I'm no expert, but I fake one on teh Internets

osgood
Offline
Enthusiast
Last seen: 10 years 50 weeks ago
Joined: 2008-09-24
Posts: 61
Points: 0

Only 3-6 errors thats less

Only 3-6 errors thats less than what I usually let go (depending on what they are of course Wink

Well its good to see you addressing some of the issues. I'm sure you've improved a million times in the last few days in regards to coding.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 50 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

I swear after I had enough

I swear after I had enough understanding from a book to know what teh Crusties were talking about, I learned more on forums than anywhere else! Even when Crusties are arguing with each other, you learn. It's great.

I'm no expert, but I fake one on teh Internets

Max71
Offline
Regular
Last seen: 11 years 1 week ago
Timezone: GMT-7
Joined: 2008-09-24
Posts: 26
Points: 0

Yeah, I spent over a month

Yeah, I spent over a month watching every CSS and HTML video on Lynda.com Printed out a big book of notes as well as pages written in long hand.

Then I started from scratch and the began flipping out. They tell you enough just to get you in trouble. :rolleyes:

I learned more in that last couple days with help from a world wide circle of kind people that in months of studying.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 50 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

You may not be a book

You may not be a book person, but I swear the book that helped me get my feet under me was
Build Your Own Web Site the Right Way Using HTML and CSS by Ian Lloyd. You learn by doing, building the site www.bubbleunder.com and seriously what's great is that he tells you what you're doing and WHY which I think is pretty damn important.

My only problem with it now is that he starts people off with XHTML, which is badass-looking with that fat X in there but is not worth it and does nothing for you but give the illusion of awesomeness or some kind of extra extensibility to HTML that actually doesn't exist as long as you're sending it as "text/html" (which you have to if you want the most popular browser in the universe to render your page at all). Bah, just a rant. HTML4Strict FTW.

I'm no expert, but I fake one on teh Internets

Max71
Offline
Regular
Last seen: 11 years 1 week ago
Timezone: GMT-7
Joined: 2008-09-24
Posts: 26
Points: 0

Thanks Stomme. I'll check it

Thanks Stomme. I'll check it out. PVII has a book they recommended. Quite expensive at $100US