Re: [css-d] How to make one DIV appear at the bottom of another?
From: Erik Harris [EMAIL PROTECTED] http://www.gunlaug.no/tos/moa_8d.html Interesting. This one doesn't work at all in IE6 (at least not in IE6-Standalone), despite supposedly being a way to make fixed positioning work in IE6. Enable javascript. -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Footer with 3-column layout
Hello, I need some assistance in figuring out how to make a footer span 3 columns. The home page is the only one in which I plan to have 3 columns: http://www2.waketech.edu/~library/ http://www2.waketech.edu/%7Elibrary/ It works fine with 2 columns as in the other pages in the site: http://www2.waketech.edu/~library/borrowing.htmlhttp://www2.waketech.edu/%7Elibrary/borrowing.html The CSS file for the site can be seen at: http://www2.waketech.edu/~library/libstyle.csshttp://www2.waketech.edu/%7Elibrary/libstyle.css Thanks in advance for any assistance. Regards, Rachel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] problem getting rollover nav to function as needed.
Hi all,
I am having a problem and can't seem to see the elegant solution. I
have a simple ul list nav with rollover states. I need to have the
selected state show without any background, just white, to blend in with
the content below it.
The nav was created in CSS and didn't have this look built in and I just
can't seem to figure it out without wasting a ton of code to do it. I
have tried to have a selected or non link style so that the background
would just be white, but if the selected link is selected, then it
doesn't need a ahref tag and thus breaks the CSS function...
Any help would be greatly appreciated.
HTML :
div id=tabsE
ul
lia href=# title=Hotel OverviewspanHotel
Overview/span/a/li
lia href=# title=Room TypesspanRoom Types/span/a/li
lia href=# title=Property InfospanProperty
Info/span/a/li
lia href=# title=Good to KnowspanGood to
Know/span/a/li
lia href=# title=Link 5spanHotel Slideshow/span/a/li
/ul
/div
CSS :
#tabsE {
width: 733px;
margin: -25px 0 0 0;
padding: 0;
position: relative;
}
#tabsE ul {
margin:0;
padding:0;
list-style:none;
width:auto;
float:right;
font:bold 11px Arial,Verdana,Helvetica,sans-serif;
}
#tabsE li {
display:inline;
margin:0;
line-height:1.5em;
}
#tabsE a {
float:left;
background:url(tableftE_1.gif) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
float:left;
display:block;
background:url(tabrightE_1.gif) no-repeat right top;
padding:5px 15px 4px 6px;
color:#000;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
/* End IE5-Mac hack */
#tabsE a:hover span {
color:#FFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}
Thank you,
Cory Shubert
http://www.worldagentdirect.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] center an image horizontally inside an overflow: hidden
At 01:47 -0400 30/4/08, S. Woodside wrote: I have a div absolutely positioned with overflow: hidden, and I have an image, of unknown pixel size, displayed inside it. I wish for the image to be cropped on the left and right, and sized to fit vertically. A key element here is that I will not know in advance what the size of the image actually is. I recently asked how to center a larger image vertically and horizontally in a smaller div and received some good suggestions. Basically they all involve using the image as the *background image* of the div or another element placed inside the div. Login to view the archives, the thread starts here: http://lists.css-discuss.org/mailman/private/css-d/2008-April/subject.html#86956 Cheers Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Positioning form elements
Not being a big knowledge man of css but I would have thought you would
need, ul and li in there?
ul
lia href=index.phpHome/a/li
lia href=complete.phpBrowse All Titles/a/li
/ul
and in your css have something like
#nav ul {
margin-left: 2em;
padding-left: 0;
color: #00;
}
Andrew
[EMAIL PROTECTED] wrote:
I'm new to CSS. But I need to position four form elements in a very
thin nav bar. Here is my HTML code:
div id=nav
div id=nav_left
a href=index.phpHome/a |a href=complete.php
Browse All Titles/a | a href=author.phpAbout Author/a/div
div id=bookmarktable width=307 border=0
cellspacing=0 cellpadding=0
tr
td width=64 valign=middleBrowse by/td
td width=113 valign=middleform action= method=get
Title
select name=var size=1
option value=AA/option
option value=BB/option
option value=CC/option
option value=EE/option
option value=FF/option
option value=GG/option
option value=HH/option
option value=II/option
option value=JJ/option
option value=KK/option
option value=LL/option
option value=MM/option
option value=NN/option
option value=OO/option
option value=PP/option
option value=QQ/option
option value=RR/option
option value=SS/option
option value=TT/option
option value=UU/option
option value=VV/option
option value=WW/option
option value=XX/option
option value=YY/option
option value=ZZ/option
option value=11/option
option value=22/option
option value=33/option
option value=44/option
option value=55/option
option value=66/option
option value=77/option
option value=88/option
option value=99/option
option value=00/option
/selectinput type=image class=inputbutton
src=img/input.jpg alt= width=15 height=15
/form/tdtd width=123 valign=middleform action=
method=getDecade select name=var size=1
option value=19501950s/option
option value=19601960s/option
option value=19701970s/option
option value=19801980s/option
option value=19901990s/option
option value=20002000s/option
/selectinput type=image class=inputbutton
src=img/input.jpg alt= width=15 height=15
/form/td
/tr
/table
/div
/div
And here are the applicable styles:
#nav {
background-image: url(../img/navback.jpg);
background-repeat: no-repeat;
background-position: left top;
border: thin solid #7a8251;
height: 25px;
width: 771px;
}
#nav_left {
width: 400px;
float: left;
text-align: left;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 7px;
padding-left: 5px;
}
#bookmark {
width: 300px;
float: right;
text-align: right;
display: inline;
padding-top: 5px;
padding-right: 3px;
padding-bottom: 5px;
}
.inputbutton {
margin-right: 3px;
margin-left: 3px;
}
select {
display: inline-table;
font-size: 75%;
padding: 0px;
}
But, the form elements are sitting low and not aligning as needed. The
input buttons are sitting too high.
There is a screenshot at http://www.graiai.com/snap.jpg
This is taken in Firefox on a Mac. On IE 7, the dropdowns sit even lower.
I don't know what to do! Any ideas?
Jeremy
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Positioning form elements
Thank you, Andrew! I'll definitely try this out.
Another area of concern is with the right-side form elements. They are
not aligning properly and nothing I've tried has worked.
Any advice in solving this issue as well would be appreciated.
Jeremy
On Wed, Apr 30, 2008 at 12:05 PM, Andrew Doades [EMAIL PROTECTED] wrote:
Not being a big knowledge man of css but I would have thought you would
need, ul and li in there?
ul
lia href=index.phpHome/a/li
lia href=complete.phpBrowse All Titles/a/li
/ul
and in your css have something like
#nav ul {
margin-left: 2em;
padding-left: 0;
color: #00;
}
Andrew
[EMAIL PROTECTED] wrote:
I'm new to CSS. But I need to position four form elements in a very
thin nav bar. Here is my HTML code:
div id=nav
div id=nav_left
a href=index.phpHome/a |a href=complete.php
Browse All Titles/a | a href=author.phpAbout Author/a/div
div id=bookmarktable width=307 border=0
cellspacing=0 cellpadding=0
tr
td width=64 valign=middleBrowse by/td
td width=113 valign=middleform action= method=get
Title
select name=var size=1
option value=AA/option
option value=BB/option
option value=CC/option
option value=EE/option
option value=FF/option
option value=GG/option
option value=HH/option
option value=II/option
option value=JJ/option
option value=KK/option
option value=LL/option
option value=MM/option
option value=NN/option
option value=OO/option
option value=PP/option
option value=QQ/option
option value=RR/option
option value=SS/option
option value=TT/option
option value=UU/option
option value=VV/option
option value=WW/option
option value=XX/option
option value=YY/option
option value=ZZ/option
option value=11/option
option value=22/option
option value=33/option
option value=44/option
option value=55/option
option value=66/option
option value=77/option
option value=88/option
option value=99/option
option value=00/option
/selectinput type=image class=inputbutton
src=img/input.jpg alt= width=15 height=15
/form/tdtd width=123 valign=middleform action=
method=getDecade select name=var size=1
option value=19501950s/option
option value=19601960s/option
option value=19701970s/option
option value=19801980s/option
option value=19901990s/option
option value=20002000s/option
/selectinput type=image class=inputbutton
src=img/input.jpg alt= width=15 height=15
/form/td
/tr
/table
/div
/div
And here are the applicable styles:
#nav {
background-image: url(../img/navback.jpg);
background-repeat: no-repeat;
background-position: left top;
border: thin solid #7a8251;
height: 25px;
width: 771px;
}
#nav_left {
width: 400px;
float: left;
text-align: left;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 7px;
padding-left: 5px;
}
#bookmark {
width: 300px;
float: right;
text-align: right;
display: inline;
padding-top: 5px;
padding-right: 3px;
padding-bottom: 5px;
}
.inputbutton {
margin-right: 3px;
margin-left: 3px;
}
select {
display: inline-table;
font-size: 75%;
padding: 0px;
}
But, the form elements are sitting low and not aligning as needed. The
input buttons are sitting too high.
There is a screenshot at http://www.graiai.com/snap.jpg
This is taken in Firefox on a Mac. On IE 7, the dropdowns sit even lower.
I don't know what to do! Any ideas?
Jeremy
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Positioning form elements
Not entirely sure what you are asking here?
When I look at your screen print, it looks ok in IE.
I think something like float:right;
is what you want??
Andrew
[EMAIL PROTECTED] wrote:
Thank you, Andrew! I'll definitely try this out.
Another area of concern is with the right-side form elements. They are
not aligning properly and nothing I've tried has worked.
Any advice in solving this issue as well would be appreciated.
Jeremy
On Wed, Apr 30, 2008 at 12:05 PM, Andrew Doades [EMAIL PROTECTED] wrote:
Not being a big knowledge man of css but I would have thought you would
need, ul and li in there?
ul
lia href=index.phpHome/a/li
lia href=complete.phpBrowse All Titles/a/li
/ul
and in your css have something like
#nav ul {
margin-left: 2em;
padding-left: 0;
color: #00;
}
Andrew
[EMAIL PROTECTED] wrote:
I'm new to CSS. But I need to position four form elements in a very
thin nav bar. Here is my HTML code:
div id=nav
div id=nav_left
a href=index.phpHome/a |a href=complete.php
Browse All Titles/a | a href=author.phpAbout Author/a/div
div id=bookmarktable width=307 border=0
cellspacing=0 cellpadding=0
tr
td width=64 valign=middleBrowse by/td
td width=113 valign=middleform action= method=get
Title
select name=var size=1
option value=AA/option
option value=BB/option
option value=CC/option
option value=EE/option
option value=FF/option
option value=GG/option
option value=HH/option
option value=II/option
option value=JJ/option
option value=KK/option
option value=LL/option
option value=MM/option
option value=NN/option
option value=OO/option
option value=PP/option
option value=QQ/option
option value=RR/option
option value=SS/option
option value=TT/option
option value=UU/option
option value=VV/option
option value=WW/option
option value=XX/option
option value=YY/option
option value=ZZ/option
option value=11/option
option value=22/option
option value=33/option
option value=44/option
option value=55/option
option value=66/option
option value=77/option
option value=88/option
option value=99/option
option value=00/option
/selectinput type=image class=inputbutton
src=img/input.jpg alt= width=15 height=15
/form/tdtd width=123 valign=middleform action=
method=getDecade select name=var size=1
option value=19501950s/option
option value=19601960s/option
option value=19701970s/option
option value=19801980s/option
option value=19901990s/option
option value=20002000s/option
/selectinput type=image class=inputbutton
src=img/input.jpg alt= width=15 height=15
/form/td
/tr
/table
/div
/div
And here are the applicable styles:
#nav {
background-image: url(../img/navback.jpg);
background-repeat: no-repeat;
background-position: left top;
border: thin solid #7a8251;
height: 25px;
width: 771px;
}
#nav_left {
width: 400px;
float: left;
text-align: left;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 7px;
padding-left: 5px;
}
#bookmark {
width: 300px;
float: right;
text-align: right;
display: inline;
padding-top: 5px;
padding-right: 3px;
padding-bottom: 5px;
}
.inputbutton {
margin-right: 3px;
margin-left: 3px;
}
select {
display: inline-table;
font-size: 75%;
padding: 0px;
}
But, the form elements are sitting low and not aligning as needed. The
input buttons are sitting too high.
There is a screenshot at http://www.graiai.com/snap.jpg
This is taken in Firefox on a Mac. On IE 7, the dropdowns sit even lower.
I don't know what to do! Any ideas?
Jeremy
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Positioning form elements
In the screenshot that is linked, you'll notice that the vertical
alignment of the two dropdown menus and two input buttons is
incorrect. They are at the right side.
I've applied a tag style to the select tag. This isn't working. And
there is a class style on the input buttons. Which is not working
either.
Float right works for horizontal alignment and that is how I've got
the forms at right set up. It's the vertical alignment that is keeping
me up at night.
Jeremy
On Wed, Apr 30, 2008 at 12:23 PM, Andrew Doades [EMAIL PROTECTED] wrote:
Not entirely sure what you are asking here?
When I look at your screen print, it looks ok in IE.
I think something like float:right;
is what you want??
Andrew
[EMAIL PROTECTED] wrote:
Thank you, Andrew! I'll definitely try this out.
Another area of concern is with the right-side form elements. They are
not aligning properly and nothing I've tried has worked.
Any advice in solving this issue as well would be appreciated.
Jeremy
On Wed, Apr 30, 2008 at 12:05 PM, Andrew Doades [EMAIL PROTECTED] wrote:
Not being a big knowledge man of css but I would have thought you would
need, ul and li in there?
ul
lia href=index.phpHome/a/li
lia href=complete.phpBrowse All Titles/a/li
/ul
and in your css have something like
#nav ul {
margin-left: 2em;
padding-left: 0;
color: #00;
}
Andrew
[EMAIL PROTECTED] wrote:
I'm new to CSS. But I need to position four form elements in a very
thin nav bar. Here is my HTML code:
div id=nav
div id=nav_left
a href=index.phpHome/a |a href=complete.php
Browse All Titles/a | a href=author.phpAbout Author/a/div
div id=bookmarktable width=307 border=0
cellspacing=0 cellpadding=0
tr
td width=64 valign=middleBrowse by/td
td width=113 valign=middleform action= method=get
Title
select name=var size=1
option value=AA/option
option value=BB/option
option value=CC/option
option value=EE/option
option value=FF/option
option value=GG/option
option value=HH/option
option value=II/option
option value=JJ/option
option value=KK/option
option value=LL/option
option value=MM/option
option value=NN/option
option value=OO/option
option value=PP/option
option value=QQ/option
option value=RR/option
option value=SS/option
option value=TT/option
option value=UU/option
option value=VV/option
option value=WW/option
option value=XX/option
option value=YY/option
option value=ZZ/option
option value=11/option
option value=22/option
option value=33/option
option value=44/option
option value=55/option
option value=66/option
option value=77/option
option value=88/option
option value=99/option
option value=00/option
/selectinput type=image class=inputbutton
src=img/input.jpg alt= width=15 height=15
/form/tdtd width=123 valign=middleform action=
method=getDecade select name=var size=1
option value=19501950s/option
option value=19601960s/option
option value=19701970s/option
option value=19801980s/option
option value=19901990s/option
option value=20002000s/option
/selectinput type=image class=inputbutton
src=img/input.jpg alt= width=15 height=15
/form/td
/tr
/table
/div
/div
And here are the applicable styles:
#nav {
background-image: url(../img/navback.jpg);
background-repeat: no-repeat;
background-position: left top;
border: thin solid #7a8251;
height: 25px;
width: 771px;
}
#nav_left {
width: 400px;
float: left;
text-align: left;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 7px;
padding-left: 5px;
}
#bookmark {
width: 300px;
float: right;
text-align: right;
display: inline;
padding-top: 5px;
padding-right: 3px;
padding-bottom: 5px;
}
.inputbutton {
margin-right: 3px;
margin-left: 3px;
}
select {
display: inline-table;
font-size: 75%;
padding: 0px;
}
But, the form elements are sitting low and not aligning as needed. The
input buttons are sitting too high.
There is a screenshot at http://www.graiai.com/snap.jpg
This is taken in Firefox on a Mac. On IE 7, the dropdowns sit even
lower.
I don't know what to do! Any ideas?
Jeremy
Re: [css-d] Positioning form elements
But it's not the left nav...it's the right formthis:
tr
td width=64 valign=middleBrowse by/td
td width=113 valign=middleform action= method=get
Title
select name=var size=1
option value=AA/option
option value=BB/option
option value=CC/option
option value=EE/option
option value=FF/option
option value=GG/option
option value=HH/option
option value=II/option
option value=JJ/option
option value=KK/option
option value=LL/option
option value=MM/option
option value=NN/option
option value=OO/option
option value=PP/option
option value=QQ/option
option value=RR/option
option value=SS/option
option value=TT/option
option value=UU/option
option value=VV/option
option value=WW/option
option value=XX/option
option value=YY/option
option value=ZZ/option
option value=11/option
option value=22/option
option value=33/option
option value=44/option
option value=55/option
option value=66/option
option value=77/option
option value=88/option
option value=99/option
option value=00/option
/selectinput type=image class=inputbutton
src=img/input.jpg alt= width=15 height=15
/form/tdtd width=123 valign=middleform action=
method=getDecade select name=var size=1
option value=19501950s/option
option value=19601960s/option
option value=19701970s/option
option value=19801980s/option
option value=19901990s/option
option value=20002000s/option
/selectinput type=image class=inputbutton
src=img/input.jpg alt= width=15 height=15
/form/td
/tr
/table
Adjusting the margin on the table, as you suggested, isn't going to
help as each column has a separate problem. The problem is the form
elements specifically.
Jeremy
On Wed, Apr 30, 2008 at 12:34 PM, Andrew Doades [EMAIL PROTECTED] wrote:
ok, I think you need:
td {display: line;}body {
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
td
ul
lia href=index.phpHome/a/li
lia href=complete.phpBrowse All Titles/a/li
/ul
/td
You may need to do something like this to get it to work.
Andrew
[EMAIL PROTECTED] wrote:
In the screenshot that is linked, you'll notice that the vertical
alignment of the two dropdown menus and two input buttons is
incorrect. They are at the right side.
I've applied a tag style to the select tag. This isn't working. And
there is a class style on the input buttons. Which is not working
either.
Float right works for horizontal alignment and that is how I've got
the forms at right set up. It's the vertical alignment that is keeping
me up at night.
Jeremy
On Wed, Apr 30, 2008 at 12:23 PM, Andrew Doades [EMAIL PROTECTED] wrote:
Not entirely sure what you are asking here?
When I look at your screen print, it looks ok in IE.
I think something like float:right;
is what you want??
Andrew
[EMAIL PROTECTED] wrote:
Thank you, Andrew! I'll definitely try this out.
Another area of concern is with the right-side form elements. They are
not aligning properly and nothing I've tried has worked.
Any advice in solving this issue as well would be appreciated.
Jeremy
On Wed, Apr 30, 2008 at 12:05 PM, Andrew Doades [EMAIL PROTECTED]
wrote:
Not being a big knowledge man of css but I would have thought you
would
need, ul and li in there?
ul
lia href=index.phpHome/a/li
lia href=complete.phpBrowse All Titles/a/li
/ul
and in your css have something like
#nav ul {
margin-left: 2em;
padding-left: 0;
color: #00;
}
Andrew
[EMAIL PROTECTED] wrote:
I'm new to CSS. But I need to position four form elements in a
very
thin nav bar. Here is my HTML code:
div id=nav
div id=nav_left
a href=index.phpHome/a |a href=complete.php
Browse All Titles/a | a href=author.phpAbout
Author/a/div
div id=bookmarktable width=307 border=0
cellspacing=0 cellpadding=0
tr
td width=64 valign=middleBrowse by/td
td width=113 valign=middleform action= method=get
Title
select name=var size=1
option value=AA/option
option value=BB/option
option value=CC/option
option value=EE/option
option value=FF/option
option value=GG/option
option value=HH/option
option value=II/option
option value=JJ/option
option value=KK/option
option value=LL/option
option value=MM/option
option value=NN/option
option value=OO/option
option value=PP/option
option value=QQ/option
option value=RR/option
Re: [css-d] Positioning- relative or absolute?
[css-d] Positioning- relative or absolute?
Tawnya
Thu Apr 24 03:47:10 CDT 2008
Hi list, I've been lurking like a mad fiend for awhile here and I have
to say I have found it to be very rewarding. In fact reading css-d is
my
coffee break reward! LOL
I have almost run to deadline and would like to be a bit more flexible
in the placement of the gallery and popup box. I would like to be able
to position the box relative to the gallery div, but I seem to only be
able to get it positioned relatively or absolutely to the hyperlinked
thumbnail. Every which way but where I want it. My best solution was to
place the gallery at the top of the content and position the popup
image
fixed to the page also at the top.
I also am having trouble with loading this page and crashing one of my
browsers (FF 2.0.0.14) on my machine but not on a laptop running the
same browser and OS. The page runs fine from my own HD but crashes when
live. I need to know if this is just my machine or not (I apologize in
advance if it crashes yours). I have only tested it in FF and IE6 so
far.
Any comments or critiques that could help me write better CSS are
appreciated :)
URL: http://www.closetsdoneright.com/backups/back-08.04.xx/index.htm
CSS: http://www.closetsdoneright.com/backups/back-08.04.xx/style.css
Thanks,
Tawnya.
So, I guess I scared you all off testing my page. No worries though,
found a solution at tkj Design[1] found that this code did not work to
align the popups with the gallery as I wanted.
HTML
div id=gallery
a class=pop href=#
img class=thumb alt= src=images/thumbimage1.jpg
width=86 height=50
img class=thumbpop alt= src=images/popimage1.jpg
/a
a class=pop href=#
img class=thumb alt= src=images/thumbimage2.jpg
width=86 height=50
img class=thumbpop alt= src=images/popimage2.jpg
/a
/div
CSS
#gallery {margin:20px auto;}
#gallery a.pop img.thumb {border:1px solid #000;}/* thumbnail style */
#gallery a .thumbpop {width:0; height:0; border:0px solid #fff;}/*
initial size of pop-pic */
#gallery a.pop:hover {background-color: #8c97a3;}/* pop link hover style
*/
#gallery a.pop:hover img.thumbpop {position:absolute; top:100px;
left:180px; width:auto; height:auto;}/* pop-pic hover position */
#gallery a.pop:hover img.thumbpop {padding:5px; border:1px solid
#305fbf; background-color:#fff;}/*pop-pic hover style */
But the solution was even simpler;
HTML
div id=gallery
a href=#
img alt= src=images/thumbimage1.jpg
spanimg alt= src=images/popimage1.jpg /span
/a
a href=#
img alt= src=images/thumbimage2.jpg
spanimg alt= src=images/popimage2.jpg /span
/a
/div
CSS
#gallery {position:relative; padding:5px; background-color:#fff;}
#gallery a {display:inline; padding:0px; color:#000;}
#gallery a img {border:1px solid #000;}
#gallery a:hover {background-color:transparent;} /* this is needed for
MSIE */
#gallery a span {display:none;}
#gallery a:hover span {display:inline; position:absolute; top:-250px;
left:0; padding:8px; border:1px solid #000; background-color:#fff;
z-index:50;}
[1] http://www.tjkdesign.com
Thanks :) Keep up the good work!
Tawnya.
No virus found in this outgoing message.
Checked by AVG.
Version: 7.5.524 / Virus Database: 269.23.6/1407 - Release Date:
4/30/2008 11:35 AM
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Positioning form elements
ok, I think you need:
td {display: line;}body {
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
td
ul
lia href=index.phpHome/a/li
lia href=complete.phpBrowse All Titles/a/li
/ul
/td
You may need to do something like this to get it to work.
Andrew
[EMAIL PROTECTED] wrote:
In the screenshot that is linked, you'll notice that the vertical
alignment of the two dropdown menus and two input buttons is
incorrect. They are at the right side.
I've applied a tag style to the select tag. This isn't working. And
there is a class style on the input buttons. Which is not working
either.
Float right works for horizontal alignment and that is how I've got
the forms at right set up. It's the vertical alignment that is keeping
me up at night.
Jeremy
On Wed, Apr 30, 2008 at 12:23 PM, Andrew Doades [EMAIL PROTECTED] wrote:
Not entirely sure what you are asking here?
When I look at your screen print, it looks ok in IE.
I think something like float:right;
is what you want??
Andrew
[EMAIL PROTECTED] wrote:
Thank you, Andrew! I'll definitely try this out.
Another area of concern is with the right-side form elements. They are
not aligning properly and nothing I've tried has worked.
Any advice in solving this issue as well would be appreciated.
Jeremy
On Wed, Apr 30, 2008 at 12:05 PM, Andrew Doades [EMAIL PROTECTED] wrote:
Not being a big knowledge man of css but I would have thought you would
need, ul and li in there?
ul
lia href=index.phpHome/a/li
lia href=complete.phpBrowse All Titles/a/li
/ul
and in your css have something like
#nav ul {
margin-left: 2em;
padding-left: 0;
color: #00;
}
Andrew
[EMAIL PROTECTED] wrote:
I'm new to CSS. But I need to position four form elements in a very
thin nav bar. Here is my HTML code:
div id=nav
div id=nav_left
a href=index.phpHome/a |a href=complete.php
Browse All Titles/a | a href=author.phpAbout Author/a/div
div id=bookmarktable width=307 border=0
cellspacing=0 cellpadding=0
tr
td width=64 valign=middleBrowse by/td
td width=113 valign=middleform action= method=get
Title
select name=var size=1
option value=AA/option
option value=BB/option
option value=CC/option
option value=EE/option
option value=FF/option
option value=GG/option
option value=HH/option
option value=II/option
option value=JJ/option
option value=KK/option
option value=LL/option
option value=MM/option
option value=NN/option
option value=OO/option
option value=PP/option
option value=QQ/option
option value=RR/option
option value=SS/option
option value=TT/option
option value=UU/option
option value=VV/option
option value=WW/option
option value=XX/option
option value=YY/option
option value=ZZ/option
option value=11/option
option value=22/option
option value=33/option
option value=44/option
option value=55/option
option value=66/option
option value=77/option
option value=88/option
option value=99/option
option value=00/option
/selectinput type=image class=inputbutton
src=img/input.jpg alt= width=15 height=15
/form/tdtd width=123 valign=middleform action=
method=getDecade select name=var size=1
option value=19501950s/option
option value=19601960s/option
option value=19701970s/option
option value=19801980s/option
option value=19901990s/option
option value=20002000s/option
/selectinput type=image class=inputbutton
src=img/input.jpg alt= width=15 height=15
/form/td
/tr
/table
/div
/div
And here are the applicable styles:
#nav {
background-image: url(../img/navback.jpg);
background-repeat: no-repeat;
background-position: left top;
border: thin solid #7a8251;
height: 25px;
width: 771px;
}
#nav_left {
width: 400px;
float: left;
text-align: left;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 7px;
padding-left: 5px;
}
#bookmark {
width: 300px;
float: right;
text-align: right;
display: inline;
padding-top: 5px;
padding-right: 3px;
padding-bottom: 5px;
}
.inputbutton {
margin-right: 3px;
margin-left: 3px;
}
select {
display: inline-table;
font-size: 75%;
padding: 0px;
}
But, the form elements are sitting low and not aligning as needed. The
input buttons are sitting too high.
There is a screenshot at http://www.graiai.com/snap.jpg
This is taken in Firefox on a Mac. On IE 7, the dropdowns sit even
lower.
I don't know what to do! Any ideas?
Jeremy
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies --
[css-d] vertical align help
what i want is 4 images that are all centre aligned across the page and
evenly spaced.
i'm not sure what i'm doing wrong but it only works in IE6.
i have a DIV that contains 4 DIVs that each contain an image:
div class=logoRow
div class=logoColimg src=%=
ResolveUrl(~/images/sponsor_logos/CIBC-WG.gif) % //div
div class=logoColimg src=%=
ResolveUrl(~/images/sponsor_logos/RioCan-logo.gif) % //div
div class=logoColimg src=%=
ResolveUrl(~/images/sponsor_logos/Trinity-logo.gif) % //div
div class=logoColimg src=%=
ResolveUrl(~/images/sponsor_logos/1717-logo.gif) % //div
/div
.logoRow {
float: left;
width: 100%;
padding: 5px 0;
}
div.logoCol {
float: left;
width: 24%;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 100px;
}
*div.logoCol {
font-size: 12px;
}
div.logoCol img {
vertical-align: middle;
}
--
Vincent Pollard
http://www.ithinkx.co.uk
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Positioning form elements
But it's not the left nav...it's the right formthis: snippety I may not be a list mom, but they all must be asleep. Please trim your responses, I just now skimmed through a digest that repeated the same block of code ad nauseam, sometimes more than once in the same reply. -- Ciao for now, bj mailto:[EMAIL PROTECTED] http://bitchslappin.net - Taking a Hard Look at the Business of Politics http://greenspeak.org - Small scale local environmental action http://kickasswebdesign.com NOTICE: Due to Presidential Executive Orders, the National Security Agency may have read this email without warning, warrant or notice and also without any judicial or legislative oversight. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hover effect
From: Sarah Atkinson [EMAIL PROTECTED]
I have two Classes and a hover effect on Class1. However when
someone hovers on the item for class1 I want the effect to be to Class2
Is this possible and how?
You can put, for instance:
a href=http://whatever.com; class=class1 class2whatever.com/a
For this example, your style sheet would look something like:
a.class1:link, a.class1:visited, a.class1:active
{background-color:#ffcc00;}
a.class2:link:hover {background-color:#cc;}
I should have noted that this works too:
a.class1:link, a.class1:visited, a.class1:active, a.class1:hover
{background-color:#ffcc00;}
a.class2:link:hover {background-color:#cc;}
Nancy
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE IS Driving Me Insane!!!
Hey Guys, I'm about to pull all my hair out. If its not one bug/issue with IE it's another, I tackle one thing then pops another . . . anyway enough of my rant, here is my problem: http://e7flux.com/placead/placead3.html - in IE7 the margins of both the floated UL's seem to collapse as well as the margins on p tag I have at the bottom. I wrapped the first 2 ul's in a div since IE6 doesn't understand min-height and I wanted them to line up but in IE 7 my margin's get collapsed with or without extra div and they also seem to affect the margins of the p tag at the bottom. What in the world is going on? I fail to understand and can someone help me please!!! Specific CSS targeting this template can be found under the /* Support Version */ comments in CSS file: e7flux.com/placead/css/placead.css TIA, Elli Be a better friend, newshound, and know-it-all with Yahoo! Mobile. Try it now. http://mobile.yahoo.com/;_ylt=Ahu06i62sR8HDtDypao8Wcj9tAcJ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] center an image horizontally inside an overflow: hidden
At 14:35 -0400 30/4/08, S. Woodside wrote: Thanks for the link. I tried using background-image center center -- unfortunately this method doesn't meet my second criteria which is that the image be scaled to fit vertically. There does not appear to be any way to scale the image when using background. Yes, that's true. Sadly I haven't found a better way. The best you could do, would be to limit the height of uploaded images to a fixed size, if that's at all reasonable. Cheers Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Positioning form elements
You could try:
tr
td width=64 valign=middle display: line;Browse by/td
td width=113 valign=middle display: line;form action=
method=get
Andrew
[EMAIL PROTECTED] wrote:
But it's not the left nav...it's the right formthis:
tr
td width=64 valign=middleBrowse by/td
td width=113 valign=middleform action= method=get
Title
select name=var size=1
option value=AA/option
option value=BB/option
option value=CC/option
option value=EE/option
option value=FF/option
option value=GG/option
option value=HH/option
option value=II/option
option value=JJ/option
option value=KK/option
option value=LL/option
option value=MM/option
option value=NN/option
option value=OO/option
option value=PP/option
option value=QQ/option
option value=RR/option
option value=SS/option
option value=TT/option
option value=UU/option
option value=VV/option
option value=WW/option
option value=XX/option
option value=YY/option
option value=ZZ/option
option value=11/option
option value=22/option
option value=33/option
option value=44/option
option value=55/option
option value=66/option
option value=77/option
option value=88/option
option value=99/option
option value=00/option
/selectinput type=image class=inputbutton
src=img/input.jpg alt= width=15 height=15
/form/tdtd width=123 valign=middleform action=
method=getDecade select name=var size=1
option value=19501950s/option
option value=19601960s/option
option value=19701970s/option
option value=19801980s/option
option value=19901990s/option
option value=20002000s/option
/selectinput type=image class=inputbutton
src=img/input.jpg alt= width=15 height=15
/form/td
/tr
/table
Adjusting the margin on the table, as you suggested, isn't going to
help as each column has a separate problem. The problem is the form
elements specifically.
Jeremy
On Wed, Apr 30, 2008 at 12:34 PM, Andrew Doades [EMAIL PROTECTED] wrote:
ok, I think you need:
td {display: line;}body {
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
td
ul
lia href=index.phpHome/a/li
lia href=complete.phpBrowse All Titles/a/li
/ul
/td
You may need to do something like this to get it to work.
Andrew
[EMAIL PROTECTED] wrote:
In the screenshot that is linked, you'll notice that the vertical
alignment of the two dropdown menus and two input buttons is
incorrect. They are at the right side.
I've applied a tag style to the select tag. This isn't working. And
there is a class style on the input buttons. Which is not working
either.
Float right works for horizontal alignment and that is how I've got
the forms at right set up. It's the vertical alignment that is keeping
me up at night.
Jeremy
On Wed, Apr 30, 2008 at 12:23 PM, Andrew Doades [EMAIL PROTECTED] wrote:
Not entirely sure what you are asking here?
When I look at your screen print, it looks ok in IE.
I think something like float:right;
is what you want??
Andrew
[EMAIL PROTECTED] wrote:
Thank you, Andrew! I'll definitely try this out.
Another area of concern is with the right-side form elements. They are
not aligning properly and nothing I've tried has worked.
Any advice in solving this issue as well would be appreciated.
Jeremy
On Wed, Apr 30, 2008 at 12:05 PM, Andrew Doades [EMAIL PROTECTED]
wrote:
Not being a big knowledge man of css but I would have thought you
would
need, ul and li in there?
ul
lia href=index.phpHome/a/li
lia href=complete.phpBrowse All Titles/a/li
/ul
and in your css have something like
#nav ul {
margin-left: 2em;
padding-left: 0;
color: #00;
}
Andrew
[EMAIL PROTECTED] wrote:
I'm new to CSS. But I need to position four form elements in a
very
thin nav bar. Here is my HTML code:
div id=nav
div id=nav_left
a href=index.phpHome/a |a href=complete.php
Browse All Titles/a | a href=author.phpAbout
Author/a/div
div id=bookmarktable width=307 border=0
cellspacing=0 cellpadding=0
tr
td width=64 valign=middleBrowse by/td
td width=113 valign=middleform action= method=get
Title
select name=var size=1
option value=AA/option
option value=BB/option
option value=CC/option
option value=EE/option
option value=FF/option
option value=GG/option
option value=HH/option
option value=II/option
option value=JJ/option
option value=KK/option
option value=LL/option
option value=MM/option
option value=NN/option
option value=OO/option
option value=PP/option
option value=QQ/option
option value=RR/option
option value=SS/option
option value=TT/option
option
[css-d] IE7 Margins Disappear?? Help Please
Hello, Reposting because I'm feeling frazzled and in dire need of a response. http://e7flux.com/placead/placead3.html - in IE7 the margins of both the floated UL's seem to collapse as well as the margins on p tag I have at the bottom. I wrapped the first 2 ul's in a div since IE6 doesn't understand min-height and I wanted them to line up but in IE 7 my margin's get collapsed with or without extra div and they also seem to affect the margins of the p tag at the bottom. What in the world is going on? I fail to understand and can someone help me please!!! Specific CSS targeting this template can be found under the /* Support Version */ comments in CSS file: e7flux.com/placead/css/placead.css TIA, Elli Be a better friend, newshound, and know-it-all with Yahoo! Mobile. Try it now. http://mobile.yahoo.com/;_ylt=Ahu06i62sR8HDtDypao8Wcj9tAcJ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 Margins Disappear?? Help Please
Hi Elli,
o.k. here is what I found out step by step.
Regarding the top margin: You defined:
#support #printonline p, #support #online p {
clear: both;
width: 100%;
text-align: center;
margin: 0 0 15px;
padding: 0;
}
In http://www.w3.org/TR/CSS21/box.html#mpb-examples it says:
If there are three values, the top is set to the first value, the left and
right are set to the second, and the bottom is set to the third.
Thus the top border of the paragraph is 0.
Instead, define:
#support #printonline p, #support #online p {
clear: both;
width: 100%;
text-align: center;
margin: 15px 0;
padding: 0;
}
That way the top margin will appear above the p.
The problem that the bottom margin is not maintained seems to be related to
the fact that you floated the p:
#printonline p, #online p {
float: left;
width: 150px;
display: inline;
margin: 6px 32px 0 16px;
padding-left: 0;
}
Why did you do that? If you delete float: left; and display: inline; the
bottom margin will be there. But there's even more margin as you wished.
That's related to the clearing divs. The following rule makes them float:
#support #printonline div, #support #online div {
float: left;
display: inline;
}
And you placed an nbsp; in them:
div class=clearednbsp;/div
Change that to:
div class=cleared!-- --/div
And unfloat those divs with:
div.cleared {
clear: both;
height: 0;
float: none !important;
display: block !important;
}
You have to define the rules as !important because the selector of the
rule that makes the div a floated element (#support #printonline div,
#support #online div) has a higher specifity and the rule with the lower
specifity would be ignored otherwise.
After those changes - at least on my machine - it looked better in IE.
Best regards,
Christian Kirchhoff
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of
Elli Vizcaino
Sent: Wednesday, April 30, 2008 10:10 PM
To: CSS Discuss
Subject: [css-d] IE7 Margins Disappear?? Help Please
Hello,
Reposting because I'm feeling frazzled and in dire
need of a response.
http://e7flux.com/placead/placead3.html - in IE7 the
margins of both the floated UL's seem to collapse as
well as the margins on p tag I have at the bottom. I
wrapped the first 2 ul's in a div since IE6 doesn't
understand min-height and I wanted them to line up but in IE
7 my margin's get collapsed with or without extra div and
they also seem to affect the margins of the p tag at the
bottom. What in the world is going on? I fail to understand
and can someone help me please!!!
Specific CSS targeting this template can be found
under the /* Support Version */ comments in CSS file:
e7flux.com/placead/css/placead.css
TIA,
Elli
__
__
Be a better friend, newshound, and
know-it-all with Yahoo! Mobile. Try it now.
http://mobile.yahoo.com/;_ylt=Ahu06i62sR8HDtDypao8Wcj9tAcJ
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE7 Margins Disappear?? Help Please
Hi Christian,
Thanks for replying. I implemented your suggestions
for the div.cleared declaration, so that helped with
the margin-bottom on the p tag. I didn't add a top
margin because I need the UL tags above it to be the
ones with the bottom margin, in case the content
within the p tag isn't used. I want there to be some
kind of margin so there is space between the bottom of
those ULs and the bottom edge of those boxes. To
answer your question about why I declared a float:
left and display: inline on those p tags is because
I for one am using one stylesheet across various
templates with slight variations:
http://e7flux.com/placead/placead.html, hence why I
added an id of #support to the body tag of the
template I ran into trouble with, and the display:
inline; is there because of the IE6 double margin bug.
If you'll note, the UL to the left of this template:
http://e7flux.com/placead/placead3.html has it's
margin bottom no problem but the ones on the right
collapses and yet the declaration for both of those
ul tags are almost identical - they both have been
given margin bottom values of 15px each. I just can't
understand why they refuse to show up in IE7.
Do you have any idea?
TIA,
Elli
--- Christian Kirchhoff privat [EMAIL PROTECTED]
wrote:
Hi Elli,
Why did you do that? If you delete float: left;
and display: inline; the
bottom margin will be there. But there's even more
margin as you wished.
That's related to the clearing divs. The following
rule makes them float:
#support #printonline div, #support #online div {
float: left;
display: inline;
}
And you placed an nbsp; in them:
div class=clearednbsp;/div
Change that to:
div class=cleared!-- --/div
And unfloat those divs with:
div.cleared {
clear: both;
height: 0;
float: none !important;
display: block !important;
}
You have to define the rules as !important because
the selector of the
rule that makes the div a floated element (#support
#printonline div,
#support #online div) has a higher specifity and the
rule with the lower
specifity would be ignored otherwise.
After those changes - at least on my machine - it
looked better in IE.
Best regards,
Christian Kirchhoff
Be a better friend, newshound, and
know-it-all with Yahoo! Mobile. Try it now.
http://mobile.yahoo.com/;_ylt=Ahu06i62sR8HDtDypao8Wcj9tAcJ
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
