Site is fine in IE but layout not right in firefox

  perkon 01:32 21 Jul 2007
Locked

I have designed a basic site for an upcoming event please check it out in firefox it is awful but fine in IE please can you help me and show me where i have gone wrong. was easily created via dreamweaver 8. thanks for any help. click here

  Eric10 11:47 21 Jul 2007

The quick and easy way is to remove the <p> tags from around your heading. Rewrite the code as below:

<div id="Layer5">
<div align="center" class="style15 style16">
www .HannahandRhettswedding .co .uk
</div>
</div>

I've added spaces to the address so it doesn't change into a "click here" on the forum. Also I have removed style14 from the code since it only specifies a font-size which is overwritten in style15 anyway.

The site has obviously been written for a high resolution screen and the use of absolute positioning means that the whole of the page will not be visible on smaller screens or if the browser window is resized but that's not the immediate problem.

  Eric10 13:53 22 Jul 2007

I realise that you are still working on the site so the current version is by no means your final effort. However, you now have a table with width="1216" which will never fit on an 800x600 or even a 1024x768 screen. Also you seem to have lost your opening <body> tag and the close </body> tag is in the middle of the code.

If you get rid of the table you could try "float: left" with a left margin to position the bride in from the edge. For the groom try "float: right" and a right margin. With these two items floated the warning sign will position itself in between them.

e.g. add these styles:
#bride {
width: 225px;
margin-left: 50px;
float: left;
text-align: center;
}

#groom {
width: 225px;
margin-right: 50px;
float: right;
text-align: center;
}

#warning_sign {
width: 100px;
margin: auto;
text-align: center;
}

then in the body use:
<div id="bride"><img src="../Images/Bride.gif" width="221" height="152" /></div>
<div id="groom"><img src="../Images/Groom.gif" width="137" height="152" /></div>
<div id="warning_sign"><img src="../Images/c9.gif" width="96" height="165" /></div>
<div style="clear: both"> </div>

  Eric10 14:01 22 Jul 2007

In the last line there was a none breaking space inside the divs but the forum interpreted the code rather than showing it.
It should have read <div style="clear: both">& n b s p ;</div> but without the spaces.

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Galaxy Note 8 vs iPhone X

Awful clip art from 1994 is being tweeted every hour by a bot

iPhone X vs Samsung Galaxy Note 8

Les meilleurs navigateurs internet 2017