Can you help make my naught list behave nicely? (Images are running together)

[Chezshire]

Hi - I'm a novice who plays with PHP and nothing more. I've managed to get myself pretty far with this table I'm working on, but i'm having a problem in that the images are slightly overlapping the text that follows them. Ideally i'd like to get this to be a nice clean grid like design with as many columns as the liquid layout will allow.

	 	<td valign="top" width="66%">

	<?php

	$sql = "SELECT id, modelname, codename FROM cerebra ORDER BY modelname";
	$result = mysql_query($sql) or trigger_error(mysql_error,E_USER_ERROR);
	while($row = mysql_fetch_assoc($result)){
	//here's the key. Use a while loop to repeat through the code

	$thisID = $codename["id"];
	$modelName= getModelName($thisID);	

	$modelName = getChar($char_ID);
	// start character div
	echo '<div style="float: left; padding-top: 5; width: 220;">';
	echo "<span class='fineprint'>";

	// makes thin bar
	echo '<hr align="centered" color="#050F1D" size="2" width="66%">';
			echo '<br />';
	// image div
	echo '<div style="clear:both; float: left; padding-left: 5;"><img src="/cerebra/images/'.$row['id'].'-.jpg" width="60" height="75" border="2px" bordercolor="#415582"></div>';

	// name div
	// styles
	echo '<div style="float: left; vertical-align: top; padding-left: 5;"><p>';
	// span and model name
	echo '<span class="fineprint"><i>'.$row['modelname'];
	// link and codename
	echo ' <br /> >> <a href="/cerebra/display.php?id='.$row['id'].'">'.$row['codename'].'</a></i></span></p></div>';


	// end character div
	echo '</div>';

	//these two lines (or any lines up to the closing brace) will be repeated for each row returned by the query
	}

	?>
	</td>

 

url: http://xpg.us/rules/model.php

 

Any help is appreciated!

 

 

 

[dbrimlow]

Before even beginning to help you with one issue, namely your improper floating technique which is causing the perceived problem, you have to fix so many other issues that in one way or another (and one browser or another) may contribute to, or impact upon, the problem.

 

I was going to recommend using "distribution lists" for your floated avatars, but seeing your code, I realized there was just too much to do.

 

A page that doesn't validate to its doctype can cause problems when attempting to debug certain elements because all things on a page impact each other in some way ...

 

YOU HAD - 2963 ERRORS!! I believe that is a new php freaks css thread world record. This just can't be left alone. You MUST fix this and learn how to code proper html once and for all.

 

While your concept and design looks very nice, your code is a mess. I hope you can take critique, because I'm about to get a little brutal on you.

 

Here is what is technically at issue:

 

1. ignoring ALL of the rules of XHTML.

Stop using it and start using html 4.01

2. using ancient html 3 coding techniques and deprecated html 4 techniques in XHTML

Until you learn proper valid html 4.01 strict code you are not ready to use XHTML.

Use alt tags for images, use html special chars (like "&" instead of ampersands "&" or "&quot" instead of quotes "), use css only styling, leave anything

 

3, extremely bloated code full of unnecessary and redundant code and "divitus".

Use your style sheet for css. Avoid div and span when a simple p class=, or ul id=, on elements that don't require parent containers.

 

The whole point of css is to reduce the amount of code in your markup. Your markup in particular is way too unnecessarily bloated. You use deprecated tags, improper tags, span, div and inline style tags all over the place.

 

The first thing you should do is change you doctype to html 4.01 strict - you are SO not ready to use an XHTML doctype. This will be a big help in debugging while attempting to validate the code. More than anything, this will begin to teach the proper use of html (and why yours is wrong).

 

You must use a proper charset (I recommend you don't use unicode "utf-8" because you would then have to change all of your ampersands - incl php code -,  echoed quotes and other characters to "html characters" and you are not ready for that yet).

 

You started off okay with the style command, but went downhill fast afterwards ...the following is just wrong:

 

 

 
<body style="background: url('/newnav/sidebar_fill.jpg') repeat-y; background-color: #000000"
text='white' link='#3399FF' vlink='#3399FF' alink='#FFFFFF'>

 

..."text='white' link='#3399FF' vlink='#3399FF' alink='#FFFFFF'"... ???? this is bad enough in html transitional, but has no business in any xhtml whatsoever..

 

Out of anything, put the body tag styles in your css first, followed by your default link tag styles - here is the css that should be in the style sheet:

 

body {

font: normal 70% Verdana, sans-serif;

color: #000;

background: #fff url('/newnav/sidebar_fill.jpg') repeat-y;

}

a:link, a:visited {#3399FF; text-decoration:none}

a:hover, a:active {#FFF; text-decoration:none}

 

2. Never EVER use old font tags like <font size="-2">,

3. Avoid using br tags for positioning text - br tags are meant to break a line within a single paragraph not to replace and embed multiple paragraph tags within one paragraph,

4. "<span>" should only be used to change the style of a short portion (or "span") of text, within an existing paragraph, heading, list block of text.

The following has all three of the previous (2, 3 and 4) mistakes:

<p><span style="color:#9ba9c5;">Below are the names of all of XPG's moderators, you can mouse over them to trigger a popup which will explain to you who they are and what their duties are. You can click on their names to e-mail any questions, comments or concerns you might have directly to them.</span><br/>
<font size="-2">

<a href="/profile.php?id=2322" 
onmouseover="popup('CASSADAY: Newsletter Editor/Wrangler')"
onClick="/profile.php?id=2322"
onMouseOut="popout()">

CASSADAY</a><font color=#172434>  |  </font> 

<a href="/profile.php?id=2287" 
onmouseover="popup('CLAREMONT: Site Mentor/Wrangler')"
onClick="/profile.php?id=2287"
onMouseOut="popout()">
CLAREMONT</a><font color=#172434>  |  </font> 

<a href="/profile.php?id=2288" 
onmouseover="popup('HEINBERG: Site Storyteller/Reviewer')"
onClick="/profile.php?id=2288"
onMouseOut="popout()">
HEINBERG</a><font color=#172434>  |  </font> 

<a href="/profile.php?id=2259" 
onmouseover="popup('KIRBY: Site Admin/Mentor/Wrangler')"
onClick="/profile.php?id=2259"
onMouseOut="popout()">
KIRBY</a><font color=#172434>  |  </font>  


<a href="/profile.php?id=2375"
onmouseover="popup('LEE: Site Reviewer/Wrangler')"
onclick="/profile.php?id=2375"
onmouseout="popout()">
LEE</a><span style='color:#172434;'>  |  </span> 


<a href="/profile.php?id=338" 
onmouseover="popup('SIMONSON: Site Reviewer/Wrangler')"
onClick="/profile.php?id=338"
onMouseOut="popout()">
SIMONSON</a><font color=#172434>  |  </font> 

<a href="/profile.php?id=2306" 
onmouseover="popup('SILVESTRI: Site Developer/Wrangler')"
onClick="/profile.php?id=2306"
onMouseOut="popout()">
SILVESTRI</a><font color=#172434>  </font> </span>
<br/>
<br/>
</p>

 

Create a css for this like so:

.moderators p {color:#9ba9c5}
.moderators ul li {margin:.5em; padding:.25em; color:#172434; display:inline}

 

Then replace your code above with this:

<p class="moderators">Below are the names of all of XPG's moderators, you can mouse over them to trigger a popup which will explain to you who they are and what their duties are. You can click on their names to e-mail any questions, comments or concerns you might have directly to them.</p>

<ul class="moderators">
<li><a href="/profile.php?id=2322" 
onmouseover="popup('CASSADAY: Newsletter Editor/Wrangler')"
onClick="/profile.php?id=2322"
onMouseOut="popout()">

CASSADAY</a>  |  </li> 

<li><a href="/profile.php?id=2287" 
onmouseover="popup('CLAREMONT: Site Mentor/Wrangler')"
onClick="/profile.php?id=2287"
onMouseOut="popout()">
CLAREMONT</a>  |  </li> 

<li><a href="/profile.php?id=2288" 
onmouseover="popup('HEINBERG: Site Storyteller/Reviewer')"
onClick="/profile.php?id=2288"
onMouseOut="popout()">
HEINBERG</a>  |  </li> 

<li><a href="/profile.php?id=2259" 
onmouseover="popup('KIRBY: Site Admin/Mentor/Wrangler')"
onClick="/profile.php?id=2259"
onMouseOut="popout()">
KIRBY</a>  |  </li>  


<li><a href="/profile.php?id=2375"
onmouseover="popup('LEE: Site Reviewer/Wrangler')"
onclick="/profile.php?id=2375"
onmouseout="popout()">
LEE</a>  |  </li> 


<li><a href="/profile.php?id=338" 
onmouseover="popup('SIMONSON: Site Reviewer/Wrangler')"
onClick="/profile.php?id=338"
onMouseOut="popout()">
SIMONSON</a>  |  </li> 

<li><a href="/profile.php?id=2306" 
onmouseover="popup('SILVESTRI: Site Developer/Wrangler')"
onClick="/profile.php?id=2306"
onMouseOut="popout()">
SILVESTRI</a></li>
</ul>

 

Stop using span when you could easily use a class on the paragraph:

this:

<p><span class="fineprint"><i>Henry Ian Cusick <br /> >> <a href="/cerebra/display.php?id=1441">SAURON</a></i></span></p>

 

can be :

<p class="fineprint">Henry Ian Cusick <br /> >> <a href="/cerebra/display.php?id=1441">SAURON</a></p>

 

Why repeat this a dozen or more times:

<div style='position: relative; display: block; left:25px; width: 150px;'><div style='position: absolute; display: block; left:-35px'>

 

Simply create a class item in the css once. You can use a list for each thread link item.

 

Find ways to eliminate as much code as possible. Remove all of the inline style=""  tags and create a class to replace it.

 

You have a good concept; you know php; learn the basics of valid html.

 

 

[DarkWater]

I found 2975 errors when I just checked.  New record again!

[Chezshire]

Hello dbrimlow and thanks for the suggestions and points of needed correction.

  I'm still learning how to do php, mySql, ccs, xhtml, html, etc. The site i am writing about is one I inherited and is quite old and I've been working to revise for a while now as best I can (I've had two bouts of brain cancer so i've had some set backs and actually lost a little bit of my mind in the process Anyhoo thanks for the suggestions which i'll try to implement as soon as possible; but first i honestly need to resolve the question at hand as that has an immediate impact on folks.

 

 

[Chezshire]

Question to

 

Does it make a difference if I add a space after the ':' in the CSS, and break each attribute to it's own line like so? This makes it easier (for some one like me) to read and compare attributes of CSS. Also is there a definitive ruling anywhere on the order of attributes regarding CSS? I.E. When writing a stylesheet, does 'color:' come before or after say 'margin:' or does it matter? Likewise would it affect your CSS if these orders changed from one stylesheet listing to the next?

 

/* Styles for Moderator.php */

.moderators p {
color: #9ba9c5
}
.moderators ul li {
margin: .5em; 
padding: .25em; 
color: #172434; 
display: inline
}

[dbrimlow]

but first i honestly need to resolve the question at hand as that has an immediate impact on folks.

I know, it's tough when asking for help on a specific item only to get replies telling you about everything BUT that one issue.

 

However, I was not fooling when I said each html error potentially impacts on other html elements.

 

No one will debug a layout item in the midst of so much wrong html. Because errors cause different display problems across different browsers. Fix the html. Just go to the validation tool [urll=http://validator.w3.org/check?uri=http%3A%2F%2Fxpg.us%2Frules%2Fmodel.php&charset=%28detect+automatically%29&doctype=Inline&group=1&verbose=1&user-agent=W3C_Validator%2F1.606]your validation page[/url] and start fixing the errors one by one.

 

Take the time to do it right so it can work how you want it to.

[Chezshire]

Hi dbrimlow -- If you look at 'http://validator.w3.org/check?uri=http%3A%2F%2Fxpg.us%2Frules%2Fmodel.php%3Fw3c_test%3Dzan&charset=%28detect+automatically%29&doctype=XHTML+1.0+Transitional&ss=1&group=0&user-agent=W3C_Validator%2F1.606'

 

0 errors

 

 

[dbrimlow]

Cool, see, it wasn't as daunting as you thought it would be, was it? And I can begin to show you the css technique to having a few "columns" of photos and text side by side .... but ... while I make a test version of the page with the technique ...

 

LOL, change your doctype to either html 4.01 or xhtml 1 strict (again, it isn't as scary as it sounds); BUT, it doesn't permit poor coding (like all those blank alt tags, deprecated inline table styling tags, etc.)

 

Transitional doctypes were intended exactly for what they say - transitioning from old, deprecated code to proper code specifications. It wasn't really meant to stay around and continue to validate old, poor code forever.

 

html and xhtml transitional doctypes basically validate to pre-html 4 specifications. (x)html strict doctypes validate to html 4.01 coding specifications.

 

I recommend you test how valid your code is by simply changing the doctype to:

<!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">

 

Look at the errors, now. Most of them are really the same ... just repeated. No big deal. Every time I validated a page and started fixing the errors, I learned more and more what NOT to do. This taught me proper html more than any book because it was specific to my pages.

 

I'll have the test version tomorrow.