[css-d] float problem--repost
Hello,
I'm reposting my question from a few days ago.
Truly desperate now. Can anyone tell me why
this works at 800 x 600 but breaks at 1024 X 768
in Firefox 1.04 and Netscape 6 unless the width of #inner is reduced to 80%
(but then that breaks at 800 x 600)? What I want is for #navcontainer to float
left but it's floating to the far right instead. Layout is based on one of
Doug Livingstone's 3-column
inventions. #outer and #inner are wrapped in a
container div. The columns are intended to be different colors but on this
particular page they're all #fff (by design).
Here are the URLs--but my mail program will probably split them onto 2 lines
and underline only the first line. Please watch out for the truncated URLs.
www.rx.uga.edu/main/home/redesign/annual_giving.html
www.rx.uga.edu/main/home/redesign/annual.css
---code sample begins---
#outer {
border-left: 227px solid #fff; /*left column background */
border-right: 140px solid #fff; /*right column background */
background-color: #fff; /*center column background */
}
#inner {
margin: 0;
width: 100%;
}
#leftnav {
width: 227px;
margin-left: -227px;
float: left;
position: relative;
z-index: 10;
}
#navcontainer {
background: #fff;
float: left;
width: 126px;
height: auto;
margin: 8px 0 0 4px;
padding: 4px;
border: 1px solid silver;
}
#navcontainer ul {
list-style-type: none;
margin: 0 4px;
padding: 0;
}
#navcontainer li {
background-color: #fff;
padding-bottom: 4px;
color: #333;
font: 11px Verdana, Arial, Helvetica, sans-serif;
white-space: nowrap;
}
#navcontainer a {
background-color: #fff;
color: #333;
border-bottom: 1px dotted silver;
}
#navcontainer a:link, #navcontainer a:visited {
background: transparent;
color: #333;
text-decoration: none;
}
#navcontainer a:hover {
background: transparent;
color: #99;
text-decoration: none;
}
.here {
background: transparent;
color: #99;
text-decoration: underline;
}
---code sample ends---
If anyone can help, I'd really appreciate it.
Thanks!
Jeanne
Jeanne Prine, Webmaster
University of Georgia
College of Pharmacy
[EMAIL PROTECTED]
phone 706-542-5354
fax 706-542-5269
__
css-discuss [EMAIL PROTECTED]
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/
Re: [css-d] float problem--repost
Jeanne Prine wrote:
Hello,
I'm reposting my question from a few days ago.
Truly desperate now. Can anyone tell me why
this works at 800 x 600 but breaks at 1024 X 768
in Firefox 1.04 and Netscape 6 unless the width of #inner is reduced to 80%
(but then that breaks at 800 x 600)? What I want is for #navcontainer to float
left but it's floating to the far right instead. Layout is based on one of
Doug Livingstone's 3-column
inventions. #outer and #inner are wrapped in a
container div. The columns are intended to be different colors but on this particular page they're all #fff (by design).
Here are the URLs--but my mail program will probably split them onto 2 lines and underline only the first line. Please watch out for the truncated URLs.
www.rx.uga.edu/main/home/redesign/annual_giving.html
www.rx.uga.edu/main/home/redesign/annual.css
---code sample begins---
#outer {
border-left: 227px solid #fff; /*left column background */
border-right: 140px solid #fff; /*right column background */
background-color: #fff; /*center column background */
}
#inner {
margin: 0;
width: 100%;
}
#leftnav {
width: 227px;
margin-left: -227px;
float: left;
position: relative;
z-index: 10;
}
#navcontainer {
background: #fff;
float: left;
width: 126px;
height: auto;
margin: 8px 0 0 4px;
padding: 4px;
border: 1px solid silver;
}
#navcontainer ul {
list-style-type: none;
margin: 0 4px;
padding: 0;
}
#navcontainer li {
background-color: #fff;
padding-bottom: 4px;
color: #333;
font: 11px Verdana, Arial, Helvetica, sans-serif;
white-space: nowrap;
}
#navcontainer a {
background-color: #fff;
color: #333;
border-bottom: 1px dotted silver;
}
#navcontainer a:link, #navcontainer a:visited {
background: transparent;
color: #333;
text-decoration: none;
}
#navcontainer a:hover {
background: transparent;
color: #99;
text-decoration: none;
}
.here {
background: transparent;
color: #99;
text-decoration: underline;
}
---code sample ends---
If anyone can help, I'd really appreciate it.
Thanks!
Jeanne
Jeanne Prine, Webmaster
University of Georgia
College of Pharmacy
[EMAIL PROTECTED]
phone 706-542-5354
fax 706-542-5269
__
css-discuss [EMAIL PROTECTED]
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/
Hi Jeanne,
The error is from the width: auto; in #outer. It should be
something like:
#outer {
width: 522px;
[...]
}
Goodnight,
Kaspars
__
css-discuss [EMAIL PROTECTED]
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/
Re: [css-d] float problem--repost
Jeanne Prine wrote:
Hello,
I'm reposting my question from a few days ago.
Truly desperate now. Can anyone tell me why
this works at 800 x 600 but breaks at 1024 X 768
in Firefox 1.04 and Netscape 6 unless the width of #inner is reduced to 80%
(but then that breaks at 800 x 600)? What I want is for #navcontainer to float
left but it's floating to the far right instead. Layout is based on one of
Doug Livingstone's 3-column
inventions. #outer and #inner are wrapped in a
container div. The columns are intended to be different colors but on this particular page they're all #fff (by design).
Here are the URLs--but my mail program will probably split them onto 2 lines and underline only the first line. Please watch out for the truncated URLs.
www.rx.uga.edu/main/home/redesign/annual_giving.html
www.rx.uga.edu/main/home/redesign/annual.css
---code sample begins---
#outer {
border-left: 227px solid #fff; /*left column background */
border-right: 140px solid #fff; /*right column background */
background-color: #fff; /*center column background */
}
#inner {
margin: 0;
width: 100%;
}
#leftnav {
width: 227px;
margin-left: -227px;
float: left;
position: relative;
z-index: 10;
}
#navcontainer {
background: #fff;
float: left;
width: 126px;
height: auto;
margin: 8px 0 0 4px;
padding: 4px;
border: 1px solid silver;
}
#navcontainer ul {
list-style-type: none;
margin: 0 4px;
padding: 0;
}
#navcontainer li {
background-color: #fff;
padding-bottom: 4px;
color: #333;
font: 11px Verdana, Arial, Helvetica, sans-serif;
white-space: nowrap;
}
#navcontainer a {
background-color: #fff;
color: #333;
border-bottom: 1px dotted silver;
}
#navcontainer a:link, #navcontainer a:visited {
background: transparent;
color: #333;
text-decoration: none;
}
#navcontainer a:hover {
background: transparent;
color: #99;
text-decoration: none;
}
.here {
background: transparent;
color: #99;
text-decoration: underline;
}
---code sample ends---
If anyone can help, I'd really appreciate it.
Thanks!
Jeanne
Jeanne Prine, Webmaster
University of Georgia
College of Pharmacy
[EMAIL PROTECTED]
phone 706-542-5354
fax 706-542-5269
__
css-discuss [EMAIL PROTECTED]
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/
Hi Jeanne,
One more thing to add. If this
http://www.redmelon.net/tstme/3cols2/ is the layout you
are trying to achieve (with floating central column) I
suggest you to use the code on that site. Yours is very
messy and there are tags like .bold which do the strong
thing. I mean, the site is okei, but you could make the
code much more cleaner (and floating middle column, to add).
Best regards,
Kaspars
__
css-discuss [EMAIL PROTECTED]
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/
