[css-d] frame style functionality with css?
Hello, I am wondering if this can be done in CSS: I have two columns. On the left is a set of links, on the right there is nothing. when i click one of the links I want content to appear on the right and stay there until another link on the left is clicked. Much like old school frames. It seems like this would be fairly easy, I have done it on a hover before. If anyone can send me to a link I would be very grateful. J __ 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] italics and fixed width
Hello, I have another question about the nav bar on this site: http://johnkehm.com/hana when I make the link text italic, the width of the containing boxes vary on Firefox and IE, making my fixed width bar break apart. I thought I read about this somewhere but I am not sure. I tried a few fixes and got it to work on Firefox and IE6 but not IE7. Is there anyone who has experienced this and can perhaps lend some knowledge? As always, J __ 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] probably a common IE6 issue
Hello,
http://johnkehm.com/hana
If you look at this page on IE6, the top nav bar has a pretty tall
bottom margin.
I put a green border around it (border may not show in IE7 or Firefox).
It may be a error on my part, but in any case can someone point me to
a good solution?
Any help would be great.
j
Here's the nav css:
/* nav */
.nav{
width: 798px;
height: 51px;
margin: 4px 0 0 0;
padding: 0;
background: url(images/navGradient.gif) top left repeat-x;
border: solid 1px green;
}
.nav ul{
width: 798px;
height: 51px;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
color: #000;
font-weight: bold;
list-style: none;
margin: 0;
padding: 0;
}
.nav ul li{
height: 51px;
margin: 0;
padding: 0;
float: left;
overflow: visible;
background: url(images/navGradientBars.gif) no-repeat;
}
.nav ul li a{
height: 51px;
font-size: 12px;
color: #000;
text-decoration: none;
display: block;
float: left;
padding: 18px 21px 0 21px; /* watch the padding */
margin: 0;
overflow: visible;
}
.nav ul li a.last, .nav ul li a:hover.last{
height: 51px;
padding: 18px 24px 0 24px;
margin: 0;
overflow: visible;
}
.nav ul li a:hover{
height: 51px;
font-size: 12px;
color: #000;
text-decoration: none;
background: url(images/navGradientOver2.gif) top left no-repeat;
display: block;
float: left;
padding: 18px 21px 0 21px; /* watch the padding */
margin: 0;
}
.nav ul li.first{
background: none;
margin: 0;
padding: 0;
}
.nav ul li.first a:hover{
background: url(images/navGradientOver.gif) top left repeat-x;
margin: 0;
padding: 0;
}
a{
font-family: arial, helvetica, sans-serif;
font-size: 11px;
color: #000;
text-decoration: underline;
margin: 0;
padding: 0;
}
__
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] hover bg question
Hello all,
Do any of you wizards know why I can't seem to fill in the last 3 or 4
'hover over image pixels' to the right of the last link 'industry
resources'?.
when i hover over the link, i want the background image to span the entire link.
www.johnkehm.com/nav
heres the css:
.mainNav{
position: absolute; top: 108px; left: -8px;
}
.mainNav ul{
width: 641px;
height: 40px;
margin: 0;
padding: 0;
float: left;
list-style: none;
background: #426a85 url(images/navSlice.jpg) repeat-x top left;
}
.mainNav ul li {
height: 40px;
float: left;
background: url(images/navGap.jpg) top right no-repeat;
}
#last {
background: #426a85 url(images/navSlice.jpg) top right repeat-x;
}
.mainNav ul li a{
float: left;
padding: 10px 13px;
text-decoration: none;
font-family: arial, helvetica, sans-serif;
color: #c5dbff;
font-size: 12px;
margin-right: 3px;
background: url(images/navSlice.jpg) repeat-x;
}
.mainNav .first a{
padding-left: 33px;
}
.mainNav .break a{
padding-top: 4px;
text-align: center;
}
.mainNav ul a:hover{
width: auto;
background: url(images/navSliceOver.jpg) top left repeat-x;
}
__
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] some text is rendering different between browsers..
Hello,
I have what I am sure is a common question here,
I am learning the ropes and I am stuck, my source renders fine in
Firefox but it does different stuff in IE6.
http://www.johnkehm.com/kona
I put borders around the areas in question.
I want it to look like it does in Firefox.
Any help will be a big relief.
Thank you,
John
here is the CSS that is killing me:
#rightCopy{
width: 345px;
height: 205px;
font-family: verdana, sans-serif;
color: #444;
float: left;
background: url(images/grinder.jpg) no-repeat 45px 0px;
border: 1px solid #ccc;
}
#rightCopy p{
margin-top: 0px;
padding: 0;
}
.homeFloatRight{
width: 180px;
margin: 0 0 15px 0;
padding-left: 15px;
float: right;
letter-spacing: -1px;
font-family: verdana, sans-serif;
font-size: 16px;
color: #0d5168;
background: url(images/star.gif) no-repeat 0 17%;
border: 1px solid #ccc;
}
.homeFloatRighta{
margin: 7px 0px 5px 0;
padding-left: 25px;
letter-spacing: -1px;
font-family: verdana, sans-serif;
font-size: 16px;
color: #c2184c;
font-weight: bold;
text-decoration: none;
background: url(images/link_arrow.gif) no-repeat 0 17%;
border: 1px solid #ccc;
}
#rightCopy a{
width: 155px;
float: right;
margin: 17px 0 0 0;
border: 1px solid #ccc;
}
}
.clear{
clear:both;
}
__
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] * in css
Hello,
I am wondering if anyone knows what the asterisks in the following CSS do:
#mainNav, #secondaryContent {
padding-top: 20px;
padding-bottom: 20px;
}
#mainNav *, #secondaryContent * {
padding-left: 20px;
padding-right: 20px;
}
#mainNav * *, #secondaryContent * * {
padding-left: 0;
padding-right: 0;
}
It does have an effect on the page in Firefox, but I have no idea what the
asterisks do, and then the double asterisks that reset the padding back to
0?
I would love some insight
Thanks!
John
__
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 spacing question
Hello folks, I am starting my first (almost) all CSS site, and I already have a question. Probably typical... If you look at the site: http://www.johnkehm.com/jk http://www.johnkehm.com/jk/style.css The 'print examples, web examples and contact' box renders differently between Firefox and IE6. IE moves it down and left quite a few pixels and also adds spacing between the links. It must be an easy fix? I would like to learn the hacks etc as I go. Any help is appreciated, John __ 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] Basic CSS question
Hello,
I am trying to learn some of the little things i missed, so sorry if this
seems like a silly question.
I understand descendant selectors:
#main p {color: #fff;} - inside the 'main' div the will be white.
But I see this sometimes:
form#search {color: #fff;}
The hash is right up against the form, and my understanding is the result is
different than the former example? why is the space removed and what does
this do?
I hope this makes sense
John
__
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] CSS dropdown menu
Hello, I am trying to find a solid CSS dropdown technique that works fluidly amongst the browsers. I mean the link that drops down to other links, something I can make all pretty with CSS. a: is this possible with all the modern browser workarounds? b: is DHTML the way to go? I figure I would try here first, if anyone can send me a link to a site they know and love I would so appreciate it. Thanks in advance john __ 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/
