The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Help with 2 column form, Better way other than floats?
CharlesEF
post Jan 18 2014, 02:17 AM
Post #1


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Hi All,

I have created a 2 column form using float left and right. I only have IE8 and FireFox v26 installed and it seems to work great. The test page can be found here. Is there a better way to do this without using float? When I do a print preview it shows up in a single column only. How do I get it to print with 2 columns?

Also, if anyone can test the page on other browsers, re-sizing and such, I would appreciate any input.


Thank you,

Charles

This post has been edited by CharlesEF: Jan 18 2014, 02:28 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 18 2014, 04:05 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Make it narrow enough to fit without the floats dropping in your print style sheet. Or maybe hiding the menu is enough.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jan 18 2014, 04:19 AM
Post #3


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



QUOTE(pandy @ Jan 18 2014, 03:05 AM) *

Make it narrow enough to fit without the floats dropping in your print style sheet. Or maybe hiding the menu is enough.

I do drop everything except the content section but it still previews as a single column, even in landscape mode. I will change the width of the inputs from a % to a fixed width and see how that works.

Ok, I made the change but it still previews as 1 column. Firefox shows the title only on page 1 (The pinkish bar), page 2 shows the columns in 1 list and page 3 is blank. IE8 previews everything on 1 page but still shows 1 column only (it shows both left and right as 1 long column). Firefox has always had printing problems for the last 15 years or so. They spend so much time making it look pretty and other stuff that I wish they spent some time fixing the printing problems.

I wonder instead of using floats at all maybe I can use display: table. I will have to play with it some, unless you have another idea.

Ok, I removed the floats and used inline-block instead. While it does maintain the 2 column look on screen the print previews still show the left and right column as 1 long column. Display: table did not work at all, it just makes 1 long column on the screen. Back to the drawing board.


Thank you

This post has been edited by CharlesEF: Jan 18 2014, 04:45 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jan 18 2014, 07:04 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Me again, I was able to remove the left and right float and replace them with inline-block and the 2 columns remained as they should. I was even able to fix the printing in Firefox by removing the padding: 3px entry. IE8 did not seem to have a problem with it. Now the funny thing is that if I switch to landscape mode in Firefox then the 3 pages return and only page 2 contains any actual data. Boy, I need some sleep.

As for the single print column, I think I will just keep it this way. If I can only fix the Firefox 3 page thing.

This post has been edited by CharlesEF: Jan 18 2014, 07:05 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 18 2014, 07:29 AM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



The print version looks pretty much unstyled. In what style sheet is the floating done and does it include print?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jan 18 2014, 09:11 AM
Post #6


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



QUOTE(pandy @ Jan 18 2014, 06:29 AM) *

The print version looks pretty much unstyled. In what style sheet is the floating done and does it include print?

Yes, there is a @media print section at the bottom of dbase.css. It passes validation and I just uploaded the new version a few minutes ago. It is ready now, if you care to take a 2nd look.

Also, I was able to put back the padding statement in the input["text"] but I changed it to 2. A value of 3 caused the problem but 2 does not, except in landscape mode.


Thank you

This post has been edited by CharlesEF: Jan 18 2014, 10:03 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 18 2014, 10:29 AM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Yeah, but where's the CSS for the floats? I'm trying to avoid reading it all. tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jan 18 2014, 03:18 PM
Post #8


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



QUOTE(pandy @ Jan 18 2014, 09:29 AM) *

Yeah, but where's the CSS for the floats? I'm trying to avoid reading it all. tongue.gif

There are no floats anymore. I replaced the left and right float statements in #left and #right with inline-block and the 2 columns remained side by side on the screen. I took those 2 entries out of the @media print section because, while it did place the 2 columns side by side on the preview, it seemed to only show a limited number of characters. I could never get the elements to auto stretch to show all the characters. For this reason I decided to stop trying and accept the 2 columns previewing/printing as 1 long column because, as 1 long column, I could get the elements to auto stretch from margin to margin. So, in my sleepless haze I seem to have answered my own question, I was able to replace floats and keep the 2 columns side by side. Sorry about that.

Do you still have IE6 installed? If you do can you please tell me what the page looks like on screen and what it looks like in previews?

This post has been edited by CharlesEF: Jan 18 2014, 03:18 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 18 2014, 04:39 PM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Ack, I didn't see the post above where you said you've skipped the floats. That explains why I didn't find them.

Yeah, I have IE6, but only because I don't manage to access Microsoft Update. Sigh.



Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jan 18 2014, 05:29 PM
Post #10


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



I see IE6 does have a problem with my page, oh well, I was pretty sure it would (was hoping it would not). IE7 (IE8 in IE7 mode) seems to work fine.

Thank you for your help.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jan 20 2014, 10:56 AM
Post #11


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



The print preview and printing problem I have in Firefox v26 is a confirmed <fieldset> bug that is over 5 years old. This bug kicks in when the data is over 1 page long. IE8 previews/prints fine.

Mozilla Web development team suggest I use a <div> instead.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jan 20 2014, 11:30 AM
Post #12


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Your link now returns a 404 File not found. But if I recall correctly, you already used DIVs for each input, which seems exaggerated to me.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jan 20 2014, 12:09 PM
Post #13


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



QUOTE(Frederiek @ Jan 20 2014, 10:30 AM) *

Your link now returns a 404 File not found. But if I recall correctly, you already used DIVs for each input, which seems exaggerated to me.

Yes, I removed the test page and am currently re-thinking my design but I do agree that my use of DIVs seems exaggerated to me too, to a point. Some of the DIVs might remain because the error logic (not inserted at this time) might require them (I have not tested/gotten this far, all in my head at this point). When the final product is ready I'm sure a lot of the extra DIVs will be removed.

My original reason for using so many DIVs is to provide a top and bottom margin to each element to allow separation.

This post has been edited by CharlesEF: Jan 20 2014, 12:34 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Jan 20 2014, 09:10 PM
Post #14


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



After doing some thinking I wonder if I should even worry about the Firefox <fieldset> bug. I mean, I'm sure there are other browsers that do not have this bug (IE8 for one) so why punish them for the 5 year old Firefox bug?

If I let other people report the bug maybe Mozilla will get their crap together and fix the problem.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jan 21 2014, 04:35 AM
Post #15


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



You could give the top and bottom margin to the INPUTs instead of to redundant DIVs.

If a fieldset element causes errors in printing in some browsers, then don't use a fieldset at all. It's not required and voilà, problem solved. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 10:57 AM