Website "Spaced" in Firefox & IE8 ( Not in IE 7 )

[clayguthrie29]

Hey guys, i'm new here and i'm having an issue i thought maybe you could help me with. I'm working on my company website and i'm having issues with the page layout. If i view the page in IE 7, it looks perfectly as intended. However, if i view it in Firefox or IE 8, the text seems very spaced vertically ( best example is the services page ) and makes the page very long. I'm not a web design genius, nor do i claim to be...but i can't figure out why this is happening. Can someone please provide some insight? Thanks in advance.

http://www.azvert.com/Site/

 

[PixelPusher]

Wow that is a lot of nested tables....I highly recommend rebuilding the site in a more efficient manner like using divs instead of tables and positioning them css.

However, to solve you issue at hand quickly....take each item ("Computer Sales & Leasing", etc.) out of the paragraph tags (p) and just put them in to the TD...there is no need for the paragraph tag. The P tag has default margins that are causing that problem. Take the style="padding-left:20px" and add it to the corresponding TD.

That should fix your spacing problem. have you worked with CSS before?

 

[clayguthrie29]

I have worked with CSS...but i'm pretty green at it. My company does offer web design, but at this time it's outsourced to a developer who helps me. Thanks for your help and suggestions.

 

[PixelPusher]

no problem, your welcome

 

[arminium]

spacing

Even better option is delete all the <table>,<td>,<tr> tags and write it in fluid css and just set the option for you p tags in css

Css is much more powerful, if you take a little time to learn it than tables and if you read up a little, and do it corectly its cross browser compliant

in your CSS file style your margins or put it in head betwen <style></style>

p{
Margin:1px 0px 1px 10px;
}

The margin order is top,right,bottom,left

or you could write it like this, but its slower, makes for biggers pages and slower edits

p{
Margin-top:1px;
margin-right:0px;
margin-bottom:1px;
margin-left:10px;
}

or wat eva the margins you want are

 

[leofe]

Tables are useless - I discovered that the hard way, after building a site entirely in tables!

 

[arminium]

Tables are the easy and lazy way

but they can be styled no problems, although once you learn css and html properly they are painful to work on, as its so much nesting and they take up so much space, and styling them is a bigger job than working in divs anyway, fo anything that's to look professional outside of the std header left menu and right body

 

[PixelPusher]

Tables are useless - I discovered that the hard way, after building a site entirely in tables!

Not entirely, they have their place and that is for tabular data. However, using them to build a site structure is a bad idea and is bad practice.

 

[PixelPusher]

Tables are the easy and lazy way

but they can be styled no problems, although once you learn css and html properly they are painful to work on, as its so much nesting and they take up so much space, and styling them is a bigger job than working in divs anyway, fo anything that's to look professional outside of the std header left menu and right body

Truthfully if once you know css I think table-less layout is easier. Tables can be a pain because everything is tied together, move one move them all type of situation.

 

[arminium]

tabular data can be nicely done with css too, just takes a a little bit to set up

the few times i have needed to , i just set several <p> clasess, and set them as inline blocks, will allow them to go across the page, and that way each one is a column like

<p class='col1'>one</p><p class='col2'>two</p>

you can re-use a class more than once if the same size and characteristics match a well.

this works out well for laying out things like contact details in tabular fashion like

name: name
address: address

etc, cause you can set the label as one a width that suits and then text-align right and if you put a 0px margin between them and the details as text-align left then they will sit just neatly under one another

 

[PixelPusher]

Ahhh you sound like a table nazi arminium .

I understand what your saying though and yeah you can use DIV and P to build a table format without actually using a table. But why not use one in those situations? That is what tables were originally designed for?

 

[arminium]

tables

Nooooooooo. not me


Tables are great, I'm sitting at one now, in spread sheets and work doc's they are handy.

styling a table takes more effort than continuing to stay fluid and have you ever scrolled a page out that is mixed.

and the when you start building pdf from php everything is set using top corner or object

so why go back to tables.... nearly every time i try to use tables it is more work and characters than staying fluid, so why down grade.