Firefox shows table cell heights wrong
When I preview my page using Firefox my cells with text in
them are messed up the height of the cell is higher then it is set
to be, way higher. But when I preview in IE the cells are at there
correct height.
The empty cells display fine but when I put text in them it
leaves a big margin above and blow the text like I had put a
paragraph break above and below the text or even two paragraphs.
I checked the padding and its set to 0...but like I said in
IE it shows up correct.
Any ideas??
That'd be the ticket. The difference between those first
three cells and
the rest of them is that only the first three cells have
content wrapped in
<p> tags.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"VCarter" <[email protected]> wrote in message
news:fuomrt$n0g$[email protected]..
> Always work in at least split view so you see the code
*and* the design.
> Working in design mode, strictly, will cause you much
grief.
>
> As for 'fixing it', you'll have to add some css to
remove the inherent
> margins from your <p> tags that are inside each
cell.
>
> td p {margin: 0}
>
> That will make EVERY <p> tag within a <td>
tag, have a 0 margin.
>
> I think that's right...if it's not, I'm sure someone
will correct me!
>
> furnaps wrote:
>> I think your rite about the P tags but I dont think
i know how to set a
>> margin... I dont ever go to the coding side of
dreamweaver I just use the
>> easy way out which is bad because when things like
this popup I dont know
>> whats wrong.
>>
>> I think I'm going to start switch to code view
everytime I change
>> something on my page to get an idea of what happens
and how the code
>> changes so I dont have to really so much on just the
design interface.
>>
>> When you take a look at the site if the P tags are
the problem how
>> should I go about fixing it??
>>
>> Thanks very much.
>>
Similar Messages
-
I have a table with 21 rows. Every other row is used as a separator between the rows with content. These separator rows don't have anything in them and their height is set to 1 in the properties inspector. I'm assuming these heights and widths are in pixels, however, these rows don't appear to be 1px in design view nor on a live web page.They are more like 15px.
How can I make these rows 1px in height?That site has badly malformed code.
http://tinyurl.com/36z7sc8
I'm guessing it's cobbled togather from various bits and pieces including the ChronoForm code?
Regarding the cell heights, the code of a typical cell is:
<td width="95" height="1"> </td>
The code between the <td> tags (known as a non-breaking space) is a space character (pressing the spacebar on your keyboard generates this code in the HTML).
Removing the space from the code for each <td> will cause your cells to collapse. You may need to prop them open with a 1px high GIF as Murray suggested. -
Individual cell heights in JList
hi!
i'm trying to write a cellrenderer for a JList, which can show different cell heights.
i.e. in unselected mode, i only want to show a name of a person; in selected mode, i want do show the name of the person AND some other details in the same cell (like the "add and remove programs"-dialog of Windows XP when you select a program to uninstall (it shows then some information about usage etc.))
if(!isSelected) {
/* Not selected */
setPreferredSize(new Dimension(0,25));
setBackground(Color.BLUE);
} else {
/* Selected: */
setPreferredSize(new Dimension(0,45));
setBackground(Color.RED);
}i tried this code in the getListCellRendererComponent(...)-method, but the JList only uses the first size (25) ... i tried to set the JList-propertie fixedCellHeight to -1, but no changes....
does anybody know how i can solve my problem?
thx a lot & greetz
swissManuthank you for your hints! ... i think i will take some time to develop a Model for my DetailList....
if you like, you can use my improved code.... here it is:
here is the mainpart, the DetailList.java
* Created on 02.12.2004
package detaillist;
import java.awt.Color;
import java.awt.Component;
import java.awt.Container;
import java.awt.Dimension;
import java.awt.Insets;
import java.awt.LayoutManager;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.util.Vector;
import javax.swing.JPanel;
* Die Items einer DetailList k�nnen per Klick "aufgeklappt" werden und zeigen
* anschliessend weitere Deteils zum entsprechenden Item.<br>
* Um eigene DetailListItem's mit eigener Darstellung zu erstellen kann einfach
* eine Klasse welche von DetailListItem ableitet erstellt werden.<br>
* <br>
* hoverSelection:<br>
* Mit setHoverSelection(true) wird der Hover-Modus aktiviert. Der Benutzer muss
* anschliessend nur noch �ber Items mit der Maus fahren um diese aufzuklappen.<br>
* <br>
* multiSelection:<br>
* Per setMultiSelection(true) wird dem Benutzer erm�glicht, mehrere Items auf
* einmal aufzuklappen.<br>
* <br>
* ACHTUNG! hoverSelection & multiSelection k�nnen nicht gleichzeitig aktiviert
* sein!
* @author Manuel Alabor; adapted from Pierre LE LANNIC (weebib)
* @version 1.1
public class DetailList extends JPanel {
/* Eigenschaften: */
private boolean hoverSelection = false;
private boolean multiSelection = false;
/* Objekte: */
private Vector selectedItems;
private ItemSelectionListener itemListener;
public DetailList() {
super(new ListLayout());
setOpaque(true);
setBackground(Color.WHITE);
itemListener = new ItemSelectionListener();
selectedItems = new Vector();
* Setzt das markierte Item und klappt das betreffende auf bzw. zu.<br>
* Wird ein aufgeklapptes Item nochmals angeklickt, wird dieses zugeklappt.<br>
* <br>
* Ist multiSelection == true, so k�nnen mehrere Items auf einmal aufge-
* klappt sein. Falls multiSelection == false, so wird das bereits offene
* Item geschlossen.
* @param item
private synchronized void setSelectedItem(DetailListItem item) {
if (item == null) return;
/* Offenes Item bei erneutem Klick schliessen: */
// Offenes Item schliessen und aus der selectedItems-Liste entfernen.
for (int i = 0; i < selectedItems.size(); i++) {
DetailListItem selItem = (DetailListItem)selectedItems.get(i);
if(item == selItem) {
if(item.isExpanded()) {
item.setExpanded(false);
selectedItems.remove(i);
System.out.println(selectedItems.size());
return;
/* Ausgeklappte Items zuklappen wenn ein anderes gew�hlt wurde: */
// Wenn nicht mehrere offene Items erlaubt sind (!multiSelection),
// werden hier alle anderen Items zugeklappt (falls vorhanden)
if(selectedItems.size() > 0 && !multiSelection) {
for (int i = 0; i < selectedItems.size(); i++) {
DetailListItem tmpItem = (DetailListItem)selectedItems.get(i);
if(item != tmpItem) {
tmpItem.setExpanded(false);
selectedItems.remove(i);
/* Geklicktes Item ausklappen: */
item.setExpanded(true);
selectedItems.add(item);
System.out.println(selectedItems.size());
* F�gt dieser DetailList ein neues DetailListItem hinzu.<br>
* Es wird dem neuen Item automatisch der ItemSelectionListener dieser
* DetailList zugewiesen.
* @param newItem
public void addItem(DetailListItem newItem) {
newItem.addMouseListener(itemListener);
add(newItem);
revalidate();
repaint();
/* Anonyme Klassen: */
* Diese anonyme Klasse fungiert als Klick-Listener f�r die DetailListItem's
* dieser DetailList.
* @author Manuel Alabor
private class ItemSelectionListener extends MouseAdapter {
public void mouseClicked(MouseEvent e) {
Object o = e.getSource();
if(!hoverSelection) {
if (o instanceof DetailListItem) {
setSelectedItem((DetailListItem)o);
* Erm�glicht einen "Hover"-Effekt welche bewirkt dass ein Item auf-
* geklappt wird sobald sich der Mauszeiger dar�ber befindet.<br>
* Ist multiSelection aktiv, wird hier nichts unternommen, auch wenn
* hoverSelection aktiviert ist.
public void mouseEntered(MouseEvent e) {
if(hoverSelection && !multiSelection) {
Object o = e.getSource();
if (o instanceof DetailListItem) {
// Wenn ein Item offen ist, soll dieses nicht zugeklappt
// werden wenn der Benutzer erneut mit dem Cursor auf das
// Item f�hrt.
if(selectedItems.size() == 1) {
if(selectedItems.get(0) != o) {
setSelectedItem((DetailListItem)o);
} else {
setSelectedItem((DetailListItem)o);
* Dieser LayoutManager wird benutzt um alle DetailListItems in einer Listen-
* Anordnung anzuzeigen.
* @author Manuel Alabor
private static class ListLayout implements LayoutManager {
public void removeLayoutComponent(Component comp) {}
public void addLayoutComponent(String name, Component comp) {}
public void layoutContainer(Container target) {
synchronized (target.getTreeLock()) {
Insets insets = target.getInsets();
int nmembers = target.getComponentCount();
int x = insets.left;
int y = insets.top;
for (int i = 0; i < nmembers; i++) {
Component m = target.getComponent(i);
if (m.isVisible()) {
Dimension d = m.getPreferredSize();
m.setBounds(x, y, target.getWidth(), d.height);
y += d.height;
public Dimension preferredLayoutSize(Container target) {
synchronized (target.getTreeLock()) {
Dimension dim = new Dimension(0, 0);
int nmembers = target.getComponentCount();
for (int i = 0; i < nmembers; i++) {
Component m = target.getComponent(i);
if (m.isVisible()) {
Dimension d = m.getPreferredSize();
dim.height += d.height;
dim.width = Math.max(dim.width, d.width);
Insets insets = target.getInsets();
dim.width += insets.left + insets.right;
dim.height += insets.top + insets.bottom;
return dim;
public Dimension minimumLayoutSize(Container target) {
synchronized (target.getTreeLock()) {
Dimension dim = new Dimension(0, 0);
int nmembers = target.getComponentCount();
for (int i = 0; i < nmembers; i++) {
Component m = target.getComponent(i);
if (m.isVisible()) {
Dimension d = m.getMinimumSize();
dim.height += d.height;
dim.width = Math.max(dim.width, d.width);
Insets insets = target.getInsets();
dim.width += insets.left + insets.right;
dim.height += insets.top + insets.bottom;
return dim;
/* Getter- & Setter-Methoden: */
public boolean isHoverSelection() {
return hoverSelection;
public void setHoverSelection(boolean hoverSelection) {
multiSelection = false;
this.hoverSelection = hoverSelection;
public boolean isMultiSelection() {
return hoverSelection;
public void setMultiSelection(boolean multiSelection) {
hoverSelection = false;
this.multiSelection = multiSelection;
}this is the DetailListItem.java ... the prototype for individual items:
* Created on 02.12.2004
package detaillist;
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Component;
import java.awt.Dimension;
import java.awt.Toolkit;
import javax.swing.BorderFactory;
import javax.swing.Box;
import javax.swing.ImageIcon;
import javax.swing.JLabel;
import javax.swing.JPanel;
* Ein Standart-Item f�r DetailList.<br>
* Um eigene Items zu realisieren kann ganz einfach von dieser Klasse abgleitet
* werden und anschliessend das Item individualisiert werden. (Beispiel siehe
* DetailListAdressItem)
* @author Manuel Alabor
* @version 1.0
* @see detaillist.DetailListAdressItem
public abstract class DetailListItem extends JPanel {
/* Components: */
protected JLabel lblTitle;
protected JPanel details;
private Component margin;
/* Eigenschaften: */
protected boolean expanded = false;
protected int unexpandedHeight = 18;
* Standart-Konstruktor mit Angabe f�r den Titel sowie ein Symbol.
* @param text
* @param icon
public DetailListItem(String title, String icon) {
super(new BorderLayout());
/* Item anpassen: */
setOpaque(true);
/* Titel initialisieren: */
lblTitle = new JLabel(title);
if(!icon.equals("")) {
lblTitle.setIcon(new ImageIcon(Toolkit.getDefaultToolkit().createImage(icon)));
/* details-Panel initialisieren & vorbereiten: */
details = new JPanel();
margin = Box.createHorizontalStrut(10);
/* Components anordnen: */
add(lblTitle, BorderLayout.NORTH);
add(margin, BorderLayout.WEST);
add(details, BorderLayout.CENTER);
update();
* Verk�rzter Konstruktor ohne angabe f�r ein Symbol.
* @param text
public DetailListItem(String text) {
this(text, "");
* Klappt das Item entweder auf oder zu.
private void update() {
margin.setVisible(expanded);
details.setVisible(expanded);
if (expanded) {
setBackground(Color.LIGHT_GRAY);
setBorder(BorderFactory.createLineBorder(Color.BLACK));
} else {
setBackground(Color.WHITE);
setBorder(BorderFactory.createLineBorder(Color.WHITE));
this.revalidate();
this.repaint();
* Im zugeklappten Zustand sollte per unexpandedHeight-Variabel die H�he des
* Items definiert werden, da es ansonsten jenachdem zu unsch�nen Effekten
* kommen kann.<br>
* F�r ein normales Item betr�gt die "Standarth�he" 18pixel.
public Dimension getPreferredSize() {
Dimension dim = super.getPreferredSize();
/* H�he: */
// Wenn das Item nicht ausgeklappt ist, unexpandedHeight als h�he
// nehmen:
if(!expanded) {
dim.height = unexpandedHeight;
return dim;
/* Getter- & Setter-Methoden: */
public String getTitle() {
return lblTitle.getText();
public void setTitle(String text) {
lblTitle.setText(text);
public boolean isExpanded() {
return expanded;
public void setExpanded(boolean expanded) {
this.expanded = expanded;
update();
}here my first basic sample for a item:
* Created on 02.12.2004
package detaillist;
import java.awt.Font;
import javax.swing.JScrollPane;
import javax.swing.JTextArea;
import com.jgoodies.forms.factories.Borders;
import com.jgoodies.forms.layout.CellConstraints;
import com.jgoodies.forms.layout.FormLayout;
* Ein DetailListItem mit Texteingabe-Feld
* @author Manuel Alabor
* @version 1.0
public class DetailListTextItem extends DetailListItem {
/* Components: */
private JTextArea txtText;
* Standartkonstruktor.
* @param text
* @param name
* @param adress
* @param email
* @param photo
public DetailListTextItem(String title, String icon, String text) {
super(title, icon);
unexpandedHeight = 20; // H�he in zugeklapptem Modus festlegen
/* lblTitle anpassen: */
lblTitle.setFont(new Font("Tahoma",Font.BOLD + Font.ITALIC,11));
lblTitle.setBorder(Borders.createEmptyBorder("1dlu,1dlu,1dlu,1dlu"));
/* Werte �bernehmen: */
txtText = new JTextArea(text);
/* FormLayout f�r details erstellen: */
details.setLayout(new FormLayout("d:g", "f:30dlu:g"));
CellConstraints cc = new CellConstraints();
/* Components hinzuf�gen: */
details.setBorder(Borders.DLU2_BORDER);
details.add(new JScrollPane(txtText), cc.xy(1,1));
}and here a testapp:
import java.awt.BorderLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JButton;
import javax.swing.JCheckBox;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import detaillist.DetailList;
import detaillist.DetailListItem;
import detaillist.DetailListTextItem;
* Created on 02.12.2004
* @author Manuel Alabor
public class DetailListTest {
public static void main(String[] args) {
JFrame frame = new JFrame();
JPanel contentPane = (JPanel)frame.getContentPane();
contentPane.setLayout(new BorderLayout());
final DetailList list = new DetailList();
contentPane.add(new JScrollPane(list), BorderLayout.CENTER);
JButton btnAdd = new JButton("Add Textitem...");
btnAdd.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent arg0) {
DetailListItem item = new DetailListTextItem("Text-Item", "small_gear.png", "Dies ist ein Testitem");
list.addItem(item);
contentPane.add(btnAdd, BorderLayout.SOUTH);
JPanel options = new JPanel(new BorderLayout());
final JCheckBox chkHover = new JCheckBox("HoverSelection");
final JCheckBox chkMulSel = new JCheckBox("MultiSelection");
chkHover.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent arg0) {
list.setHoverSelection(chkHover.getModel().isSelected());
chkMulSel.getModel().setSelected(false);
options.add(chkHover, BorderLayout.NORTH);
chkMulSel.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent arg0) {
chkHover.getModel().setSelected(false);
list.setMultiSelection(chkMulSel.getModel().isSelected());
options.add(chkMulSel, BorderLayout.SOUTH);
contentPane.add(options, BorderLayout.NORTH);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(262,250);
frame.setLocation(200,200);
frame.show();
}hope you like it :) -
JEditorPane: HTML Table: Wrong cells height calculation
<table>
<tr>
�<td width="200" height="5" bgcolor="red"><td>
</tr>
<tr>
<td width="200" height="5" bgcolor="green"><td>
</tr>
<tr>
<td width="200" height="5" bgcolor="blue"><td>
</tr>
</table>
Just for last row I get the specified height "5", and two first ones have height "19". It is true for any height that less than 19. Is it a bug? How I can handle this and get the right behavior?Hi Ruben,
you will have to implement adjustment of table cells yourself to achieve this. With the existing way JEditorPane et. al. render tables table cells always are sized either in default sizes or by attributes explicitly giving the size (such as attribute WIDTH).
Ulrich -
How to show combobox in a table cell
Hi,
I set combobox in a table cell but it shows when I click the cell.
How can I set the combobox and it be visible since the table is showing.What you have already done, and the resulting behavior is unclear from your post. Post more details.
-
Slide show in table cell and text in layer above images
I need to create a slide show within
a table cell (one cell of several). The
display should commence after the launch page has been completely loaded and only appear once. Also, there needs to be text in a layer above the slide images which changes coordinated with each slide but is generated independent of each slide and therefore may be positioned within the cell independently.
Anyone?Hi again Nancy,
You've provided very helpful information in the past. The code for the "show" in the upper right position would be perfect if the text-bar background could be made transparent and positioned higher against the image. Your suggestion has forced me to clarify my concept in my own mind. The need for transparency hadn't occurred to me yet.
An alternative would be the upper left "show" in a bottom layer with text with a transparent background in a top layer. The text in the top layer would remain constant from the time of the page's loading; i.e., would be independent of changes in the bottom layer. Perhaps I could figure out the code necessary to coordinate that text's change of shade from one slide to the next appropriate to the slide's shade.
I'm assuming that a table cell can be partitioned into layers using HTML and each layer programmed independently using JavaScript.
Thanks again for your prompt attention. -
*Very challenging problem with Firefox involving 'table-layout' attribute and cell padding
I've been trying to figure this out for days and I just feel
like my head is going to explode. I don't even think words could
describe the relief if someone could solve this problem for me.
I described the problem here to make things easier:
http://morthian.googlepages.com/Untitled-2.html.oO(AngryCloud)
>I came up with a solution. If I use a div inside of the
cells instead of
>assigning them a class, the problem goes away.
This doesn't sound right. You should put the page up again,
describe
what you're trying to do and what the problem is in more
detail.
>This is going to take me hours
>to monotonous work, but I will do what I have to do.
Search & replace comes to mind, but this shouldn't be
necessary at all.
A 'div' inside a table cell just for the sake of "fixing"
some obscure
problem is not really a solution, as it doesn't really fix
anything.
Micha -
Hi,
What would be the best way to link this table cell? I want the entire cell to be linked rather than just the text inside it.
<table width="160" border="0" align="right" cellpadding="5" cellspacing="0" class="backgroundbox-video">
<tr>
<td width="167" align="left" valign="top"><p class="navheader-lg">Video Clip</p>
<p class="navheader-sm">Watch a short<br />
testimonial video</p></td>
</tr>
Thanks so much
LauraHere is what I have in the style sheet...
.vidA a {
text-decoration: none;
display:block;
background-image: url(../images/videoclip-imageandcolor-tr.gif) no-repeat scroll right bottom;
background-color:#B1D6D5;
padding:10px;
.vidA a:link, .vidA a:visited, .vidA a:hover{
color:black;
.vidA a:hover{
background-color:#4AA3C9;
.vidA p {
margin:5px;
.audioA a {
text-decoration: none;
display:block;
background-image: url(../images/audioclip-imageandcolor-tr.gif) no-repeat scroll right bottom;
background-color:#B1D6D5;
padding:10px;
.audioA a:link, .vidA a:visited, .vidA a:hover{
color:black;
.audioA a:hover{
background-color:#4AA3C9;
.audioA p {
margin:5px;
and here is what I have for those tables...
<td align="right" valign="top" bgcolor="#FFFFFF"><table width="160" border="0" align="right" cellpadding="5" cellspacing="0" class="backgroundbox-video">
<tr>
<td class="vidA" width="167" height="100" align="left" valign="middle"><a href="http://www.12results.com/video1.html" onclick="MM_openBrWindow('http://www.12results.com/video1.html','','width=400,height=400');return false">
<span class="navheader-lg">Video Clip</span><br />
<span class="navheader-sm"><br />
Watch a short<br />
testimonial video</span></a></td>
</tr>
</table></td>
</tr>
<tr>
<td align="right" valign="top" bgcolor="#FFFFFF"><table width="160" border="0" align="right" cellpadding="5" cellspacing="0" class="backgroundbox-audio">
<tr>
<td class="audioA" width="167" height="100" align="left" valign="middle"><a href="http://www.12results.com/video1.html" onclick="MM_openBrWindow('http://www.12results.com/video1.html','','width=400,height=400');return false"> <span class="navheader-lg">Audio Clip</span><br />
<span class="navheader-sm"><br />
Listen to a 40 min<br />
interview about SAW</span></a></td>
</tr>
</table></td>
---I completely removed the styles for those tables (was background-video, background-audio) because all it had was the background styling (which you said to remove) and can't see any other reason to have it there?
So it's perfect except for the background images are not showing...so did I do something wrong in the fireworks/make transparent process do you think?
Thanks...
Laura -
Problem with images inside of table cells
I've run into a problem on this web page:
http://www.solidrocknet.org/index2.html
The the background of the table cells which contain an image
is showing
through in the form of a strip at the bottom of the cell. You
can see
this as a black strip in the cells which contain the logo
graphic,
centerpiece photo, and the photo strip and as a blue strip
under the 4
separate photos on the bottom.
These problems are appearing in Firefox. It almost looks
correct in
IE6/7 except that the blue strip appears under the bottom
photos.
Can anyone see what I am doing wrong?The best practice is to include -
a img { border:none; }
in your CSS so that any image inside an anchor tag is
prevented from having
the border.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"K0rrupt" <[email protected]> wrote in
message
news:f5i5fc$bhp$[email protected]..
> sometimes browsers like to display a blue lines around
pictures. So as
> good practice you should add it.
> -
Table cell scroll bar overflow- why doesnt it work?
Hi everyone.
Ok, im have an existing document/site:
http://www.helenbwilson.com/helen-portfolio-1.html
I want the table cell in the left to have a scroll bar (only
with the height part). I want the "block" of the images to have a
height of 400px. Now, I have tried to do this, and for the most
part got it to work-in another document:
http://www.helenbwilson.com/CSS-test-01.html
I am trying to replicate, but I have absolutely no idea why
its not working now.
I applied a css style and I want the same type of scroll, so
when there are more images, it can have a scroll bar.
Can anyone tell me what Im doing wrong? If I am not being
clear, please let me know.
Any info would be appreciated.
Thanks
-psyI think you mean something like this:
Put this in your head:
<style type="text/css">
<!--
.imageBlock {
display: block;
float: left;
height: 400px;
width: 250px;
overflow: auto;
background-color: #FF0000;
-->
</style>
put this in your body:
<div class="imageBlock">
</div>
If the table or other content you place inside your
'imageBlock' div, is higher than 400 px, you'll get a vertical
scrollbar. -
Want Flash movie to scale with table cell. NOT WORKING!
Greetings;
I have authored a Flash movie and it is working fine. When I
use the html page output by Flash it scales fine but when I cut and
paste this code into a table cell the movie will not scale (in
Firefox) and not showup at all in IE 7.
Help appreciated. Here is the html page output by Flash:
http://www.howardbakerphotography.com/gallery/bakerGallery.html
(Scaling fine)
Here is the content placed inside a simple table cell:
http://www.howardbakerphotography.com/gallery/index3.php
(Only shows up small not scaling)
Help appreciated.
RipFound the solution myself! It appears the problem was in the
document type I was declaring:
<!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">
*The above was preventing my Flash from scaling when placed
in a table cell. When I changed it to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" >
It worked fine.
I'd be curious to know a little more about this problem if
anyone else has some insight ...
Is this document type I've gone to now an older one and going
to eventually go away?
Rip -
Line Binding with table Cell issue
Hello,
In my application I need to map data from one table to another table. please see snap from below link
http://www.pixhost.org/show/3449/12902612_column-linking.png
if you see the snap you will come to know that I have Map Name "Pankti" from Left Table to Name "Isabella" from right Table.
I have used my custom tableView Control.
I have Bind Line cordinates as below
line.startXProperty().bind(lefttb.widthProperty().add(lefttb.layoutXProperty()));
line.startYProperty().bind(lefttb.lastcell.getTableRow().layoutYProperty().add(lefttb.lastcell.getTableRow().heightProperty().add(lefttb.lastcell.getTableRow().heightProperty().add(-12))));
line.endXProperty().bind(righttb.layoutXProperty());
line.endYProperty().bind(righttb.lastcell.getTableRow().layoutYProperty().add(righttb.lastcell.getTableRow().heightProperty().add(righttb.lastcell.getTableRow().heightProperty().add( -12))));
Here lefftb = LeftTableView
righttb = RightTableView
lastcell is a selected cell of tableview
I have added these control in Group Container.
MyProblem is :
When I scroll in any tableview then the relationship between data are lost and Line had start showing wrong relationship.
in above example if i scrolled RightTableview then see the result from Below Links
http://www.pixhost.org/show/3800/12903076_column-map1.png
http://www.pixhost.org/show/3800/12903157_column-map2.png
http://www.pixhost.org/show/1297/12903283_column-map3.png
So what should i do so that my Line always show correct relationship??
Please download my sample code from
http://www.freefilehosting.net/columnmapsample
or
http://www.filefactory.com/file/4w3dpn0l27rj/n/ColumnMapSample.rar
Thank You,
RonakHi Roank ,
I think your approach of mapping the table using TableCell is not correct because the tablecell is updated everytime you scroll,click and other events. Although I can't give you full guide but the algorithm must be something like this:
+ Use the index of table cell or item Object instead of using the tableCell.
+ The index of cell is get from cell.getIndex();
Implementation
+ If the mapping is to be done then you must first save the index of two table in a Map<integer,integer> .
+ Now update the line of mapping only if the index matches in the cellfactory (during update of the table cell).
Otherwise the line x,y must be set to the last known x,y position of that tablerow indexI think this way the things goes correctly. One thing to remember that tablecell is always updated.
Thanks
Narayan -
Getting text to the top of a table cell
I'm sorry, I have asked this before but I still have nothing that works.
In a table I want the text to start at the top of the cell. I can force it with a clear gif and the end, but surely that is not right. It often works OK in Safari and Opera, but not in Firefox or IE.
I have copied some code below. It seems to me that the text should be aligning top, but it remain vertically centred in live view and all browsers (MAC).
What am I not seeing?
<!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>Untitled Document</title>
<link href="properllers.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="880" border="0" align="center" cellpadding="0" cellspacing="0" class="top">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="500"> </td>
<td> </td>
<td><h1 class="top">Text test header</h1>
<p class="top">Berci accuptatet facerum, simus, quatiae pori tem arum id et exces aute erum inciumquo temquos essi nem utam, int aut harionsequo entintius solum est in consequo odi dolenimpe laborum se vel iliquo voluptas ex entorerum rest venimaxima sit am aut arumquam, tet que necererchil et mo vid ut mo ilic totaquam apitatem. Et illaboratum hilleni hillab iusaperunt landunt inctat.<br />
Mus, ut eum ut ut omni qui aliquas peribus.<br />
Us repudit, volupti ssequid modionseque pero consernatur? Qui que volorei umquae dem aut hilis am, cus, sequam quid ullam, idera della vent errovitis nobis minia simus et quos eum de cuptaec turiorio. Nequaspercia alis andae moluptae. Vid quunt enihit la nempores volupta alibus, occaborum ist odi volorepres que eum quo id underio tem res dolute omnienis in porro imoluptas doluptat im faccus re porem rero comnihicim e</p></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>The default alignment in a table cell is LEFT MIDDLE, i.e., left horizontal and middle vertical. If you have no specification in your code for anything other than that, then that's what you get. I see no such specifications in your code, so your symptoms are not surprising. To make things align to the top of a table cell (in HTML4.01) you would use <td valign="top"> or in XHTML you would use CSS to bring the content to the top of the cell, e.g., <td style="vertical-align:top"> (inline CSS shown for clarity).
Be aware that text contained within a paragraph or an <h#> tag WILL HAVE A TOP MARGIN, so if you want that text to be flush with the top of the cell, you will have to control that top margin on the container tag, too.
In your case, I'm assuming that this is one of your attempts to get to the top of the cell -
<td><h1 class="top">Text test header</h1>
But we have no idea what rule is specified by the class="top". At any rate, you will have only affected the alignment of the text within the <h1> tag and not within the table cell by that. Perhaps <td class="top"> would be better? But best would be (if you wanted ALL content in the table to be at the top of the cells) to use a descendent selector like -
table#whatever td { vertical-align:top; }
and then give that table the id="whatever". -
Background Image In Table Cell
I'm not sure what I'm doing wrong or missing here. This is the first time that I'm using an image as a background. I've made a table with a 100% width with 3 colums and 3 rows. The left and right table cells have been merged and the 3 middle rows are at a width of 938 pixels. I have cropped the images correctly. The right column lines up perfectly, but the left column does not line up like it's supposed to with the image. You can take a look at it by going to http://www.wattsconcepts.com/new
Here is the code below if anyone wants to take a look at it. Any help in solving this is greatly appreciated. I am using Dreamweaver CS5.5
Thank you for your time!
<!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>Watts Concepts - Kentucky Web Design - Harrodsburg, Kentucky</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #000;
background-image: url();
</style>
</head>
<body>
<table width="100%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="3" align="left" valign="top" background="images/left-index.jpg"> </td>
<td width="938" align="center" valign="top"><img src="images/logo-index.jpg" width="938" height="172" /></td>
<td rowspan="3" align="left" valign="top" background="images/right-index.jpg"> </td>
</tr>
<tr>
<td align="center" valign="top"><img src="images/eye-index.jpg" width="938" height="296" alt="Reach Your Audience Today" /></td>
</tr>
<tr>
<td align="center" valign="top"><img src="images/test-index.jpg" width="938" height="197" /></td>
</tr>
</table>
</body>
</html>Your HTML code should ideally be as follows:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Watts Concepts - Kentucky Web Design - Harrodsburg, Kentucky</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #000;
</style>
</head>
<body>
<table width="938px" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="938" align="center" valign="top"><img src="images/logo-index.jpg" width="938" height="172" /></td>
</tr>
<tr>
<td align="center" valign="top"><img src="images/eye-index.jpg" width="938" height="296" alt="Reach Your Audience Today" /></td>
</tr>
<tr>
<td align="center" valign="top"><img src="images/test-index.jpg" width="938" height="197" /></td>
</tr>
</table>
</body>
</html>
Also, you don't need 3 columns for this website. 1 column and 3 rows should do. Also, never use 100% for <table> width. It's bad practice as you're making your site fluid which will render your site to malfunction on some browsers
And you had the entire 3 sections as 1 image as your CSS body background-image. This is bad practice. Crop only what you want for each section, never give the entire merged site as 1 image.
Try the code I've given you above and it should work perfect.
A quick tip: Try learning and using DIV with pure CSS styling instead of tables. Tables are a thing of the past. You could just google it and you have tons of free resources on how to create a site using DIV. Also, there's a beautiful tutorial posted by one of our senior members here: http://www.adobe.com/devnet/dreamweaver/articles/dw_html5_pt2.html that explains how to create HTML5 site with Pure CSS styling using DIV tags.
Cheers,
ST -
Table Cells in Layout Mode vs WYSIWYG
I am new to Dreamweaver and am using v8.0. When designing a
page using Tables and Cells in Layout Mode the layout looks fine;
the Cells are nice and tight. However - and this regardless of
which Browser I use to check the page - the spacing between those
same Cells is wholly unacceptable. As mentioned, in Layout Mode
everything is tight; when viewing it in a browser there may be up
to 2" of space between the Cells.
What have I over looked? Any suggestions greatly appreciated!
Thanks!Table width = 1327? Don't ever make your width more than
about 770. As for
the spacing .. I have never seen so many empty table cells in
my life. :)
As the others have said, you will do far better by learning a
little html
and css .. "adhering to conventions" will never happen with
Layout Mode.
It's there so people can draw tables .. but if I were DW
Engineering, I
would remove it .. I think it causes more problems than it's
worth. :)
Nancy
"LGLDSR73" <[email protected]> wrote in
message
news:[email protected]...
> Thank you, Nancy!
>
> Cellspacing=0 set as such:
>
> <table width="1327" border="0" cellpadding="0"
cellspacing="0">
>
> I seem to have it squared away now but that doesn't mean
that I am
> adhereing
> to conventions. What I was doing was selecting 'Layout
Table' to enclose
> all
> Images and text (and/or using 'Draw Layout Cell' as
well), as opposed to
> (1)
> Using 'Layout Table' to set the page size, then (2)
using 'Draw Layout
> Cell' to
> put the images and/or text in. What I am seeing now in a
Browser (Safari)
> is
> matching up to what I am seeing in Dreamweaver. I don't
think I fully
> grasp the
> differrence between 'Layout Table' and 'Draw Layout
Cell'. I've been
> reading in
> the 'Help' and while it sheds some light it doesn't
appear to be getting
> through.
>
> Though the spacing of the images appears to be okay now,
text is an issue.
> I.e.,
>
> If I put:
>
> "The text will end here -------->" with the arrowhead
at the rightmost
> border
> in Dreamweaver, when viewed in Safari it wraps to the
second line even
> though
> within Dreamweaver I am not outside of the green
frame....
>
> What is a recommended page size to start with, and set
with which Tool?
>
> Finally, when I attempt to use Firefox to preview the
page the following
> error
> is returned:
>
> File not found
> Firefox can't find the file at /2 WD/NEW
SITE/index.html.
> * Check the file name for capitalization or other typing
errors.
> * Check to see if the file was moved, renamed or
deleted.
>
> I purchased 'Dreamweaver 8 For Dummies' but apparently I
transcend even
> that!
> ;-)
>
> The Code is attached, but please don't spend more than a
quick moment;
> this is
> my problem and not yours!
>
> Thank you!
>
> <!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=ISO-8859-1" />
> <title>index</title>
> <style type="text/css">
> <!--
> .style1 {font-family: "Gill Sans Light"}
> .style2 {font-size: 36px}
> body {
> background-color: #666666;
> }
> -->
> </style></head>
>
> <body>
> <table width="1327" border="0" cellpadding="0"
cellspacing="0">
> <!--DWLayoutTable-->
> <tr>
> <td width="116" height="30"> </td>
> <td width="136"> </td>
> <td width="69"> </td>
> <td width="264"> </td>
> <td width="24"> </td>
> <td width="107"> </td>
> <td width="20"> </td>
> <td width="234"> </td>
> <td width="16"> </td>
> <td width="338"> </td>
> <td width="3"> </td>
> </tr>
> <tr>
> <td height="41"> </td>
> <td> </td>
> <td> </td>
> <td colspan="2" valign="top"><h1 align="center"
class="style2"><span
> class="style1">Fifth Avenue Digital
</span></h1></td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> </tr>
> <tr>
> <td height="39"> </td>
> <td> </td>
> <td> </td>
> <td></td>
> <td></td>
> <td></td>
> <td></td>
> <td></td>
> <td></td>
> <td></td>
> <td></td>
> </tr>
> <tr>
> <td height="47"> </td>
> <td colspan="5" rowspan="4" valign="top"><img
src="Images/main
> image.jpg"
> alt="main page cape cod" width="600" height="460"
/></td>
> <td> </td>
> <td rowspan="2" valign="top"><img
src="Images/9j.jpg" alt="router bit"
> width="234" height="350" /></td>
> <td> </td>
> <td> </td>
> <td> </td>
> </tr>
> <tr>
> <td height="303"> </td>
> <td> </td>
> <td> </td>
> <td rowspan="2" valign="top"><img
src="Images/06.jpg" alt="sand"
> width="337" height="333" /></td>
> <td> </td>
> </tr>
> <tr>
> <td height="30"> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> </tr>
>
>
>
>
>
>
>
> <tr>
> <td height="80"></td>
> <td></td>
> <td></td>
> <td></td>
> <td></td>
> <td></td>
> </tr>
>
>
>
> <tr>
> <td height="30"> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> </tr>
> <tr>
> <td height="77"> </td>
> <td> </td>
> <td colspan="2" rowspan="2" valign="top"><img
src="Images/ramp.jpg"
> alt="boat ramp rockport" width="333" height="500"
/></td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td colspan="3" valign="top"
nowrap="nowrap"><h1 align="left">This is
> a
> test of inputting text that is going</h1>
> <h1 align="left">(new paragraph) to end right here
-------->
> </h1></td>
> <td> </td>
> </tr>
> <tr>
> <td height="424"> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> </tr>
>
>
>
> <tr>
> <td height="179"> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> <td> </td>
> </tr>
> </table>
> </body>
> </html>
>
Maybe you are looking for
-
SQL*Loader and using nulls, truncate and sysdate.
Good afternoon, I have a control file some of which is below which I need to use to load a CSV file. What I want to know is; how do I truncate fields which are too long and if there is no date specified how do I insert the sysdate as default. For any
-
LabVIEW & RF Test Engineer Opportunity - Maryland
Looking for a LabVIEW developer with experience in RF system test and measurement to join an exceptional team in the Columbia, Maryland area. The position is time-critical - if you're contemplating a career change and meet the qualifications, please
-
Error in Client Administrator in SCC4 ....
Hi Experts, I logged on through sap* 000 client and made a 210 Client in scc4. 1. When i am creating user in sap* 210 Client through SU01 to create a Admin User, it is giving error : No default address has been created. How to maintain and where ? 2.
-
Vlookup with EVRNG in memberset
This looks straight and easy formula but for some reason it is not working. I am trying to use vlookup with EVRNG so that the expansion happens on the basis of some member selected by user. I am using following formula in memberset. =EVRNG(vlookup(l
-
Trouble connecting to Fios on my Macbook running Mountain Lion
I just got Fios installed in the hourse, and a PC and an Android phone have connected to it fine. But my Macbook (running Mountain Lion) won't work with it, either via Ethernet or via WiFI. When try to, the Mac's network "diagnostics" all light up. S