Solved

Image captions and assocaited images do not remain same width IE5

Posted on 2001-07-24
11
144 Views
Last Modified: 2010-04-25
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
0
Comment
Question by:astoller
  • 6
  • 5
11 Comments
 
LVL 8

Expert Comment

by:klykken
ID: 6319653
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
 

Author Comment

by:astoller
ID: 6321660
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
 
LVL 8

Expert Comment

by:klykken
ID: 6321795
Url didn't exist.. typo?
:-)
--
klykken
0
 

Author Comment

by:astoller
ID: 6321891
Sorry, the url is    www.flashpage.co.uk/portal

astoller
0
 
LVL 8

Expert Comment

by:klykken
ID: 6322131
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

Author Comment

by:astoller
ID: 6327579
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
 
LVL 8

Expert Comment

by:klykken
ID: 6327803
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
 

Author Comment

by:astoller
ID: 6333475
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
 
LVL 8

Accepted Solution

by:
klykken earned 50 total points
ID: 6334280
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
 

Author Comment

by:astoller
ID: 6335716
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
 

Author Comment

by:astoller
ID: 6342785
Good advice and knowledge.
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
Here's a very brief overview of the methods PRTG Network Monitor (https://www.paessler.com/prtg) offers for monitoring bandwidth, to help you decide which methods you´d like to investigate in more detail.  The methods are covered in more detail in o…
This tutorial demonstrates a quick way of adding group price to multiple Magento products.

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now