Jump to content

Li Border Issues


lchosts

Recommended Posts

In the example below can anyone tell me why my sub list items pick up the li property Also while were on the subject is it possible in the li li area anyway to make a li not expand all the way to the end of whatever container its in http://lchosts.com/ is where im workin on the main menu items. Also on the main menu items im planning on if the page is active and perhaps hovering removing the bottom borders on the main list... that I know how to do... but is there a way without screwing with the padding of its container to lower the bottom of the button so it lines up with the submenu? Thanks #menu-main-menu li {background:#ffffff;text-shadow: #666 0.1em 0.1em 0.3em;border-radius: 20px 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#BFF)); /* for Webkit */background: -moz-linear-gradient(top, #FFF, #BFF); /* For Firefox */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#FFF, endColorstr=’#BFF); /* for IE */-moz-box-shadow: 1px 1px 1px #666;-webkit-box-shadow: 1px 1px 1px #666;box-shadow: 1px 1px 1px #666;}#menu-main-menu li li {background:#ffffff;border-top-right-radius: 20px 20px; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px;border-top-left-radius: none; -moz-border-radius-topleft: none; -webkit-border-top-left-radius: none;border-bottom-right-radius: none; -moz-border-radius-bottomright: none; -webkit-border-bottom-right-radius: none;border-bottom-left-radius: none!important; -moz-border-radius-bottomleft: none!important; -webkit-border-bottom-left-radius: none!important;}

Link to comment
Share on other sites

The descendent selector selects every single element that is a descendent of another, no matter how many levels down it is. So your #menu-main-menu li selector is targeting all the <li> elements even if they're at a second level of depth. If you only want direct child elements, use the children selector #menu-main-menu>li. If you want the list items not to take up the entire width of the container, you'll have to set their width or max-width property. Another option could be to set a large right margin. To remove a border without messing up measurements, just set the border's color to transparent:

element:hover {   border-bottom-color: transparent;}

Link to comment
Share on other sites

ah thank you :) Im starting to think I jumped into the deep end on learning all this before learning to doggy paddle lol But I'll keep at it eventually Ill learn it all lol Would there be a way to edit ONLY the last line of a dropdown menu? I tried >li li:lastchild { but it dosent seem to work

Link to comment
Share on other sites

Not for all browser. last-child is from CSS3 and I don't know how well it's supported. If you want to, you can give the last element its own class attribute. It's mostly Internet Explorer 8 and under I worry about.

Link to comment
Share on other sites

Ya Ill do that.The new problem Im running into with this menu is this: I got the child selector working great, however it isint doing anything for changing the border of a hover #menu-main-menu > li {background:#ffffff;text-shadow: #666 0.1em 0.1em 0.3em;border-radius: 20px 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#BFF)); /* for Webkit */background: -moz-linear-gradient(top, #FFF, #BFF); /* For Firefox */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#FFF, endColorstr=’#BFF); /* for IE */-moz-box-shadow: 1px 1px 1px #666;-webkit-box-shadow: 1px 1px 1px #666;box-shadow: 1px 1px 1px #666;margin-right:5px;}#menu-main-menu > li:hover {background:#ffffff;border-top-right-radius: 20px 20px; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px;border-top-left-radius: 20px 20px; -moz-border-radius-topleft: 20px; -webkit-border-top-left-radius: 20px;border-bottom-right-radius: 20px 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px;border-bottom-left-radius: none; -moz-border-radius-bottomleft: none; -webkit-border-bottom-left-radius: none;background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#BFF), to(#FFF)); /* for Webkit */background: -moz-linear-gradient(top, #BFF, #FFF); /* For Firefox */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#BFF, endColorstr=’#FFF); /* for IE */-moz-box-shadow: 1px 1px 1px #000;-webkit-box-shadow: 1px 1px 1px #000;box-shadow: 1px 1px 1px #000;text-shadow: none;} Is there a better way to go about that goal? I have my menu set up to the point now I think you can mostly figure out what Im trying http://lchosts.com/ so far no javascript or images which as far as I understand it is a good thing

Link to comment
Share on other sites

Dosent look like its suppose to now as I found out IE wasnt supporting a lot so Im editing some of the code... but basically what I cant figure out is simple... my main list I want to be able to change its border settings onhover I have a li border setting and cant get that to c hange. I thought of a:link and a:hover however isint allowing me to change the borders at all either.

Link to comment
Share on other sites

What! IE not supporting most of css3, gosh! i'm shocked! i just can't believe that, I'm really really just taking the mickey, I thought you knew that, you have to use different hacks for dropshadows rounded corners, and you are not guaranteed to get the same effect when you do either...good all crappy IE you'll gotta laugh, they will get it right one of these years.

Link to comment
Share on other sites

I don't bother much about IE. I think my viewers can live without a round border on a couple of element. The site still looks good, just slightly less than it would if there was support for CSS 3

Link to comment
Share on other sites

#page-navigation > li:hover {background:#yellow;border-top-right-radius: 20px 20px; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px;border-top-left-radius: 20px 20px; -moz-border-radius-topleft: 20px; -webkit-border-top-left-radius: 20px;border-bottom-right-radius: 20px 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px;border-bottom-left-radius: none; -moz-border-radius-bottomleft: none; -webkit-border-bottom-left-radius: none;}#page-navigation li li {background:orange;border-top-right-radius: 20px 20px; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px;border-top-left-radius: none; -moz-border-radius-topleft: none; -webkit-border-top-left-radius: none;border-bottom-right-radius: 20px 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px;border-bottom-left-radius: none; -moz-border-radius-bottomleft: none; -webkit-border-bottom-left-radius: none; } so how is the proper way of going about this? Im s till trying to accomplish the same thing lol a button bar that the buttons that are oval till hovered over then just the button on the button bar changes its bottom left border to not be rounded The pullout menu I want to have the buttons be rounded on the right side and no borders on the left so when you open it up it looks like the main button gets extended down if you wanna know what I mean by extended down look at godaddys menus I just wanna do it in my way... with borders and such

Link to comment
Share on other sites

You have a mistake with your background color. Instead of #yellow it should be yellow. Anyways, why not simplify? First of all, the only rules you have to put in the :hover state are the things that change, so don't bother declaring all the borders all over again.

/* This rule condenses all the code you had for the li elements into one selector */#page-navigation li {border-radius: 20px;-moz-border-radius: 20px;-webkit-border-radius: 20px} /* Just change the bottom left corner *//* I believe border-radius can't be "none", it must be a number */#page-navigation > li:hover {  background:yellow;  border-bottom-left-radius: 0;  -moz-border-radius-bottomleft: 0;  -webkit-border-bottom-left-radius: 0;} /* Change the background and bottom left corner */#page-navigation li li {  background:orange;  border-bottom-left-radius: 0;  -moz-border-radius-bottomleft: 0;  -webkit-border-bottom-left-radius: 0;}

Link to comment
Share on other sites

that nearly worked.... my god css can get complicated when you start throwing selectors lol this was the only change I made and it turned on... for IE 9 also... which even IE9 taking anything is amazing lol... fkn ie #page-navigation ul > li:hover { after that it worked like a charm, now I just gotta mess with its positioning and coloring, and shadows and I should be golden.... well sorta next I need to get shadows and a gradient but since IE are... well IE Im guessin its best to go with a image for the gradient instead of using css.... which sucks cause Im trying to cut down image usage by as much as possible for loading times

Link to comment
Share on other sites

Gradients don't take any loading time at all, if you use a GIF image. You can store gradients in really tiny images by making it 1 pixel wide and saving as GIF. There's absolutely no quality loss if the gradient is less than 256 pixels long. If it's more, the quality loss is still very hard to notice.

Link to comment
Share on other sites

Oh btw if you get a chance could you check http://lchosts.com/comparisons/ see if you think everything is kosher.... I did it all with divs cause ppl say thats the way to go if your just worrying about layout... This chart was close to being 'tabular' in my mind but I dunno... Anyway the ? marks have a onhover tooltip and if you pass over it fast with the mouse it dosent go away... do you know a workaround for that?

Link to comment
Share on other sites

You can highlight table rows with the hover pseudo-class too. It's simple:

.mytable tr:hover {   background-color: [color];}

or

.mytable tr:hover td {   background-color: [color];}

Link to comment
Share on other sites

The buttons look good. Of course, there's always the option of CSS image sprites for the buttons. It would require having all the buttons the same width, though, but it would solve the radius and shadow problems for all browsers.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...