Image captions and assocaited images do not remain same width IE5

Using layout view.
Page layout is 3 Columns across formed with 3 cells across page
In 3rd column I have a cell with header text at 160px wide
Directly below, I place an animated gif which shows as 160px in the property inspector.
And page layout looks ok in dw4

But when browsed, the header text is wider than gif image.
Both show up as 160 px. Gif was created in iamgeready and size was made to 160 px
How to fix ?

Any suggestions appreciated.
Astoller
astollerAsked:
Who is Participating?
 
klykkenConnect With a Mentor Commented:
hi astoller,
my advice would be to _never_ pull the handles of a table, it will simply not make crossbrowser html, as you yourself have experienced.

You should not delete single cells as this will mess up the whole structure of tables.

I must admit I am still at loss at to what the cutrent problem is.. sorry about that..

The best thing to do now is for you to post a url with only that changes I proposed, and Ill take it from there..
--
klykken
0
 
klykkenCommented:
hi astoller,

--
>But when browsed, the header text is wider than gif image.
>Both show up as 160 px.
--

I am not sure how to interpret that :-)
Do you have a url for me to look at?
--
klykken
0
 
astollerAuthor Commented:
You can see the page at easyshopltd.co.uk/portal.

If you look at the page index.html in dreamweaver, the captions of ?Support & resources? and ?Featured companies? are tight to the cells below, as they should be.
But in IE5 white gaps appear as you can see when you browse to above address.

When I go into code in dw4 and decrease cell depth from 19px  to 5px, it makes no difference.(If you try to decrease the cell you get message this would reduce cell to less than its minimum size)
I still get white gaps.

The animated gifs are 160 px in the property inspector, and the captions ?childrens play? and ?Medical? are also 160 px in the inspector
but  the gifs appear several pixels narrower when you browse.

I cannot seem to solve this problem !
Hope you can help

astoller
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
klykkenCommented:
Url didn't exist.. typo?
:-)
--
klykken
0
 
astollerAuthor Commented:
Sorry, the url is    www.flashpage.co.uk/portal

astoller
0
 
klykkenCommented:
Hi astoller,
You experience some problems that are common with wysiwyg editors, what you see is not always what you get :).

First of al we need the middle coloumn to stretch out and take as much breadt/width as it can. In the <td> with the text "Support & resources centre for retailers & shoppers", change the <td> to read:
<td colspan="2" rowspan="2" valign="top" bgcolor="#FFFFFF" width="100%">

Now this will make the right coloumn shrink to it's desired size, 160 px wide.
This does create another problem on the left nav, it shrinks too much because there are no graphics there too stop it from happening. To fix this, make a blank gif.  A blank gif is a transparent gif that is 1x1 pixel big.

Save the gif in the same directory as your document and change the third table coloum in your html document like this:
<td width="174"><img src="blank.gif" width="174" height="1" border="0"></td>

It is important of course that the name of the gif corresponds with the code :-).

174 is the width you had set in the <td>, if you want it narrower, just change the value of the gif.

I hope I was able to explain this, please ask more if not :-)
--
klykken
0
 
astollerAuthor Commented:
Hi klykken,

I did  the 2 code changes you suggested.
Great improvement !!
However a navy bar appears across the top of the page.
If I then go in and pull cells around to cover it, the whole design collapses.

So is the rule:

Create the layout in DW4
But when you the change the html manually, do not pull cells around in layout view.
Else the whole design collapses ??

Astoller
0
 
klykkenCommented:
hi astoller,
I dont know what you mean by 'navy bar' I'm afraid..
Also I am not sure what you mean by 'pull cells around to cover it' .. :-/

Keep in mind the changes I made to your code did not add any new table cells, only modified them.

What if you do the changes I suggested and save your file with a new filename, then I can guide you from there? :)
--
klykken
0
 
astollerAuthor Commented:
Hi Klykken

What I mean by pulling cells around is in layout view in DW4
You click on a cell and when cell handles appear, you can pull them around to suit.
Ie. Increase width or height of cell.
So I used to pull cells around to fill in gaps whenever I had deleted something else.
But this always left gaps elsewhere.

Re your modified page (which is a good improvement):
If you then delete row of height 19 the 4th row, (the white box that contains nothing,)
then page falls out of alignment.

Grey boxes in left hand column (1) now have areas of grey space whereas before, they were tight to the text.
And white gaps start to appear around the animated gifs on right hand side of page.

regards
astoller
0
 
astollerAuthor Commented:
Hi Klykken

I uploaded the file to the same url flashpage.co.uk/portal with your amendments.
You will now see the navy bar at the top.

Below the introduction red bar, there is a white cell
If I delete this, the whole page loses its structure.
So if I need to amend the page by removing a cell, I must reconstruct the whole page?
Else make an exisiting cell with a height of zero ?

Regards
Astoller
0
 
astollerAuthor Commented:
Good advice and knowledge.
0
All Courses

From novice to tech pro — start learning today.