Solved

Image captions and assocaited images do not remain same width IE5

Posted on 2001-07-24
11
156 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

 

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
 

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…
Finding and deleting duplicate (picture) files can be a time consuming task. My wife and I, our three kids and their families all share one dilemma: Managing our pictures. Between desktops, laptops, phones, tablets, and cameras; over the last decade…

739 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