[css-d] drop-down nav
Hi folks,
I've been tooling around with a drop down nav I saw in cssplay.co.uk
but it's not working out very well.
Here's where I'm at with it: http://obrienfamilytree.com/index_test.html
The entire nav is supposed to be centered but I think I need to wrap
a div around it and give the a margin: 0 auto;
What's really tripping me out is the space I had to allocate for each
. Some of them have a normal amount of space but others require
an excessive amount and then leave a wide gap after them ("The Obrien
Story" and "Primary Sources"). Any idea what is causing this?
The current homepage is what I want it to look like: http://
obrienfamilytree.com/index.html
The css: http://obrienfamilytree.com/obrien.css All of this can be
found at the very bottom of the css page.
Thank you for all your help!
Raymond
[EMAIL PROTECTED]
__
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] centering issues
WOW, thanks, Thierry! That fixed the centering and a couple other problems I was having. Much appreciated!! Raymond On Jan 2, 2008, at 2:24 PM, Thierry Koblentz wrote: > margin auto won't do much if there is no width specified and when > there is > one, " margin: 0 auto; " works better than " margin:auto 0; " > ;) > > > -- > Regards, > Thierry | http://www.TJKDesign.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] centering issues
Hi all,
I'm having some wacky problems with a new page design I'm working on
and it's blowing my mind because this is a very simple layout. I'm
centering just about everything and using infinite width containers
but I had no idea this was going to be such a hassle with the IEs and
even Firefox.
http://raymondrodriguez.net/clients/obrien/
The masthead is divided into two rows and they both have an image
that needs centering (and they each have their own background
patterns) but they're not lining up. This happened as soon as I added
a short paragraph to the lower row and I can't figure out why! Only
centers properly in IE 6 & 7 (go figure).
Here's the CSS:
#box_masthead1 {
height: 70px;
background: #D99605 url(images/masthead1_bg.jpg) repeat-x bottom left;
margin: 0 auto;
}
#box_masthead1 img {
margin:auto 0;
border:0;
padding:0;
}
#box_masthead2 {
margin: auto 0;
height: 159px;
background: #E8C20A url(images/masthead2_bg.jpg) repeat-x bottom left;
text-align: center;
}
#shieldbottom {
margin: auto 0;
height:159px;
width:832px;
background: #E8C20A url(images/masthead2.jpg) no-repeat top center;
text-align: center;
}
#shieldbottom p {
font: 11px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
color: #035315;
padding: 130px 0 0 0;
}
I hope you guys see something I don't because I'm pretty lost at this
point. And yes, I know the nav is really messed up, too. I think I'll
revert to using image navs again.
THANK YOU for all of your helpful advice!
Raymond
__
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] IE7 float problem
Hi All,
I created (with a lot of help) a horizontal nav that is now working
great on every browser I tested. The only issue is that IE7 has it
floating over the two containers below it (which are also floating).
http://www.stonewall-library.org
There is supposed to be approximately 15px of margin above and below
the nav but IE7 is showing the content slipping underneath the nav.
Not sure why this is having because the content is floating just as
the nav is. Only thing I can think of is that the nav container has a
relative positioning:
#boxNav {
margin: 15px 0 5px 0;
width: 800px;
height:26px;
text-align: left;
float:left;
position:relative;
}
This is my first attempt at using relative and absolute positioning
so I might've goofed somewhere. Any ideas?
Thanks!
Raymond Rodriguez
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 2-level nav visibility issues
I'm SO close!! At least, I think I am:
http://www.raymondrodriguez.net/clients/stonewall-library
The main nav for this has a two-level drop down element that only
seems to be working properly for Safari Mac (even Safari Win hates
it!). FF Mac doesn't like it, FF Win almost likes it (the second
level disappears when you try to hover over it), and IE6 doesn't even
want to show it.
Here's what I've got for the second level:
#boxNav ul ul {
visibility:hidden;
}
#boxNav ul li:hover ul, #boxNav ul a:hover ul {
visibility:visible;
}
And for the first button that drops down:
#nav_getinvolved a {
width:92px;
background-image: url(images/nav_getinvolved.gif);
}
#nav_getinvolved ul {
width:368px;
height:13px;
list-style:none;
position:absolute;
z-index:10;
bottom:78%;
left:312px;
}
#nav_getinvolved li a {
display:inline;
float:left;
height:13px;
text-indent: -px;
margin:0 0 0 0;
background-repeat:no-repeat;
background-position:top left;
}
It's my first use of z-index and position:absolute so I'm sure that
has something to do with it. Anyway, I hope one of you can shed some
light on this for me.
Thanks,
Ray
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE6 Box Model issue
Hello everybody, I've just updated my portfolio page and I'm having
problems with my boxes in IE6. The width is 720px and I set it at
610px to make up for the padding but that still doesn't fix it:
#portfolioBox{
margin:0 auto;
width:610px;
text-align:left;
background:#eee url(portfolio/images/portfolioBG.gif) top left no-
repeat;
margin-bottom:10px;
padding:50px 0 70px 110px;
}
* html #portfolioBox {width:720px;}
Looks great on Safari/FF Mac and FF Win. Can't speak for IE 7 because
it keeps crashing when I try to open it. :)
http://raymondrodriguez.net/portfolio
http://raymondrodriguez.net/portfolio/bradford.html
http://raymondrodriguez.net/masta.css
The first link is more jacked up than the second and that has
something to do with not having a description bar above the text (as
in the second link). Can any of you see something that I've neglected
to do?
Thanks!
Raymond
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Stu Nicholls image tracking
Hello guys. I've been messing around with Stu Nicholls image
tracking method:
http://www.cssplay.co.uk/menu/flow.html
and I got it to work for me in the reverse (float: right) of what he
does in his example:
http://raymondrodriguez.net/clients/anita/panel8.html
Very cool but then I tried to do it normally (float: left) and it's
all screwed up on everything except Safari:
http://raymondrodriguez.net/clients/anita/panel9.html
Anybody know why?
Here's what the CSS looks like:
#copy_panel9 {
width:533px;
height:673px;
position:relative;
font: 14px Helvetica, Arial, Verdana, sans-serif;
color:#000;
text-align:left;
margin:0 auto;
}
#copy_panel9 p {
line-height:17px;
padding:20px 0 0 60px;
position:relative;
z-index:10;
}
#copy_panel9 img {position:absolute; z-index:1;}
#copy_panel9 em {display:block; float:left; height:17px;
overflow:hidden; clear:left;}
.a10 {width:10px;}
.a20 {width:20px;}
etc...
I hope you see something that I don't!
Thanks,
Raymond
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] stairstepping in IE6 Win
Hi guys, I've got this very unusual issue going on with an unordered
list that I've just made. This is the first time I've made a
"navigation list" with single image buttons (three states) and it
works fine except for in Explorer 6. I thought it might've had
something to do with the display: block but I've tried inline and
that didn't fix it. Any ideas?
Here's the link:
http://raymondrodriguez.net/clients/anita/panel1.html
The CSS:
#headerBox {
margin:0px auto;
margin-bottom:0;
width: 800px;
border-top:0;
text-align: left;
padding: 30px 0 10px 0;
background: #AD0800 url(images/headershadow.jpg) no-repeat bottom left;
}
#headerBox ul {margin-left: 105px; margin-bottom: 35px; height:15px;}
#headerBox li a {
display:block;
float:left;
height:15px;
text-indent: -px;
margin:15px 0 0 15px;
background-repeat:no-repeat;
background-position:top left;
}
#headerBox li a:hover {background-position:0 -15px;}
#headerBox li a.active, #headerBox li a.active:hover {background-
position:0 -30px;}
#button1 a {
width:9px;
background-image: url(images/1.jpg);
}
#button2 a {
width:13px;
background-image: url(images/2.jpg);
}
(and so forth)
Thank you for you help!
Raymond
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IMG Overlapping Text
I'm having a strange problem where my text is getting overlapped by
an image below it. Here's what it looks like:
http://www.raymondrodriguez.net/portfolio/hispanic.html
I have no idea where this is coming from. This is the selector for
the text:
.portfolioDescription {
font: 10px "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
height:10px;
color:#777;
margin: 15px 0 35px 5px;
}
And this is the only selector I have for the image:
#portfolioLeft img {margin: 25px 0 0 0;}
So weird! Can anybody see something I'm not seeing?
Thanks,
Raymond
RAYMOND RODRÍGUEZ
Graphic Designer/Diseñador Grafico
954 607 2455 Fort Lauderdale
6714 2676 Panamá
[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] button within shifting
I've started setting up a portfolio page that has 3 vertical lists of
several buttons.
http://raymondrodriguez.net/portfolio.html
So far I've only activated one of the buttons and it has shifted the
button to the left. On Mac it also shifts down some. Can't figure out
how to correct this. Here's the html that I used:
http://raymondrodriguez.net"; class="amherst">
and here's the CSS:
http://raymondrodriguez.net/masta.css
The sits within this:
#portfolioNavID {
background: #fff url(portfolio/images/ids_foliohead.gif) no-repeat
top center;
float:left;
width: 63px;
text-align: center;
vertical-align:top;
margin: 0 5px 0 5px;
padding:10px 0 0 0;
}
And the "amherst" selector for the button:
a.amherst:link, a.amherst:visited {
height:36px;
width:36px;
display:block;
background: #fff url(portfolio/images/amherst_thumb.gif) no-repeat
top left;
}
a.amherst:hover {
background: #fff url(portfolio/images/amherst_thumb_over.gif) no-
repeat top left;
}
Also, if anyone can give me advice on a snappier way of handling
this, as I'm going to replicate it for 19 other buttons!
Much thanks,
Raymond
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] clearing
First, thank you guys for being so helpful. I've greatly appreciated
the assistance you've given me.
Well I'm stumped again. I'm having a problem with clearing a small
floated div that contains one image and a brief caption underneath.
The div floats just before a paragraph, which wraps nicely around
it...except for the bullets of the UL that's within that paragraph.
They get caught behind the caption only.
Here's what it looks like and here's the CSS.
I read a great article about clearing HERE but it doesn't seem to
work for this unless I bungled the directions. Specifically, I added
this to my css page and then included the selector "clearfix" in the
div:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
And here's the html:
Pioneer
Founders are instrumental in providing leadership and direction to
the Foundation
Also, notice that in the html I put this for the floating div. It has
an ID as well as two classes. Is this a bad idea?
Thanks,
Raymond
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] PROBLEM SOLVED: universal selector horror
Sorry guys but I think I got this one licked. I changed things like
body#infoSidebar p {
padding: 10px;
}
to
*#infoSidebar p {
padding: 10px;
}
I'm very pleased that it works now but now I'm confused as to why it
worked while the first instance didn't. Could anyone shed some light?
Thanks,
Raymond
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] universal selector horror
Hello again. I'm doing some reorganization of my CSS for this page.
I'm focusing on getting only this page to look right and then I'll
reassign the other pages to the new CSS file.
It's supposed to look like this in the end but I've not been
successful in my attempt at assigning selectors to the body. There is
a container on the right-hand side that I named "#infoSidebar" (line
73 in the CSS file) and I attempted to assign it universally to the
body selector since it's going to be there (same size and major
attributes) on every page but none of this seems to do anything.
Here's what I have for the universal stuff for that container:
body#infoSidebar p, body#infoSidebar strong, body#infoSidebar ul,
body#infoSidebar li {
font: 15px Georgia, "Times New Roman", Times, serif;
color:#666;
line-height:16px;
text-align:left;
}
body#infoSidebar p {
padding: 10px;
}
body#infoSidebar strong {
font-weight:bold;
}
body#infoSidebar a:link, body#infoSidebar a:visited {
font-weight: bold;
color:#FF9900;
text-decoration:none;
border-bottom: 1px dotted #FF9900;
}
body#infoSidebar a:hover, body#infoSidebar a:active {
font-weight: bold;
color:#FF9900;
border-bottom-style: solid;
}
Any thoughts on this would be greatly appreciated.
Thanks,
Raymond
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] custom bullets for IE Win
Thank you, Christian. That worked out great! Don't bother with list-style-image, instead use background images and padding. Works a trat across browsers. http://css.maxdesign.com.au/listamatic/vertical05.htm __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] custom bullets for IE Win
Hi guys, I'm having a problem with my custom bullets. I'm pretty
novice at this and I can't seem to get the bullets in my ULs to
behave normally in IE Win. Here is my example (se the right column).
They look normal in FF Win/Mac, and Safari but in IE Win they are
shifted up slightly and hugging onto the text that they denote. Any
ideas of how I can repair this?
I tried using a line height property but it didn't seem to make a
difference:
ul {
list-style: disc url(images/bullet.gif) inside;
margin: 10px 0 10px 25px;
text-indent: -17px;
line-height: 9px;
}
If you notice something very obvious that I'm missing, I would
totally appreciate you pointing it out. Also, here is a link to the
full CSS mess that I've created. :)
Thank you very much!
Raymond
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
