Hi,

 

I am having problems getting my site to align properly. It seemed OK, but when I add the code for my table it skews the layout and I cannot work out why. Please help! Also, the error is different in Firefox vs Safari so perhaps I am not doing something to standards also. (I can fix it in Firefox 3 using a negative margin on the table element, but it doesn't display correctly in Safari and IE).

 

The page is here: http://peakantennas.com/redesign/products.html

and the css here: http://peakantennas.com/redesign/style.css

 

Thanks in advance for any advice,

Kind regards,

Phil

You have some anomalies in your css ... for example:

 

Container has 800 px and contains:

- left div has 200px;

- table has 650px;

 

You can start from there

Sorry dude, your css is a real mess and so is your html. I've put together a div based layout for you (see attached zip). It makes no sense debugging your existing site, i suggest you rebuild it from scratch. The stuff i did might be a good foundation but you can choose a different approach. There are a few things however that you should keep in mind:

- It's never a good practice to blend divs with tables, once you go for divs try to build up your wireframe without using tables

- Don't position divs absolutely or relatively unless you have a very good reason to do so. This is why your layout is screwed up in the first place. Positioned elements are removed from the document flow.

- 150px for border is just gross. It's no way to do columns. If you need equal height cols the most commonly used method is what's known as faux columns (that's what i used here) but you can get the column height with js and set all heights accordingly. This sucks if your visitor happens to browse with js turned off.

- Don't use a transitional DTD

- If you set <a> to display:block within a <li>, give it explicit dimensions, otherwise it may add extra whitespace and screw up your layout in IE6

- A little typography: stick to a single typeface. you can use a different one e.g. for H1 but swapping from verdana to trebuchet is unprofessional

- Usability: forget the crosshair cursor, it's confusing for most users, esp. when it's supposed to be a pointer. it'll make you lose customers

- Don't add style to the body when you have an external css attached to your html

- Check if floated objects need to be cleared (see fix in css)

 

As i see this is a downloaded or generated css with some copyright stuff included. It's ok to use templates sometimes but css is no rocket science really, you better learn it on your own, you'll have more control over your sites and less garbage in your code.

antenna.zip

You have some anomalies in your css ... for example:

 

Container has 800 px and contains:

- left div has 200px;

- table has 650px;

 

You can start from there

 

Thanks, nailed that one... cannot believe I didn't notice!

 

Phil

Thanks for the long reply!

 

It was a mix of 2 templates and my own meagre abilities, however I had hoped the templates would have been valid! Guess I shouldn't presume things like that.

 

I'll look into redesigning it from scratch, thanks for the demo. Can you point me to any info about making a table out of divs? I've had a search but not found any examples yet, most things are just about using css to format a table or create a 2 column layout.

 

- I ditched the absolute and relative positioning.

- Fixed the DTD (although the pages don't validate 100% but I'm working on that)

- Fixed the white space IE6 issue.

- Fixed the typeface.

- Crosshair cursor? I don't get this in Firefox 3 (Mac) Safari (Mac) or IE 7 (Win XP). Can you tell me where you get it please as it is definately not something I want!

- Found and removed the style from the body.

 

You've got me a long way forward! However I still have an IE problem. The site is now fine (in its pre total redesign to use faux columns and no table stage), except for in IE! The table on the products page ( www.peakantennas.com/redesign2/products.html ) does not align to the top. Is this something that will only go away with a total redesign? Or is there an IE fix I can put in place in the mean time. I have a feeling it will be a lot of learning and take quite a while for me to do it otherwise. Any pointers on how to fix this would be much appreciated.

 

Thanks again for all your help,

Phil

 

 

Sorry dude, your css is a real mess and so is your html. I've put together a div based layout for you (see attached zip). It makes no sense debugging your existing site, i suggest you rebuild it from scratch. The stuff i did might be a good foundation but you can choose a different approach. There are a few things however that you should keep in mind:

- It's never a good practice to blend divs with tables, once you go for divs try to build up your wireframe without using tables

- Don't position divs absolutely or relatively unless you have a very good reason to do so. This is why your layout is screwed up in the first place. Positioned elements are removed from the document flow.

- 150px for border is just gross. It's no way to do columns. If you need equal height cols the most commonly used method is what's known as faux columns (that's what i used here) but you can get the column height with js and set all heights accordingly. This sucks if your visitor happens to browse with js turned off.

- Don't use a transitional DTD

- If you set <a> to display:block within a <li>, give it explicit dimensions, otherwise it may add extra whitespace and screw up your layout in IE6

- A little typography: stick to a single typeface. you can use a different one e.g. for H1 but swapping from verdana to trebuchet is unprofessional

- Usability: forget the crosshair cursor, it's confusing for most users, esp. when it's supposed to be a pointer. it'll make you lose customers

- Don't add style to the body when you have an external css attached to your html

- Check if floated objects need to be cleared (see fix in css)

 

As i see this is a downloaded or generated css with some copyright stuff included. It's ok to use templates sometimes but css is no rocket science really, you better learn it on your own, you'll have more control over your sites and less garbage in your code.

I guess it is the table width (650px), div #content apparently begins right under div #left but they are supposed to be inline. Try to assign the dimensions i did in my div based layout. I guess if you make your table a few px narrower it'll just snap in.

However there's no reason to use tables here. Table has one thing over divs: vertical align. You should decide if it's worth all the trouble. Table is not evil or something, i don't hate it, it's simply not the right way to do layouts. Table is to display tabular data, that's it. What you have here is not tabular data. OK i did the vertical alignment with line-height, which is also not a nice way to handle it but you can use padding instead.

 

Crosshair cursor came from a separate css, it isn't there now.

Thanks Shorg. I got it sorted. I'll now go off and learn how to do it properly!

 

Thanks again,

Phil

 

 

I guess it is the table width (650px), div #content apparently begins right under div #left but they are supposed to be inline. Try to assign the dimensions i did in my div based layout. I guess if you make your table a few px narrower it'll just snap in.

However there's no reason to use tables here. Table has one thing over divs: vertical align. You should decide if it's worth all the trouble. Table is not evil or something, i don't hate it, it's simply not the right way to do layouts. Table is to display tabular data, that's it. What you have here is not tabular data. OK i did the vertical alignment with line-height, which is also not a nice way to handle it but you can use padding instead.

 

Crosshair cursor came from a separate css, it isn't there now.