PDA

View Full Version : Text positioning in Chrome


Finland Blue
02-08-2010, 07:38 AM
Some text on my web site is displaying differently in Chrome than IE and Firefox.

I have placed some text in a table, which should be aligned to the top (using <td valign="top">). But it appears to be aligning to the centre of the table instead.

Can someone advise how I can correct this?

Check www.travel-experience.net ---- below the first block of text are 3 small tables with pictures followed by text, this is the text that appears to align centrally. IN other browsers its at the top.

Thanks for any advice.

gentleone
02-08-2010, 10:38 AM
I had a look, but with all those nested tables I couldn't see even the structure of your page.

Are you aware that using tables for layout is not a smart thing to do? You will run into problem after problem. If you used divs and CSS for your layout then it was for me much easier to see the structure of the page and the biggest benefits for you were that you need 2/3 less code then what you have now, the page would have load 3 times faster then now, you had been already a big step closer to cross-browser compatibility and it was so much easier for you to maintain future updates.

Bottom line.... tables are for tabular data and not to lay out a web page.

Finland Blue
02-16-2010, 01:03 PM
The web site was made a few years ago, when using tables was still the accepted way.

If you know an easy way to convert this using a more modern approach to web design, I would be happy to hear it.

DWcourse
02-16-2010, 02:30 PM
I think part of gentleone's point is that it's incredibly difficult for someone to debug a page with that many nested tables. So it's not simply a matter of taking a quick look and being able to spot the problem.

MagicPower
02-16-2010, 03:22 PM
you can easily revamp this site with in a couple of days. matter of fact it probaly won't take long to rebuild it from scratch. the easiest and cleanest way to convert it is to build it from scratch using divs and <ul> for menus and navigations. give it a go n you'll have the least of probs when using divs.

Finland Blue
02-21-2010, 09:14 AM
I think part of gentleone's point is that it's incredibly difficult for someone to debug a page with that many nested tables. So it's not simply a matter of taking a quick look and being able to spot the problem.

Yes, I understand what he meant. That is why I asked if there was an easy way to convert the page from table-based to div-based.

I will change it eventually, but I need to a) Learn some new techniques and b) I have limited time at the moment to do that.

I'm checking into changing to a layout using the div tags.

gentleone
02-21-2010, 11:14 AM
Yes, I understand what he meant. That is why I asked if there was an easy way to convert the page from table-based to div-based.

I will change it eventually, but I need to a) Learn some new techniques and b) I have limited time at the moment to do that.

I'm checking into changing to a layout using the div tags.

I guess I had a bad hair day then :)

Magic Power is right it doesn't take that long to convert it from scratch to a div's & CSS based layout. The overall layout is a two column layout with an header and a footer.

Ironmeyers has a lot examples that you can use and if you have questions about it then we're more then willing to help you with it.

http://layouts.ironmyers.com/

DWcourse
02-21-2010, 04:28 PM
And the newer versions of Dreamweaver have a number of 1, 2 and 3-column CSS layouts built in.

Finland Blue
03-08-2010, 11:35 AM
I guess I had a bad hair day then :)

Magic Power is right it doesn't take that long to convert it from scratch to a div's & CSS based layout. The overall layout is a two column layout with an header and a footer.

Ironmeyers has a lot examples that you can use and if you have questions about it then we're more then willing to help you with it.

http://layouts.ironmyers.com/

Thanks for your message. Could you give me just one more push up the ladder. Can you take a look at http://www.travel-experience.net/divtest.php. I made a quick test of some layout with div. How would I make this center in the page, rather than to the left?

Thanks

Finland Blue
03-11-2010, 03:02 PM
Can anyone help with this?

www.travel-experience.net/divtest.php

I am new to laying out web pages without tables, so am trying out a layout using divs. I want to centre all the elements of the page, but only the header so far is centred.

Can anyone help and advise where I am going wrong?

Thanks



Thanks for your message. Could you give me just one more push up the ladder. Can you take a look at http://www.travel-experience.net/divtest.php. I made a quick test of some layout with div. How would I make this center in the page, rather than to the left?

Thanks

Corrosive
03-11-2010, 03:10 PM
You are using 'position absolute' with everything. You need to use relative positioning for page structure/layout. This might help; http://www.corrosiveonline.co.uk/tutorials_css_floats_for_layout.php

gentleone
03-11-2010, 11:24 PM
It's good that you start to lay out your page with divs, but like Corrosive said using only divs with position:absolute is not the div way ;)

Floating divs is the way, so this is what you should learn.

Finland Blue
03-12-2010, 11:48 AM
Thanks you two for the advice, now I am over that hurdle, and it makes sense now. I'll continue learning (good tutorials Corrosive, thanks), and eventually update my site from tables to div :-)

Corrosive
03-12-2010, 05:20 PM
You are welcome as always :)

Finland Blue
03-12-2010, 06:54 PM
I've been playing around with it more today, and now I cannot stop :-)

One thing I am not sure about, is on my web page www.travel-experience.net, I have, in what is the "right column", 3 smaller columns, each with a title, small picture and text.

To achieve this with divs, I am struggling. Should I be adding 3 x div within the right column div,with one to float right, and one to float left ... how do I get one in the middle as well?

Or, am I going about it the wrong way?

gentleone
03-12-2010, 09:50 PM
I've been playing around with it more today, and now I cannot stop :-)

One thing I am not sure about, is on my web page www.travel-experience.net (http://www.travel-experience.net), I have, in what is the "right column", 3 smaller columns, each with a title, small picture and text.

To achieve this with divs, I am struggling. Should I be adding 3 x div within the right column div,with one to float right, and one to float left ... how do I get one in the middle as well?

Or, am I going about it the wrong way?

You can indeed do this with 3 divs. The left and the middle you give a float:left and a margin-right: ???px to achieve the desired gap/space in between them. The third you give a float:right.

d a v e
03-13-2010, 05:40 AM
or i have seen this method used too
Float one left, float one right and margin:0 auto; on the centred one.

Finland Blue
03-13-2010, 10:09 AM
Thanks for the input, its really helped a lot.

Now I am getting somewhere, but having still some problems with those 3 boxes.

http://www.travel-experience.net/testdiv.htm

In IE, the footer is placed under the boxes, but in Chrome and Firefox the footer comes part way up the boxes. What am I doing wrong here?

EDIT : I actually found the reason - I had put a fixed height on the right column, so I took this out and it behaved as expected.

Corrosive
03-13-2010, 10:13 AM
Looks good to me in Chrome :confused:

Sorry, just noticed your edit!

Finland Blue
03-13-2010, 11:20 AM
Hello Corrosive, I've been reading your tutorials, and it says there that :

"Margins do not add to the width of your box ..."
"The width of a border does not add to the width of the box"

I've noticed when I have added padding, or a border, this does seem to increase the size.

I just updated now the page http://www.travel-experience.net/testdiv.htm

The grey line I above the blue line with "Home" now sticks out by 2 pixels - its width is set to 607 pixels, which is the width of the space it needs to fill, but when the border is added, 1 pixel on each side, it now sticks out the 2 pixels.

Changing the width of the div to 605 pixels seems to fix it.

Same issue when I try to add padding to the text.

Did I do something wrong, or misunderstand ..?

Corrosive
03-13-2010, 11:35 AM
You have misunderstood slightly. What I wrote is correct that it doesn't add to the box width. The box being the very centre area where the text or other content is. What margins, padding and borders do is add width to the area outside of the box which, in turn, affects the divs around it. Just read through the tutorial again :)

Finland Blue
03-14-2010, 02:28 PM
Thanks for the clarification. Now I think I got somewhere ...

http://www.travel-experience.net/testdiv2.htm

I noticed though that when adding margins/padding in CSS where there was text which needs to come away from the edges, this had very different effect in IE, than the other browsers. Same with the div layout, adding margins and padding did have different results in IE than the rest. Anyway, I still have work to do on the text layout ...

Plus also, the left column and right column have been set to 630px, but the lengths will not always be this amount ... leaving the left column without a height though leaves a white space if the right column has content which makes the right column longer. Is there a way to set the left column background so it will expand with the size of the right column?

And, I do admit to having still one table (agh!) which is the Form for signing up for Newsletter. Maybe later I look at how to handle forms with divs ... :-)

Finland Blue
04-22-2010, 10:17 AM
I now have live a newly constructed web site using DIV for layout instead of tables. I am still updating some pages, but the main index is now up. www.travel-experience.net.

Going back to my very first post, it has certainly corrected this centering of text in Chrome, as well as a lot else as well ;-)

Thanks for your help getting this far!

Corrosive
04-22-2010, 01:12 PM
Looks good. Well done :) Don't forget to use an external stylesheet where you can though.