Sent by Allie Emigh-Carr on 26 May 2004 17:05
Thanks for all the helpful advice. I've made a bunch of changes (including the removal of font
tags) and still have a few issues.
http://libraries.ucsd.edu/services/gettingstarted/test/twocol.html
Style sheet:
http://libraries.ucsd.edu/services/gettingstarted/test/twocol.css
One, is that in Mozilla, the content in #right isn't responding to any left margins or padding. In
IE, it's fine.
The other is that in Mozilla, the left column is longer than the right, at the bottom, so it's
jagged.
Thanks
>>> Zoe Gillenwater [EMAIL-REMOVED]> 05/25/04 05:09AM >>>
Allie Emigh-Carr wrote:
>I'm having a few different sets of problems with this page:
>
>http://libraries.ucsd.edu/services/gettingstarted/test/twocol.html
>Style sheet:
>http://libraries.ucsd.edu/services/gettingstarted/test/twocol.css
>
>Here are some of my problems:
>
>Mozilla/Netscape:
>1. The left column should sit right underneath the nav bar, without the white space; the yellow
menu should also sit right on the blue, without the white line above it.
>2. Also, there should be no white line above the nav bar.
>
All of these problems are due to the fact that your ul inside
#navcontainer is floated. This means that #navcontainer acts as if
there is no content inside it, and your subsequent divs as well, so your
ul#navlist is actually overlapping #right. The white line you see if
actually the top of #right hanging out over the top of the nav. To fix
this, add a clearing div within #navcontainer but after the ul. This
will force #navcontainer to contain the ul, making all subsquent divs
start after #navcontainer.
If you want your content divs to sit flush against the nav, you need to
zero out the default margin on the ul. You also need to get rid of the
top margin on the h1 inside #right, because it is bleeding out. If you
want #right to sit right up against the nav but not the h1 within it,
use top padding instead of top margin.
Here is the CSS I added:
...clear {
clear: both;
height: 0;
margin: 0;
font-size: 1px;
line-height: 0;
}
#navlist {
margin: 0;
}
#right h1 {
margin-top: 0;
padding-top: 10px; /* whatever you want */
}
And then added this within #navcontainer at the end:
<div class="clear"> </div>
>
>IE:
>I want to remove the space between the two columns.
>
Don't we all? :-)
IE automatically adds 3 pixels of space between a float and its adjacent
content. You need to add this rule to pull #right back over beside #left:
/* hide from MacIE \*/
#left{
margin-right: -3px;
}
/* end hide */
>In both browsers, I would like the footer to be at the bottom of the browser screen, and have both
columns extend too. If I use pixels, it gets closer, but I would rather use percentages. When I
specify height: 100%, it does 100% of the content, not of the screen.
>
You need to add a clear to your footer to make sure it stays beneath
your columns. Then, if you want it to be at the bottom of the viewport,
check out the links on this page for ideas:
http://css-discuss.incutio.com/?page=FooterInfo
>Also, if you have any other comments on my style sheet, I would welcome them.
>
Your XHTML has a lot of mistakes in it -- in fact, it's really HTML.
Run it through the validator to see and fix. Or, just change to an HTML
doctype, and that will fix a bunch of your problems at once (though
still not all).
You have two h1's on your page -- you should only have one, for the
document title.
You're going to get rid of those font tags, right? :-)
Zoe
--
Zoe M. Gillenwater
Design Specialist
Highway Safety Research Center
http://www.hsrc.unc.edu
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
