|
CSS - Ie Resizing A Div With A:hover Background-color!?
For some reason I cannot explain, IE6 is re-sizing (shrinking) a div when you mouse-over the second-to-last link in it when the a:hover css sets a background-color!?
Mouse-over the second-to-last link here (about this site): URL Mousing over the last link restores it, and if you go from the last link to the second last link it does not shrink it. It's not doing it in Firefox, and it doesn't do it if the bottom link is not the last bit of text on the page. This page has the same problem, except if you go down to the second-last link in September 2004, it does not exhibit this behavior, because the last link in the September 2004 div is not the last line of text in it. URL Help appreciated. I'm going crazy! Similar TutorialsHi, I am trying to set background color on hover for a single table of links, rather than the entire document like the below example shows. http://www.projectseven.com/tutorials/css/pseudoclasses/ I have tried various ways, I do not want to use javascript for this and I am aware of the way to apply background color to the .td field but this also applys to the normal text not just links. So my question is how do I apply the background hover color to one table of links instead of the body. Thanks! I am working on modifying a drupal theme style sheet. I am having trouble over riding a table row hover background color. The style sheet has the background color defined as Code: .block .menu a:hover { background-color:#ecf4f8; }
I am working in the footer block trying to over ride the background color as transparent. Everything I try is not working. The theme has a bunch of these classes defined as "Power" Hover Classes. So, back to my footer block modification. Here are the inherited classes when I inspect the element, pinpointing the background-color for hover that is not being overridden for transparent. Code: div.node .field .field-label-inline, div.node .field .field-label-inline-first, .node-links ul.links:hover, .comment-links ul.links:hover, .view .grouped-admin:hover, .multistep li.active-step, .form-text:focus, .form-textarea:focus, .form-select:focus, .prose a:hover, table tr:hover td, table td.active, .block table tr.active, .block .menu a:hover { background-color: #ECF4F8; }
Can anyone help me write a css over-ride in my footer block for this? Hi there, I am trying to create a link which will have a bacground colour appear "around" it when on hover. I currently have a background image, but I tried adding a margin with a background color, but it is not working. This is my code: PHP Code: a.button{ background-image: url('img/button.png'); height: 22px; width: 210px; font-family:Arial, Helvetica, sans-serif; font-size: 14px; color: #ffffff; text-decoration: underline; padding: 3px 0 0 5px; margin: 20px; } a.button:hover{ background-image: url('img/button.png'); height: 22px; width: 210px; font-family:Arial, Helvetica, sans-serif; font-size: 14px; color: #ffffff; text-decoration: underline; padding: 3px 0 0 5px; margin: 20px; background-color: #f6f6f6; } Any ideas how I can acheive this? Thanks Thanks for taking the time to read my question. I have a <li> that has a background-color and border. I would like it to become transparent when the user hovers over it. In my a:hover I have background-color: transparent; but that is not working. Any ideas? Thanks, Brad I have these two areas. Code:
.MenuItem {
color:#FFFFFF;
font-size:12px;
background-color:#CC0000;
font-weight:bold;
height:18px;
padding-top:5px;
padding-bottom:5px;
border-top:0px solid #FF0000;
border-left:2px solid #FF0000;
border-bottom:2px solid #FF0000;
border-right:2px solid #FF0000;
}
.MenuItemTop {
color:#FFFFFF;
font-size:12px;
background-color:#CC0000;
font-weight:bold;
height:18px;
padding-top:5px;
padding-bottom:5px;
border-top:2px solid #FF0000;
border-left:2px solid #FF0000;
border-bottom:2px solid #FF0000;
border-right:2px solid #FF0000;
}
which refer to the left nav. My code only changes the color behind the text, not the entire area (box) behind the text. Code:
.MenuItemTop a:hover, .MenuItem a:hover {
color:#FFFFFF;
text-decoration:underline;
font-size:12px;
background-color:#000000;
}
Any ideas why? example at : http://www.pierced.ca/FeedProductionRecordsHelp.htm Brad I have a table that contains a links in each cell. However, when I set a style to change the background with 'a:hover' it only changes the area around the link text. What I want is to change the background of the entire cell containing the link. TIA. Nevermind, fixed. Changed Pixels into Percentages. Delete thread. Anyone know how to get your website's background to resize as the page is manually resized when using IE? It resizes properly on both on mac and PC using Firefox, Safari, and Opera, but not IE (on PC). Thanks Greetings I hope the title wasn't too confusing. If not this is sure to be. What I have is and Unordered List that has a heading in each List Item and then a few items under that. The List Items are links arranged in a grid that have a hover effect on mouseover. Due to the colors I want the heading (in this case h2) in each li to change color on the a:hover (the hover over anywhere on each li, not just over the h2 text). How can I achieve this? Here is some code to (hopefully) clarify: Code: #lower {
width: 765px;
float: left;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
}
#lower ul {
width: 775px;
list-style-type: none;
margin: 0;
padding: 0px;
}
#lower ul li {
font-family: "Trebuchet MS";
font-size: 14px;
width: 250px;
float: left;
}
#lower ul li a {
text-decoration: none;
display: block;
height: 125px;
color: #262626;
}
#lower ul li a:hover {
background-color: #5B8C3E;
color: #D9D9D9;
}
#lower h2 {
font-family: "Trebuchet MS";
font-size: 16px;
margin: 0px;
color: #262626;
}
#lower a h2:hover {
color: #D9CE3F;
}
As is the h2 only changes when it is directly hovered, not the the li. Thanks in advance for your help. Hey all, I have a couple of related questions. First off, is there a way to automatically resize a div or any other element to be the size of the background image. Basically I am trying to do all my images in the stylesheet to allow for easy skinning. I've been doing stuff like: Code: #myDiv {
background:url(graphics/cat.jpg);
height:75px;
width:75px;}
But manually setting the height and width gets really tedious after a dozen or so images. And a related question: manually setting the size of a div doesn't seem to work if I have display set to inline. I get divs that are zero width and zero height. But when I remove that line it works fine, except that I'd rather they be inline elements for positioning purposes. Thanks in advance. Hi, I have a quick question which should be cleared up soon enough. However i'm confused. I make a content layer and wish to make the contents height at 100%, so it will cover the hole screen (height wise). So i thought .. the simple code following would solve it. CSS: Code: #content {
position:absolute;
width:800px;
height:100%;
overflow:inherit;
z-index:1;
background-image:url(../images/content.png); background-repeat:repeat-y;
left: 100px;
top:0px;
visibility: visible;
}
Obviously not seeing as the content ends up a few milimeteres in height. Any help would be fantastic. Regards, Joe. EDIT: I have however .. got it to work in FF .. IE seems to be a problem now though. ok the page is http://v2.seductionslingerie.biz/ and the top buttons (home, etc...) will not change their bg color on hover and the text inside the div will not valign to the bottom. please help! here is the html/css code below CSS: Code: div.top_buttons {
background-image:url(../images/top_button_bg.jpg);
background-repeat:no-repeat;
background-position:bottom right;
background-color:#660000;
border:1px #660000 solid;
height:50px;
vertical-align:bottom;
padding:2px;
color:#FF99FF;
font-family:"BankGothic Lt BT", Verdana, Arial;
font-family:14px;
font-weight:bold;
cursor:hand;
cursor:pointer;
}
div.top_buttons:hover {
background-color:#950000;
color:#F5F1F2;
}
HTML: Code: <div class="top_buttons">HOME</div> Any and all help is much appreviated! Hi. I am having dificulty getting a menu item to change colour and background colour when mouse over http://www.des-otoole.co.uk/HC2010/holidayclub.php any reason as it is at the end of the style sheet code Code:
#tabnav a:hover
{
background: #bfbfbf;
color: #f05320;
}
That's what a friend of mine is trying to do to her blog. She's been trying for the longest time to get the hover command to change some link text color into a gif image, but all she can manage is the background behind the text. If you don't get what I'm trying to say, this is a screen cap of what she has right now: img801.imageshack.us/i/screencap.png/ Basically, she want's to know if there's a way so that, rather than having the gif around her text, it would display inside of her text only so that the words would look like static. If anyone knows if this is even possible, please help me out. Thanks in advance. Hi, I just want to change the color when I mouseover an href without a style sheet. This does not work: <a href="test.html" style="a:hover { color: #DA8525; }">Test</a> Is that suppose to work? Thanks for taking the time to read my question. I have a container in which I have a link. I would like to change the color of the container when the user hovers over the link. Can I do that? I can make the background of the text change, but the container is wider than the text. HTML: Code: <div id="LinkBox" class="LB1"><a class="LinkBoxLink" href="#">Link #1</a></div> CSS: Code: #LinkBox {
float: right;
height: 20px;
margin-bottom: 15px;
border-color: gainsboro;
border-width: 1px;
border-style: solid;
text-align: center;
}
.LB1 {
width: 241px;
}
a.LinkBoxLink:link {
text-decoration: none;
color: black;
}
a.LinkBoxLink:visited {
text-decoration: none;
color: black;
}
a.LinkBoxLink:hover {
background-color: red;
color: yellow;
}
a.LinkBoxLink:active {
text-decoration: none;
}
Thanks again for your help. Brad Alright - so I just changed my Java Script based navigation menu over to a CSS based menu for better search engine crawling and easy of use. Here's what I want, and can't seem to do: The original font color of a the links is "white". Easy enough. When you mouse over the link it turns light grey. Looks great! This part works wonders. Here's the problem...When you visit a page in the navigation, the "hover: change color to grey" doesn't work anymore. Instead of remains solid white. Is there a fix/trick to making it work so that always always when you hover over these links they change to grey. Whether the link is active, or already visited, it turns grey during hover. Thank for your help! To see this in action visit Window Film and More.com and take a look at the left navigation. hey, i have a question regarding css on my website: http://poolghost.com/ my css file is located at http://poolghost.com/base.css basically what i am trying to accomplish is having a:hover's color change to a different color on the right side of the layout. and i would like links on the right side to be underlined. please advise.. thanks, --avery hover color for an individual piece of link on a page full of links. So not like this in the header: Code:
<STYLE>
a:hover {color:#FF0000}
</STYLE>
but something like this, but then it has to work : Code: <a href="page.html" style="hover-color:#FF0000;"> Link text</a> I noticed that 'text-decoration: none' works in the second way, but i dont know how this hover color has to be done in that way. |
|||||||