[SOLVED] Having a heck of time lining up columns across browsers! Any suggestions?

[carlos1234]

I am creating a great big form for an application I am building (it's quite messy so I won't be showing it until I at least clean it up some LOL) but I have having a real problem lining up the columns in the form. 

 

There are multiple rows and multiple colums in each row.  Just like the good ol table structure that I used to use and which was no problem. 

 

The problem using CSS is that whatever width I make the columns (i.e. using px, em, or percentages) each browser treats these measures differently.  Not a whole lot different but enough to where columns may line up real nicely in IE and then be misaligned in Firefox. 

 

Short of having different CSS for each browser is there a way to line up columns created with CSS??

 

If I was using a table no big deal.  Whatever I would put inside the table TD columns would stay lined up across browsers. 

 

Any input would be appreciated. 

 

Thanks. 

 

Carlos

[cags]

They no doubt look different due to the difference in the inbuilt stylesheets each browser uses. You'll probably need to use a reset stylesheet, whether you go for a full on reset sheet or just reset the padding and margins on the elements your using will be up to you.

[carlos1234]

Thanks for the input.  I don't believe I have tried a full reset yet but from what I have tried in setting margins and padding to 0 I don't think that's going to solve the problem. 

 

I use em's throughout. An em is the distance equal to the text size.  But since each browser renders an em of 1 for example at a different visual text size I think the difference in width when set through em is going to remain.  Because the font size, even if set to the same em, is slightly different across browsers. 

 

I will have to try setting widths with just pixels but I think I tried that and it didn't work either. 

 

I'll see if I can whip up some CSS HTML code to better explain and show the problem I am having. 

 

Thanks.

 

Carlos

[cags]

The default css's of each browser also likely use differen't fonts which will cause em measurements to vary. Assuming they are using the same font then they should be the same size. So you might wish to explicitly set font settings.

[haku]

A reset sheet generally does that, so your original advice was good.

[Chezshire]

Another thing you might also want to consider is to not use borders, if possible do everything with background color as different browsers count or discount border widths in different way and that could also cause your columns to act/misbehave in ways you did not intend (but the wild card reset is certainly the big thing to do if you were to ask me - and you probably shouldn't as I'm still very new to this - just tossing something in to the ring to become a contributing member of the forum as well as a benefitting member of the forum )

 

-Chez

[carlos1234]

Sure enough...after playing around with it for a few more hours and slowly building up a test form one item at a time to observe the effect it came down to resetting things across the browsers.  Thanks very much for the input!! 

 

Your all's input allowed me to save some hair instead of pulling it all out (in a manner of speaking of course).  It gave me hope that there was a solution. 

 

The problem I was having is that I had headings on top of HTML input boxes.  The input boxes themselves were in a slightly different but barely noticeable at that, font.  I couldn't for the life of me figure out why the headings kept going out of whack depending on the browser I was looking at things through until I explicitly set the input font and other characteristics to be the same as the heading text had.  That's when they finally lined up nicely! 

 

Thanks again! 

 

Carlos