PDA

View Full Version : Images not aligning in FF



boobydooby
Mar 23rd, 2009, 02:17 PM
Hi,

I'm relatively new to CSS and while I'm aware that you should code for Firefox and fix for IE, I'm having problems with what I am sure is a very simple bit of coding.

The css is just a simple layout:



body {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
text-align : center;
background-image : url(../_images/grad_bkg.jpg);
color : #000000;
}

#wrapper {
text-align : center;
margin-left : auto;
margin-right : auto;
background-color : #ffffff;
padding : 15px 0 0 0;
width : 888px;
}

#header {
text-align : center;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 83px;
background-image : url(../_images/gbc_banner.jpg);
}

#navigation {
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 25px;
background-image : url(../_images/menu.gif);
background-repeat : no-repeat;
}

#mainimage {
display:inline;
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 331px;
}

#divide {
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 5px;
background-color : #000000;
}

#content {
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
}

#footer {
clear : both;
text-align : center;
margin-left : auto;
margin-right : auto;
background-color : #ffffff;
width : 888px;
height : 218px;
background-image : url(../_images/footer.jpg);
}


but in the mainimage div I am inserting the following table and it is not displaying correctly in FF:



<table width="835" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="215" height="270"><img src="_assets/_images/rangemaster_img_link.jpg" width="215" height="270" /></td>
<td width="190" height="270"><img src="_assets/_images/falcon_img_link.jpg" width="190" height="270" /></td>
<td width="232" height="331" rowspan="2"><img src="_assets/_images/aga_img_link.jpg" width="232" height="331" /></td>
<td width="198" height="331" rowspan="2"><img src="_assets/_images/rayburn_img_link.jpg" width="198" height="331" /></td>
</tr>
<tr>
<td colspan="2" height="61" bgcolor="#000000"><img src="_assets/_images/companion_txt.gif" width="405" height="61" /></td>
</tr>
</table>


Is anyone able to give me a pointer?

Thanks....

abduraooft
Mar 23rd, 2009, 02:21 PM
Is anyone able to give me a pointer? Do you know why tables for layout is stupid (http://www.hotdesign.com/seybold/)? They are meant for displaying tabular data.

boobydooby
Mar 23rd, 2009, 06:14 PM
Hi,

I've removed the tables from my code and am now using divs instead. My complete html code, so far, is:




<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header"> </div>
<!-- End Header -->
<!-- Begin Navigation -->
<div id="navigation">
<div id="callus">
<h1>Call us on:<br />
08457 125 207</h1>
</div>
</div>
<!-- End Navigation -->
<!-- Begin Main Image -->
<div id="mainimage">
<div id="bannerimg1"><img src="_assets/_images/rangemaster_img_link.jpg"></div>
<div id="bannerimg2"><img src="_assets/_images/falcon_img_link.jpg" width="190" height="270" /></div>
<div id="bannerimg3"><img src="_assets/_images/aga_img_link.jpg" width="232" height="331" /></div>
<div id="bannerimg4"><img src="_assets/_images/rayburn_img_link.jpg" width="198" height="331" /></div>
<div id="bannerimg5"><img src="_assets/_images/perfect_kitchen_txt.jpg" width="405" height="61" /></div>
</div>
<!-- End Main Image -->
<!-- Begin Divide -->
<div id="divide"><img src="_assets/_images/spacer.gif" width="5" height"5" /></div>
<!-- End Divide -->
<!-- Begin Content Column -->
<div id="content">

</div>
<!-- End Content Column -->
<!-- Begin Footer -->
<div id="footer">
<div id="whitelinks">Press Room | Legal | Group Links | Site Map</div>
</div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->



and my css is:





body {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
text-align : center;
background-image : url(../_images/grad_bkg.jpg);
color : #000000;
}

#wrapper {
position: relative;
margin-left : auto;
margin-right : auto;
background-color : #ffffff;
padding : 15px 0 0 0;
width : 888px;
}

#header {
position: relative;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 83px;
background-image : url(../_images/gbc_banner.jpg);
}

#callus {
position: absolute; width:200px; height:83px; z-index:1; left: 620px; top: -84px;
}

#callus h1 {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
color:#FFFFFF;
text-align: right;
}

#navigation {
position: relative;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 25px;
background-image : url(../_images/menu.gif);
background-repeat : no-repeat;
}


#mainimage {
position: relative;
display:inline;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 331px;
}

#bannerimg1 {
position: absolute; width:200px; height:270px; z-index:1; left: 0px; top: 0px;
}

#bannerimg2 {
position: absolute; width:190px; height:170px; z-index:2; left: 215px; top: 0px;
}

#bannerimg3 {
position: absolute; width:232px; height:331px; z-index:3; left: 405px; top: 0px;
}

#bannerimg4 {
position: absolute; width:198px; height:331px; z-index:4; left: 637px; top: 0px;
}

#bannerimg5 {
position: absolute; width:405px; height:61px; z-index:5; top: 270px; left: 0px;
}


#divide {
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 5px;
background-color : #000000;
}

#content {
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
}

#footer {
clear : both;
margin-left : auto;
margin-right : auto;
background-color : #ffffff;
width : 888px;
height : 218px;
background-image : url(../_images/footer.jpg);
}

#boxcell {
padding: 20px 0px 0px 0px;
text-align: justify;
vertical-align: top;
}

#text {
padding: 25px 25px 25px 0px;
text-align: justify;
}

#whitelinks {
text-align: left;
padding-left: 28px;
padding-top: 190px;
font-size: 10px;
color: #FFFFFF;
}

#whitelinks a {
font-size: 10px;
color: #FFFFFF;
text-decoration: none
}

#whitelinks a:hover {
font-size: 10px;
color: #FFFFFF;
text-decoration: none;
}

h1 {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
}

h2 {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
}

.redboldtxt {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: bold;
color: #EE3A0D;
}

#recipelink {
margin: 0;
}

#blktopbox {
margin: 0;
}

#greybox {
margin: 0;
}

.whitetxt{
color: #FFFFFF;
font-weight: bold;
}



but the images contained with #mainimage are appearing off to the right in the browser. How do I get the images to align with the main content?

Thanks

Excavator
Mar 23rd, 2009, 06:27 PM
Hello boobydooby,
display:inline; is your problem on #mainimage.




#mainimage {
position: relative;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 331px;
}

boobydooby
Mar 23rd, 2009, 06:39 PM
that's brill - thanks!