Have this as a cell of my table, and want to know how to keep the text from having a space in-between. I realize the <p> code adds that space, but the text is a caption for a photo and it has to be minimized or “squashed” if you
will to fit under that photo in the table. Not sure I am explaining myself correctly, and if not, I apologize.
<td>
<p><center>First Meeting of the World Council</center></p>
<p><center>Longleat Castle, Bath, England</center></p>
</td>
Okay, reworked it, and now have the following code. It looks fine in IE8, but in Firefox the photo captions are aligned to the left underneath each photo?
Any suggestions are appreciated…
…
<html>
<head>
<title>TableData</title>
<style type=“text/css”>
img {border: 4px solid black;
margin: 10px;
body{font-family: Verdana; sans-serif;}
h1 {font-size: 25;}
h2 {font-size: 35;}
h3 {font-size: 30;}
text {font-weight: bold;}
p
{
padding: 0;
margin: 0;
text-align: center;
}
}
</style>
</head>
<body>
<body bgcolor=“#FFA07A”>
<h1 align=“center”><font color=“black” font size=“45”>“A Few Photos”</h1>
<p><h3 align=“center”><font color=“red”>Click image to view full size</h3></p></a>
<table align=“center”>
<tr>
<td><a href="thumbs/Rosaliethumb.jpg"><img src="images/Rosalie.jpg" width="250" height="185" alt="Rosalie Ray, treasurer, Harry Bodofsky, VP, myself and Jerry Lenk, secretary"></a>
</td>
<td>
<a href="thumbs/GarrettSeminarthumb.jpg"><img src="images/GarrettSeminar.jpg" width="250" height="185" alt="Charles Garrett Seminar in Atlantic City"></a>
<td></a><a href="thumbs/FMDAChunt.jpg"><img src="images/FMDAChunt.jpg" width="250" height="185" alt="Jack Lowry, Alan Holcombe, yours truly and the late Gary Bischke"></a>
</td>
<td><a href="thumbs/Foundthumb.jpg"><img src="images/Found.jpg" width="250" height="185" alt="Showing off at club hunt in the eary 80's"></a></td>
</tr>
<tr>
<td>
<p>Rosalie Ray, Harry Bodofsky, yours truly</p>
<p>Jerry Lenk,...first FMDAC officers</p>
</td>
<td>
<p>Charles Garrett Seminar at</p>
<p>Treasure Weekend, AC, 1986</p>
</td>
<td>
<p>Jack Lowry, Alan Holcombe,</p>
<p>Dick Stout and the late Gary Bischke</p>
</td>
<td>
<p>Displaying finds, club hunt, 1982</p>
</td>
</tr>
<tr>
<td>
<a href="thumbs/LongleatArrivalthumb.jpg"><img src="images/LongleatArrival.jpg" width="250" height="185" alt="Dennis and Jean Buchanon, Gerald Costellos, and Fay and I arriving for World Council Meeting"></a>
</td>
<td>
<a href="thumbs/Jack&Myrnathumb.jpg"><img src="images/Jack&Myrna.jpg" width="250" height="185" alt="With Jack & Myrna Gifford/Tesoro Electronics, 1988"></a>
</td>
<td>
<a href="thumbs/Newburythumb.jpg"><img src="images/Newbury.jpg" width="250" height="185" alt="Introducing the Grandmaster II to the UK/Newbury Rally"></a>
</td>
<td>
<a href="thumbs/KarlBWthumb.jpg"><img src="images/KarlBW.jpg" width="250" height="185" alt="Karl Von Muller and I at the Lost Treasure Classic, Tulsa, Oklahoma"></a>
</td>
<tr>
<td>
<p>Dennis & Jean Buchanon, Gerald Costello,</p>
<p>Dick & Fay Stout arriving at Longleat Castle</p>
</td>
<td>
<p>With Jack & Myrna Gifford</p>
<p>Tesoro Metal Detectors</p>
</td>
<td>
<p>Introduction of Grandmaster II at</p>
<p>Newbury Rally, UK.</p>
</td>
<td>
<p>Karl Von Muller and I,</p>
<p>Tulsa, Oklahoma, 1988</p>
</td>
</tr>
</table>
<h1 Align="center"><a href="Photos4.html"><font color="blue">Back</a>
<a href="Photos6.html"><font color="red"><i> More Photos</i></a>
<a href="test3.html"><font color="blue">Home</a></h1></p>
</body>
</html>
add this in your CSS file:
p
{
padding: 0;
margin: 0;
}
Thank you…worked like a charm. Sorry I am not that knowledgeable yet. Appreciate it very much.
There is no need for the usage of <center>.
CSS offers a declaration that replicates the presentational effect:
text-align: center;
Cooper, tried the CSS idea, but it did not work. Suspect I did something crazy…
Here is how I did it:
<style type=“text/css”>
img {border: 4px solid black;
float: center;
padding: 20px;
margin: 30px; font-family: “GC Times”: color: white;
body{font-family: Verdana; impress;}
h1 {font-size: 25;}
h2 {font-size: 35;}
h3 {font-size: 30;}
text {font-weight: bold;}
p
{
padding: 0;
margin: 0;
}
{
text-align: center;
}
}
</style>
You have 2 brackets in a wrong place, so remove them so it looks like this:
p
{
padding: 0;
margin: 0;
text-align: center;
}
EDIT: I looked at your code again and you have a lot of mistakes regarding the brackets. All your declarations should be surrounded by brackets.
Example:
whatever { whatever; }
Thank you all… I learn more from this forum than any book. Appreciate you all very much.
The value ‘center’ is not valid regarding float. Also, font-size values need to be a unit of measurement.
For clarity, I’d recommend running your css against a validator:
http://jigsaw.w3.org/css-validator/
As well, sitepoint offers a nice reference guide that will be of some use, i’d imagine:
hi have a look
As Cooper has said, you can’t have float:center; - you can only float elements left or right.
What you might find works well is to have
td {text-align:center;}
That will centre both the image and the paragraph text in the cell, and won’t mess up any paragraphs you have elsewhere on the page.
Some other tips:
img, they aren’t needed at all.text. You either need to include the font-weight:bold; in the declaration for another element or, if you are using class="text", add a full stop to make it .textOkay, your suggestions have helped tremendously. The only remaining problem is how the site looks in Firefox. For some reason every other page has the photo caption lined up underneath and centered. Also the spacing is
not single but doubled. The every other centered thing really has me baffled.
Also, everything looks great in IE, but not in Firefox. The centered caption thing again has me baffled. I have checked the style code, and it’s identical.
Also, everything looks great in IE, but not in Firefox. The centered caption thing again has me baffled. I have checked the style code, and it’s identical.
Show us what you have now code-wise. Also not entirely sure what single and double means here. Can you also post mini screenshots?
<html>
<head>
<title>TableData</title>
<style type=“text/css”>
img {border: 4px solid black;
float: center;
padding: 20px;
margin: 30px; font-family: “GC Times”: color: white;
body{font-family: Verdana; impress;}
h1 {font-size: 25;}
h2 {font-size: 35;}
h3 {font-size: 30;}
text {font-weight: bold;}
p
{
padding: 0;
margin: 0;
text-align: center;
}
}
</style>
</head>
<body>
<body bgcolor=“#FFA07A”>
<hr color=“black”>
<h1 align=“center”><font color=“black” font size=“45”>“A Few Photos”</h1>
<p><h3 align=“center”><font color=“red”>Click image to view full size</h3></p></a>
<hr color=“black”>
<table align=“center”>
<tr>
<td><a href="thumbs/Rosaliethumb.jpg"><img src="images/Rosalie.jpg" width="250" height="185" alt="Rosalie Ray, treasurer, Harry Bodofsky, VP, myself and Jerry Lenk, secretary"></a>
</td>
<td>
<a href="thumbs/GarrettSeminarthumb.jpg"><img src="images/GarrettSeminar.jpg" width="250" height="185" alt="Charles Garrett Seminar in Atlantic City"></a>
<td></a><a href="thumbs/FMDAChunt.jpg"><img src="images/FMDAChunt.jpg" width="250" height="185" alt="Jack Lowry, Alan Holcombe, yours truly and the late Gary Bischke"></a>
</td>
<td><a href="thumbs/Foundthumb.jpg"><img src="images/Found.jpg" width="250" height="185" alt="Showing off at club hunt in the eary 80's"></a></td>
</tr>
<tr>
<td>
<p>Rosalie Ray, Harry Bodofsky, yours truly</p>
<p>Jerry Lenk,...first FMDAC officers</p>
</td>
<td>
<p>Charles Garrett Seminar at</p>
<p>Treasure Weekend, AC, 1986</p>
</td>
<td>
<p>Jack Lowry, Alan Holcombe,</p>
<p>Dick Stout and the late Gary Bischke</p>
</td>
<td>
<p>Displaying finds, club hunt, 1982</p>
</td>
</tr>
<tr>
<td>
<a href="thumbs/LongleatArrivalthumb.jpg"><img src="images/LongleatArrival.jpg" width="250" height="185" alt="Dennis and Jean Buchanon, Gerald Costellos, and Fay and I arriving for World Council Meeting"></a>
</td>
<td>
<a href="thumbs/Jack&Myrnathumb.jpg"><img src="images/Jack&Myrna.jpg" width="250" height="185" alt="With Jack & Myrna Gifford/Tesoro Electronics, 1988"></a>
</td>
<td>
<a href="thumbs/Newburythumb.jpg"><img src="images/Newbury.jpg" width="250" height="185" alt="Introducing the Grandmaster II to the UK/Newbury Rally"></a>
</td>
<td>
<a href="thumbs/KarlBWthumb.jpg"><img src="images/KarlBW.jpg" width="250" height="185" alt="Karl Von Muller and I at the Lost Treasure Classic, Tulsa, Oklahoma"></a>
</td>
<tr>
<td>
<p>Dennis & Jean Buchanon, Gerald Costello,</p>
<p>Dick & Fay Stout arriving at Longleat Castle</p>
</td>
<td>
<p>With Jack & Myrna Gifford</p>
<p>Tesoro Metal Detectors</p>
</td>
<td>
<p>Introduction of Grandmaster II at</p>
<p>Newbury Rally, UK.</p>
</td>
<td>
<p>Karl Von Muller and I,</p>
<p>Tulsa, Oklahoma, 1988</p>
</td>
</tr>
</table>
<h1 Align="center"><a href="Photos4.html"><font color="blue">Back</a>
<a href="Photos6.html"><font color="red"><i> More Photos</i></a>
<a href="test3.html"><font color="blue">Home</a></h1></p>
</body>
</html>
If you’re not going to fix the errors that we’ve told you about, it’s going to be difficult to solve any problems…
You’re missing a } at the end of the img declaration (after the margin property). Also, you have a } which is not needed at the end of your CSS code. Finally, as Stevie D said:
Thank you again. Sorry to be so slow with this…
You’re Welcome.
No problem at all, but you should really invest some time to read some tutorials and/or books to learn at least the basics. It will save you precious time!
Barnum:
If you add a proper Doctype to the beginning of your HTML pages, you can get the [url=http://validator.w3.org/]HTML Validator to catch both fat-finger typos AND actual mistakes you make (your HTML doesn’t even have to be online either!). You might not always understand why something’s an error but if it’s a typo you can fix that right away. You can also [url=http://jigsaw.w3.org/css-validator/]validate CSS but generally that’s most useful for actual syntax errors (missing ; etc) than the warning which I always ignore nowadays. It would tell you “text” didn’t exist and that you were missing a }.
Best rule to keep in mind using those things is, errors compound. So start with the first one, and often fixing one error fixes a bunch of others.
You’ll get there. We managed to, didn’t we? : )