16 replies [Last post]
tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 24 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

I have this code:

Name
Address
Contact Information
Housing

and this style:
/* Check Field */
.check_field {
background-color:#FF6600;
width: 10em;
height: 2.2em;
padding-right: 1em;
}
.check_field input.check {
background-color:#FFFF00;
float:left;
}

.check_field label {
background-color:#FF0000;
width: 3em;
}
/* END Check Field */

The situation:
Contact Information (the two words) breaks because it doesnt have the room to exist on one line. Which is fine.

The Problem:
The word "Information" flows underneath the check box and does not align directly under "Contact" (Contact and Information should be "left justified" and to the right of the checkbox. INSTEAD Checkbox is left justified over the word "Information"

I've tried 50 different things and nothing works.

Atleast nothing I've tried.

Any help is appreciated.

Thanks!

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 24 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

posted the example to see

see the page:
http://www.fizzcreative.com/example/NSA.php

see the style sheet:

http://www.fizzcreative.com/example/styles1.css

Again - if you can provide any help - I'd really appreciate it...

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Why can you not just

Why can you not just increase the width of that checkbox div.

With inline elements (label) you can't apply heights or widths.

You may have to contain the input and labels in a div so that you can apply floats along with widths

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 24 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

Let me take a minute to show

Let me take a minute to show you how I re-did it.

I got it to work - but I don't know if it's an optimal solution...

back in a minute...

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 24 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

look here:

This is the REVISED code and REVISED style (currently called STAR)

Example: http://www.fizzcreative.com/example/NSA.php

Code:



Name




Address



Contact Information



Housing Information

And lastly the styles:

http://www.fizzcreative.com/example/styles1.css

/* Check Field */

.star {
background-color:#FF6600;
width: 10em;
float: left;
}

.star input.check {
background-color:#cc0066;
float: left;
width: 1em;

}

.star label {
float:right;
background-color:#66FFFF;
width: 7.5em;
margin-top: .25em;
}

The concerns are that:
#1 - Is it optimal?
#2 - That little margin-top in the star label was peculiar - but necessary in IE 6 to get it to drop down a tad bit and line up with the check box.

Any opinions are certainly welcome.
Thanks!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Think you may have to float

Think you may have to float the input to the left and then you should be able to loose the margin-top and use a little padding on .star to space things vertically.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 24 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

I can't figure this out... this is killing me.

I can't for the life of me figure out how to get the "Housing Information" to stop sitting right on top of the pink Additional Info Box.

The styles are here:
http://www.fizzcreative.com/example/styles1.css

the page is here:

http://www.fizzcreative.com/example/NSA.php

I'm really stuck here - any help - I really really appreciate. I have to have space underneath Housing information and above the pink "Additional F2" Div. And nothing I do to the testClear DIV works (trying to add bottom margin for instance - for some reason nothing happens.

help help help...

By the way - I'm trying to avoid using an inline style on the Housing Information div. Because I have a whole page of items I'd need to do this too.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I would just add a little

I would just add a little bottom margin(5px?) to .star the inputs are a little too squashed as it is so a little spacing wouldn't go amiss.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 24 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

Added that - and it helpd...

Just needed to then add an inline statement to the last entry...

Other...
I am having an issue in IE 6 with regards to my left column - shown here:
http://www.fizzcreative.com/example2/new_short_appF1.php#

It seems to be encroaching on my 2nd column (again - in IE6)

I can't figure it out. Doe's anyone see anything?

By the way - it validates, it's just that the structuring is bad...

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Had a quick look but can't

Had a quick look but can't see where it's breaking in IE6 you'll just have to slog through all those elements checking widths and margins until you can find the culprit.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 24 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

Hey Hugo...

Do you see it breaking? Just curious.

Regardless - do you have a strategy for situations like this?

Meaning - what should I look for first - or is there anything I should target?

Thanks.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I would probably look to any

I would probably look to any properties that cause IE erroneous behavior in expanding parents when the parent should overflow the content, width, padding, margins.

I would initially want to strip back the styles to just framework, reduce things until you have a working layout without the problem manifesting and then start to add things back in until you find the one causing problems. Simplest approach to start is perhaps to display:none child elements of the major elements using the universal selector then you can start to move the universal selector down through the hierarchy of nested elements allowing elements to be re-included one by one.

Of course it may be a hasLayout problem it's difficult to tell with the layout arrangement.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 24 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

I will check it out today...

a hasLayout issue... that is one where what I am trying to do - there is n't enough room for, correct? Or is it a real bug?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

hasLayout is not a bug it's

hasLayout is not a bug it's a IE behaviour for elements where certain properties require to be in hasLayout mode triggered by giving dimensions and other properties to the element, much IE odd behaviour is due to elements needing this trigger to stabilise the rendering of the element

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 24 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

found a link discussing hasLayout...

I am going to dive in shortly. http://www.satzansatz.de/cssd/onhavinglayout.html

Thanks for the explanations by the way - they are a great help.

I have come to learn that to truely understand CSS and all it's whims - you really need daily exposure to it. Which I don't. My standing as "enthusiast" is a bit of a misnomer. I absolutely do want to understand CSS inside and out - but my ranking comes more from asking many questions and trying to retain what I learn.

I sincerely appreciate the patience you all have with folks like myself. You guys take the time when you don't have too and it does not go unnoticed.

tg

tiger2808
tiger2808's picture
Offline
Enthusiast
Last seen: 7 years 24 weeks ago
Timezone: GMT-6
Joined: 2005-12-07
Posts: 198
Points: 3

fixed it - but created another problem...

Okay - if you look here (in IE6):
http://www.fizzcreative.com/example2/new_short_appF1.php

I fould the problem that exists - the left column needed a width which I put in the style called sidecolumnheader.

But in doing that - I created another problem... the header no longer grows when I increase the font size in the browser.

Any suggestions to accomplish that?? The width needs to be determind from a style and NOT the TD.

Thanks!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The fact is that CSS is a

The fact is that CSS is a very powerful set of properties that can be applied to elements all of which have various interactive consequences upon each other, and to fully understand it all does take a lot of effort and constant study , I'm no different I have to spend ages ensuring I really understand how properties are working and wonder when I can finally sit back and relax in the knowledge that I have mastered it, seems a long way off yet Smile

We take the time to help because I guess we have all been there and struggled and help at times is required and it should be a circle; give and receive.

I'll look at the layout when I get a chance a bit later but if you have had to feed a width was that just for IE? if so and that width is upsetting things can you try replacing it with zoom:1; just to test for hasLayout as it will trigger but has no other effect on things.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me