HELP please with tableless css table form

Hey guys,

Great to see there is a CSS forums
I'm fairly new to css and had run into something i cannot work out.

I'm trying to do a tabless tables in css for a contact us page's form.

I have attached a mock-up in photoshop to see what i'm talking about...


I already have the div's setup for background colour and for the inner rounded rectangle with the blue and white colours reversed...css for it is;

body {background-color: white
}


.bl {
	background: url(images/bl.gif) 0 100% no-repeat #158dea;
	width: 47em;
}
.br {background: url(images/br.gif) 100% 100% no-repeat}
.tl {background: url(images/tl.gif) 0 0 no-repeat}
.tr {background: url(images/tr.gif) 100% 0 no-repeat; padding:10px}
.clear {
	font-size: 5px;
	height: 5px
}

Code (markup):

To achieve what is in the picture, I tried floating a column to the left and one to the right, however when I put the form's input boxes in they don't align properly, leaving a big space.

I'd appreciate any help. Thanks!

 

You're on the right track. Float the left thingie left. I'd have to actually build it to see if the form will ride up along the right side or not, but if it didn't, I'd float it left too. Left floats will just stack up on each other, each sitting to the right of the one before it.

For the form, well, styling them and positioning them isn't easy until you do it a gazillion times. Even then, you go to build another and something doesn't line up and it takes a while to figure out why this is.

Let's see if I can build an idea.

 

Something like this: http://stommepoes.jobva.nl/Tests/contactpage.html

Some caveats:
I had to stick the form in a div to do anything with it. I'm not sure why because I should've been able to just style the form directly. I also ended up floating it. Users with screen below 800px will see the form jump down because then there's not enough room for the two to be side by side. I could try only floating one and giving the other a margin to make room for it.

I didn't test in all browsers, but looked in a few. Ie and Opera put a scrollbar on the textarea. FF did not. In another form I did, the inputs were not all the same width even though I set that in the CSS. You could also set it in the html if a browser needs to be overridden, but that's defeating the purpose of CSS.

The text may have to be replaced with images if you need that funky font. Also, the submit button would have to be replaced with an image if you want it to look cutesy on anything other than Safari (which rounds them).

Forms are not so easily styled as other things with CSS-- browsers have more control over forms than web writers. So, know there are limits in what you can do. Background colours on the inputs are not allowed in some browser, I think maybe Safari. I removed all default padding and margins on everything (* {margin: 0; padding: 0;}) which some recommend you don't do on forms... however it's the only way I can get things to line up on every browsers.

To get the labels to line up I floated them and gave them set widths. You might be able to get away with that another way, but it's the easiest for me. The inputs are inline so they'll ride up alongside the labels SO LONG AS there's room for them to... Sometimes IE6 or 7 thinks there's still not enough room so you'll see the inputs after the labels. In this case, give them more room. Either make the inputs shorter or the labels shorter. The divs around them are wrapping them to clear the floats so that the next label doesn't also try to wrap after the label above it.

But anyway this gives you the general idea. Oh and I did end up floating the form right so that it stayed on that side, but if your page is fixed width then floating it left will work too. ...and I prolly shoulda put your address info in a list instead of p's but I was trying to keep it simpler, and I always have more code with a list (but a list is more appropriate).

 

Great! Thank you very very much

I see the form floats a little too much to the right, I can fix this by minimizing the width in css correct? Sorry, really new to css...

Thanks again, i'll read through your post thoroughly later on.
If i have any more problems i'll let you know thanks

 

Floats are kinda picky and if you're going to use them it's best to really learn them, esp since IE6 has major issues with them if you're not careful (and even when you are).

http://www.sitepoint.com/forums/showpost.php?p=1374925&postcount=15 is a nice start.

To move a right-floating riv closer to the right, reduce the right margin (I think I had a right margin in that). With 0 right margin, the float should be hugging the right side of the viewport (in this case... if it were inside another box, it would be hugging the side of the box).

 

thanks stomme poes a great help!!

i have another thing to ask you about...as illustrated in the attached picture

1. inside the rounded rectangle div, needs a small left sidebar and larger right content area

2. needs a grid setup in the div, made up of columns and rows so content can be inserted. if the "cells" need to be merged can it be done?

thanks again!

 

For the top one, the white box will be a div, a container. Inside would likely be a left float of a set width with the menu. Next to it is static content (no set dimensions) with a left margin equal to or a little bigger than the left float (to make room for it).

<div id="container">
  <div id="sidebar">
    <ul id="menu">
      <li>item one</li>
      <li> item two</li>
      <li>item three</li>
    </ul>
  </div>
  <div id="maincontent">
    <h1>TITLE!</h1>
      <p>stuff....</p>
  </div>
</div>

Code (markup):

In CSS, sidebar is given a width, like maybe 200px, and floated left. Maincontent is simply given a left margin then of 200 or maybe 210px. Any borders between the two can go on either one, but maybe you want to put the border on whatever is going to always be longer in length.
It's probably good to set overflow: hidden to Container so any backgrounds you have go as long as the longest conten (it's some crazy trick to wrap floats... you should also clear the float with a footer if you have one, otherwise you can look up on teh Googles how to clear floats-- there's multiple ways and it's kindof an art).

The second one, I dunno. It really depends what you're using it for. You may actually want a table with really huge td's. Otherwise, another possibility is to have little squares with like two borders each, and floated left (floats will just keep stacking alongside each other so long as there's room). Merging cells, then, is not really possible in an easy sense... it could be done by hand but for full flexibility it really really depends on what and how exactly you're using it.

 

stomme pos quick question, how do i fix these errors...ie hack?
are you able to show me an example css and what to put in html?

This is the report....site looks shocking in ie! looks great in mozilla lol

<?xml version="1.0" standalone="yes" ?>

<mm_report>
<mm_reportname> ResultsReport.xml</mm_reportname>
<mm_reportdate>02/13/08 17:21:03</mm_reportdate>
<mm_reportlocation>C:\.......</mm_reportlocation>
<mm_reportitem>
<mm_statusicon>13</mm_statusicon>
<mm_displaystr><![CDATA[48]]></mm_displaystr>
<mm_linenumber>Expanding Box Problem</mm_linenumber>
<mm_description><![CDATA[]]></mm_description>
<mm_reportedby></mm_reportedby>
</mm_reportitem>
<mm_reportitem>
<mm_statusicon>13</mm_statusicon>
<mm_displaystr><![CDATA[53]]></mm_displaystr>
<mm_linenumber>Three Pixel Text Jog</mm_linenumber>
<mm_description><![CDATA[]]></mm_description>
<mm_reportedby></mm_reportedby>
</mm_reportitem>
<mm_reportitem>
<mm_statusicon>13</mm_statusicon>
<mm_displaystr><![CDATA[54]]></mm_displaystr>
<mm_linenumber>Expanding Box Problem</mm_linenumber>
<mm_description><![CDATA[]]></mm_description>
<mm_reportedby></mm_reportedby>
</mm_reportitem>
<mm_reportitem>
<mm_statusicon>13</mm_statusicon>
<mm_displaystr><![CDATA[80]]></mm_displaystr>
<mm_linenumber>Expanding Box Problem</mm_linenumber>
<mm_description><![CDATA[]]></mm_description>
<mm_reportedby></mm_reportedby>
</mm_reportitem>
<mm_reportitem>
<mm_statusicon>13</mm_statusicon>
<mm_displaystr><![CDATA[168]]></mm_displaystr>
<mm_linenumber>Expanding Box Problem</mm_linenumber>
<mm_description><![CDATA[]]></mm_description>
<mm_reportedby></mm_reportedby>
</mm_reportitem>
<mm_reportitem>
<mm_statusicon>13</mm_statusicon>
<mm_displaystr><![CDATA[197]]></mm_displaystr>
<mm_linenumber>Expanding Box Problem</mm_linenumber>
<mm_description><![CDATA[]]></mm_description>
<mm_reportedby></mm_reportedby>
</mm_reportitem>
<mm_reportitem>
<mm_statusicon>13</mm_statusicon>
<mm_displaystr><![CDATA[241]]></mm_displaystr>
<mm_linenumber>Floating Non-Float Bug</mm_linenumber>
<mm_description><![CDATA[]]></mm_description>
<mm_reportedby></mm_reportedby>
</mm_reportitem>
<mm_reportitem>
<mm_statusicon>13</mm_statusicon>
<mm_displaystr><![CDATA[241]]></mm_displaystr>
<mm_linenumber>Float Drop Problem</mm_linenumber>
<mm_description><![CDATA[]]></mm_description>
<mm_reportedby></mm_reportedby>
</mm_reportitem>
</mm_report>

 

Hm.. Ive seen similar xml elements before.. is that from Dreamweaver? Possibly CS3? If so, didnt know it was doing that.

 

yep it's a browser compatability xml report from dreamweaver cs3

can anyone help? i can also provide the html + css being used, maybe someone can fix it up on their end and let me know what they've done so i can learn for future ref.

thanks

 

I totally dunno dreambeaver, but if you're making html and css, send both to a real validator-- dw can only guess what one browser or another's going to do. The validator can at least tell you if the code is valid first. THEN you go bug-squashing.

Remember what I said about IE and floats. You can float whatever you want, but with IE6 you've got to be a bit more careful (see link I posted above).

http://validator.w3.org/ HTML validator

http://jigsaw.w3.org/css-validator/ css validator

The 3-pixel text jog... sounds like a popular IE bug when you have a float next to static (like on the top of your two images). Now, if you don't have borders and lines and things that need pixel-perfect alignment, you can often ignore 3-pixel jog. Otherwise, the link I posted above has 2 or 3 ways to get rid of it if you need to (sometimes it can force the static part UNDER the float instead of next to it).

 

thanks poes
got the pm, for anyone else out there the url's are;

http://www.brandnews.com.au/beta2/beta2/index.html
http://www.brandnews.com.au/beta2/beta2/a.css

65 errors in html

70 in css

 

Okay, here's the first things I see on your site (pls post URL here for everyone, but I won't do it without your O.K.):

First, it should be rewritten HTML-wise : ) It's not awful or anything, but there's no reason for a <p>&nb sp;</p> right at the top of the page : ) CSS has something for that: margins and padding.

The biggest, nastiest thing I see in my Fake IE6 4 Linux is that you've used some semi-transparent PNGs which, you should know, don't work at all in IE6 : ) There is a Javascript called PNGfix, but I gotta say, I had trouble reading the buttons in FF anyway. I'd make them normal gifs and solid. The stripes showing through looks cool design-wise but it's so hard to read. Another option is to leave the nasty PNGs for everyone and serve a gif version to IE (using either a conditional comment, css star html hack, or by first listing the gif in the CSS, then referring to the png with a child or descendent selector (< or + ) (actually called combinators but whatever, selector will show up on Google). I can give you an example of this if you want.

Next, yeah, something's bumping your main content a few pixels to the left, but that's not 3-pixel jog. Let's see...

#menu {
margin: 0;
float: left;
padding: 0 0 18px 20px;
position: relative;
width: 920px;
}
That's the part on top with the buttons... and
#main {
position: relative;
width: 882px;
background-color: #ffffff;
padding: 10px 20px 20px 20px;
margin: 0;
float: left;
border-right: 1px solid #E3E3E3;
border-left: 1px solid #E3E3E3;
z-index: 1;
}
That's the rest of the white part. They're floated left and have different widths, and that's prolly why things don't line up in IE... who knows which bug it's using to do that, but we don't care cause we want to do something else to center the page.

You can either keep their widths and set the both of them to margin: 0 auto (the 0 is the top and bottom, the auto centers in browsers except IE5.5 cause it's stupid... the amount of margin on each side is kept equal, whatever the size of the viewport.
<strike>..or you can stuff both of them in a #wrapper div and center that with margin: whatever auto. Whatever because you're using a <p> to add space at the top, and you could use #wrapper's top margin to do that if you wanted (or, top padding on the body).</strike>
Oh wait, you have a wrapper... but floating everything in it. No need. The menu is the same width as the wrapper, so don't position it at all, it can't move anywhere anyway. The main part though is smaller and needs to be centered within the #wrapper with its own margin: 0 auto.

I know Flash comes with that Javascript but I'm 99% sure you DON'T need it. Flash has its own Javascript version, called ActionScript, and why don't you stuff all those quotes in one big Flash file (if you're currently using different Flash files) and have each quote in its own clip and use Actionscript (which stays inside the Flash and doesn't sully your HTML) to randomise them? But me, I wouldn't even use Flash for text (unless you need a fancy font).

That's a start...

*edit ah thx for the URLs

 

wow that's alot....thanks!

i'll have to go through it all..just finding it hard to understand css fully, i need to read more...tutorials i guess.

the flash animation is 1 movie clip showing random quotes...not seperate movies (i can code in actionscript, just not css...yet)

thanks though.

haven't worked out the png thing, i'll look it up tomorrow from the office.

anything else i need to fix up other than the above in your post?

thanks again for the help, you've come to my rescue again!

 

poes i've done as much as i can in terms of creating no errors for css, however there are still some for html...

issue 1: used a png hack, only the logo is transparent now in ie, not the nav menu rollover images (i'm assuming because the code is in css as a background-image)?

issue 2: only the 5min video shows up on the right in ie, both 90sec and 5min videos show in mozilla

issue 3: in ie the site isn't centered up?

Could you please let me know what needs to be fixed? Not much to go now

Thanks!

Links again: www.brandnews.com.au/beta2/beta2/index.html and www.brandnews.com.au/beta2/beta2/a.css

 

Here's why I thought maybe you had different Flash movies:
<div id="rotation"><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','880','height','150','src','file:///C|/Documents and Settings/matt/Desktop/Brand News Executive Profiles/beta2/intro','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','intro' ); //end AC code
</script>

That RunContent crap can go. I know, I first copied it everywhere and then one day didn't, and everything was cool-- what you need that for is when you just have a sitting SFW and you want to look at it in a browser (along with that crappy html they give you). But, for a webpage, you don't need that in the HTML or even in the folder. It can totally go.

Second... lemme get to that... though right now, crappy IE6 4 Linux is not looking bad, just menu, I think you're working on it now...

 

It seemed both your movies were showing, at least in IE6...

I kinda sorta redid your site-- not entirely, just the big boxes, the top menu, and rearranged your html. I removed all the javajunk cause I'm allergic to it, and took out the Flash (with an example of Flash Satay embed method-- you'll want to keep your UFO SWFObject whatever in there cause Satay makes IE do that Click to continue Loading page crap...) but anyway...
http://stommepoes.nl/Dov/dov.html
I destroyed your fonts, but that 62% thing you had is based on the myth of every browser having a basis font of 16px which isn't true according to the crusty old guys here on the forum... if you still want to set the font in the body, use
font: normal 80%/100% Lucida blah, blah, "Blah blah", sans-serif;

Your fonts had a few errors, I redid them.

I dunno what all your classes were, and so a bunch are gone. I didn't style the right side except to show where it is. I would have the numbers as p's floated left, with height and width set so as to show the whole background image... and if you set a height and width on the h3, you don't need the <br />s cause it'll wrap automagically. Same goes with your point list-- I made it a list, no <br /> and you were using &# 160 which is the same as &nb sp and margins and padding are for those.

There's a gap between the menu and the main box-- You can just remove the top margin to have them flush, but then I didn't know what the rounded tops were for.

I redid the button: http://stommepoes.nl/Dov/button.gif and fixed the two-line menu item-- menu breaks at text-enlarge more than one or two times, sucks, but I couldn't do anything else.


I used deathshadow's rounded-corners css for only the top of #main... you could use that same trick for the left corners of the grey #videothingie box.

http://battletech.hopto.org/html_tutorials/rounded_css_borders/

It's not that much extra code and it removes all those corner images.

I put red borders on stuff so you can see... I have Flash turned off and I was too lazy to undo all my settings so I did that blind.

Structurally looks good in Opera, FF2, FF1.5, IE6 and 7, Safari/Windows, Konqueror...

I changed your pngs to gifs-- it not only made them smaller, but I couldn't set a proper line-height on the text I hid behind the Executive thingie without it showing through the transparency so I got rid of it... the text is white and the body background is dark so that if images are off and CSS on people can still read the text.

IE7 wouldn't show the point.png no matter what I did with list-style-image... damn, so I made it a background image of the li's... and is point.gif and smaller in size.

There's a filler div around the flash object. That's not because the Flash object needs a div around it, it doesn't, but because for the rounded corners, the little sandbags work when followed by a full-width block element and the object had a set width which was smaller... so you could have an h2 in there instead, or just leave the filler div.

Won't win any awards but I hope it gets you started in re-setting up your page. I do think you have too much css currently, even for all the needed styling. But, you'll learn that on the way. CSS takes time.