PDA

View Full Version : Column widths displaying differently in FF and IE?


ncb
03-23-2010, 12:40 PM
Hi All,
Complete beginner at HTML and CSS, but having some success putting together a Portfolio site.
My portfolio is viewable from the main page here - www.nickcloverbrown.com (http://www.dreamweaverclub.com/forum/www.nickcloverbrown.com)

The portfolio site consists of a large horizontal scroll gallery (I'd love a more efficient way of loading the images, but don't know squat about coding). I put it together in Dreamweaver, and it's laid out as long table. To spread the images apart I've adjusted the column widths, but this is not reflected in firefox. The site displays correctly in IE with good spacing between images, but in firefox the column widths are non-existent.

I would appreciate any help either in suggestions for displaying this kind of content in a more efficient way, or solutions for fixing the column widths.

Thanks in advance.

Nick

m1a2x3x7
03-23-2010, 01:14 PM
Welcome to the forums ncb.

First, your images are way way to big. I'm downloading 20mb a second and your page is taking forever to load. You really shouldn't have images at 400k.

Second, it's always better to paste in your code so it's easier for use to read/find.

Third, spacing looks fine for me in Firefox but then again I'm on a Mac. What version of Firefox are you running?

Corrosive
03-23-2010, 01:25 PM
Yeah, looks good to me in FF on PC. Agree with posters comments about image size. A whole page shouldn't be 400k!

ncb
03-23-2010, 01:29 PM
Hi m1a,
I was concerned about the size of the images, but I tested it on my other machine and they were done in about 15 seconds, which while relatively long, will hopefully be solved with a quick loading page or something. They may be too big anyway for 1024 viewing, so I'm probably going to reduce them down anyway, but I really don't want to be tiny.

The spacing i'm looking for is as seen in IE, with only one image viewable at a time in the central area. Do you get that with IE?

here's the code though:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nick Clover-Brown: Portfolio</title>
<style type="text/css">
<!--

body {
background-image: url(images/images/Portfolio_whole.png);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
margin-left: 0px;
margin-right: 0px;

}
-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>

<body>

<table width="2957%" border="0" cellpadding="20" cellspacing="0" >
<tr>
<td width="1213" height="600"><img src="images/Portflio images/Portfolio29.png" width="917" height="564" /></td>
<td width="974"><img src="images/Portflio images/Portfolio28.png" width="627" height="564" align="middle" /></td>
<td width="997"><img src="images/Portflio images/Portfolio27.png" width="627" height="564" /></td>
<td width="954"><img src="images/Portflio images/Portfolio26.png" width="627" height="564" /></td>
<td width="1002"><img src="images/Portflio images/Portfolio25.png" width="627" height="564" /></td>
<td width="979"><img src="images/Portflio images/Portfolio24.png" width="627" height="564" /></td>
<td width="1036"><img src="images/Portflio images/Portfolio23.png" width="667" height="600" /></td>
<td width="1006"><img src="images/Portflio images/Portfolio22.png" width="668" height="600" /></td>
<td width="1028"><img src="images/Portflio images/Portfolio21.png" width="627" height="564" /></td>
<td width="996"><img src="images/Portflio images/Portfolio20.png" width="627" height="564" /></td>
<td width="877"><img src="images/Portflio images/Portfolio19.png" width="627" height="564" /></td>
<td width="1179"><img src="images/Portflio images/Portfolio18.png" width="886" height="564" /></td>
<td width="1232"><img src="images/Portflio images/Portfolio17.png" width="886" height="564" /></td>
<td width="963"><img src="images/Portflio images/Portfolio16.png" width="627" height="564" /></td>
<td width="984"><img src="images/Portflio images/Portfolio15.png" width="627" height="564" /></td>
<td width="973"><img src="images/Portflio images/Portfolio14.png" width="627" height="564" /></td>
<td width="1222"><img src="images/Portflio images/Portfolio13.png" width="886" height="564" /></td>
<td width="1075"><img src="images/Portflio images/Portfolio12.png" width="752" height="564" /></td>
<td width="943"><img src="images/Portflio images/Portfolio (1).png" width="618" height="540" /></td>
<td width="943"><a name="start" id="start"></a><img src="images/Portflio images/Portfolio01.png" width="627" height="564" /></td>
<td width="1036"><img src="images/Portflio images/Portfolio02.png" width="726" height="564" /></td>
<td width="1175"><img src="images/Portflio images/Portfolio03.png" width="833" height="564" /></td>
<td width="852"><img src="images/Portflio images/Portfolio04.png" width="482" height="564" /></td>
<td width="952"><img src="images/Portflio images/Portfolio05.png" width="627" height="564" /></td>
<td width="954"><img src="images/Portflio images/Portfolio06.png" width="627" height="564" /></td>
<td width="925"><img src="images/Portflio images/Portfolio07.png" width="627" height="564" /></td>
<td width="943"><img src="images/Portflio images/Portfolio08.png" width="627" height="564" /></td>
<td width="1011"><img src="images/Portflio images/Portfolio09.png" width="705" height="564" align="top" /></td>
<td width="1017"><img src="images/Portflio images/Portfolio10.png" width="707" height="564" /></td>
<td width="1206"><img src="images/Portflio images/Portfolio11.png" width="752" height="564" /></td>
</tr>
</table>
</body>
</html>

ncb
03-23-2010, 01:34 PM
woops, hit post too early.

Hi corrosive, thanks for your feedback.

I'm using both the latest and latest minus 1 versions of firefox, and it appears the same on both.
Any ideas why it would appear like that for you but not for me?

Also while I'm talking to you, If I wanted the images to scroll away underneath a sidebar/banner/column/wrapper (I'm not sure what it would be called) instead of going all the way to the edge of the screen, what should I be trying to do?

Corrosive
03-23-2010, 01:36 PM
It's not the physical size of the image i.e. dimensions, it is what you do with them. Photoshop has a 'save for web' option which strips out meta data (which is superfluous) and reduces the kb of your images. Think about a digital camera image. It is not just the image but extra data such as when the image was taken, what camera and so on. This needs to be stripped out.

15 seconds is a bloody long time to wait for a web page. You've lost me already!

Corrosive
03-23-2010, 01:39 PM
I hate to say this but the only way to get cross-browser compatibility nowadays is to use CSS and div tags for positioning. Tables will never be the right tool for this job.

Take a few steps back and do some tutorials and grasp the basics. Then tackle your website.