Table Alignment 2

[Yardyy]

Hi, I am doing a website for a friend, and am having some issues two table elements that are not aligning when i preview in internet explorer. site is done in photoshop and frontpage. can be seen here

http://www.7371.co.uk

seems to work ok in firefox though.strange thing is that when i press f11 for full screen, and back to normal view again, it works and looks perfect..please can anyone see what is causing this issue..

this is also posted in

http://www.tek-tips.com/viewthread.cfm?qid=1554438&page=1

Can anyone please help.

Many Thanks
Yurov Ardyy

 

[audiopro]

If you only require those rollover states, use CSS. The same effect could be achieved with considerably less code.

Keith

http://www.studiosoft.co.uk

 

[Yardyy]

the images and the border need to be done too, how would i go about aligning those without the use of table.

The rollover buttons in css sounds interesting, but they are images, i was under the impression that css os for text only ??

Many Thanks
Yurov Ardyy

 

[audiopro]

CSS can be used to change the state of images too. There are many good tutorials about CSS but it is a steep learning curve. Have a look at some of the older answers in the forum for some ideas but the best way to learn it, is to have a go and make the mistakes. When you get stuck, post specific questions here and you will be pointed in the right direction.
Most important thing with CSS is forget what you do with tables. Tables have their uses and should not be discarded altogether but tables and CSS are two totally different animals which need treating differently.
Do not even attempt any of the positioning elements until you have a firm grasp of the basics. Combinations of margins and padding usually do away with the need for absolute positioning anyway.

Keith

http://www.studiosoft.co.uk

 

[Vragabond]

Your page is constructed from a single, incredibly complicated table. This table is kept together by blank images, that are defined in the last row of the table.

This is a very outdated approach and while it is commendable that it only uses one table, it still is much more complex than it needs to be. We've stopped slicing images in HTML a few years ago and it works much better now.

On to the problem. As I said, the browser receives actual information on columns on the very last row of the table. Before that, it knows that the table is certain pixels wide. It knows that there are more columns than it's rendering, since all early cells span multiple columns and rows. Lacking clear direction, browsers end up approximating column widths. IE approximates wrongly.

When you put your page into full screen mode, browser has to redraw the table. Now that the last line of the table was loaded and there are no more issues as to how wide the columns are, IE can render the table correctly.

While I think this approach could be dealt in a much better way, you didn't come here to be taught on best approaches in web building. You wanted your page not to look crooked. I don't work with tables a lot these days, but I think that moving the last table row to be the first one (and thus define the sizes of the columns right at the beginning), should help browsers render the entire table correctly.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[Yardyy]

Vragabond, thanks for your answer. I have used photoshop for the site in question, and use the auto web options that are provided, hence the tables. so to be honest with you, I would now know to how move the last row of the table to the top.

you mention that slicing images in html is old now, so how would you put together a bigger image from photoshop or other app, in html ?

not sure if this is the right place to ask the question, but what application would you recomend to use for this, as photoshop cs3 is obviously not working for me.

Many Thanks
Yurov Ardyy

 

[audiopro]

Photoshop is one of the best image manipulation tools there is but it is not really designed to create web pages. A better approach is to create the images in Photoshop and then put them into a web page.

Keith

http://www.studiosoft.co.uk

 

[Yardyy]

question is how would you disect the images from photoshop and put them into a webpage without using the slicing features of photoshop, the biggest benefit for me was that photoshop created the html for you. but as i have found its not very accurate.

so how do would you create the html, frontapage or dreamweaver, or text pad..or smiliar ??

Many Thanks
Yurov Ardyy

 

[audiopro]

Using CSS does away with the need for slicing and dicing images. There are times when Photoshop's HTML creation is useful but for basic roll overs the CSS code is quite simple.
To learn more and see what is possible, Google for CSS rollovers and have a play with some of the examples. Once you have a grasp of what can be done, the only limit will be your imagination.

Keith

http://www.studiosoft.co.uk

 

[Yardyy]

Thanks for your help on this, its been good. I will go and do some research on CSS, and some playing about with it.

Thanks again, this Forum is really good, but not as good as the people that make contributions like these. You are the ones that make it work.



Many Thanks
Yurov Ardyy

 

[Vragabond]

I would recommend HTMLDog tutorials as a good first step into the world of modern web development. Photoshop (while, as mentioned, is an amazing tool for image manipulation) most likely contains the slicing function as a legacy functionality that was never removed from the newer versions.

In modern web design, I would say your page is comprised of the following sections (which will translate into semantic divs):

- container (custom border box around all your content)
- header (top part of the container is the header area)
- main area (bottom part of the container is the main area)
- footer (links and copyright outside the container)



[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[Yardyy]

Thanks for the link, lookes like a very good starting point. Hopefully one day i will be able to return and help someone else out.

Regards

Many Thanks
Yurov Ardyy

 

[audiopro]

Yardyy
That is why Tek-tips is so good.
Even experts learn on these forums.

Keith

http://www.studiosoft.co.uk