|
CSS - Help With Weird Hover Area Problems
Hey all I'm new here, (and I'll be honest) mainly because I heard this is a good place to get help. My site is nateandjong.com (a joint blog between me, "jong" and a friend "nate"). If you view the page, you will see that the rollovers for buttons in the navigational bar only occur when the mouse points to the top half of the button. When the bottom half is clicked nothing happens. Also, when the button is clicked, the dotted outline surrounds the entire image as it should. What's the deal?
The css style governing one of the buttons is: #mainButton{ display:block; width:80px; height:30px; background: url('images/main_btn.jpg') 0 0 no-repeat; } #mainButton:hover{ background-position:0 -30px; } The html displaying the buttons is as follows: <div id="navbar"> <div id="navbuttons"> <table border=0 cellpadding=0 cellspacing=0><tr> <td><a id="mainButton" href="/"></a></td> <td><a id="aboutButton" href="/about/"></a></td> <td><a id="faqButton" href="/"></a></td> <td><a id="archiveButton" href="/archive"></a></td> <td><a id="rssButton" href="/"></a></td> <td><a id="contactButton" href="/"></a></td> </tr></table> </div> </div> does anybody have any ideas? other information: I am using Wordpress 2.1 and my theme is worked off of the generic kubrick theme. THANKS in advance. I have been searching and googling this problem for hours to no avail. Similar Tutorialshey guys I am quite new to CSS, so i am hoping someone will be able to enlighten me - i am sure this is one of those "easy to sort out when you know how to work with IE7" problems... Anyway - this page is causing me problems anambar. co. uk/ listings / The page displays fine in Firefox, but in IE7, the Square images for each event are cut off halfway. Seems like they are hidden behind another div layer... Any ideas why? or how this is solved? Any feedback on dodgy CSS / code also welcome - I had loads of problems with the dreaded Operation Aborted in IE7 yesterday with conflicting JS, hence the lightbox code being right at the end of the page, so if anyone knows a cleaner solution or why its happening, i would love to know! Cheers guys Jim i have an icon on the site that users can place their mouse cursor over and a popup appears with helpful info. however on a friends machine today i found that the popup appears out of place....is thre a way that i can place the popup statically in one place on any machine... here is the code Code:
div#tooltip a span {display: none;}
div#tooltip a:hover span {display: block;
position: absolute; top: 270px; left: 705px; width: 125px;
padding: 5px; margin: 10px; z-index: 100;
color: black; background-color:#FFFFCC; border: 1px solid #ccc;
font: 10px Verdana, sans-serif; text-align: center;}
an example of this can been seen here any help would be helpful thanks RF Hello, I am designing a web page and I am having problems with a hover effect in IE6. The page is located at http://www.backontrack.nu/egusin/layout.php and if you hover over the menu items using Firefox (or any other real browser) you will see the hover effect. If you try doing this in IE6 there won't be any hover. Is there some obvious way of fixing this that I'm missing? Another thing, I would like to center the page. I can do this by adding margin: 0 auto; to the container class but this doesn't work in IE6. I know I could do the centering with a wrapper and some negative margins but I'd rather avoid that if at all possible. The odd thing someone at http://www.xs4all.nl/~peterned/examples/csslayout1.html is using the technique I tried for centering and it seems to work for him, even in IE6. Thanks in advance! /Robert Thanks for taking the time to read my question. I am having problems with hover on my menu. Just before you mouse over the next button, the previous one lights up. I really don't know why. See: #MenuItemTop and #MenuItem I've attached my html, and my css. I have no where to post it. Thanks again. Brad One is my fault for sure, the other maybe not. http://67-42-48-70.eugn.qwest.net/s...playseries2.php That's my site. If it's down, it basically some links that when hovered, display an image. The css is below. Code:
.seriesbox
{
height: auto;
width: auto;
}
.flashybox
{
/*float: left;*/
display: block;
height: auto;
width: auto;
}
.flashybox a span
{
display: none;
float: left;
color: yellow;
}
.flashybox a:hover span
{
display: inline;
float: none;
color: blue;
}
It works well in FF etc etc. But not IE6. Also there's a weird purple line at the bottom of the image. Like this Here is the relevant HTML for the rollover issue. Code: <div class="flashybox"> <b>G</b><br/><a href="addcharacter.php?series=Gankutsuou&addnewcharacter=false">Gankutsuou<br/> <span><img src="pictures/gankutsuou.jpg" ></span></a> <br/></div> Any ideas on what I could do? I'm trying two "new to me" things at once here. First, I'm creating a horizontal drop down menu for the first time. Along with that, I'm using the whatever:hover method with the IE behavior fix instead of the conditional comment tables method (which is semantically incorrect). I've got two problems in IE that can be viewed he http://www.windrivers-gsp.com/test/index.php CSS: Code:
@charset "utf-8";
/* CSS Document */
/* Document Formatting */
html { width:100%;}
body, tr, th, td, p { font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
color:#000000;
margin:0px;
padding:0px;
}
#navigation { position:relative;
background:url(design/menubar.gif) #009933;
background-repeat:repeat-x;
width:100%;
height:30px;
text-align:center;
display:block;
}
#nav2 { position:absolute;
left:50%;
width:628px;
margin-left:-314px;
}
#container { position:relative;
max-width:1400px;
min-height:400px;
overflow:visible;
margin-left:auto;
margin-right:auto;
border-bottom:1px solid #666666;
padding:15px 10px 10px 10px;
z-index:2;
}
#content { font-size: 1em;
margin-right:36%;
overflow: visible;
background: #FFF;
text-align: left;
height: auto;
padding-right:10px;
}
#rightpane { font-size: 1em;
float:right;
margin-top:0;
width:35%;
overflow: visible;
text-align: left;
height: auto;
}
#fixcont {width:100%;float:left}
/* PIE/Aslett Clear Fix */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* New Navigation Menu Styling */
#menu {
width: 100%;
float: left;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 157px;
float: left;
}
#menu a, #menu h2 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
display: block;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
margin: 0;
padding: 0;
height:30px;
line-height:30px;
}
#menu h2 {color: #000; background:url(design/menutab.gif); font-weight:normal;}
#menu h2:hover {background-position: 0 30px;}
#menu a {color: #000; text-decoration: none;}
#menu ul ul a {font-size:.8em; background-color:#a4906d;}
#menu ul ul a:hover {background-color:#CCCCCC;}
#menu ul li {position: relative;}
#menu ul ul {position: absolute; z-index: 10;}
div#menu ul ul {display: none;}
div#menu ul li:hover ul {display: block;}
HTML: 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=utf-8" />
<title>Test Menu</title>
<link href="menutest.css" type="text/css" rel="stylesheet" />
<!--[if IE]>
<style type="text/css" media="all">
body { behavior: url(csshover.htc); font-size: 100%;}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 30px;}
#menu a, #menu h2 { font: 1em; font-family: Verdana, Arial, Helvetica, sans-serif;}
</style>
<![endif]-->
<meta http-equiv="Content-Language" content="en-us" />
<meta name="title" content="Test Menu" />
<meta name="Publication_Date" content="09/07" />
<meta name="robots" content="ALL" />
<meta name="revisit-after" content="2 weeks" />
</head>
<body>
<div id="navigation">
<div id="nav2">
<div id="menu">
<ul>
<li><h2><a href="index.php">Home</a></h2></li>
</ul>
<ul>
<li><h2><a href="index.php">Page Two</a></h2>
<ul>
<li><a href="index.php">Page 2.1</a></li>
<li><a href="index.php">Page 2.2</a></li>
<li><a href="index.php">Page 2.3</a></li>
</ul>
</li>
</ul>
<ul>
<li><h2><a href="index.php">Page Three</a></h2></li>
</ul>
<ul>
<li><h2><a href="index.php">Page Four</a></h2>
<ul>
<li><a href="index.php">Link 1</a></li>
<li><a href="index.php">Link 2</a></li>
<li><a href="index.php">Link 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="container" class="clearfix">
<div id="content"><div id="fixcont">
<p style="text-align:center;">Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here;
Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here;
Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; Content Goes Here; </p>
</div></div>
<div id="rightpane"><p>Right Side Content</p></div>
</div>
</body>
</html>
Basically, it looks like my #container div has a higher z-index than my menu drop downs, despite stating otherwise in the CSS. Also, the drop down <ul>'s are not directly under the header <ul>, but rather are about 50% off right. In FF everything looks good, of course. Any ideas? Hi. Pleeease help! I've created a CSS for a CMS but I'm having a problem with text color. I wanted the links to change from black to white text when hovered over. I seem to have achived this . . . until they have been clicked, and then that function is disabled and they just stay black all the time. I tried deleting cookies and temp internet folders. I tried using the :visited option in the CSS and putting color white in it and that didn't work. Can anyone help? I am a photographer for a website and I know very little about anything other than basic html. With the website lady gone on a trip around the world for a year, I ended up being the person to attempt to modify our side menu to show an additional column of subcategories. I tinkered around with the code we had and I managed to get this to work in Firefox, however in IE7 the contents of the menu shift down a few pixels when you hover over a category. To view my problem, go to scannerparts.biz I've messed around with this for a few days and everything has become a big confusing mess so I have no choice but give in and ask for help. I thank anyone in advance for any assistance you can offer. -Emerson Here is the code: hover.css Code:
<!--
body {
behavior: url(/images/csshover2.htc);
}
div#categorynav ul {margin: 0px; padding: 0px;}
.submenu {
position: relative;
margin: 0px;
padding: 2px 0px;
width: 178px;
}
div#categorynav ul.level1 li a {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level2 li {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level3 li {
position: relative;
display: block;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#categorynav ul.level1 ul.level2 a {
background-color: #000000;
color: #fff;
width: 178px;
font-weight:normal;
padding: 4px 4px 4px 14px;
}
div#categorynav ul.level2 ul.level3 a {
background-color: #000000;
color: #fff;
width: 178px;
font-weight:normal;
padding: 4px 4px 4px 14px;
}
html>body div#categorynav ul.level1 ul.level2 a {
width: auto;
padding: 0px;
margin: 0px;
}
html>body div#categorynav ul.level2 ul.level3 a {
width: auto;
padding: 0px;
margin: 0px;
}
div#categorynav>ul a {width:auto; padding: 0px; margin: 0px;}
div#categorynav ul ul {position: absolute; display: none; width: 100px; z-index:900; padding: 0px; margin: 0px;}
div#categorynav ul ul li {padding: 0px; margin: 0px;}
div#categorynav ul.level1 li.submenu:hover ul.level2 {
display: block;
list-style-image: none;
list-style-type: none;
}
div#categorynav ul.level2 li.submenu:hover ul.level3 {
display: block;
list-style-image: none;
list-style-type: none;
}
div#categorynav ul.level2 {
top: 0px;
left: 178px;
margin: 0px;
padding: 0px;
width:160px;
}
div#categorynav ul.level2 li a:hover {
background-color: #000000;
color: red;
}
div#categorynav ul.level3 {
top: 0px;
left: 178px;
margin: 0px;
padding: 0px;
width:160px;
}
div#categorynav ul.level3 li a:hover {
background-color: #000000;
color: red;
}
Abbreviated Header Source (abbreviated for max character requirement, I think I left all the vital stuff there) Code:
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<ss:comment><link href="hover.css" type="text/css" rel="stylesheet" media="screen"/></ss:comment>
<link href="$store.images['hover.css']" type="text/css" rel="stylesheet" media="screen"/>
<style type="text/css">
<!--
/* Style Sheet */
body {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 30px;
margin-left: 1px;
background-image: url(/images/backgroundgray.jpg);
background-repeat: repeat-x;
background-position: center bottom;
}
html { height: 100%; margin-bottom: 1px; }
#outline{
border :0px solid #ffffff;
width :760px;
}
#categories{
background-color:#000000;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 5px 5px 1px 0px;
font-weight :bold;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
#cat1{
background-color:#000000;
color: #ffffff;
text-decoration:none;
text-align: left;
display: block;
font-weight :normal;
font-size: 9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width: 178px;
padding: 0px;
}
#cat1 a{
background-color:#000000;
color: #ffffff;
text-decoration:none;
text-align: left;
display: block;
font-weight: normal;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
#cat1 a:hover{
background-color:#000000;
color:#ff0000;
text-decoration:none;
text-align : left;
display: block;
font-weight: normal;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
width :178px;
padding: 0px;
}
.leftnav {
background-color:#000000;
color:#ffffff;
text-decoration:none;
font-weight :bold;
font-size:9pt;
font-family:<ss:value source=$font.paragraph.face/>;
padding : 2px 5px 1px 0px;
}
.leftnav A:link {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:visited {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:hover {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ff0000;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
.leftnav A:active {
background-color:#000000;
border-bottom : 1px solid #666666;
color:#ffffff;
text-decoration:none;
text-align : left;
display: block;
padding : 2px 5px 1px 0px;
font-weight :bold;
}
A:link {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:visited {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:hover {text-decoration:none;color:<ss:value source=$font.paragraph.color/>;}
A:active {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
.content {font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}
.title {font-size:10pt;font-weight:bold;font-family:<ss:value source=$font.paragraph.face/>
;color:#ffffff;}
.footer {font-size:9pt;font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}
-->
</style>
</head>
<body>
<center>
<div id="outline">
<table width="760" border="0" cellspacing="0" cellpadding="0">
<!-- banner image -->
<tr valign="top"><td colspan="4"><a href="(URL address blocked: See forum rules)"><ss:image source="$templateSet.images['header.jpg']" border="0"/></a></td></tr>
<tr valign="top">
<!-- left nav -->
<td bgcolor="#000000"> </td>
<td width="175" bgcolor="#000000">
<div class="leftnav">
<!-- store logo -->
</div>
<div class="leftnav">
<div style="border-bottom : 0px solid #666666;"> </div>
<!-- home -->
</div>
<!-- categories -->
<p><font face="Arial,Helvetica,sans-serif" size="2" color="white"><b>Parts and Products:</b></font></p>
<div id="categorynav">
<div id="categories">
<ul class="level1">
<ss:foreach item="category" within="$catalog.categoryList()">
<ss:sortby item="categorypriority" direction="asc"/>
<ss:if test="$category.treeLevel == '1'">
<ss:set name="hasSub" value="0"/>
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:set name="hasSub" value="1"/>
</ss:foreach>
<li class="submenu">
<div id="cat1"><ss:link source="$category"/></div>
<ss:if test="$hasSub == '1'">
<ul class="level2">
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:sortby item="categorypriority" direction="asc"/>
<ss:if test="$category.treeLevel == '2'">
<ss:set name="hasSub" value="1"/>
<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
<ss:set name="hasSub" value="1"/></ss:foreach></ss:if>
</li>
<li class="submenu">
<div id="cat1"><ss:link source="$subcategory"/></div>
<ss:if test="$hasSub == '1'">
<ul class="level3">
<ss:foreach item="subcategory" within="$subcategory.childrenToDepth(1)">
<li><ss:link source="$subcategory" title="$subcategory.name"/></li>
</ss:foreach>
</ul>
</ss:if>
</ss:foreach>
</ul>
</ss:if></ss:foreach>
</li>
</ss:if></ss:if></ss:foreach>
<br>
</ul>
</div>
</div>
I have a drop down menu located at http://www.fieldspianos.com/new/index.php If you hover over the menu items they turn black and white when you are right on the text but not if you are in the area surrounding it which is what I also need to occur. You can view the source on the page for the html but I will include the css below. This is the basic layout of the menu: Code:
<ul>
<li>About Us</li>
<ul>
<li><a href="#">Locations</a></li>
etc..etc..etc.. Here is the css: Code:
/*Begin Content of drop down menu*/
a {
outline:none;
}
* html div#dropdownmenu ul {
float: left;
}
* {
margin: 0;
padding: 0;
}
div#dropdownmenu {
float: left;
background-color: #C8C6C6;
font-size:11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div#dropdownmenu ul li {
list-style-type: none;
float: left;
background-color: #000000;
position: relative;
}
div#dropdownmenu ul li:hover {
list-style-type: none;
background-color: #000000;
}
/*Hides drop downs when not overed over and reveals them when they are hovered over.*/
body div#dropdownmenu ul li ul {
display: none;
}
body div#dropdownmenu ul li:hover ul {
display: block;
}
div#dropdownmenu ul li ul {
margin: 0;
width: 13em;
position: absolute;
left: -1px;
}
div#dropdownmenu ul li ul li {
width: 100%;
background-color:#bdb35e;
color: #660000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 3px;
}
div#dropdownmenu ul li ul li:first-child {
border-top: 1px solid #000;
}
div#dropdownmenu ul li ul li:hover {
color: #FFFFFF;
background-color: #000000;
}
div#dropdownmenu ul li ul li a {
color: #660000;
text-decoration:none;
outline: none;
}
div#dropdownmenu ul li ul li a:hover {
color: #FFFFFF;
background-color: #000000;
text-decoration:none;
outline: none;
}
div#dropdownmenu ul li:hover ul, div#dropdownmenu ul li ul:hover {
display: block;
}
Any help is greatly appreciated, this seems like it would be a simple fix but I can't figure it out. Maybe I am overlooking some small detail. Thanks! omg I am going to fall from the window with this stupid language lol... Until yesterday, I was designing properly my site, using css and linking it in my php properly andddddddd.......... today I noticed a weird result. When I change something in css, I can see no result in the site. Even if I delete code from css, the site seems to be cached! I use Mozilla, I tried to clean cache, the css is properly linked... whats going on now Have anyone else faced a similar problem?... Hey everyone, I have an odd problem. CSS Code: Original - CSS Code ul#admin_menu li.am_item{ float:left; clear:none; display:inline; border:0; padding:0; margin:0; width:24%; }
ul#admin_menu li.am_item{
This works... CSS Code: Original - CSS Code li.am_item{ float:left; clear:none; display:inline; border:0; padding:0; margin:0; width:24%; }
li.am_item{
This doesn't work... I don't understand why. What gave it away was the display:inline; The first one displays them inline, the second displays them block and they don't get their width. I'm trying to get my link area to display so that the user can move over the area surrounding the link as opposed to the link text itself, but I can't seem to get it to work properly. I thought I could just set the padding and that would take care of it. Code:
<div id="navBar">
<h4>Interface Links</h4>
<a href=".\links.html">Link</a>
<a href=".\links.html">Link</a>
<a href=".\links.html">Link</a>
<a href=".\links.html">Link</a>
<a href=".\links.html">Link</a>
<a href=".\links.html">Link</a>
<a href=".\links.html">Link</a>
<a href=".\links.html">Link</a>
<a href=".\links.html">Link</a>
</div>
Code:
#navBar
{
position:absolute;
top:3em;
right:0;
width:15%;
margin:0;
padding:0;
background-color:#CCCCFF;
font-size:1em;
border-left:2px solid #666699;
}
#navBar h4
{
padding:0;
margin:0;
background-color:#666699;
border-top:2px solid #666699;
font-size:.90em;
text-transform: lowercase;
color:#FFFFCC;
}
#navBar a
{
display:block;
text-decoration:none;
padding: 8px 0px 2px 10px;
}
#navBar a:hover
{
background-color:#9999CC;
}
My name is Steven and I wanted to officially introduce myself and see if anyone could help me with a css issue. I have set the page up and upon checking an item, I want the page to show the form below. I was able to do that but either way it keeps the space where the form is which in fact, it should minimize and maximize the space upon clicking the check item. Instead, the area is still there. This seems to the only issue that I am unable to resolve and would greatly appreciate it if someone could help. I have listed the code below as well as attached the css and the page( If images are need, please let me know: Code: html, body {
padding: 0px;
margin: 0px;
background-color: #FFFFFF;
font-family:Arial, Helvetica, sans-serif;
}
#logo {
background: url(profileimages/logo.png) no-repeat;
position: absolute;
left: 6px;
top: 3px;
z-index: 4;
width: 92px;
height: 64px;
}
#congratulations {
position: absolute;
left: 22px;
top: 377px;
z-index: 3;
width: 914px;
height: 30px;
font-size:26px;
font-weight:bold;
color:#4fa700;
}
#toptext {
position: absolute;
left: 31px;
top: 85px;
z-index: 6;
width: 897px;
height: 16px;
font-size:16px;
font-weight:bold;
color:#1b1b1b;
}
#cartproduct,
#cartproductcopy {
position: absolute;
z-index: 2;
width: 268px;
height: 20px;
font-size:18px;
color:#272727;
}
#shippinginformation {
position: absolute;
left: 226px;
top: 421px;
z-index: 2;
width: 711px;
height: 31px;
font-weight:bold;
font-size:34px;
color:#272727;
}
#willbesecure {
position: absolute;
left: 83px;
top: 285px;
z-index: 3;
width: 315px;
height: 14px;
font-size:12px;
font-weight:bold;
color:#272727;
}
#foryourarea {
position: absolute;
left: 682px;
top: 257px;
z-index: 3;
width: 233px;
height: 14px;
font-size:11px;
color:#272727;
font-weight:bold;
}
.toplinksbar {
color:#006FD6;
text-decoration:none;
}
.toplinksites {
font: 12px/14px Arial;
margin: 0px;
color: #1B1B1B;
text-align: left;
text-decoration: underline;
}
#toplinks {
position: absolute;
left: 745px;
top: 25px;
z-index: 2;
width: 227px;
}
#item,
#qtyproductback {
background: url(profileimages/layer5copy12.gif) no-repeat;
position: absolute;
left: 11px;
z-index: 2;
width: 31px;
height: 25px;
}
#totalback,
#priceback {
background: url(profileimages/layer5copy9.gif) no-repeat;
position: absolute;
top: 156px;
z-index: 2;
width: 124px;
height: 25px;
}
#cartproductcopy {
top: 720px;
left: 262px;
}
#ourprice {
position: absolute;
left: 803px;
top: 190px;
z-index: 2;
width: 117px;
height: 28px;
font-size:12px;
font-weight:bold;
}
.ourpricepercent {
color:#43a000;
}
#securelock {
background: url(profileimages/id46vectorsmartobject.gif) no-repeat;
position: absolute;
left: 525px;
top: 875px;
z-index: 2;
width: 20px;
height: 27px;
}
#profilevectorsmartobject {
background: url(profileimages/vectorsmartobjectsmall.gif) no-repeat;
position: absolute;
left: 15px;
top: 259px;
z-index: 3;
width: 62px;
height: 68px;
}
#cartproduct {
top: 191px;
left: 54px;
}
#productdescription {
position: absolute;
left: 59px;
top: 163px;
z-index: 3;
width: 140px;
height: 13px;
color:#272727;
font-size:14px;
font-weight:bold;
}
#retailprice {
position: absolute;
left: 669px;
top: 190px;
z-index: 2;
width: 117px;
height: 13px;
font-size:13px;
color:#ff0000;
}
#acceptedpayments {
position: absolute;
left: 490px;
top: 270px;
z-index: 2;
width: 121px;
height: 13px;
font-size:12px;
font-weight:bold;
color:#272727;
}
#enteryourzipcode {
position: absolute;
left: 683px;
top: 279px;
z-index: 3;
width: 145px;
height: 12px;
font-size:12px;
font-weight:bold;
color:#272727;
}
#profilereadmoreaboutit {
position: absolute;
left: 87px;
top: 300px;
z-index: 3;
width: 98px;
height: 9px;
}
.profilereadmoreaboutitlink {
text-decoration:underline;
color:#3170ab;
font-size:10px;
}
#formback {
background: url(profileimages/layer5copy13.gif) no-repeat;
position: absolute;
left: 557px;
top: 467px;
z-index: 2;
width: 380px;
height: 381px;
}
#formtable {
font-size:14px;
font-weight:bold;
}
#item {
top: 187px;
}
#qtyproductback {
top: 156px;
}
#checkback {
background: url(profileimages/layer5copy10.gif) no-repeat;
position: absolute;
left: 677px;
top: 249px;
z-index: 2;
width: 249px;
height: 77px;
}
#lowerbar {
background: url(profileimages/layer1copy5.gif) no-repeat;
position: absolute;
left: 4px;
top: 342px;
z-index: 2;
width: 952px;
height: 3px;
}
#shippingback {
background: url(profileimages/layer5copy7.gif) no-repeat;
position: absolute;
left: 566px;
top: 156px;
z-index: 2;
width: 90px;
height: 92px;
}
#zipcodefield {
position: absolute;
left: 681px;
top: 296px;
z-index: 3;
width: 150px;
height: 25px;
}
#zipcodefieldform {
border:#aab1b7;
}
#totalback {
left: 800px;
}
#priceback {
left: 667px;
}
#formarea {
display:none;
overflow:hidden;
width:1px;
height:1px;
}
#congratulationsback {
background: url(profileimages/layer24copy.gif) no-repeat;
position: absolute;
left: 5px;
top: 368px;
z-index: 2;
width: 951px;
height: 42px;
}
#producttitleback {
background: url(profileimages/layer5copy6.gif) no-repeat;
position: absolute;
left: 48px;
top: 156px;
z-index: 2;
width: 507px;
height: 25px;
}
#layer1copy {
background: url(profileimages/layer1copy.gif) no-repeat;
position: absolute;
left: 373px;
top: 68px;
z-index: 3;
width: 400px;
height: 5px;
}
#profilesecurityback {
background: url(profileimages/layer5copy.gif) no-repeat;
position: absolute;
left: 19px;
top: 278px;
z-index: 2;
width: 395px;
height: 40px;
}
#area {
margin: 0px auto 0px auto;
background: url(profileimages/background.gif) no-repeat;
height:100%;
width: 960px;
position: relative;
}
#shipping {
position: absolute;
left: 583px;
top: 162px;
z-index: 3;
width: 54px;
height: 14px;
font-size:14px;
font-weight:bold;
color:#272727;
}
#yourcart {
position: absolute;
left: 10px;
top: 132px;
z-index: 2;
width: 106px;
height: 17px;
font-size:20px;
font-weight:bold;
color:#272727;
}
#profileshadow {
background: url(profileimages/layer16.gif) no-repeat;
position: absolute;
left: 29px;
top: 326px;
z-index: 2;
width: 32px;
height: 4px;
}
#fedex {
background: url(profileimages/layer30.gif) no-repeat;
position: absolute;
left: 579px;
top: 221px;
z-index: 4;
width: 66px;
height: 18px;
}
#paymenttypes {
background: url(profileimages/layer18.gif) no-repeat;
position: absolute;
left: 490px;
top: 291px;
z-index: 2;
width: 174px;
height: 27px;
}
#profileproductback {
background: url(profileimages/layer24.gif) no-repeat;
left: 223px;
top: 467px;
z-index: 2;
width: 323px;
height: 243px;
}
#profileproductimage {
/*background: url(profileimages/layer25.gif) no-repeat;*/
position: absolute;
left: 227px;
top: 491px;
z-index: 3;
width: 305px;
height: 200px;
}
#topbar {
background: url(profileimages/topbar.png) no-repeat;
position: absolute;
left: 15px;
top: 73px;
z-index: 5;
width: 952px;
height: 41px;
}
#freedivide {
background: url(profileimages/layer32.gif) no-repeat;
position: absolute;
left: 567px;
top: 213px;
z-index: 4;
width: 88px;
height: 1px;
}
#fedexback {
background: url(profileimages/layer31.gif) no-repeat;
position: absolute;
left: 567px;
top: 214px;
z-index: 3;
width: 88px;
height: 33px;
}
#checkbackbutton {
/*background: url(profileimages/layer21.gif) no-repeat;*/
position: absolute;
left: 835px;
top: 293px;
z-index: 3;
width: 72px;
height: 26px;
}
#lowerarrow {
background: url(profileimages/layer34.gif) no-repeat;
position: absolute;
left: 862px;
top: 344px;
z-index: 3;
width: 24px;
height: 6px;
}
#paymentline {
background: url(profileimages/layer20.gif) no-repeat;
position: absolute;
left: 490px;
top: 285px;
z-index: 2;
width: 173px;
height: 1px;
}
#form {
/*background: url(profileimages/layer23.gif) no-repeat;*/
position: absolute;
left: 571px;
top: 480px;
z-index: 3;
width: 349px;
height: 354px;
}
#checkoutbuttonback {
/*background: url(profileimages/layer6.gif) no-repeat;*/
position: absolute;
left: 556px;
top: 854px;
z-index: 2;
width: 382px;
height: 50px;
}
#total {
position: absolute;
left: 806px;
top: 163px;
z-index: 3;
width: 28px;
height: 10px;
font-size:14px;
font-weight:bold;
color:#272727;
}
#price {
position: absolute;
left: 673px;
top: 163px;
z-index: 3;
width: 30px;
height: 11px;
font-size:14px;
font-weight:bold;
color:#272727;
}
#free {
position: absolute;
left: 598px;
top: 191px;
z-index: 3;
width: 34px;
height: 10px;
font-size:14px;
color:#2e2e2e;
font-weight:bold;
}
#radiobutton {
position: absolute;
left: 571px;
top: 190px;
z-index: 3;
width: 13px;
height: 13px;
}
#qty {
position: absolute;
left: 15px;
top: 162px;
z-index: 3;
width: 25px;
height: 14px;
font-size:14px;
font-weight:bold;
color:#272727;
}
#itemnumber {
position: absolute;
left: 24px;
top: 190px;
z-index: 3;
width: 5px;
height: 13px;
font-size:18px;
color:#272727;
}
#copyright {
position: absolute;
left: 13px;
top: 971px;
z-index: 2;
width: 940px;
height: 126px;
font-size:11px;
}
.copyrighttext {
text-align:center;
}
.copyrightlinks {
text-decoration:underline;
color:#000000;
}
I'm having problems with a div, a simplified example is at http://alphaworks.co.uk/test/child.htm (code below), basically I want the grey area to completely surround the image and the text. At the moment the grey area (a div) only goes to the bottom of the text and the image sticks out the bottom of it. Can someone explain why this is and what I can do to get it doing what I want it to? Many thanks, Geoff Code: <html>
<head>
<style type="text/css">
.child
{
border : solid thin blue;
background : gray;
}
.child .thumb
{
float : left;
}
.thumb img
{
border : 1px solid black;
}
.child .text
{
margin-left : 220px;
}
.child .name
{
font-weight : bold;
}
.child .description
{
font-style : italic;
}
</style>
</head>
<body>
<div class="child">
<div class="thumb">
<img src="" alt="Image" width="200" height="134" />
</div>
<div class="text">
<span class="name">
Album name
</span>
<br/>
<span class="description">
Album description
</span>
</div>
</div>
</body>
</html>
The border around the fieldset in IE7 is messed up. The right border is shifted to the left several pixels. It looks fine in IE6. In FF the border isn't shifted but there is less padding on the right side of the fieldset than the left. I can't figure that one out either. If I zero out all the padding & borders the input/textareas push a few pixels out the right side of the fieldset. Looks fine in IE6. So has anyone seen either of these issues and might know how to correct them? Here is the page in question Thanks! Hey, at my site: http://www.optimumnutrition.com/products in IE/6 I am having a problem with the last side box in the left column. You can see a gap between the link to conditions of use and the curved bottom of the box. Anyone see where this is coming from? Thanks, Ryan Hey gang, quick question. I'm tring to make a "Thermometer" of sorts for my site, and instead of making lots of images in photoshop, I figured I could do it a little more dynamicly using divs and css. I was right, as Firefox displays my code perfectly, however, IE messes up the whole thing by keeping the allocated space for the one div in the place where its positioned in the code. Dumb thing. I figure it has something to do with the display property, but I'm not sure which to use. Any suggestions? Thanks! PHP Code: <div style="height: 500px; width: 100px; padding: 0px; margin: 0px; border: 0px black solid; background: url('meter_color.jpg');"> <div style="position: relative; top: 0px; left: 0px; height: 125px; width: 100px; padding: 0px; margin: 0px; background: #FFFFFF; z-index: 1;"></div> <div style="position: relative; top: -125px; left: 0px; height: 500px; width: 100px; padding: 0px; margin: 0px; background: url('mask.gif'); z-index: 2;"></div> </div> (images attached) -Jim I've got a body of text within a DIV tag. For some reason, if I roll my mouse over the text, the entire body of text changes color as if it were a link. I've double checked to see if there are any open HREF tags but there are none. Any ideas? Safari 1.3 on Mac OSX 10.3.9 if it matters. I've also tested on Netscape, Opera, Firefox and IE and all of these work fine. here be the code: Code: .mainBody {
color: #000;
font-family: helvetica, arial, "sans serif";
font-size: 12px;
text-align: justify;
padding-left: 35px;
padding-right: 35px;
}
.mainBody:link, .mainBody:visited {
color: #600;
text-decoration: underline;
}
.mainBody:active, .mainBody:hover {
color: #996600;
text-decoration: none;
}
.pageLinks {
color: black;
font-family: helvetica, arial;
font-size: 14px;
text-align: center;
}
.pageLinks:link, .pageLinks:visited {
color: #960;
text-decoration: underline;
font-size: 14px;
}
.pageLinks:active, .pageLinks:hover {
color: #960;
text-decoration: none;
font-size: 14px;
}
Hi, I'm trying to display text in a floating div in the middle of the page. The style is as follows: Code:
.mainContentAreaBackground {
position:absolute;
z-index:11;
top: 190px;
left: 230px;
width:70%;
height:72%;
}
#mainContentArea{
z-index:12;
position:absolute;
overflow:auto;
overflow-x:hidden;
width: 67%;
height: 68%;
top:205px;
left:246px;
text-align:left;
font-family:Tahoma;
font-size:10.0pt;
visibility:visible;
}
There are two anomalies which I think might be bugs in IE's implementation of CSS, and I was hoping someone might be able to give me some advice as to how to get around them. The first problem is that, when going to highlight text in the main content area, all objects on the page are selected, rather than just the intended text. The second anomaly is that, when using the mouse wheel to scroll down in the mainContentArea div when there's overflow, the cursor needs to be hovering over text. If it's hovering over any place with a "hole" in it, such as the space between paragraphs, then it will not scroll. Everything works fine in Firefox. You can see what I'm talking about he http://www.cs.mcgill.ca/~jbeard4/lepdev If anyone has any advice, please let me know. Thanks! -Jake |
|||||||