Viewing Thread:
"CSS help anyone? Could be some div nuance"

Hey there. I have a problem with some CSS on: [URL]http://www.sine-wave.net/deleteme/signup.php[/URL].

If you look at it in Firefox/Moz/Decent browsers you get a great thumbs up, but in IE it's a massive thumbs down. The menu on the right is a div and the main text is also a div. When I remove absolute positioning on the main div it seems to work fine, so I think the nested divs or left-most div is causing some problems. Can anyone shed any light on this? Thanks!

IE be damned! Even my phone renders it properly heh.

EDIT: Those inputs look like they're aligned right, they're not, it's a coincidence. The label span seems to be sized 50% between the #main div, and formw span seems to be sized 50% from the whole page.

Basic CSS form... Non ALA stylee...

http://www.endeavourchem.co.uk/search.asp

Before anyone starts slating it, it's no where near finished, the homepage doesn't work for a reason, The menu system is based on the ALA Suckerfish style and the reason the true homepage isnot there is I'm using the server for testing the ret of the site due to needing a reference to / for everything (which doesn't work locally on IIS6!!)

Tyla wrote:
> FWIW, why are you using when you
> should be using ?

Just as an example for you Rob, in case you're not familiar with the tag - rather than having:

First name:

You could have:

for="firstname">
First name: id="firstname">

... and add the styles as:

.row {
whatever;
}
.row label {
whatever;
}
.row label input {
whatever;
}

As for the problem with your input elements, have you tried floating them to the left as well, and working with margin and padding?

I link the layout of the form and site in general by the way (well, in Firefox at least).

Turbonutter wrote:
> Becuase it's true? :-)

Although the aim is pure CSS eventually, I've slowly discovered, that in some cases, it hinders accessibility, especially in the use of forms.

Part of me still sees a form as tabular data, and as long as you have included tabindex's, accesskeys, summary's, labels and titles, I see no reason not to continue using tables for retaining the layoutof forms.

Also, although degredation is acceptable for appearence in CSS based sites, and that you can also pull of some clever "alternate" (read: crap) browser support, form styling in CSS is still a bit hit and miss if CSS is disabled.

FWIW, why are you using when you should be using ? I know the ALA approach uses this methode, but it kind of defeats the object when you can just use a coreectly styled label element? Therfore, you can still (apparently) acheive the ALA system of doing things, but using the correct mark up!

type slower or get more sleep

Becuase it's true? :-)

Don't say that!

It's making me cry...

This just highlights the inescapable fact, that if you want it to look the same in every major browser, you just use tables :-)

Alan the form styling is ripped straight from ALA. I've found it works with pixel values for the width and the height, but not percentages.

I'll do that google now. Cheers man.

Rob

search google for "IE box model hack"

also look at styling forms @ A List Apart

Haven't looked into it in great detail, but may have something to do with IE's cr@p approach to inheritance and the nee for pseudo classes. CSS uses a points system to give importance to styling for example:

p.blue

is less than

#div p.blue

which is less than

#div p.blue !important

I'll have a proper look later at it.

No, ya got me.

It's just I've had similiar problems with IE, and fixed it via ... I think it may be something about the positional attribute...

Coin wrote:
> Why not have them in a span with the ID value instead, as IE often
> renders DIVs so that there is a
between them.

All browsers should do this by default, as