|
CSS - Strange Problem In Ie6, Corrects Itself When Hovering Links?
I have a problem with a site, first mistake i made was i built it to firefox, without testing along the way (please dont hurt me im new to web design) so i found a lot of problems in ie. So i fixed for ie7,8,9 but in 6 i get some two divs from the content area stacked one on the other at the top of the screen but when a link inside the problem div(s) is hovered they go to where they should be. any ideas about that?
Similar Tutorials<http://touristguides.org.uk/advsearch> Had a problem with this page which is now cured (unless the window is ridiculously narrow), but something else is happening. The page has: * header across the top * sidebar floated left * main content area to its right * footer across the bottom * All four have rounded corners, done as nested divs Sometimes, just sometimes, the content of the footer appears overlaid on the main content area, not far below the top. When it does, as you scroll down, you find three of the footer div's rounded corners at different points vertically: first the bottom right one, then the bottom left, then the top right; and a bit further down is the rest of the footer's background, with its rounded top left corner, across the content area. Right at the very bottom is the link to the BrowseHappy site that only appears for the benefit of IE users. :-) That's in the right place, except that the graphic link that should be below it isn't there - I guess it's hidden behind the footer background further up. Everything is in its correct position horizontally. As soon as you roll the mouse over any link in the footer's content (which, remember, is near the top of the page), or over the BrowseHappy text link at the bottom, everything pops into place as it should be, including the graphic BrowseHappy link. And this only happens sometimes - you can happily press F5 any number of times and it'll be fine, then once more and it'll go wrong. It appears not to be affected by window width, unlike my previous problem. And it doesn't happen on any other page, although they all have the same basic structure. However... On another page, which unfortunately you can only see by logging in, the top part of the main content's text sometimes (again, only sometimes) appears to the left, overlaid on the sidebar, until you roll over a link in the sidebar, when it pops into place. This may or may not be related! I've tried every magic bullet I can think of, trawled any number of sites about IE CSS bugs, but can't find a solution. It looks a bit like the 'Peekaboo' bug <http://www.positioniseverything.net/explorer/peekaboo.html>, but it isn't the same because nothing actually vanishes, and once you've put it right by rolling over a link you can't make it go wrong again without reloading the page. Any suggestions, or pointers to yet another IE/CSS site that might have the solution, gratefully received! On my test website that i make designs on I am having a very strange problem with the styles of my links. i am trying to change the style of the title for the posts to have a blue color and the turn light blue on hover. however i have this problem where I change the style on the title, and there are also random links in the sidebar that follow that style as well. i dont know if it is bug or what, but is begining to give me a headache. Right now i colored the links pink so that are easy to see. This happens in both opera and firefox for me. the url is nverted.net I've created a stripped down version of the page he http://www.brovizion.com/testlabaudrey I want the navbar to work in ie the same way it does in firefox. Here is the html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testlab Audrey</title>
<link href="stylesheets/brolayout.css" rel="stylesheet" type="text/css" />
<link href="stylesheets/brostyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<div id="outerwrapper">
<div id="header">
<div id="title">
<h1>Testlab Audrey</h1>
</div>
<div id="title_image">
</div>
</div>
<div id="wrapper">
<div id="navigation">
<ul id="menu">
<li class="current_page_item"><a class="first_menu" href="#">link01</a></li>
<li class="page_item"><a href="#" title="design">link02</a></li>
<li class="page_item"><a href="#" title="development">link03</a></li>
<li class="page_item"><a href="#" title="marketing">link04</a></li>
<li class="page_item"><a href="#" title="hosting">link05</a></li>
<li class="last_menu"><a class="last_menu" href="#">link06</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Here is the first CSS file (layout): Code: * {
margin: 0;
padding: 0;
}
#page {
text-align: center;
background: url(../images/page_bg.gif) center #7F7F7F repeat-y;
}
#outerwrapper {
width: 800px;
margin: 0 auto;
}
#header {
width: 800px;
margin-right: auto;
margin-left: auto !important; /* stupid ie... */
margin-left: 1px;
padding: 0;
}
#wrapper {
width: 780px;
margin-right: auto;
margin-left: auto !important; /* stupid ie... */
margin-left: 1px;
margin-left: 11px;
padding: 0px;
text-align: left;
}
#navigation {
margin: 0;
padding: 0;
background-color: #FFCC99;
}
#content {
width: 510px;
margin: 0;
margin-left: 5px;
padding: 0;
float: left;
background: #FFFFFF;
}
#sidebar {
width: 240px;
margin: 0;
margin-right: 5px;
padding: 0;
float: right;
background-color: #FFFFFF;
}
#footer {
width: 800px;
margin-right: auto;
margin-left: auto !important; /* stupid ie... */
margin-left: 1px;
background: url(../images/page_bottom.gif) bottom center transparent no-repeat;
padding-top: 5px;
padding-bottom: 15px;
}
Here is the second CSS file (everything else): Code: /* Basic Styles
-----------------------------------------------------------------------------*/
body {
font-size : 90%;
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
}
hr {
display: none;
clear: both;
}
h1 {
}
h2 {
}
p {
}
a {
color: #515151;
text-decoration: none;
}
a img {
border: 0 none;
}
/* Advanced Styles (by area)
-----------------------------------------------------------------------------*/
/*------HEADER------*/
#title {
background: url(../images/header.gif) top #7F7F7F no-repeat;
height: 76px;
margin: 0;
padding-left: 25px;
clear: both;
text-align: left;
}
#title h1 {
color: #c9e45a;
padding-top: 25px;
font-size: 3em;
letter-spacing: -.1em;
}
#title_image {
margin: 0;
text-align: left;
display: block;
height: 95px;
background: url(../images/header_image6.jpg) center center transparent repeat-y;
}
/*------NAVIGATION------*/
#navigation {
}
#menu {
list-style-type: none;
background: url(../images/menu_bg.gif) 50% 0 #515151 repeat-x;
margin: 0;
padding: 0;
height: 80px;
width: 780px;
border-top: 1px solid #FFFFFF;
overflow: hidden;
}
#menu li {
background: none;
padding: 0;
display: table-row;
vertical-align: middle;
float: left;
height: 80px;
}
#menu li.last_menu {
float: right;
}
#menu li a {
color: #FFFFFF;
line-height: normal !important;
line-height: 80px;
display: table-cell;
vertical-align: middle;
height: 80px;
padding: 0 10px 0 10px;
background: url(../images/menu_triple_lightblue.gif) top left transparent repeat-x;
}
#menu li a:hover, #menu li a:active {
background-position: center left;
color: #FFFFFF !important;
}
#menu li.current_page_item a {
background-position: bottom left !important;
color:#1F3700 !important;
}
#menu li a.first_menu {
padding-left: 35px;
background-repeat: no-repeat;
background-image: url(../images/menu_start_triple_lightblue.gif);
}
#menu li a.last_menu {
padding-right: 35px;
background-repeat: no-repeat;
background-image: url(../images/menu_end_triple_lightblue.gif);
background-position: top right;
}
#menu li a.last_menu:hover, #menu li a.last_menu:active {
background-position: center right;
}
#menu li.current_page_item a.last_menu {
background-position: bottom right !important;
}
/* Basic Lists
-----------------------------------------------------------------------------*/
ul, ol {
list-style-type: none;
list-style-position: outside;
padding: 0;
margin: .2em 0 .2em 0;
}
ul li, ol li {
background: transparent url(../images/puce.png) 2px .4em no-repeat;
padding-left: 15px;
}
ul ul li, ol ol li {
background: transparent url(../images/bullet.gif) 0px .5em no-repeat;
padding-left: 8px;
}
/* Advanced Lists
-----------------------------------------------------------------------------*/
#content ol li {
list-style-type: decimal;
list-style-position: inside;
background: transparent;
padding-left: 0;
}
#content ol li li {
padding-left: 2em;
}
Hi All, I have created a site in pure html and one of very strange behaviour i have ever seen is blue lines just like the a href links are coming ,Please can any one help there.They come on site first time and again on refresh they got disappear and its coming on Mozilla firefox and netscape not on IE. Site name: http://tedje.com/ Thanks in advance or any suggestion. I am having a minor problem with a photo gallery on a site that I am working on. Here is a link: http://fieldspianos.com/new/store/p...em_number=14275 In all browsers except IE6, when a thumbnail is hovered over, the image is displayed larger in the preview box. In IE6, however, this occurs properly, but once you roll over an image more than once it will not display anymore. For example, if I roll over the 1st thumbnail, the image displays, then I roll over the 2nd thumbnail, the image displays, but if I roll over the 1st thumbnail again, nothing happens. Included below is my css and html. This was made without javascript and I would like to keep it that way if at all possible. HTML Code:
<div id="sitebody">
<div id="tabsheader">
<ul id="primary">
<li><?php print "<a href=\"information.php?item_number=" . $item_number . "\">"; ?>Information</a></li>
<li><?php print "<a href=\"description.php?item_number=" . $item_number . "\">"; ?>Description</a></li>
<li><span>Photo Gallery</span></li>
<li><?php print "<a href=\"video.php?item_number=" . $item_number . "\">"; ?>Video</a></li>
<li><?php print "<a href=\"moreinfo.php?item_number=" . $item_number . "\">"; ?>More Info...</a></li>
</ul>
</div>
<div id="main">
<div id="contents">
<h2>Photo Gallery</h2>
<p class="note">Hover over the photos below to see larger images.</p>
<br />
<div id="photogallery">
<div id="thumbnails">
<ul class="hoverbox">
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img1.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img1.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img2.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img2.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img3.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img3.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img4.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img4.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img5.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img5.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img6.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img6.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img7.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img7.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img8.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img8.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img9.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img9.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img10.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img10.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img11.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img11.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img12.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img12.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img13.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img13.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img14.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img14.jpg" alt="description" class="preview" /></a></li>
<li>
<a href="#"><img src="images/<?php print $item_number; ?>_img15.jpg" alt="description" /><img src="images/<?php print $item_number; ?>_img15.jpg" alt="description" class="preview" /></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS Code:
/*Photo Gallery*/
div#photogallery {
position: relative;
width: 662px;
border: 1px solid #000;
padding: 1px;
padding-bottom: 2px;
height: 404px;
}
div#thumbnails {
width: 243px;
}
div#thumbnails ul {
margin-left: 0px;
padding-left: 0px;
}
.hoverbox
{
cursor: default;
list-style: none;
}
.hoverbox a
{
cursor: default;
}
.hoverbox a .preview
{
display: none;
}
.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: 2px;
left: 247px;
z-index: 1;
}
.hoverbox img
{
background-color: #FFFFFF;
border-color: #000;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 1px;
vertical-align: top;
width: 75px;
height: 75px;
}
.hoverbox img:hover
{
background-color: #000000;
border-color: #000;
border-style: solid;
border-width: 1px;
color: inherit;
vertical-align: top;
width: 75px;
height: 75px;
}
.hoverbox li
{
display: inline;
float: left;
margin: 1px;
}
.hoverbox .preview
{
border-color: #000;
width: 409px;
height: 399px;
}
Hi all, Please see http://www.jaysonsgroup.com/ztest/ntc/zcontact.html It's full of tests, but here's the problem.. The "Do you need more than one NTC Card" text at the bottom, needs to be followed by the text "(To share the Modem with friends)?*" IMMEDIATELY below it... Unfortunately, in IE, there is a spacing problem - see the link below for 2 screenshots for what I mean: http://www.jaysonsgroup.com/ztest/ntc/zie.gif The code is simple: Code: <div class="fieldname_long">Do you need more than one NTC Card</div> <div class="fieldvalue">(input field will come here)</div> <div class='spacer_1px'> </div> <div class='fieldname_text'>(To share the Modem with friends)?*</div> The CSS: Code:
.spacer_1px {
clear: both;
height: 1px;
overflow:hidden;
background: blue;
}
.fieldvalue {
float: left;
background: #ccc;
display: inline;
margin: 0;
}
.fieldname_long {
float: left;
width: 120px;
line-height: 13px;
padding-right: 15px;
color: #B30000;
font-weight: bold;
background: #eee;
display: inline;
margin: 0;
}
.fieldname_text {
color: #B30000;
font-weight: bold;
}
Note - I justr added "display:inline" and "margin:0" above to 'fieldname_long' and 'fieldvalue' but it doesn't fix anything in IE In the test link above, you can see that the blue line is the spacer_1px and that line should be touching the fieldname_long (light grey box). This happens in Firefox. But in IE, there's a gap which I need to remove. Sorry this is a really small thing but I just can't figure it out! Any ideas? Many thanks! I'm currently making some site about webmaster resources, etc... The site displays fine in firefox, but looks really fu/cked up in IE. Can someone help me fix this? I was trying to make all 3 column to have equal height, and i found some way which works only in FF&Opera. Still, i have problem when i have too much text. Hey, Check out the attachment. (I had to spray paint out the important parts that would highly violate the NDA) Here is some of the CSS: Code:
.currentprojects{
margin-top:10px;
margin-left:8px;
width:245px;
}
.currentprojects .proj_heading{
font-weight:bold;
padding-left:8px;
color:#005e9d;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-image:url(../images/leftside_midsect_mid.gif);
font-size:18px;
padding-bottom:5px;
}
.currentprojects .proj_content{
padding-left:8px;
background-image:url(../images/leftside_midsect_mid.gif);
}
.rssfeeds{
margin-top:10px;
background-image:url(../images/leftside_midsect_mid.gif);
margin-left:8px;
width:245px;
}
.rssfeeds .rss_heading{
font-weight:bold;
padding-left:8px;
color:#005e9d;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
padding-bottom:5px;
}
.rssfeeds .rss_content{
padding-left:8px;
color:#000000;
}
img{
margin-bottom:0;
vertical-align:text-bottom;
}
Now, the projects one is the top. And the rss is the bottom. Here is the HTML code Code:
<div class="currentprojects">
<img src="images/leftside_midsect_top.gif" />
<div class="proj_heading">
Heading
</div>
<img src="images/leftside_midsect_midsplit.gif" />
<div class="proj_content">
stuff
</div>
<img src="images/leftside_midsect_bot.gif" />
</div>
<div class="rssfeeds">
<img src="images/leftside_midsect_top.gif" />
<div class="rss_heading">
Heading
</div>
<div class="rss_content">
stuff
</div>
<img src="images/leftside_midsect_bot.gif" />
</div>
Does anyone have any idea why this is doing that in IE? FF it works fine (like that's really a surprise anymore). Hi, I've done an English site which works but now I'm doing the language versions..in particular, Arabic, which is read from right-to-left (direction: rtl) http://www.ntcjapan.com/languages/arabic/dindex.html On IE, the page looks fine. On Firefox, however, the <UL> tags (see light blue and normal blue text in middle of page) are being aligned to the right, overlapping the <div id="main"> which is supposed to contain it. Code: #main {
width: 590px;
padding-top: 115px;
padding-left: 4px;
padding-right: 5px;
background: url(../../../images/0_logo.gif) no-repeat;
float: left;
margin: 0px 3px 0px 0px;
}
I do want everything aligned to the right, since Arabic is apparently read that way, but I need the effect as shown on IE. Any ideas how to make this work? Also, if anyone has any recommendations on what I could do to fix the W3C validation errors , please let me know. Thanks very much in advance! check out parrisstudios(dot)com/mirage_framing In firefox it is normal, but in ie 6 when you hover over one of the links it gives you a weird drop down box type thing, but it wont go away until you refresh. I wan't to say it is like that peek-a-boo bug but backwards.... Code: ul{
margin: 0;
padding: 0;
list-style:none;
width: 410px;
float:left;
position:relative;
line-height:20px;
}
ul a{
line-height:10px;
float:left;
display:block;
padding: 0 12px;
text-decoration:none;
color: #C0AEA0;
position:relative;
}
li a:hover {
margin: 0;
padding: 0 12px;
float:left;
position:relative;
background-color:#EADED2;
line-height:20px;
}
ul li{
float: left;
background-color:#ffffff;
position:relative;
line-height:20px;
}
li a{
display:block;
text-decoration:none;
color: #C0AEA0;
float:left;
position:relative;
line-height:20px;
}
THANKS! Is it possible to pickup a browser worm by visiting a .php webpage? The symptoms are that when I view htm pages from either of the 2 websites I work on - or I visit Microsoft website - the print is all tiny and screwed up. This happens whether I view the htm files on the web or located on any computer in my home/office network. If I view the same files from any other browser/computer - they are perfectly OK. So it's just this browser on this computer - which incidentally views any other website or file perfectly. The page I am suspicious of is http://www.w6dek.com/w6dek10.php. This link was sent to me as a location to do a link exchange. I was suspicious because the email had an attachment - one of those ATTxxxxx.txt types - so I suspected a virus and didn't open it. However, I checked out the http://www.w6dek.com homepage URL and it seemed like a legit site, so I was curious about that page and visited it thinking that just arriving at a php page would not activate anything. But then I got the problem. I've scanned with Norton 2005 with latest updates and got nothing, and I'm right up-to-date with windows security updates too. But I've still got this weird problem. I've also deleted all cached files and cookies etc.. Any ideas! I know there's a really good group in Switzerland that are all over this stuff, but I can't remember the address. Has anyone got a resource? Or an idea? If you take a look at the following site... http://www.impulsive-solutions.co.uk/test/test.htm In the central column you will see a grey border. On the left of that border there is a gap between the left border and the connecting top and bottom bits. Why is this happening? and secondly why is it only happening on the left hand side. Furthermore, in firefox it works fine, there is no gap. Andy Hey guys. I'm still learning css so excuse some crude styles. I don't know how to explain this so grap IE 6 and click here. Scroll down the links on the left until you get to the last one "Printable Pics." As you can see for some reason the last two links jump down the page and a big blank spot appears in it's place when you hover your mouse over it. It doesn't do that in firefox or opera so I don't know whats' going on. Heres my CSS: Code: body {
text-align: center;
height: 100%;
background-image: url(images/bg_title.gif);
}
img {
border: none;
}
#wrapper {
width: 780px;
height: 100%;
margin: 0 auto;
text-align: left;
position: relative;
background-color: #FFFF7D;
color: #000000;
border: solid 2px #0000ff;
}
#header {
width: 780px;
height: 143px;
margin-bottom: 3px;
}
#headerImage {
width:200px;
float: left;
margin-right: 2px;
}
#headerImage img {
margin: 0px;
}
#headerLogo {
width: 577px;
float: left;
margin: 0px;
}
#headerLogo img {
margin: 0px;
}
#navagation {
width: 204px;
margin-bottom: 1px;
float: left;
margin-right: 1px;
}
.navIcon {
float: left;
margin-right: 2px;
margin-bottom: 1px;
padding: 0px;
}
.navButton {
float: left;
margin-bottom:1px;
padding: 0px;
}
a.navButton:link {
border: none;
}
a.navButton:visited {
border: none;
}
a.navButton:hover {
border: 1px solid #000000;
}
#mainContentArea {
float: left;
width: 570px;
height: 711px;
border: solid 1px #000000;
background-color: #ffffff;
margin-bottom: 3px;
}
#footer {
height: 1px;
margin-top: -1px;
clear: both;
overflow: hidden;
}
Thanks in advance! -Tim Help! I've been holding my head on this one for a couple days. I have a wordpress theme that works fine in IE7, but in Firefox the header and navigation aligns left instead of center. I have not tested in IE6 yet. I can't, for the life of me, figure out what's causing it. Any help would be greatly appreciated! www dot sccustomfacade dot com slash site Thank you! I am working on a site right now. I have two adjacent divs, one on top of the other. Both are styled with margins and padding set to "0." I want the second div to be directly below the first with no spacing. If I include a single-pixel border on the second div, the elements touch with the border being the only thing between the first and second div. Without the border, there is a space of what I believe to be 20 pixels. I don't want to actually use the border so I'm not sure what to do. I don't understand why the page is behaving this way. Feel free to check it out at kellyshipe.com. I would have linked but forum rules evidently prevent it. I have the navigation set so that the background turns green on the current page. When you hover over the other links they turn green. However, I do not want the active link to change colors when it is hovered over. How do I stop this from happening? http://brittanyrubinstein . com/fulcrum/index.html We recently decided to alphabetize the Specialties on our web pages (using the .php files from the Includes folder). I have re-alphabetized them in both the .php file as well as the default.css file including making the first image coincide with the alphabetized list. However, when I do, the original image (for Hospitality) remains as the default image and only changes when you finally hover over Hospitality or anything below it. Here's the way part of the original file is set up: /* Images */ div#specialties ul li a.hospitality span.img { position: absolute; top: 0; right: 0; width: 222px; height: 190px; background-image: url(../images/hospitality.jpg); background-repeat: no-repeat; z-index: 0; } div#specialties ul li a.hospitality:hover span.img { position: absolute; top: 0; right: 0; width: 222px; height: 190px; background-image: url(../images/hospitality.jpg); background-repeat: no-repeat; z-index: 0; } And here's what I changed it to: /* Images */ div#specialties ul li a.apartments span.img { position: absolute; top: 0; right: 0; width: 222px; height: 190px; background-image: url(../images/apartments.jpg); background-repeat: no-repeat; z-index: 0; } div#specialties ul li a.apts:hover span.img { position: absolute; top: 0; right: 0; width: 222px; height: 190px; background-image: url(../images/apartments.jpg); background-repeat: no-repeat; z-index: 0; } Help! You can check out the current look at Connell Insurance dot com. . A thousand apologies -- this is a very poorly worded and general question, because I've learned through scavenging and don't know the jargon, and the answer might not even lie in CSS... but the problem is really driving me to distraction. Is it possible in CSS to define a hover effect such that upon hovering over one element, a different element is affected? For example, I know you can add something like this: #example a:hover{ color: #000000; } in order to change the color of any links in the example div upon hovering. But can you change properties of links in any other divs? If so, then how? And if not, then is there a different language which can effect this change? Again, a thousand apologies for the amateurishness and outsider-wording of this question. I will be happy to clarify on request to the extent of my ability. Hi all, I am having an issue with IE7. www[dot]novakwebsales[dot]com/help/index6.html When you hover over the top category tabs, it shifts the footer up. Then if you hover over the subcategory tabs on the left it drops down again??? It works fine in Firefox... Any ideas? Thanks in advance, Tbone |
|||||||