14 replies [Last post]
Zach85
Zach85's picture
Offline
newbie
Last seen: 9 years 11 weeks ago
Timezone: GMT-4
Joined: 2012-09-07
Posts: 9
Points: 10

Site is: http://zach-php.host-ed.me/obc2013/ just for the sake of getting help. This is not the actual web address for this site.

I'm doing a site for my town's bicentennial celebration that is coming up next year. I offered to do it for free for sentimental reason, so I would appreciate if any of you can give me any help whatsoever. I've been doing CSS tableless sites for about a year or two now and do come across a new problem with every new site I work on.

There is this blank space at the bottom of the page and I know it's because the main content DIV I had to set the top to a negative number in CSS. Reason for this is because the links and the main content are both set to relative positioning, and the links would be right above of the content if I don't use "left" and "top" to position the content better.

I have done this for other sites and never had this problem before. I can't remember how to and I don't have access to the coding for them (since they are on my other computer that is currently out of order). I'm sure I've set the "position" differently for the top banner/logo, links and main content, and some of the sites even had a bottom copyright footer.

Any help would be appreciated. The layout I'm just messing around with for now with the colors, text, etc. but I wanted to see if I can get rid of that bottom space first before going any further. And then content is bordered just so you can see where it starts and end, the border won't be there when the page actually goes live.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Never, and by never, I mean

Never, and by never, I mean not ever, set position without a clear and compelling reason. As you've seen, it leads to troubles if your understanding is not complete.

To start, simply float the left column and set the #content container to a new block formatting context with the overflow property. Notice that I delete the width on #content. It will take care of itself if you let it. Likewise the height.

#links {
    border-color: black;
    border-left: 2px solid black;
    border-radius: 5px 5px 5px 5px;
    border-right: 2px solid black;
    border-style: solid;
    border-width: 10px 2px;
    float: left;
    margin: 0 15px;
    width: 150px;
    }
 
#content {
    border: thin solid black;
    color: blue;
    overflow: hidden;
    }

A menu is by definition a list. You should code it as such. Likewise, the text in #content should be marked as p elements, the root text tag. Don't use br tags to delimit paragraphs.

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.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 weeks 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi Zach, If I was you I would

Hi Zach,
If I was you I would start from the beginning.

Replace:

<html>
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

With:
<!DOCTYPE html>
<html>

Then get rid of the <center> tags and use margin:0 auto to center horizontally.
Remember values other then 0 need a unit (px, %, em ...)

You have plenty of mistakes in your stylesheet, make sure you validate your HTML and Styles.

Zach85
Zach85's picture
Offline
newbie
Last seen: 9 years 11 weeks ago
Timezone: GMT-4
Joined: 2012-09-07
Posts: 9
Points: 10

gary.turner wrote: Never, and

gary.turner wrote:

Never, and by never, I mean not ever, set position without a clear and compelling reason. As you've seen, it leads to troubles if your understanding is not complete.

To start, simply float the left column and set the #content container to a new block formatting context with the overflow property. Notice that I delete the width on #content. It will take care of itself if you let it. Likewise the height.

#links {
    border-color: black;
    border-left: 2px solid black;
    border-radius: 5px 5px 5px 5px;
    border-right: 2px solid black;
    border-style: solid;
    border-width: 10px 2px;
    float: left;
    margin: 0 15px;
    width: 150px;
    }
 
#content {
    border: thin solid black;
    color: blue;
    overflow: hidden;
    }

A menu is by definition a list. You should code it as such. Likewise, the text in #content should be marked as p elements, the root text tag. Don't use br tags to delimit paragraphs.

cheers,

gary

Hi Gary. Thank you so much for what you've suggested. It's working good for Firefox, however IE is another story.

In Firefox, it will push the content over and line up perfectly down to the bottom of the page. However, in Internet Explorer, it does push the top part of content over, but once it gets below the link navigation bar, it then extends the full length of the container (i.e. the text starts just below the navigation).

I don't have time to upload all of this to the server as I have to leave very soon for work, but I hope this is enough of an explanation for you to understand what I'm saying. When I googled this problem, it seems to be a known problem that IE treats Overflow as AUTO, and not HIDDEN in this situation. I could be wrong though...

Thanks again.

Zach85
Zach85's picture
Offline
newbie
Last seen: 9 years 11 weeks ago
Timezone: GMT-4
Joined: 2012-09-07
Posts: 9
Points: 10

Zach85 wrote:gary.turner

disregard this post...

Zach85
Zach85's picture
Offline
newbie
Last seen: 9 years 11 weeks ago
Timezone: GMT-4
Joined: 2012-09-07
Posts: 9
Points: 10

Tony wrote:Hi Zach,If I was

Tony wrote:

Hi Zach,
If I was you I would start from the beginning.

Replace:

<html>
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

With:
<!DOCTYPE html>
<html>

Then get rid of the <center> tags and use margin:0 auto to center horizontally.
Remember values other then 0 need a unit (px, %, em ...)

You have plenty of mistakes in your stylesheet, make sure you validate your HTML and Styles.

Tony, That DOCTYPE suggestion screwed up my page even more for some reason. I forgot I had DOCTYPE in there (as I was trying different things). I got rid of the DOCTYPE for now and the page is back to how it was before I did the change you suggested.

I did remove the <center> and did the Margin thing as suggested. Forgot to change that myself.

Thanks

- Zach

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Hurry home :)

Zach wrote:

However, in Internet Explorer, it does push the top part of content over, but once it gets below the link navigation bar, it then extends the full length of the container (i.e. the text starts just below the navigation).

I don't have time to upload all of this to the server as I have to leave very soon for work …

In which IE version? As of IE7, {overflow: hidden;} does create a new block formatting context. So, the issue is that 1) you're testing in v6, an obsolete browser, 2) your coding is otherwise erroneous, or 3) you're in quirks mode (see Tony's post re doctype). In quirks mode, IE acts as if it were brain-dead.

When you upload your changes, rename the file to reflect its version, e.g. "OrwigsburgBicentennialCelebration2.htm". Notice I removed the spaces. You may be using Windows, but the web runs on *nix, which doesn't allow unescaped spaces; and your server is running *nix. I am waiting for your new page, because 1) I need to see your exact coding (my edits may not reflect your edits), 2) I really hate trying to debug in IE because of its poor, relative to Firefox, tools, and my lack of skills with those poor tools.

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.

Zach85
Zach85's picture
Offline
newbie
Last seen: 9 years 11 weeks ago
Timezone: GMT-4
Joined: 2012-09-07
Posts: 9
Points: 10

gary.turner wrote: Zach

gary.turner wrote:
Zach wrote:

However, in Internet Explorer, it does push the top part of content over, but once it gets below the link navigation bar, it then extends the full length of the container (i.e. the text starts just below the navigation).

I don't have time to upload all of this to the server as I have to leave very soon for work …

In which IE version? As of IE7, {overflow: hidden;} does create a new block formatting context. So, the issue is that 1) you're testing in v6, an obsolete browser, 2) your coding is otherwise erroneous, or 3) you're in quirks mode (see Tony's post re doctype). In quirks mode, IE acts as if it were brain-dead.

When you upload your changes, rename the file to reflect its version, e.g. "OrwigsburgBicentennialCelebration2.htm". Notice I removed the spaces. You may be using Windows, but the web runs on *nix, which doesn't allow unescaped spaces; and your server is running *nix. I am waiting for your new page, because 1) I need to see your exact coding (my edits may not reflect your edits), 2) I really hate trying to debug in IE because of its poor, relative to Firefox, tools, and my lack of skills with those poor tools.

cheers,

gary

Hi Gary,

here's the updated page: http://zach-php.host-ed.me/obc2013/updates.php
This page reflects the updates you've given me.

I primarily use Firefox for everything. But, I know there are still plenty of people out there using IE because it comes with Windows unfortunately. The IE on my computer is IE8. I'm running XAMPP on my computer (Windows XP Pro SP3) and using the server above for sharing with others until I'm ready for a domain name.

And I agree with you on IE. Seems like it's the only browser running behind Firefox and other browsers with proper interpretation of CSS and other languages.

Thanks.

- Zach

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Compare line by line to your

Compare line by line to your markup. I've changed both the html and the css. Note, especially that I added the DTD per Tony's suggestion, so that browsers render in standards mode. I removed the compatibility meta thingy. No new document ever needs that. It's for older documents that were not written to the standards. It tells IE9 to act stupid.
html

<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Orwigsburg Bicentennial Celebration</title>
    <link href="zach85-2_files/stylesheet.css" rel="stylesheet" type="text/css">
  </head>
 
  <body>
    <div id="container">
      <div id="top">
	<img src="zach85-2_files/top.jpg">
      </div>
 
      <ul id="links">
	<li><a href="index.php">Home</a></li>
 
	<li><a href="history.php">History</a></li>
 
	<li><a href="events.php">Events</a></li>
 
	<li><a href="sponsorship.php">Sponsorship Info</a></li>
 
	<li><a href="contact.php">Contact Info</a></li>
      </ul>
 
      <!--
	  <div id="zcs">
	    <img src="images/zcs-logo.gif">
	  </div>
	  -->
 
      <div id="content">
 
	<p>Welcome to the Official Website for the Orwigsburg Borough
	  Bicentennial Celebration.</p>
 
	<p>This website is currently under construction as we continue
	  to plan the celebration to take place in the year 2013.  Please come
	  back later for more updates!</p>
 
	<p>
	  testing<br>
	  testing<br>
	  … <br>
	  testing<br>
	  testing<br>
	</p>
      </div>
    </div>
  </body>
</html>

css
body {
    background-color: #a5a5a5;
    text-align: center;
    margin:  0;
}
 
#container {
    margin: 0 auto;
    text-align: left;
    background-color:  #ffffff;  /*don't forget the octothorpe (#)*/
    width: 960px;
    border: mediun aqua solid;
}
 
#top img {
    display: block;  /*This is optional. 
		       See <a href="http://gtwebdev.com/workshop/gaps/image-gap.php
" rel="nofollow">http://gtwebdev.com/workshop/gaps/image-gap.php
</a>		       You can use margin to control the gap if need to.*/
}
 
#links {
    border-color:  black;
    border-left:  2px solid black;
    border-radius:  5px 5px 5px 5px;
    border-right:  2px solid black;
    border-style:  solid;
    border-width:  10px 2px;
    float: left;
    list-style: none;
    margin:  0 1em;
    padding: 0;
    width:  150px;
}
 
#links li a {
    color: #000000;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    display: block;
    font-size: 15px;
    font-weight: bold;
    font-family: Corbel;
    text-decoration: none;
    border-width: 0 2 2 2;
    border-style: hidden solid solid solid;
}
 
#content {
    border:  thin solid black;
    color:  blue;
    margin-right: 1em;
    overflow: hidden;
}

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.

Zach85
Zach85's picture
Offline
newbie
Last seen: 9 years 11 weeks ago
Timezone: GMT-4
Joined: 2012-09-07
Posts: 9
Points: 10

gary.turner wrote:Compare

gary.turner wrote:

Compare line by line to your markup. I've changed both the html and the css. Note, especially that I added the DTD per Tony's suggestion, so that browsers render in standards mode. I removed the compatibility meta thingy. No new document ever needs that. It's for older documents that were not written to the standards. It tells IE9 to act stupid.
html

<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Orwigsburg Bicentennial Celebration</title>
    <link href="zach85-2_files/stylesheet.css" rel="stylesheet" type="text/css">
  </head>
 
  <body>
    <div id="container">
      <div id="top">
	<img src="zach85-2_files/top.jpg">
      </div>
 
      <ul id="links">
	<li><a href="index.php">Home</a></li>
 
	<li><a href="history.php">History</a></li>
 
	<li><a href="events.php">Events</a></li>
 
	<li><a href="sponsorship.php">Sponsorship Info</a></li>
 
	<li><a href="contact.php">Contact Info</a></li>
      </ul>
 
      <!--
	  <div id="zcs">
	    <img src="images/zcs-logo.gif">
	  </div>
	  -->
 
      <div id="content">
 
	<p>Welcome to the Official Website for the Orwigsburg Borough
	  Bicentennial Celebration.</p>
 
	<p>This website is currently under construction as we continue
	  to plan the celebration to take place in the year 2013.  Please come
	  back later for more updates!</p>
 
	<p>
	  testing<br>
	  testing<br>
	  … <br>
	  testing<br>
	  testing<br>
	</p>
      </div>
    </div>
  </body>
</html>

css
body {
    background-color: #a5a5a5;
    text-align: center;
    margin:  0;
}
 
#container {
    margin: 0 auto;
    text-align: left;
    background-color:  #ffffff;  /*don't forget the octothorpe (#)*/
    width: 960px;
    border: mediun aqua solid;
}
 
#top img {
    display: block;  /*This is optional. 
		       See <a href="http://gtwebdev.com/workshop/gaps/image-gap.php
" rel="nofollow">http://gtwebdev.com/workshop/gaps/image-gap.php
</a>		       You can use margin to control the gap if need to.*/
}
 
#links {
    border-color:  black;
    border-left:  2px solid black;
    border-radius:  5px 5px 5px 5px;
    border-right:  2px solid black;
    border-style:  solid;
    border-width:  10px 2px;
    float: left;
    list-style: none;
    margin:  0 1em;
    padding: 0;
    width:  150px;
}
 
#links li a {
    color: #000000;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    display: block;
    font-size: 15px;
    font-weight: bold;
    font-family: Corbel;
    text-decoration: none;
    border-width: 0 2 2 2;
    border-style: hidden solid solid solid;
}
 
#content {
    border:  thin solid black;
    color:  blue;
    margin-right: 1em;
    overflow: hidden;
}

cheers,

gary

Hi Gary,

I finally got around to working on the site again today. The website is now looking the way it should, I will upload it to the server for you to see. The only change I made was the top few lines as you suggested in the index.php file (added the DOCTYPE stuff). The content div lined up perfectly but then I noticed in IE the background of the container would not be white as I wanted it to, but in Firefox it would be there. I went into the CSS and noticed I didn't have "#" in front of "FFFFFF" for the background color of the container, so I added the "#" and it worked perfectly.

I can't tell you how thankful I am. I still consider myself a "newbie" to CSS as I'm still learning it, so thanks for all of your help. I really do appreciate it! I'll be sure to mention that I got help from you at the next Bicentennial Committee meeting, as this wouldn't have been possible without you!

Thanks again!

Sincerely,
Zach

P.S. When I have the website done and ready to be live with it's own domain name, I'll be sure to send you a private message with the link so you could check it out and let me know what you think of the final product. Thanks again!

Zach85
Zach85's picture
Offline
newbie
Last seen: 9 years 11 weeks ago
Timezone: GMT-4
Joined: 2012-09-07
Posts: 9
Points: 10

Server down

Gary, I can't upload the updates right now. I am unable to log into the control panels for the server, I'm assuming they're doing some maintenance or something. I will try again within the next day or two.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

:-D

From my previous:

#container {
    margin: 0 auto;
    text-align: left;
    background-color:  #ffffff;  /*don't forget the octothorpe (#)*/
    width: 960px;
    border: mediun aqua solid;
}

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.

Zach85
Zach85's picture
Offline
newbie
Last seen: 9 years 11 weeks ago
Timezone: GMT-4
Joined: 2012-09-07
Posts: 9
Points: 10

Hi Gary, I just noticed, for

Hi Gary,

I just noticed, for some reason the min-height no longer works. I got rid of all the lines of "testing" and the white background only went down as far as the content text, but not below the links. Check it out if you want to.

Link: http://zach-php.host-ed.me/obc2013/

However, I'm sure I'll have enough content on all of the pages to extend it close to or beyond 100% of the page. At least I'm hoping for that.

I'm probably done for day with the website and will continue it tomorrow to get most of the pages ready to send to the committee. If I don't have enough lines on any of the pages, I'll let you know. Thanks again!

- Zach

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

I removed that property. It

I removed that property. It is generally a poor practice, imo, to set height. Let your content control that factor. Unlike with print, you can have no previous knowledge of the browser's window or aperture size, so why bother? If you have little content, making its container bigger doesn't help.

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.

Zach85
Zach85's picture
Offline
newbie
Last seen: 9 years 11 weeks ago
Timezone: GMT-4
Joined: 2012-09-07
Posts: 9
Points: 10

Gotcha

gary.turner wrote:

I removed that property. It is generally a poor practice, imo, to set height. Let your content control that factor. Unlike with print, you can have no previous knowledge of the browser's window or aperture size, so why bother? If you have little content, making its container bigger doesn't help.

cheers,

gary

If I have a page with not a large enough content, I will just use &nbsp; to extend it to include all of the left side of the container. Most of the pages, as I'm putting stuff in, does extend beyond 100% of the page. I'm just concerned about one or two pages that might not have enough.

Once I'm done, I'll send you a private message with the link so you can let me know what you think of it and give me any suggestions or comments. It would be appreciated. Thanks again!

- Zach