...
PDA

Uneven alignment using Firefox, OK with IE7

effpeetee
07-21-2007, 10:22 AM
http://www.exitfegs.co.uk/Picchoose.html

The page of thumbnails is OK with IE but not with Firefox.
I have tried altering the alignment from top to bottom and and back again, but with no success.:confused:
Does anyone know of a fix, or what is also likely, where have I gone wrong?

Thanks for any pointers.

- CSS

* { margin: 0; padding: 0; }

html, body {
margin: 0px;
padding: 0px;
display: inline-block;
background-color: #CCCCCC;
color:white;


}
.wrapper {
text-align: center;
background-color: #cccccc;
color:white;
margin-top:0px;

}
.wrapper p {
display: inline;
font-size: 70%
}
.wrapper span {
margin: .5em;
vertical-align: bottom;
width: 120px;
height: 100px;
display: table-cell;
display: inline-block;
}
.wrapper p span {
vertical-align:top;
}
.wrapper p img {
margin-bottom: 0px;
border: none;
margin-top: 0px;

}
.wrapper a {
text-decoration: none;
color: #000;

}


HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


<html>
<head>

<LINK REL="stylesheet" TYPE="text/css" HREF="picchoose.css">
<title>Full Menu</title>
</head>

<body>

<a href="index.html"><img alt="Home page." src="home.jpg" width="85" height="42" /></a>

<div class="wrapper">
<p><span><a href="firstb.html"><img src="First.jpg" alt="0" width="100" height="80"><br> Steve at Mapperton.</a></span></p>
<p><span><a href="1a.html"><img src="steve6a.jpg" alt="1" width="100" height="80"><br> Steve, relaxing on the 'Bluebell Railway.</a></span></p>

<p><span><a href="2a.html"><img src="1a.jpg" alt="1b" width="100" height="80"><br> Mark and Steven</a></span></p>
<p><span><a href="3a.html"><img src="2a.jpg" alt="2" width="100" height="80"><br> In the gardens at Mapperton.</a></span></p>
<p><span><a href="4a.html"><img src="3a.jpg" alt="3" width="100" height="80"><br> The front of Mapperton House.</a></span></p>
<p><span><a href="5a.html"><img src="4a.jpg" alt="4" width="100" height="80"><br> Higher Came farm.</a></span></p>
<p><span><a href="6a.html"><img src="5a.jpg" alt="5" width="100" height="80"><br> Another view in Mapperton.</a></span></p>
<p><span><a href="7a.html"><img src="6a.jpg" alt="6" width="100" height="80"><br> A lawn at Mapperton.</a></span></p>
<p><span><a href="8a.html"><img src="7a.jpg" alt="7" width="100" height="80"><br> A bridge in Japan.</a></span></p>

<p><span><a href="9a.html"><img src="8a.jpg" alt="8" width="100" height="80"><br> Just a country road.</a></span></p>
<p><span><a href="10a.html"><img src="9a.jpg" alt="9" width="100" height="80"><br> In the gardens at Mapperton</a></span></p>
<p><span><a href="11a.html"><img src="10a.jpg" alt="10" width="100" height="80"><br> The "coat hanger" A bridge in Sydney.</a></span></p>
<p><span><a href="12a.html"><img src="11a.jpg" alt="11" width="100" height="80"><br> Mapperton, a stately home in Dorset.</a></span></p>
<p><span><a href="13a.html"><img src="12a.jpg" alt="12" width="100" height="80"><br> In side St. Nicholas Church - Moreton.</a></span></p>
<p><span><a href="14a.html"><img src="13a.jpg" alt="13" width="100" height="80"><br> The "bell" hotel at Alresford.</a></span></p>
<p><span><a href="15a.html"><img src="14a.jpg" alt="14" width="100" height="80"><br> Horsted Keynes Station on the Bluebell Line.</a></span></p>
<p><span><a href="16a.html"><img src="15a.jpg" alt="" width="100" height="80"><br> Higher came farmhouse.</a></span></p>

<p><span><a href="17a.html"><img src="16a.jpg" alt=" " width="100" height="80"><br> The sea front at Swanage.</a></span></p>
<p><span><a href="18a.html"><img src="17a.jpg" alt="" width="100" height="80"><br> Horsted Keynes Station on the Bluebell Line.
</a></span></p>
<p><span><a href="19a.html"><img src="18a.jpg" alt="" width="100" height="80"><br> Steven Mum and Betty.
</a></span></p>
<p><span><a href="20a.html"><img src="19a.jpg" alt="" width="100" height="80"><br> We should have turned left at the crossroads.</a></span></p>
<p><span><a href="21a.html"><img src="20a.jpg" alt=" " width="100" height="80"><br> Winchester Cathedral.</a></span></p>
<p><span><a href="22a.html"><img src="21a.jpg" alt="" width="100" height="80"><br> Caution - Road Up! - Weymouth 2005.</a></span></p>
<p><span><a href="23a.html"><img src="22a.jpg" alt="" width="100" height="80"><br> This way for "higher came" farmhouse.
</a></span></p>
<p><span><a href="24a.html"><img src="23a.jpg" alt="" width="100" height="80"><br> Topiary at Mapperton in Dorset.</a></span></p>

<p><span><a href="25a.html"><img src="24a.jpg" alt=" " width="100" height="80"><br> 'Footsteps' guest house in the Welsh Marches.
</a></span></p>
<p><span><a href="26a.html"><img src="25a.jpg" alt="" width="100" height="80"><br> A lovely country road in Dorset.
</a></span></p>
<p><span><a href="27a.html"><img src="26a.jpg" alt="" width="100" height="80"><br> A view from the tower at Salisbury Cathedral.
</a></span></p>
<p><span><a href="28a.html"><img src="27a.jpg" alt="" width="100" height="80"><br> 'Books Afloat' - A favourite venue for Steve and Mark.
</a></span></p>
<p><span><a href="29a.html"><img src="28a.jpg" alt=" " width="100" height="80"><br> Mark and Steven at the museum of the Tolpuddle Martyrs.</a></span></p>
<p><span><a href="30a.html"><img src="29a.jpg" alt="" width="100" height="80"><br> A view from the "london eye"
</a></span></p>
<p><span><a href="31a.html"><img src="30a.jpg" alt="" width="100" height="80"><br> A pond at Mapperton, a stately home in Dorset.</a></span></p>
<p><span><a href="32a.html"><img src="31a.jpg" alt="" width="100" height="80"><br> A view from the "footsteps" guest house.</a></span></p>
<p><span><a href="33a.html"><img src="32a.jpg" alt=" " width="100" height="80"><br> Devils Bridge Station - in Wales.</a></span></p>
<p><span><a href="34a.html"><img src="33a.jpg" alt="" width="100" height="80"><br> On the Welsh Highland Railway at Waunfawr.
</a></span></p>
<p><span><a href="35a.html"><img src="34a.jpg" alt="" width="100" height="80"><br> Messing about in boats.</a></span></p>
<p><span><a href="36a.html"><img src="35a.jpg" alt="" width="100" height="80"><br> Llanfair station - Welsh Highland Rlwy.
</a></span></p>
<p><span><a href="37a.html"><img src="36a.jpg" alt=" " width="100" height="80"><br> Alresford railway station on the Watercress line.
</a></span></p>
<p><span><a href="38a.html"><img src="37a.jpg" alt="" width="100" height="80"><br> Horsted Keynes station on the Bluebell line.
</a></span></p>
<p><span><a href="39a.html"><img src="38a.jpg" alt="" width="100" height="80"><br> A very weedy stream in 'Mapperton' in Dorset.
</a></span></p>
<p><span><a href="40a.html"><img src="39a.jpg" alt="" width="100" height="80"><br> A beautiful Japanese night scene..</a></span></p>


<p><span><a href="41a.html"><img src="40a.jpg" alt="" width="100" height="80"><br> Alresford High Street.</a></span></p>

<p><span><a href="42a.html"><img src="41a.jpg" alt=" " width="100" height="80"><br> Brecon Mountain railway station.</a></span></p>
<p><span><a href="43a.html"><img src="42a.jpg" alt="" width="100" height="80"><br> But do they have the answers?</a></span></p>
<p><span><a href="44a.html"><img src="43a.jpg" alt="" width="100" height="80"><br> An ornamental bridge in Japan.</a></span></p>
<p><span><a href="45a.html"><img src="44a.jpg" alt="" width="100" height="80"><br> An Australian Gum tree.</a></span></p>

<p><span><a href="46a.html"><img src="45a.jpg" alt="" width="100" height="80"><br> Ayres rock - Australia.</a></span></p>
<p><span><a href="47a.html"><img src="46a.jpg" alt=" " width="100" height="80"><br> Duke Street - Brighton.</a></span></p>
<p><span><a href="48a.html"><img src="47a.jpg" alt="" width="100" height="80"><br> Duke Street - Brighton.</a></span></p>
<p><span><a href="49a.html"><img src="48a.jpg" alt="" width="100" height="80"><br> Sea front, Brighton, England - April 2006.</a></span></p>
<p><span><a href="50a.html"><img src="49a.jpg" alt="" width="100" height="80"><br> A Coffee shop in Russia.</a></span></p>

<p><span><a href="51a.html"><img src="50a.jpg" alt="" width="100" height="80"><br> "Aquila Heights" - Holiday, 2006.</a></span></p>
<p><span><a href="52a.html"><img src="51a.jpg" alt=" " width="100" height="80"><br> A sleepy koala.</a></span></p>
<p><span><a href="53a.html"><img src="52a.jpg" alt="" width="100" height="80"><br> The "London Eye".</a></span></p>
<p><span><a href="54a.html"><img src="53a.jpg" alt="" width="100" height="80"><br> Stuck in the sand.</a></span></p>
<p><span><a href="55a.html"><img src="54a.jpg" alt="" width="100" height="80"><br> Bodo Airdrome - Norway.
</a></span></p>

<p><span><a href="56a.html"><img src="55a.jpg" alt="" width="100" height="80"><br> Derwent water in the Lake District.</a></span></p>
<p><span><a href="57a.html"><img src="56a.jpg" alt=" " width="100" height="80"><br> Lake Locarno - Switzerland.</a></span></p>
<p><span><a href="58a.html"><img src="57a.jpg" alt="" width="100" height="80"><br> Winchester High Street - Autumn 2006.</a></span></p>
<p><span><a href="59a.html"><img src="58a.jpg" alt="" width="100" height="80"><br> A street market in Jordan.</a></span></p>
<p><span><a href="60a.html"><img src="59a.jpg" alt="" width="100" height="80"><br> Frank's "Office", where it all happens.</a></span></p>

<p><span><a href="61a.html"><img src="60a.jpg" alt="" width="100" height="80"><br> A pleasant day out on the Bluebell Railway - Spring 2006.
</a></span></p>
<p><span><a href="62a.html"><img src="61a.jpg" alt=" " width="100" height="80"><br> The London Eye from our back window.</a></span></p>
<p><span><a href="63a.html"><img src="62a.jpg" alt="" width="100" height="80"><br> Early morning sun.</a></span></p>
<p><span><a href="64a.html"><img src="63a.jpg" alt="" width="100" height="80"><br> Winchester High Street - Autumn 2006</a></span></p>
<p><span><a href="65a.html"><img src="64a.jpg" alt="" width="100" height="80"><br> Relic of the Beeching years?</a></span></p>

<p><span><a href="66a.html"><img src="65a.jpg" alt="41" width="100" height="80"><br> A road in Japan.</a></span></p>
<p><span><a href="67a.html"><img src="66a.jpg" alt="42" width="100" height="80"><br> It's a long road - in Australia.</a></span></p>
<p><span><a href="68a.html"><img src="67a.jpg" alt="43" width="100" height="80"><br> Kalgoorlie mine - Australia.
</a></span></p>
<p><span><a href="69a.html"><img src="68a.jpg" alt="44" width="100" height="80"><br> Steven - on holiday in the Peak district..</a></span></p>

<p><span><a href="71a.html"><img src="70a.jpg" alt="46" width="100" height="80"><br> A family get together at the Harvesters pub at Hemel Hempstead.</a></span></p>
<p><span><a href="72a.html"><img src="71a.jpg" alt="47" width="100" height="80"><br> A street in Worthing - Autumn 2006.</a></span></p>
<p><span><a href="73a.html"><img src="72a.jpg" alt="48" width="100" height="80"><br> A Busy Street in Worthing.</a></span></p>
<p><span><a href="74a.html"><img src="73a.jpg" alt="49" width="100" height="80"><br> A street in Worthing - Autumn 2006.</a></span></p>
<p><span><a href="75a.html"><img src="74a.jpg" alt="50" width="100" height="80"><br> The "Prince of Wales" at Devils Bridge Station.</a></span></p>

<p><span><a href="76a.html"><img src="75a.jpg" alt="" width="100" height="80"><br> The sea front at Eastbourne - September 2006.</a></span></p>
<p><span><a href="77a.html"><img src="76a.jpg" alt=" " width="100" height="80"><br> The sea front at Eastbourne - September 2006.</a></span></p>
<p><span><a href="78a.html"><img src="77a.jpg" alt="" width="100" height="80"><br> A shopping street in Bognor - September 2006.</a></span></p>
<p><span><a href="79a.html"><img src="78a.jpg" alt="" width="100" height="80"><br> O'Connell bridge - Dublin.</a></span></p>
<p><span><a href="81a.html"><img src="80a.jpg" alt="" width="100" height="80"><br> A street market in Serbia.</a></span></p>

<p><span><a href="82a.html"><img src="81a.jpg" alt=" " width="100" height="80"><br> Just a stranger in Paradise?</a></span></p>
<p><span><a href="83a.html"><img src="82a.jpg" alt="" width="100" height="80"><br> South Island of NZ - Kingston Stn.</a></span></p>
<p><span><a href="84a.html"><img src="83a.jpg" alt="" width="100" height="80"><br> Frank's mum - Madge Taylor .</a></span></p>
<p><span><a href="85a.html"><img src="84a.jpg" alt="" width="100" height="80"><br> South Island of NZ - Kingston Stn.</a></span></p>

<p><span><a href="hol22blarge.html"><img src="85a.jpg" alt="" width="100" height="80"><br> Resting at Aquila Heights - 2007.</a></span></p>
<p><span><a href="86a.html"><img src="86a.jpg" alt=" " width="100" height="80"><br> A Fjiord in Norway.</a></span></p>
<p><span><a href="87a.html"><img src="87a.jpg" alt="" width="100" height="80"><br> Eastboune sea front - September 2006.</a></span></p>
<p><span><a href="88a.html"><img src="88a.jpg" alt="" width="100" height="80"><br> The homestead, several years ago.</a></span></p>

<p><span><a href="92a.html"><img src="92a.jpg" alt=" " width="100" height="80"><br> Steven in Eastbourne - September 2006.</a></span></p>
<p><span><a href="95a.html"><img src="96a.jpg" alt="" width="100" height="80"><br> Clapham Junction, just before the storm. Sept. 2006.
</a></span></p>

<p><span><a href="96a.html"><img src="97a.jpg" alt="" width="100" height="80"><br> Maremma on the road - Italy.</a></span></p>

<p><span><a href="99a.html"><img src="100a.jpg" alt="" width="100" height="80"><br> We're only here for the beer!</a></span></p>
<p><span><a href="100a.html"><img src="101a.jpg" alt=" " width="100" height="80"><br> Liatach - Summit Ridge.</a></span></p>

<p><span><a href="103a.html"><img src="102a.jpg" alt="" width="100" height="80"><br> Frank's keyboard.
</a></span></p>

<p><span><a href="105a.html"><img src="smilepleasea.jpg" alt="" width="100" height="80"><br> smileplease</a></span></p>
<p><span><a href="106a.html"><img src="Hove1a.jpg" alt="" width="100" height="80"><br> Steve in Hove - April 2007.
</a></span></p>
<p><span><a href="107a.html"><img src="Hove2007a.jpg" alt="" width="100" height="80"><br> George Street in Hove - April 2007
</a></span></p>
<p><span><a href="108a.html"><img src="108a.jpg" alt="" width="100" height="80"><br> THE MAGIC CAFE! - Oxford.
</a></span></p>
<p><span><a href="109a.html"><img src="109a.jpg" alt="" width="100" height="80"><br> The ali_fan - Bazaar in Tehran
</a></span></p>

<p><span><a href="110a.html"><img src="110a.jpg" alt="" width="100" height="80"><br> Steven in the Peak district.</a></span></p>
<p><span><a href="111a.html"><img src="111a.jpg" alt="" width="100" height="80"><br> Philip and Steven at John's wedding.</a></span></p>
<p><span><a href="112a.html"><img src="112a.jpg" alt="" width="100" height="80"><br> Steve with Mr Keogh at John's wedding.</a></span></p>
</div>
</body>
</html>
bazz
07-21-2007, 10:59 AM
Two things Frank,

the first line of your body section where you have the home,.jpg, shouldn't end like this..


height="42" /> </a>


It should be

height="42"></a>


The / can be used as a closing tag but only when the item doensn't have its own. eg <a href"#"> has the closing tag </a> so you don't need it; whereas <input type="submit" name="submit" value="Submit this Data" /> has no closing tag so to close it you need to use the forward slash.

As for your actual question, I would put al your image and the corresponding text into an unordered list.


<ul>
<li><a href="firstb.html"><img src="First.jpg" alt="" width="100" height="80"><br />Steve at Mapperton.</a></li>
<li></li>
</ul>


Which has led me to find that all your <br> tags should be <br /> though I don't think changing all them will fix your problem.

At the risk of sounding like a busted record; you really should loook again at the script I sent you. It Works. I haven't sent you the nav menu however, I can send a simpler one, which you will see at the site I used before as a demo for you. When I have finished the project I am doing just now, I can then send you the proper (fully functional), nav menu.

Just think, every change you need to make in the page you have written about here, amount in total to lots and lots. In a server-side script, such as mine, those changes need be done, only once as there is just one line of code for that output.

Much easier.

bazz
effpeetee
07-21-2007, 03:03 PM
Hello Bazz,

Nice to hear from you again.
There is no hurry for the prpgram. I will very much like to have it when you can without stress. What I am doing at the moment, is experimenting with all the various ways of coding a picture menu.
The menu "Steven" is a Javascript one with hover over to display. The others are at present based on one sent me by (I believe) VIPStephan some time ago.
Regarding the extra bits in my code. My eyesight is not very good and I often miss these.
I will make it consistent

Regards,
Frank

EDIT. Altering this coding mistake has made no difference. Firefox still messes up the layout.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum