19 replies [Last post]
sheikyerbouti
sheikyerbouti's picture
Offline
Regular
Last seen: 12 years 36 weeks ago
Timezone: GMT-7
Joined: 2005-08-05
Posts: 36
Points: 0

greetings-

i've been reading the many recommended sections about box model "issues" and fixes using faux columns. i'll be honest.... i'm confused!

perhaps if i explain (and let you view) what i've got going on, maybe i'll stumble my way into clearing up the issue or some of the (many) more experienced CSS users will steer me in the right direction....

the page: http://www.junkproductions.com/test/index.html

the problem:
if i load the page in Firefox everything lays out as i like it. if i choose to increase the text size, the text in the gray main area spills lower on the page and is hidden by the two-tone blue fade at the bottom of the page. i think a similar problem to this is that the text link "Breckenridge House" grows to the right and is hidden by the gray area.

In IE6, if i increase text size, neither my nav-links nor the text in the gray area grow... only the blue "header" text increases so i don't see the same problem.

So, if i use the min-height coding still set to 500px will that fix the problem in Firefox but not break IE since i don't see the same problem in IE? (that's question #1)

#2. I'm not quite understanding how to "place" things on the page in a relative fashion rather than absolute. that blue-fade .jpg under the gray box is placed "absolutely" on the page, but when text size increases and the gray box grows, the fade covers up the bottom portion of the text. could i make the fade.jpg begin where the gray box ends? that seems "relative", but it's stumping me as to how to do such a thing.

i think i have a couple other questions about this page, but i'm going to see if i can't sort this portion out first before posting a laundry list of things....

with respect to #1 above, both my #sidenav and #maincontent are set up with only margins, so padding issues hopefully won't "break" the box model..... did i understand the reading about needing to keep it that way?

whew.... and they said CSS was going to make page layout so much easier than those ole creaky tables.... Laughing out loud

thanks for a nudge in the right direction!

-pete

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 days 14 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

box model vs. faux columns general confusion

Hi sheikyerbouti,
You have positioned maincontent and the footer absolutely on the page, and given maincontent a width and height.
When the text size increases maincontent needs to expand or the content has to overflow, and footer being absolutely positioned will sit where it has been positioned over the expanded maincontent.

Here's a html and css file generated by my CSS Layout Generator which should get you started with using floats for layouts.

If you make the background-color of #wrapper the same as you have for #leftcol then as long as the maincontent is the longest column the columns will look the same length.
Apart from that you should be able to just add your content, images and other styles and away you go.

Hope that helps

sheikyerbouti
sheikyerbouti's picture
Offline
Regular
Last seen: 12 years 36 weeks ago
Timezone: GMT-7
Joined: 2005-08-05
Posts: 36
Points: 0

box model vs. faux columns general confusion

Tony-

thank you very much for taking the time to not only re-create the layout of my page, but plug it into the csscreator as well!

i've been studying the css that it created and i understand most of what's there.... i still have some questions about WHY certain things work the way they do in css.

i'm willing to put the time in, study and learn. do you have a recommendation of which direction i should turn to learn more about float, relative vs. absolute, display:inline, etc.? (i was looking at the stuff at w3schools.com but they don't necessarily explain the why's or how's..... mostly gives a visual of different styles.)

and most of the stuff in the "float containers fix" is GREEK to me! how do i learn about what the "after" means and why the dot after content?

the more i learn, the less i know!!! is this really the "beginners" section of the css forum? Shock

thank you, again, for your time.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 6 days 14 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

box model vs. faux columns general confusion

Hi sheikyerbouti,
Yes there is lots to learn.
The float containers fix uses the pseudo element "after" to place a something (doesn't need to be a dot) at the end float container then sets it to display block to give the float container something content to surround. Because the float container ignores the floats on their own.
You don't really have to understand it in detail just as long as you get the basic concept now.

There are some good tutorials on the web use google to search for specific topics.
We also have a list of useful links and CSS Properties

sheikyerbouti
sheikyerbouti's picture
Offline
Regular
Last seen: 12 years 36 weeks ago
Timezone: GMT-7
Joined: 2005-08-05
Posts: 36
Points: 0

box model vs. faux columns general confusion

Tony-

Well.... it WORKS!!!!

unfortunately, i don't yet understand why it works..... but i can study that farther down the road. i did find some of those links over there to the right in the Tips and Tools section after i posted my last request for tutorials. i'll check it all out!

one other thing of interest with respect to the #sidenav (you called it leftcol). when i increase text size in the browser, the link "Breckenridge House" overflows the leftcol and is hidden under the gray of the maincol. could i try a similar tweak to make the leftcol expand if the text size is increased? worst case scenario, i'm gonna change the text to "Colorado Home" so it's shorter and doesn't overflow..... cause i need to get this project MOVING!

thank you, specifically, for your help. and to everyone who replied to my other queries.... many thanks! i love learning and it's pretty cool that people are so willing to spend their time for free to help others.

enjoy the day,
pete

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

box model vs. faux columns general confusion

Hi shiekyabouti,

The ruleset for the clearing of float containers works by adding some content to a class that is set on the element that requires to expand around a floated element, and is what is required for modern browsers that allow the correct behavior of floats to drop down through their parent container.

It works by using the :after pseudo element. This instructs the class to include some 'content' at the end of the element, that is the rule
content: "." the period is used as a means of giving the element some required content, it could be a string such as "this is content inserted at the end of the element"
The other properties are used to hide the element as we don't actually want to see it and to ensure that it clears in both directions under the float.

IE does not understand the :after pseudo class but also it does not behave itself as it should with clearing floats, as if the parent has any height stated it will in fact expand automatically to enclose the float/content regardless of whether that stated height is smaller. This is why it is possible to trigger IE into auto enclosing by feeding it a height of 1%, but this has to be hidden from modern browsers as they will fix their height if they see this rule, so the star selector is used to ensure that only IE reads it, thusly:
* html .clearfix{height:1%;}

You could have a look through the 'How To' section as there is further reading on matters that may be helpful, also sites such as htmldog are quite good as is this site:
http://academ.hvcc.edu/~kantopet/old/css/index.php

Hugo.

EDIT: Too slow the boss got there first Smile

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

sheikyerbouti
sheikyerbouti's picture
Offline
Regular
Last seen: 12 years 36 weeks ago
Timezone: GMT-7
Joined: 2005-08-05
Posts: 36
Points: 0

box model vs. faux columns general confusion

Hugo-

Thanks for that excellent description! I hope one day to know what in the world you just said! Laughing out loud

I think it would be a great idea for me to get to some serious studying... i don't know how in the heck you folks keep all these different rules and regulations clear in your minds, but i'm grateful for the help!

i also saw at the bottom of your post the statement about Doctype and i know i need to read up on that as well, because i don't even know the what's and why's of that either!

i didn't change the doctype for my page from what (ahem....) golive created to what tony's csscreator generated.... could that be why in IE6 on a Win machine there is a small "gap" between the bottom of my header image and the beginning of my leftcolumn and maincolumn? i'll change it and see what happens....

guess i better get another pot of coffee going.... it's gonna be a long night of studying....

thanks again,
pete

sheikyerbouti
sheikyerbouti's picture
Offline
Regular
Last seen: 12 years 36 weeks ago
Timezone: GMT-7
Joined: 2005-08-05
Posts: 36
Points: 0

box model vs. faux columns general confusion

now that's very strange...

everything looks good in Firefox, but when i preview the page in IE6 there's still that "gap" beneath the header image and now the :hover state is broken just for the word Home. all other links have the appropriate background gray color and black border.

...scratches his head, drinks his coffee....

-pete

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

box model vs. faux columns general confusion

:oops: sorry it doesn't read that clearly.

With the gap, try as a test putting this rule at the bottom of the styles:

*{margin:0;}
this will just zero margins on all elements and will indicate whether this gap is caused by a margin hanging around somewhere, if the gap closes then look at the margins on the header and wrapper and any child elements( remember that block level elements carry default margins).

It may also be a collapsed margin which would be cured by adding a 1px top padding to say the wrapper div.

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 3 hours ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

box model vs. faux columns general confusion

IE preserves a line box even if there is no text. An inline image defaults to baseline alignment, leaving space below for letter descenders. If you make #header img {vertical-align: bottom;}, that'll fix it.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

sheikyerbouti
sheikyerbouti's picture
Offline
Regular
Last seen: 12 years 36 weeks ago
Timezone: GMT-7
Joined: 2005-08-05
Posts: 36
Points: 0

box model vs. faux columns general confusion

once again.... you guys ROCK!!!

so the #header img vertical-align bottom solved the gap between header and content on the page.....

now if ONLY i could figure out why the Home text link shows in black during Hover (only in IE), but doesn't have it's corresponding gray background and black border like all the other links in that section.....

Gary, thanks for clueing me into the vertical align proceedure.

Hugo, i was in no way saying your response was mumbo-jumbo. Wink what i was saying was that it's still WAY above my head and i need to continue with my studies!

okay, lemme see if i have all the rules straight:
i before e, except after c, or as in neighbor and weigh, or if you have on one red sock and one blue sock, your first initial is a K, and your brother's cousin's sister's husband was born on a thursday.....

yeah, i think i got it!
must... have... more... coffee...

many thanks,
pete

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

box model vs. faux columns general confusion

Didn't realise the header image was inline :roll: I would set it as a background and have a textual title in there for text only display as just a header image looks a bit odd, and does not really convey much.

The link problem is that IE requires some dimension to be specified you can see this if you add height:100%; to the anchor rule, but you will need to work out was is a safe value to use for browsers such as FF.

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

sheikyerbouti
sheikyerbouti's picture
Offline
Regular
Last seen: 12 years 36 weeks ago
Timezone: GMT-7
Joined: 2005-08-05
Posts: 36
Points: 0

box model vs. faux columns general confusion

okay, adding height: 100%; to the anchor rule cleared up the problem i was having with that first text link.

i realize you folks are spending lots of time with me and i really want to learn so i ask fewer questions in the future!

could someone help me to see what it was about adding this code:

/* *** Float containers fix:
 http://www.csscreator.com/attributes/containedfloat.php *** */ 
#wrapper:after {
 content: "."; 
 display: block; 
height: 0; 
 clear: both; 
 visibility: hidden;
 }
 
#wrapper{display: inline-table;}

/* Hides from IE-mac \*/
* html #wrapper{height: 1%;}
#wrapper{ background-color: #1e5599; display: block; }
/* End hide from IE-mac */  


 
 /*printer styles*/ 
 @media print{ 
/*hide the left column when printing*/ 
#leftcol{display:none;} 
#twocols, #maincol{width:100%; float:none;}
}

that made the text link for "Home" so funky? what i mean is, if i can learn what in that code broke the nice links i had previously, i can hopefully find the workaround on my own in the future....

prior to adding that code, i didn't need the height: 100%; for all the links to work fine.

thank you, one and all, for all the time spent troubleshooting!

-pete

EDIT: was it that the "hidden" #wrapper code was calling for a height of 1%? just a stab in the dark.....

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 23 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

box model vs. faux columns general confusion

sheikyerbouti wrote:
i realize you folks are spending lots of time with me and i really want to learn so i ask fewer questions in the future!

It will probably get worse before it gets better. You will likely have more questions as you push your skills. The difference for us is that they will get more fun to answer. I've learned over half of my CSS by working on puzzles that other folks have posted. That is the real return for me - I get to learn differnent designs and their pros and cons by heling sort other folks pages. So keep the questions coming.

Yeah, bring it, you ain't so tough . . .

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

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

box model vs. faux columns general confusion

Pete, as David mentions things will no doubt get harder before they get easier there is an initial easy period with CSS when all seems easy and fun then after that as you start to understand more it will get further complicated by browser quirks. Do not let this put you off though just be prepared for it.

As to your question, whether the clearing rules contributed to the problem, well, there is an easy way to determine that and involves something you will learn to apply and that is basic logical deduction, reading your rules through and determining their interaction with each other and going through the process of commenting out rules until a problem resolves itself and you can establish the rule that was causing the problem.

To answer the question about whether the clearing rules were effecting things I just commented them all out, but as I knew, it made no difference, they were not the culprit.

What I did then notice (and missed earlier in my haste) was the fact that you had set #sidenav as position relative, this is something that many do believing that it does no harm and indeed doing is known to sort out many a problem in IE and is referred to as the 'Magic Bullet'. However it can also have a detrimental effect at times and can cause IE to not display things when associated with the float property and conversely is needed at times to cause things to behave themselves in float elements (confused ?).

IE is a quirky buggy browser that does not implement CSS very well and is chock full of strange behaviors, this you will start to become familiar with and will cause you your biggest nightmares.

Getting back to the anchor, try removing the height:100% and re-introduce the fault then remove the relative position from #sidenav and check, now put relative back in and this time add relative to the #sidenav ul, the problem sorts itself out as now the ul is positioned relative as well as the #sidenav funny old world isn't it Smile

I would remove the position relatives as there is no particular reason for them .

You may also like to think along the lines of setting a width on the ul and then width 100% on the anchor this would also have the effect of curing the problem as well as allowing the hover effect to span the width of the anchor rather than the actual text, i.e hovering off the text but within the confines of the anchor width will allow clicking.

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

sheikyerbouti
sheikyerbouti's picture
Offline
Regular
Last seen: 12 years 36 weeks ago
Timezone: GMT-7
Joined: 2005-08-05
Posts: 36
Points: 0

box model vs. faux columns general confusion

ya know... i'm sitting here giggling at ALL my options. Laughing out loud

the world truly IS my oyster....

so, that's a GREAT idea about commenting rules out to see what effect it has... i'm guessing that programmers do it all the time to test their work... i'm no programmer, so maybe that's why it never occured to me!

i've been reading tutorials on float and clear and block-level and many other items.... and oddly i'm just starting to get that false sense of security that's gonna sneak up and bite me in the rear soon enough.... but hey, then i turn to the PROS.....

thanks for the many great ideas! i'll keep playing to see what i can learn.

-pete

sheikyerbouti
sheikyerbouti's picture
Offline
Regular
Last seen: 12 years 36 weeks ago
Timezone: GMT-7
Joined: 2005-08-05
Posts: 36
Points: 0

box model vs. faux columns general confusion

what would a new day be without a new headache?? (i mean... "exciting new learning opportunity")

i've been previewing all my work on a Win (desktop) machine running XP Home, using Firefox, then IE6. and it looks just as i like in those scenarios....

i fired up the Win laptop today, also running XP Home, launched IE6 to preview my page: http://www.junkproductions.com/test/index_internal.html

and i'm attaching a screenshot so you can see how the gray box (#maincontent) has been pushed down lower on the page and doesn't begin until the last text is done in the #sidenav at the left.

#sidenav is floating left, #maincontent floats right, both have their widths defined.

what can i do to "force" the maincontent to rise up and greet the day where it's supposed to? i mean.... without breaking anything in the otherwise acceptable displays i've been checking out to this point....

(beats his head against the wall)
-pete

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

box model vs. faux columns general confusion

You have a problem likely as not with some rouge margins or padding to test try something like:

#sidenav * {margin:0;padding:0;} and the same for maincontent if the #maincontent rises to sit alongside then you have an element within one of those two divs that is causing IE to expand it's parent container messing up the widths.

So look for padding on either the main two containers or margins / padding on elements within one of them or possibly unrestrained widths of an element within those containers.

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

sheikyerbouti
sheikyerbouti's picture
Offline
Regular
Last seen: 12 years 36 weeks ago
Timezone: GMT-7
Joined: 2005-08-05
Posts: 36
Points: 0

box model vs. faux columns general confusion

Hugo-

i added:

#sidenav * {margin:0;padding:0;}
#maincontent * {margin:0;padding:0;}

to my internal style sheet. (i wasn't supposed to just amend the existing #sidenav and #maincontent styles, was i?)

but the gray box didn't rise to the top like on my other machine.

i do have some padding above the ul to move it down from the top of the blue background a little:

#sidenav ul { margin-left: 0; padding-top: 15px; padding-left: 0; list-style-type: none; white-space: nowrap; }

but i LIKE it like that.... Wink

and then of course my #sidenav a has some padding to the left to give that nice space between the left edge of my browser window and the beginning of my text links....

remember those nice 1x1 spacer.gif images that we could stretch to 10px wide to give a little buffer off the left side of the page when using tables...

the spacer is dead... long live the spacer!

ow, my head hurts.....

-pete

sheikyerbouti
sheikyerbouti's picture
Offline
Regular
Last seen: 12 years 36 weeks ago
Timezone: GMT-7
Joined: 2005-08-05
Posts: 36
Points: 0

box model vs. faux columns general confusion

I stripped out all the padding/margins from #sidenav and #maincontent. the <p> within maincontent still has some margins to keep the text off the left edge. i set #address width to 150px because it was the only thing i could find within either of those two containers that didn't have a specified width....

the strippped down page is http://www.junkproductions.com/test/index_stripped.html

speaking of stipping.... i'm gonna strip down and rub bourbon all over the insides of my mouth, throat and stomach.....

gotta walk away for awhile.....

thanks for your time and efforts to this point!

-pete