|
CSS - Sudden Hover And Position Problem In Ie6
Hi Guys,
Firstly, I'd like to apologise for posting this, this is my first css site that I'm working on and I've just noticed some problems that have appeared with testing with IE6 (I normally use Firefox and last time I tested in IE 6 things were working ok!) The problem is that my Block hover doesn't now seem to work and neither does my image border hover either. On top of that my positioning for 2 small boxes has suddenly gone a little awol too! Site is fine in Firefox, see here However when I check this in IE, the hovers and a couple of boxes have really messed up and I've spent hours with this, but not getting anywhere, so any assistance would be greatfully received! My style sheet is here Again, any pointers would be much appreciated Best regards Jon P.S I've been using Firebug with much success for Firefox, but not sure what to use for IE, any suggestions? Similar TutorialsI'm really tired, so this may be a dumb question. I'm having problems keeping thumbnails fixed in their position. I want them to have a 1px yellow border when I hover over them. I can get the border but when I hover over them the other images move slightly. I have the thumbnails set up inside a <ul>. Here's the pertinent CSS: Code: #thumbcontainer {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 0px;
padding: 10px 10px 0px 0px;
width: 840px;
background-color: #000000;
}
a img {
border: none;
margin: 4px 4px 10px 4px;
}
a img: link {
border: 1px solid #000000;
}
a img: visited {
border: 1px solid #000000;
}
a img:hover {
border: 1px solid #e5cb43;
}
a img: active {
border: 1px solid #000000;
}
ul.content {
list-style-position: outside;
padding: 0px; margin: 0px;
border: none;
background-color: #000000;
width: 850px;
text-align: center;
}
li.content {
margin: 0px;
padding: 0px;
list-style-type:none;
}
What are my options? Thanks in advance! Hi. I created this test page and right now if you mouse over the link it will have a pop up details but that box is not on the right position. How can I make that red box show up right below the link? Also is it possible to have the pop up box show up near the mouse pointer? Let's it the link is very long and when it's mouse over but moving to the left. Can I have that box follow the mouse pointer? Hope you know what I mean? Also if my links are at the end of the line in the browser(near the scroll-up-down bar) and my data inside the box contains multiple lines how can I make the content appearance won't change? Sorry if I didn't explain that clear but I really appreciate if anyone can help me on this. Thank you!!! Here's the link: http://yourbestproduct.com/test2.html Please view the source code on that link!!! Hi all u experts I have some problems which I list them below : 1-I just used a simple css style, it works in FF but not in IE7, it means font size and and bold, is shown in FF but not in IE Quote: #tbtd2 { font: 12px Arial bold; color: #8F2222; } 2-also hover effect is not the same in FF and IE , the same as above (looks disable in IE) : Quote: #tbtd2:hover { font: 14px Arial bold; color: #8F2222; } 3-how can I have hover effect for row of a table ? ( css style not js ) like change font color or size ? best regards How do you fix this hover problem http://www.svprosquad.com/test.htm It's the top nav that's the problem that's the one that is done using CSS. Hello, Basically I have a problem with my CSS regarding an on hover option in IE5. My CSS works fine on IE7 and IE6, however on IE5 it does not work properly and instead of displaying me a menu on IE5 (on Apple) it just creates empty spaces at the bottom of the page. The following is the CSS I use to make the menus work: Code: ul {
margin: 0;
padding: 0;
list-style: none;
width:300px;
background-color: #EAEAEA;
}
ul li {
position: relative;
/* need for IE*/
float: left;
background-color:#EAEAEA;
text-decoration: none;
}
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
background-color: #EAEAEA;
text-decoration: none;
}
ul li a {
display: block;
text-decoration:none;
color: #777;
background-color: #EAEAEA;
padding: 5px;
/* need for IE*/
height: 1%;
text-align: left;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
li:hover ul, li.over ul {
display: block;
}
As I already said this works fine on IE7 but a disaster on IE5 (on Apple). Also the doc type I am using is Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> I have also searched google, but can not really find a solution to my problem! Any sugestions are most welcomed Thank You bormli Hi I am having some problems with using hover and background images. My code is this: a:hover.buttons { color:white; width:53px; height:33px; background-color:#3366CC; background-image: url(images/council1.jpg); padding-top: 9px; padding-bottom: 10px; padding-left: 8px; padding-right: 8px; } It is loading a background image into a table cell. It works OK in mozilla based browsers, but there is a delay of about a second when using IE, which makes the page look rather untidy. The page I am working on can be viewed he http://www.northstar-newmedia.co.uk/oic (the links ath the top of the page) Does anyone know why this is happening, and if there is a fix/hack? Any help would be much appreciated. I'm having a problem with the following piece of code. Code:
.menuitem
{
position:relative;
border:0px solid;
border-color:#fff;
z-order:auto;
padding:1px;
text-align:center;
text-size:10px;
width:300px;
padding:2px;
}
div.menuitem:hover
{
background-color:#06f;
color:white;
}
With Mozilla and Opera, the code highlights the div areas in blue as I expected. However, in IE6, this does not happen. The divs have been wrapped in anchor tags like so: Code: <a href="wherever.htm"> <div class="menuitem"> menuitem1 </div> </a> Anybody have any ideas? hi, im trying to modify a template i downloaded, the problem is that the css sheet has pre defined blocks where images and text was, i managed to replace some of it, most part but when i try to add a border immage at the bottom of the page it refuses to take the position i indicate.. i think its a problem cuz of position:heritage so that it automaticly adds to the last block or something, annyway could somebody please give me a code sample of how to corectly put my image on the page or tell me how to modify the immage fields (the position heritage thing..) thanx in advance... In FireFox, my site works fine. The top navigation works fine, the text is where it is supposed to be, but in IE, the top navigation bar is in the middle of the header image, and the text is above where it should be. My page can be found he http://s125392025.websitehome.co.uk/layout.html And viewing that source, the DTD is wrong I know. So, before I published it with a Transitional DTD, I checked it out using my NotePad and opening the file. Didn't change a thing. So I thought, hmm, perhaps the Strict DTD. Nope. I didn't even bother with the Frame one, because there are no frames being used. Also, when I view the page in IE, the top navigation bar is through the main header image, but when I refresh the page, it is at the place it is supposed to be. The text however, still remains above the picture as apposed to being at an appropiatly aligned position. I'm not sure why it is like that, so I'm asking for some help. <!--Rambling don't read, unimportan { But I mainly started making this site to learn (x)html/css/etc but also for extra credit in this class that I'm in that.. well let's keep it all all my works been finished, but teach checks it everyday and sees it, and begs to differ. He's just a retarded guy, so one day I said hey, let me do this for extra credit. So, it's kindof a part of my grade that I need. Bleh, no one cares about that sorry. } --> Anyway, here is the code in the html file that I have saved on my comp(only difference from it and the link above is the DTD). PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>2 Box Layout Test</title> <style type="text/css" media="screen"> /* Here is the main CSS */ body { background: #FFFFFF; } div { background: #FFFFFF; } h5 { text-align:center; } img { border:0px; } #mid, #left { top:120px; } #totalsite { position:relative; width:700px; margin:auto; } #midcontainer { width:450px; margin:0 auto; position:relative; left:100px; top:-6px; } #midheader { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/head400.jpg) top left no-repeat;height:30px;z-index:-1; } #midfoot { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/footer400.jpg) top left no-repeat;height:30px; } #leftheader { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/header200.jpg) top left no-repeat;height:30px; } #leftfoot { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/footer200.jpg) top left no-repeat;height:30px; } #midbody, #leftbody { border:1px solid black;background: #f1f1f1; } #topbody { background: #FFFFFF } p.top1 { text-align:center; } p.midheadtxt { font-weight:bold; text-align:center; position: absolute; top:-11px; left:195px; } p.leftheadtxt { font-weight:bold; text-align:center; position: absolute; top:-11px; left:50px; } #leftcontainer { width:200px; position:relative; left:0px; top:-120px; } #topnav { width:700px; position:relative; left:0px; top:-16px; } </style> </head> <body> <!--This is the main site header properties--> <div id="totalsite"> <div id="top"> <div id="topbody"> <p class="top1"><img src="http://img.photobucket.com/albums/v237/The_Nyne/header.jpg" alt="The Nynth Experience"></p> </div> <div id="topnav"><img src="http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/leftspac.jpg" width="50" height="75" alt=""><a href="index.html" onMouseOver="homebut.src='http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/homemo.jpg';" onMouseOut="homebut.src='http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/home.jpg';"><img src="http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/home.jpg" width="150" height="75" alt="" name="homebut"></a><a href="art.html" onMouseOver="artbut.src='http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/artmo.jpg';" onMouseOut="artbut.src='http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/art.jpg';"><img src="http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/art.jpg" width="150" height="75" alt="" name="artbut"></a><img src="http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/maps.jpg" width="150" height="75" alt=""><a href="mailto:the_nyne@yahoo.com?subject=" onMouseOver="contbut.src='http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/conactmo.jpg';" onMouseOut="contbut.src='http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/contact.jpg';"><img src="http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/contact.jpg" width="150" height="75" alt="" name="contbut"></a><img src="http://img.photobucket.com/albums/v237/The_Nyne/tnetopnav/rightspac.jpg" width="50" height="75" alt=""> </div> </div> <!--This is where the main body text goes for the page--> <div id="mid"> <div id="midcontainer"> <div id="midheader"> <p class="midheadtxt">News</p> </div> <div id="midbody"> <p>This is where the main section of the site is located.</p> </div> <div id="midfoot"> </div> </div> </div> <!--This is the subnav area--> <div id="left"> <div id="leftcontainer"> <div id="leftheader"> <p class="leftheadtxt">Sub-Navigation</p> </div> <div id="leftbody"> <p>This is where the subnav is located.</p> </div> <div id="leftfoot"> </div> </div> </div> </div> </body> </html> Please help. Hi Everyone, I have a little problem with some CSS I think, I have a layout that works apart from the menu, see (URL address blocked: See forum rules) I know that it is asp but it only renders the html as is at the moment but I'll be doing asp after this problem is sorted.. the menus start fading down but if there is a second menu it places it under the header of the menu before and it does not move out of the way... I am quite new to CSS and all this CSS gets me confused and now I'm lost... please could anyone help.. there is 3 CSS documents to play with.. but in the last few days they got a bit disorganized.. I get like that when I feel my egg cracking the site again: (URL address blocked: See forum rules) Hello. i wanna make something like that: http://img85.imageshack.us/img85/3057/vajag9rv.gif I mean place that violet circle in right bottom..i know i can make it with background, BUT i need to add <a href>...</a> to that violet circel..any ideas? Hi guys, I have a Photoshop sliced page. Needed to create a login area. Inserting a form tag sent all sliced images running for the hills...lol. I solved this with a div tag. Now the problem is that the text boxes for Username and Password do not alling correctly in all resolutions. It is as if the text boxes are floating, not anchored to the specified XY position. For example on the design PC IE7 all looks good. On my laptop also with IE7 text boxes are slightly to the right of where they should be. I am wandering if any one could help please. My code is below. Thanks. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Customer Zone</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="../../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">
<!--
body {
background-image: url(../background.jpg);
}
#apDiv1 {
position:absolute;
width:164px;
height:147px;
z-index:1;
left: 560px;
top: 498px;
float:none
}
.AccountNumber {
font-size: 9px;
font-style: normal;
background-color: #151515;
height: 19px;
width: 148px;
border: 1px solid #5C5C5C;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #999999;
text-align: center;
vertical-align: middle;
}
.EnterButton {
top: 3px;
right: 7px;
position: relative;
left: 92px;
bottom: 20px;
}
.CheckButton {
height: 10px;
width: 10px;
top: 75px;
bottom: 15px;
right: 10px;
position: absolute;
left: 0px;
}
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
position: absolute;
left: 11px;
top: 75px;
right: 10px;
bottom: 15px;
color: #999999;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" topmargin="0" marginheight="0">
<!-- ImageReady Slices (customerzone.psd) -->
<table width="777" height="681" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="30">
<img src="images/up.jpg" width="776" height="24" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="24" alt="" /></td>
</tr>
<tr>
<td colspan="12"> <img src="images/logos.jpg" width="215" height="157" alt="" /></td>
<td rowspan="43">
<img src="images/r2.jpg" width="7" height="567" alt="" /></td>
<td colspan="16" rowspan="7"><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','524','height','292','src','../../../flash/6048','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','../../../flash/6048' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="524" height="292">
<param name="movie" value="../../../flash/6048.swf" />
<param name="quality" value="high" />
<embed src="../../../flash/6048.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="524" height="292"></embed>
</object></noscript></td>
<td rowspan="46">
<img src="images/customerzone_05.jpg" width="30" height="656" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="157" alt="" /></td>
</tr>
<tr>
<td colspan="12">
<img src="images/q1.jpg" width="215" height="7" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="7" alt="" /></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/q1-08.jpg" width="30" height="107" alt="" /></td>
<td colspan="2">
<img src="images/x10.jpg" width="59" height="94" alt="" /></td>
<td colspan="9" rowspan="2">
<img src="images/q1-10.jpg" width="126" height="107" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="94" alt="" /></td>
</tr>
<tr>
<td colspan="2">
<img src="images/q1-11.jpg" width="59" height="13" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="13" alt="" /></td>
</tr>
<tr>
<td colspan="12">
<img src="images/q2.jpg" width="215" height="7" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="7" alt="" /></td>
</tr>
<tr>
<td colspan="12">
<img src="images/q3.jpg" width="215" height="5" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td colspan="12" rowspan="4">
<img src="images/lnews.jpg" width="215" height="24" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="9" alt="" /></td>
</tr>
<tr>
<td colspan="16">
<img src="images/hr.jpg" width="524" height="12" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="12" alt="" /></td>
</tr>
<tr>
<td colspan="10">
<img src="images/customerzone_15.jpg" width="335" height="2" alt="" /></td>
<td colspan="5" rowspan="6">
<img src="images/h1.jpg" width="176" height="21" alt="" /></td>
<td rowspan="33">
<img src="images/customerzone_17.jpg" width="13" height="258" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="8">
<img src="images/customerzone_18.jpg" width="18" height="67" alt="" /></td>
<td rowspan="3">
<img src="images/1.jpg" width="10" height="8" alt="" /></td>
<td colspan="7" rowspan="8">
<img src="images/customerzone_20.jpg" width="307" height="67" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
</tr>
<tr>
<td colspan="12">
<img src="images/a1.jpg" width="215" height="4" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="4" alt="" /></td>
</tr>
<tr>
<td colspan="12" rowspan="2">
<img src="images/customerzone_22.jpg" width="215" height="5" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="3" alt="" /></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/customerzone_23.jpg" width="10" height="59" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="10">
<img src="images/customerzone_24.jpg" width="32" height="117" alt="" /></td>
<td colspan="3" rowspan="7">
<img src="images/sunset.jpg" width="59" height="90" alt="" /></td>
<td colspan="7" rowspan="2">
<img src="images/customerzone_26.jpg" width="124" height="17" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="9" alt="" /></td>
</tr>
<tr>
<td colspan="5">
<img src="images/customerzone_27.jpg" width="176" height="8" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="8" alt="" /></td>
</tr>
<tr>
<td rowspan="8">
<img src="images/customerzone_28.jpg" width="8" height="100" alt="" /></td>
<td>
<img src="images/sdc.jpg" width="8" height="7" alt="" /></td>
<td colspan="5" rowspan="6">
<img src="images/customerzone_30.jpg" width="108" height="78" alt="" /></td>
<td rowspan="26">
<img src="images/customerzone_31.jpg" width="8" height="229" alt="" /></td>
<td rowspan="3">
<img src="images/s1.jpg" width="50" height="50" alt="" /></td>
<td colspan="3" rowspan="20">
<img src="images/customerzone_33.jpg" alt="" width="118" height="207" border="0" usemap="#Map" /></td>
<td>
<img src="images/spacer.gif" width="1" height="7" alt="" /></td>
</tr>
<tr>
<td rowspan="7">
<img src="images/customerzone_34.jpg" width="8" height="93" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="33" alt="" /></td>
</tr>
<tr>
<td rowspan="24">
<img src="images/customerzone_35.jpg" width="15" height="189" alt="" /></td>
<td colspan="5" rowspan="11">
<img src="images/pic1.jpg" width="161" height="105" alt="" /></td>
<td colspan="3" rowspan="11">
<img src="images/dx.jpg" width="153" height="105" alt="" /></td>
<td rowspan="24">
<img src="images/customerzone_38.jpg" width="6" height="189" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="10" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/customerzone_39.jpg" width="50" height="13" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="13" alt="" /></td>
</tr>
<tr>
<td rowspan="6">
<img src="images/s2.jpg" alt="" width="50" height="49" border="0" usemap="#Map2" /></td>
<td>
<img src="images/spacer.gif" width="1" height="10" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="3">
<img src="images/customerzone_41.jpg" width="59" height="27" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/customerzone_42.jpg" width="38" height="22" alt="" /></td>
<td colspan="2">
<img src="images/more.jpg" width="60" height="15" alt="" /></td>
<td colspan="2" rowspan="2">
<img src="images/customerzone_44.jpg" width="10" height="22" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="15" alt="" /></td>
</tr>
<tr>
<td colspan="2">
<img src="images/customerzone_45.jpg" width="60" height="7" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="7" alt="" /></td>
</tr>
<tr>
<td colspan="11">
<img src="images/beetwen.jpg" width="214" height="4" alt="" /></td>
<td rowspan="21">
<img src="images/customerzone_47.jpg" width="1" height="137" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="4" alt="" /></td>
</tr>
<tr>
<td colspan="11" rowspan="2">
<img src="images/customerzone_48.jpg" width="214" height="13" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="8" alt="" /></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/customerzone_49.jpg" width="50" height="10" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="18">
<img src="images/customerzone_50.jpg" width="32" height="120" alt="" /></td>
<td colspan="2" rowspan="9">
<img src="images/duck.jpg" width="58" height="90" alt="" /></td>
<td colspan="7" rowspan="11">
<img src="images/customerzone_52.jpg" width="124" height="98" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td rowspan="4"><img src="images/s3.jpg" width="50" height="49" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="23" alt="" /></td>
</tr>
<tr>
<td colspan="8">
<img src="images/customerzone_54.jpg" width="314" height="3" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="3" alt="" /></td>
</tr>
<tr>
<td rowspan="12"><div id="apDiv1" style=".UserNamePassword">
<form action="../../security/redirect.php" method="post" name="UserAccess" id="UserAccess">
<p>
<input name="username" type="text" class="AccountNumber" id="AccountNumber" maxlength="16">
</p>
<p>
<input name="password" type="password" class="AccountNumber" id="Password" maxlength="16">
<br>
<INPUT NAME="submit" TYPE="image" class="EnterButton" VALUE="Login" src="images/customerzone_75.jpg">
<font size="1" color="#5c5c5c">
<input name="remember" type="checkbox" class="CheckButton" value="Yes">
</font> </font>
<span class="style1">Remember Me</span>
</form>
</div>
<img src="images/customerzone_55.jpg" width="3" height="81" alt="" /></td>
<td colspan="3">
<img src="images/customerzone_56.jpg" width="148" height="18" alt="" /></td>
<td colspan="4" rowspan="7">
<img src="images/customerzone_57.jpg" width="163" height="65" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="18" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="3">
<img src="images/customerzone_58.jpg" width="148" height="22" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/customerzone_59.jpg" width="50" height="8" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="8" alt="" /></td>
</tr>
<tr>
<td rowspan="8">
<img src="images/s4.jpg" width="50" height="49" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="9" alt="" /></td>
</tr>
<tr>
<td colspan="3">
<img src="images/customerzone_61.jpg" width="148" height="17" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="17" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="3">
<img src="images/customerzone_62.jpg" width="148" height="10" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="9">
<img src="images/customerzone_63.jpg" width="58" height="30" alt="" /></td>
<td rowspan="6">
<img src="images/customerzone_64.jpg" width="49" height="22" alt="" /></td>
<td>
<img src="images/customerzone_65.jpg" width="60" height="6" alt="" /></td>
<td rowspan="6">
<img src="images/customerzone_66.jpg" width="9" height="22" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="6" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="5">
<img src="images/customerzone_67.jpg" width="94" height="16" alt="" /></td>
<td rowspan="2">
<img src="images/customerzone_68.jpg" width="55" height="8" alt="" /></td>
<td rowspan="5">
<img src="images/customerzone_69.jpg" width="14" height="16" alt="" /></td>
<td rowspan="5">
<img src="images/customerzone_70.jpg" width="60" height="16" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td colspan="4" rowspan="7">
<img src="images/customerzone_71.jpg" width="55" height="22" alt="" /></td>
<td rowspan="2"> <img src="images/customerzone_72.jpg" width="58" height="11" alt="" /></td>
<td colspan="2" rowspan="7">
<img src="images/customerzone_73.jpg" width="11" height="22" alt="" /></td>
<td colspan="2" rowspan="4">
<img src="images/customerzone_74.jpg" width="92" height="14" alt="" /></td>
<td rowspan="2">
<img src="images/customerzone_75.jpg" width="56" height="11" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="6" alt="" /></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/customerzone_76.jpg" width="55" height="8" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="5" alt="" /></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/customerzone_77.jpg" width="58" height="11" alt="" /></td>
<td rowspan="2">
<img src="images/customerzone_78.jpg" width="56" height="3" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/customerzone_79.jpg" width="50" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
</tr>
<tr>
<td colspan="16">
<img src="images/tak.jpg" width="524" height="3" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="3" alt="" /></td>
</tr>
<tr>
<td colspan="16" rowspan="2">
<img src="images/ss.jpg" width="524" height="5" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/r1.jpg" width="7" height="3" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="3" alt="" /></td>
</tr>
<tr>
<td colspan="12">
<img src="images/over.jpg" width="215" height="22" alt="" /></td>
<td colspan="17">
<img src="images/ddd.jpg" width="531" height="22" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="22" alt="" /></td>
</tr>
<tr>
<td colspan="29">
<img src="images/customerzone_85.jpg" alt="" width="746" height="64" border="0" usemap="#Map3" /></td>
<td>
<img src="images/spacer.gif" width="1" height="64" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="30" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="2" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="57" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="8" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="8" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="38" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="58" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="2" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="7" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="15" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="10" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="82" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="56" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="10" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="84" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="55" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="14" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="6" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="8" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="50" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="49" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="60" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="13" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="30" height="1" alt="" /></td>
<td></td>
</tr>
</table>
<div align="center">
<!-- End ImageReady Slices -->
</div>
<map name="Map"><area shape="rect" coords="-48,81,51,89" href="mailto:info@raeonimages.com" />
</map>
<map name="Map2"><area shape="rect" coords="12,16,53,28" href="mailto:info@raeonimages.com" />
</map>
<map name="Map3"><area shape="rect" coords="622,8,704,23" href="../termsandconditions/termsandconditions.html" />
</map></body>
</html>
I've fixed the problem, after much searching i realized I'm an idiot. Thanks again to anyone who may have been attempting. You can throw this thread in the trash, sorry again. Hi, I have the following CSS: .class2 a:hover {text-decoration: none; background-color: #333366; color: #ffffff; width: 100%; height: 100%; font-weight: bold;} for this javascript/HTML: menu1[0]='<span class="class2"><a href=""> About our trees</a></span><br>' It's part of a drop down menu and in IE when a user hovers over the About our trees, the entire box is highlighted with my chosen color. In Firefox, only the text in the box is highlighted. Can someone help me with this one? I tried switching from a <span> to a <div> and still no good. AAUGH. Happy Thanksgiving to all who are celebrating! Kimber Hello, I'm trying to create a menu for my NGO to replace the one they have currently but I'm running into some problems. The highlight color in this photo is one - how do you get around this issue? I'd like to keep the colors the same, if possible, but I recognize that might not be acceptable. the menu img is at kburke - org slash menuhover.jpg Thanks! here's the code: /*** DEMO SKIN ***/ .sf-menu { float: left; margin-bottom: 1em; font:11px Verdana, sans-serif; font-weight:bold; } .sf-menu a { border-left: 1px solid #fff; border-top: 1px solid #CFDEFF; padding: .75em 1em; text-decoration:none; color: #FFFFFF; } .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/ color: #ffffff; } .sf-menu li { background: #b6791e; } .sf-menu li ul li a { color: #769841; } .sf-menu li li a:active, .sf-menu li li a:focus { color: #ffffff; } .sf-menu li li { background: #ffffff; } .sf-menu li li li { background: #ffffff; } .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background: #769841; outline: 0; color: #FFFFFF; } /*** arrows **/ .sf-menu a.sf-with-ul { padding-right: 2.25em; min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */ } .sf-sub-indicator { position: absolute; display: block; right: .75em; top: 1.05em; /* IE6 only */ width: 10px; height: 10px; text-indent: -999em; overflow: hidden; background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */ } a > .sf-sub-indicator { /* give all except IE6 the correct values */ top: .8em; background-position: 0 -100px; /* use translucent arrow for modern browsers*/ } /* apply hovers to modern browsers */ a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator { background-position: -10px -100px; /* arrow hovers for modern browsers*/ } /* point right for anchors in subs */ .sf-menu ul .sf-sub-indicator { background-position: -10px 0; } .sf-menu ul a > .sf-sub-indicator { background-position: 0 0; } /* apply hovers to modern browsers */ .sf-menu ul a:focus > .sf-sub-indicator, .sf-menu ul a:hover > .sf-sub-indicator, .sf-menu ul a:active > .sf-sub-indicator, .sf-menu ul li:hover > a > .sf-sub-indicator, .sf-menu ul li.sfHover > a > .sf-sub-indicator { background-position: -10px 0; /* arrow hovers for modern browsers*/ } Hi Everyone, I am working on redesigning a website in WordPress that I had previously built in HTML. Most things seems to be working well, except some styling of some JavaScript. The script has a special hover image, but in the new site I can't get the descriptions to be inside the hover box. You can see an example of the old, correctly working site he e3ncw [dot] com And the new, broken one he e3ncw [dot] com /page/1 If you hover over any button in the sidebar you'll see the problem. I'm using float:left on both the image and the description, but can't get it to work. Here's the current CSS I'm using: Code: .sb-blocks li em {
background: url(images/hover.png) no-repeat center top;
width: 350px;
height: 200px;
position: absolute;
top: 0px;
left: -100px;
padding: 5px 0 0;
font-style: normal;
z-index: 2;
display: none;
}
p.url {
font-weight: bold;
color: #a82125;
text-align: center;
font-size: 1em;
line-height: .5em;
}
.sb-blocks em img {
float: left;
padding: 5px 5px 15px 15px;
}
.sb-blocks p.description {
color: #a82125;
float: left;
width: 275px;
}
Any help is greatly appreciated. Thanks! My nav menu works 100% in IE8, FF, Opera and Chrome... but it's doing something weird in IE7 that can kindof affect it's functionality but I have no idea really where to look for the problem. It's most easily seen on two pages. The front page, he http://www.skullcrow.com ...and on the product pages he http://www.skullcrow.com/proddisp.php?id=skull01 On the main page when you hover over the menu and get the drop downs, if you move your cursor so you're also over the text div in the background, the menu goes away. You can tell easiest when viewing the "Community" and "Help" lists. On the product display page is the same thing over a larger area. Anytime you move the cursor to a part of the menu that's covering the text or (only some of?) the background div, it disappears. The menu is obviously on top, and this problem does not occur in basically any other browser. The main reason I need to fix this is that these menus will probably only get bigger and the navbar will become barely unusable in IE7 after a while. I don't exactly what code I would need to post for this, I was just hoping for some general information that could point me in the right direction. Thanks for any help. Hey, im just looking at putting some images on my website that change with the users mouse hovering over them, nothing spectacular. With google's help ive managed to figure out the Css code, for one image like this but im struggling to see an easy way to get more images with the same spec without repeating myself in endless lines of code. Code:
<html>
<head>
<title>Button attempt</title>
<style type="text/css">
.btnContinue {
width: 80px;
height: 10px;
display: block;
font-size: 10px;
text-decoration: none;
background-repeat:no repeat;
background-image:url(image link here);
}
.btnContinue:hover {
background-image:url(image link here);
}
</style>
</head>
<body>
<a class="btnContinue" href="##"> </a>
</body>
</html>
Is there a simple method to use these styles on more than one image, without starting btnContinue2, btnContinue3 etc... thanks I had to make a hover menu that was full CSS, and i couldn't make it work in IE, because of the old issue of IE not supporting :hover for anything else but the a tag. So i modded some example i found on the internet that was using js for ie, attached through behaviours, in the css file. The url is this. The menu works fine in mozilla but it has a problem in IE, and i think it's css, not js. If you hover over the Products button and then over one of the items that appear, the item right under it will get a few pixels higer, which causes the whole menu to move down as you movewr over those ites. And it's annoying. Can some one give me a hint please? I've tried all sorts of things, adding empty level 3 menus to the items that don't need it, but still nothing... Thanks in advance... Hiya, Hoping for a bit of help with a menu I've made. Basically it's a tabbed menu with another line underneath for an explanation of what you'll find if you click on the tab. The explanation shows up when you hover over the appropriate tab. I also have an 'active' class that highlights whatever section you're on and shows that explanation as default. It all works fine until you're halfway through the menu, and the explanations won't show for any menu item previous to the active one. I know this is something to do with z-index, but I can't for the life of me figure out where to put it. Can anyone help? This is only happening in IE. Full Code he Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Menu Problem</title> <link href="menu.css" rel="stylesheet" type="text/css" /> <!-- The line below starts the conditional comment --> <!--[if IE]> <style type="text/css"> body {behavior: url(csshover.htc);} </style> <![endif]--> <!-- This ends the conditional comment --> </head> <body> <div class="container"> <p>First Active Tab:</p> <div class="nav"> <ul> <li class="active"><a href="#" title="Item 1"><span>Item 1</span></a> <ul class="item1"> <li><span>Caption for Item 1. Caption for Item 1. </span></li> </ul> </li> <li><a href="#" title="Item 2"><span>Item 2</span></a> <ul class="item2"> <li><span>Caption for Item 2. Caption for Item 2. </span></li> </ul> </li> <li><a href="#" title="Item 3"><span>Item 3</span></a> <ul class="item3"> <li><span>Caption for Item 3. Caption for Item 3. Caption for Item 3. </span></li> </ul> </li> <li><a href="#" title="Item 4"><span>Item 4</span></a> <ul class="item4"> <li><span>Caption for Item 4. Caption for Item 4. </span></li> </ul> </li> <li><a href="#" title="Item 5"><span>Item 5</span></a> <ul class="item5"> <li><span>Caption for Item 5. Caption for Item 5. </span></li> </ul> </li> <li><a href="#" title="Item 6"><span>Item 6</span></a> <ul class="item6"> <li><span>Caption for Item 6. Caption for Item 6.</span></li> </ul> </li> </ul> </div> <!-- End nav --> <p style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #000;">Middle Active Tab:</p> <div class="nav"> <ul> <li><a href="#" title="Item 1"><span>Item 1</span></a> <ul class="item1"> <li><span>Caption for Item 1. Caption for Item 1. </span></li> </ul> </li> <li><a href="#" title="Item 2"><span>Item 2</span></a> <ul class="item2"> <li><span>Caption for Item 2. Caption for Item 2. </span></li> </ul> </li> <li><a href="#" title="Item 3"><span>Item 3</span></a> <ul class="item3"> <li><span>Caption for Item 3. Caption for Item 3. Caption for Item 3. </span></li> </ul> </li> <li class="active"><a href="#" title="Item 4"><span>Item 4</span></a> <ul class="item4"> <li><span>Caption for Item 4. Caption for Item 4. </span></li> </ul> </li> <li><a href="#" title="Item 5"><span>Item 5</span></a> <ul class="item5"> <li><span>Caption for Item 5. Caption for Item 5. </span></li> </ul> </li> <li><a href="#" title="Item 6"><span>Item 6</span></a> <ul class="item6"> <li><span>Caption for Item 6. Caption for Item 6.</span></li> </ul> </li> </ul> </div> <!-- End nav --> </div> </body> </html>
CSS He Code: /* CSS Document */ body{margin: auto; text-align: center; background: #fff; font-size: 80%;} .container{ margin: auto; padding-top: 6px; width: 1000px; text-align: left; background: #fff;} /* Main Menu */ .container .nav{background: #fff; height:68px; line-height:34px;left:0px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; color: #fff; text-transform:uppercase;margin-left: 6px; } .container .nav ul{list-style: none; position:relative;} .container .nav ul li{display: inline; float: left; position:relative; font-size: 0.9em; } .container .nav ul li a{text-decoration:none; color:#fff; background: #A90100; padding-left: 20px; } .container .nav ul li a, .container #nav ul li a span{ display: block; float: left;} /* Hide from IE5-Mac \*/ .container .nav a, .container .nav a span{float: none} .container .nav ul li a:hover{text-decoration:none; color:#fff; background: #351405; } .container .nav ul li.active a{text-decoration:none; color:#fff; background: #351405; } .container .nav ul li.active a span{text-decoration:none; color:#fff; background: #351405; } .container .nav ul li.active ul{display: block;} .container .nav ul li a span{background: #A90100; padding-right: 20px; } .container .nav ul li a:hover span{text-decoration:none; color:#fff; background: #351405; } .container .container .nav li > ul {top: auto;left:auto;} .container .nav ul li ul{ display:none; position: absolute; width: 700px; left: 0px; top: 0px; float: left; font-family:Arial, Helvetica, sans-serif; font-size: 12px; text-transform:none; font-weight: normal;} .container .nav ul li:hover ul{ z-index:100;} .container .nav ul li ul.item1{ left: 10px; z-index: 0;} .container .nav ul li ul.item2{ left: -67px; z-index: 0;} .container .nav ul li ul.item3{ left: -144px; z-index: 0;} .container .nav ul li ul.item4{ left: -221px; z-index: 0;} .container .nav ul li ul.item5{ left: -298px; z-index: 0;} .container .nav ul li ul.item6{ left: -375px; z-index: 0;} .container .nav ul li:hover ul.item1{z-index: 100;} .container .nav ul li:hover ul.item2{z-index: 100;} .container .nav ul li:hover ul.item3{z-index: 100;} .container .nav ul li:hover ul.item4{z-index: 100;} .container .nav ul li:hover ul.item5{z-index: 100;} .container .nav ul li:hover ul.item6{z-index: 100;} .container .nav ul li ul li{ display:inline; position: absolute; float: left; left:10px; top: 39px; height: 24px; line-height: 24px; width: 700px; float: left; color: #fff; font-family:Arial, Helvetica, sans-serif; font-size: 1em; text-transform:none; font-weight: normal; background: #351405;} .container .nav ul li:hover ul {display: block;}
|
|||||||