Solved

html - created site in dreamweaver (tables) - layout different between browsers.

Posted on 2008-06-21
5
201 Views
Last Modified: 2010-04-25
Hi,

I created a page in dreamweaver using tables for layout and CSS rules for the colours etc; its more or less 'ok' apart from my 'logo.jpg' (logo image) appears in a different place in Internet Explorer vs Firefox.

I gather using tables is bad practice; but I only know how to use dreamweaver for website.

Any tips for getting layout to render the same on both browsers?

(URL Removed by Asker Request - Jason1178)
0
Comment
Question by:callmecheez
[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
5 Comments
 
LVL 12

Expert Comment

by:nexusnation
ID: 21838700
It's because your table isn't formatted right.  I can't tell whether it is supposed to be two columns total or three, and neither can Firefox or IE.

Make sure you set a width to at least one td in each column.

Also, you have the text-align property set to right on the image.  This is incorrect -- you want to set the text-align property to right on the block-level container (in this case, a table cell) containing the image.

Try that out and see how it goes. If it helps, draw out what your table is supposed to look like on paper, then figure out cell merges etc (colspans and rowspans).

Of course, I'd still encourage you to go to a CSS layout.  You'd be surprised how easy it would be for such a simple layout.
0
 
LVL 3

Author Comment

by:callmecheez
ID: 21838754
Its supposed to have a logo top-right, menu'  down the left, contact details bottom left, content in the black box middle-right.

"Make sure you set a width to at least one td in each column." -Will have a look, but don't know exactly what I'm looking for.

"you want to set the text-align property to right on the block-level container (in this case, a table cell) containing the image." - don't know how / don't understand. . !


Many thanks for the reply, much appreciated!
0
 
LVL 16

Accepted Solution

by:
rbudj earned 500 total points
ID: 21839332
You have to define the width for each table cell.  If you have a table that is 400px wide with two columns and a 10px cellspacing, you must calculate the witdth, allowing for the cell spacing.  So if the table is 400px wide, you cannot have two cells at 200px because you have cell spacing of 10px on both the right and left side so the you must subtract 20px from the overall width.  So one cell can be 190px wide and the other can be 190px wide, or one can be 100px wide and the other 280px wide.  Just keep this in mind when using tables.
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 21839878
"I gather using tables is bad practice; but I only know how to use dreamweaver for website."

no, it is not.  The problem is dreamweaver.  The program uses tables where it should use CSS, and it uses CSS where it would often be better to use tables.  The programmers never got it right.

as rbudj says, if you are doing tables, you have to assign real pixel values to every cell with images, as well as those around it, and if a cell is blank, put a   in it to get it to align correctly.  The total of all cells should be about 90-95% of the width of the table (allowing for padding and margins).  Work with the numbers.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 21842472
>> The program uses tables where it should use CSS, and it uses CSS where it would often be better to use tables.

The program only does what someone tells it to do, scratchy...

If you use CSS, DW uses CSS.  If you insert a table, it uses a table.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Help with mod_substitute 18 74
Why is my $_POST not going to results page 10 66
output in HTML in Powershell 5 56
CSS (jquiry mobile) question 3 34
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

737 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