17 replies [Last post]
ts10sc
Offline
Regular
Last seen: 13 years 34 weeks ago
Timezone: GMT-6
Joined: 2008-01-22
Posts: 12
Points: 0

Hey! I'm struggling with something and about to pull my hair out!

Here's the website: http://publisher.tidbitsweekly.net/

As you can see, the text extends beyond the main site past the footer and doesn't push the rest down. I'm sure this is simple but I've tried everything I know and can't get anything to work in IE of FireFox.

I've reverted back to my original CSS hoping someone can help me!

Here's the CSS:

body { margin: 0px; padding: 0px; text-align: center; background-color:#CCCCCC; } #wrapper { background: #FFFFFF; margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */ border: 0px solid #000000; text-align: left; /* this overrides the text-align: center on the body element. */ padding: 0px; width: 700px; height:600px; position:relative; } .header { margin: 0px; padding: 0px; } .mainText { margin:0px; padding:0px; width:475px; border: 0px solid #000000; position:absolute; left:220px; top:200px; height:auto; } .mainTitle { font-family: Arial, Helvetica, sans-serif; font-size: 22px; font-style: italic; font-weight: bold; height:50px; color: #0000FF; } .ofYourArea { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px; font-weight: bold; color: #ffffff; margin: 0px; border: 0px; padding: 0; text-align: left; position:absolute; left:160px; top:115px; } .forAdvertisingCall { margin: 0px; border: 0px; padding: 0; text-align: left; position:absolute; left:500px; top:130px; } .advertisingPhoneNumber { margin: 0px; border: 0px; width: 182px; padding: 0; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-style: italic; font-weight: bold; position:absolute; left:500px; top: 145px; } .nav { width:190px; padding: 3px; height:200px; position:absolute; } .links { background-color: #fffbfc; width: 174px; border: 1px ridge #CCCCCC; height: 20px; font-family: Helvetica, sans-serif; font-size: 13px; text-align: center; padding-top: 4px; font-weight: bold; margin-bottom: 3px; } .links:hover { background-color: #FFFFFF; width: 174px; border: 1px ridge #CCCCCC; height: 20px; font-family: Helvetica, sans-serif; font-size: 13px; text-align: center; padding-top: 4px; font-weight: bold; margin-bottom: 3px; background-image: url(images/mouseover_button.jpg); background-repeat: repeat-y; } .footer { background-color: #64768f; height: 50px; width: 700px; bottom: 0; position:absolute; text-align: center; } a.footerLinks { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #FFFFFF; text-decoration: underline; padding-top:30px; } #popupbox{ margin: 0; margin-left: 30%; /* This gets it relatively center on the screen */ margin-right: 30%; /* This gets it relatively center on the screen */ margin-top: 230px; /* Makes it a little off the top of the screen */ padding-top: 10px; /* Make the text not touching the top on the login box */ width: 20%; /* For centering it on the screen */ height: 150px; /* The height of the login box */ position: absolute; /* Makes sure its absolute so it doesn't dock with everything else */ background: #FBFBF0; /* Login Box background color. Change this if desired. */ border: solid #000000 2px; /* Makes a black border around the login box */ z-index: 9; font-family: arial; visibility: hidden; }

Any help is so appreciated!

Thank you.

Triumph (not verified)
Anonymous's picture
Guru

I guess it's because your

I guess it's because your wrapper is 600px high so that's where it stops.

ts10sc
Offline
Regular
Last seen: 13 years 34 weeks ago
Timezone: GMT-6
Joined: 2008-01-22
Posts: 12
Points: 0

Thanks, but I tried that. I

Thanks, but I tried that. I made it 100%, I deleted it, I set it min-height:600px;, I made it auto and nothing worked. BTW, here's the HTML:

Tidbits - The Neatest Little Paper Ever Read
For Advertising Call
<?php echo $_SESSION[userData]["territory_phone"]; ?>
<?php print($_SESSION[userData]["territory_name"]); ?>
<? print($_SESSION[userData]["webpage_title"]); ?>
<? print($_SESSION[userData]["webpage_content"]); } ?>



Thanks. I HATE it when something just doesn't make sense to me! Smile

ts10sc
Offline
Regular
Last seen: 13 years 34 weeks ago
Timezone: GMT-6
Joined: 2008-01-22
Posts: 12
Points: 0

Do you think that I may have

Do you think that I may have to go back to a table design to do this? I'm shocked, but I can't find any way even through searches and multiple forum posts.

Razer
Razer's picture
Offline
Enthusiast
Thamel
Last seen: 11 years 19 weeks ago
Thamel
Timezone: GMT+5.75
Joined: 2007-07-01
Posts: 94
Points: 5

you donot need to go back in

you donot need to go back in tabel design. I think U could get reference from this site http://www.icn.com.np/vander

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

It's not making sense

It's not making sense because you have yet to fully understand how CSS positional properties work.

We state time and time again not to use position:absolute for laying out the main page framework, this is the reason. You will have to rethink your CSS properties and loose the absolute statements; floats and static position are how one creates a two column layout.

There is a sticky post on the perils and pitfalls of position:absolute that will explain the problem.

You also need to correct your markup errors such as unquoted token values and deprecated/removed styling attributes.

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

ts10sc
Offline
Regular
Last seen: 13 years 34 weeks ago
Timezone: GMT-6
Joined: 2008-01-22
Posts: 12
Points: 0

I had a feeling it might be

I had a feeling it might be something like that (my lack of knowledge) however I followed several CSS tutorials and a CSS book to get to where I'm at! It appears there are problems all over the place between browers and people going back and forth on how to design something. I wonder if there are any two people who agree!

So, to get my <div>s where they have to appear on the page, and I can't use Abolsute (within a Relational #wrapper) what do I have to do??

Thanks for your time.

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

I'm afraid to say that it

I'm afraid to say that it will always be the case that there are more people writing rubbish on the subject than there are that know what they are talking about it's the nature of the web , there are even some classic guides that demonstrate simple layouts using absolute position elements, they don't though explain the possible problems.

As for agreement, yes there is a general consensus that columnar layouts are achieved using floats, all the best work on the subject of these style of layouts has and do use floats.

You are not prevented from using absolute as long as you understand how it works, and as a child of positioned flowed elements it has a great many uses.

Have you found that thread about using pos absolute?

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

ts10sc
Offline
Regular
Last seen: 13 years 34 weeks ago
Timezone: GMT-6
Joined: 2008-01-22
Posts: 12
Points: 0

Thank you for your help. I

Thank you for your help. I haven't seen the thread. Since I have to now re-write this by Monday PM can you direct me to a website, thread or directions using floats. Otherwise I will have to revert back to tables that I was so desperately trying to get away from.

Thank you again.

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

Given what you have try this

Given what you have try this approach:

Remove the absolutes from #nav and #text-content(sic) float the #nav left
remove any width from text-content and just give it a left margin wide enough to clear the left #nav width. for the footer you can probably get away with pos:absolute but give the wrapper a position relative to provide a positional context for the footer. In order that the text of content or #nav doesn't hide behind the footer give both a bottom padding equal to plus a little of the footer height this should keep the text away from the footer, both content and nav dictate the height of wrapper pushing it down as necessary the footer should then always place itself to the bottom of #wrapper. #wrapper will need overflow: hidden in order to contain any floated children, IE might need a hasLayout trigger for the same purpose such as display:inline block which you would then reset to block on a following duplicate ruleset.

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

Triumph (not verified)
Anonymous's picture
Guru

Sorry that I missed the

Sorry that I missed the absolute positioning problem. I just took a quick look and called out the first thing I noticed. Apologies.

ts10sc
Offline
Regular
Last seen: 13 years 34 weeks ago
Timezone: GMT-6
Joined: 2008-01-22
Posts: 12
Points: 0

Hugo: Thank you so much. You

Hugo: Thank you so much. You probably can't imagine how grateful I feel your your persistant help!

I have made the changes with a couple of questions:

1) In IE my footer disappears & the overflow is truly hidden, my text disappears instead of allowing a scroll bar when too long

2) In FireFox the overflow disappears here as well, but the footer exists.

3) Can you explain "IE might need a hasLayout trigger for the same purpose such as display:inline block which you would then reset to block on a following duplicate ruleset." - I don't understand what that means to do.

Here's the updated site:
http://publisher.tidbitsweekly.net/

Thank you again!!

ts10sc
Offline
Regular
Last seen: 13 years 34 weeks ago
Timezone: GMT-6
Joined: 2008-01-22
Posts: 12
Points: 0

Actually, I think I figured

Actually, I think I figured it out! I noticed my #wrapper had height set to 600px. I changed that to min-height and it works fine.

Will this work in other recent IE browsers? I don't have any but the latest to test on. Is there a test website that shows what my site would look like in all major browsers and versions?

Thank you so much. God bless you!

ts10sc
Offline
Regular
Last seen: 13 years 34 weeks ago
Timezone: GMT-6
Joined: 2008-01-22
Posts: 12
Points: 0

Oops

Hopefully LAST TWO questions Smile

1) How do I get the footer to dock at the bottom of the #wrapper? I noticed that if my mainText is not at least 600px worth of height the footer comes up!

2) I have an admin box that starts hidden and becomes visible when a user clicks the "Admin Login" link at the bottom. As of right now its position is fixed but if the user has to scroll way down to click on the link, they have to scroll back up to see the login box. Can I have the float in the middle of the screen regardless of where the scrolling is? Just have it float even if the person scrolls up or down so that it stays virtually in the middle?

Thank you!

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

If you want a min height to

If you want a min height to the page then I wouldn't set it on the #wrapper instead set it on the content div which will in turn expand the height of the #wrapper, then the footer should sit to the bottom.

Rather than left padding on content use margin-left and loose the left and top positional offsets

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

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

For the second question you

For the second question you could position the login box 'fixed' then it stays where placed relative to the viewport irrespective of where the body scrolls to, doesn't work in IE6 though.

Have a look into jQuery 'thickbox' for a different method of doing these sorts of boxes, I've had to use them recently for an admin backend cos people seem to love the effect but make sure that they degrade to something usable if scripting disabled

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

ts10sc
Offline
Regular
Last seen: 13 years 34 weeks ago
Timezone: GMT-6
Joined: 2008-01-22
Posts: 12
Points: 0

Hugo, I have setup jQuery

Hugo, I have setup jQuery and it works great. I love it. Thanks for the recommendation!

Another quesiton, maybe you can help here. I have a visiblity:hidden <div> and when someone clicks a radio button it is to appear however, right now, my text is still spaced out where the hidden should be. Hard to explain...Here's an example:

Data1 --Hidden Div here




Data2 --Hidden Div here


Data3 --Hidden Div here



Data4 --Hidden Div here

...saving room for the hidden <div>. I want it to show up as

Data1
--Hidden Div here
Data2
--Hidden Div here
Data3
--Hidden Div here
Data4
--Hidden Div here

...and only spacing down when Data1 or 2, etc. is clicked on. Does that make sense?

Thanks!

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

Difficult to suggest a

Difficult to suggest a solution based on the example but it sounds as though you want to show/hide fieldsets(as a useful container to work on)jQuery will do this using it's .hide / .show or .slideDown() functions you should be able to find examples in the plugins listings

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