|
CSS - Dissapearing Caret
I'm using some light box variation to overlay a form ontop of a page. When the form shows up the caret ( text cursor) doesn't. Any ideas?
If you want to check it out: http://mark2.netriver.net/lightbox/index.php Mark Similar TutorialsHi I have a CSS drop down menu but when I hover over one of the dropped down items the text the text on the original hover button dissapears. This is because the text is the same color as the rollover color. How could I make it so that the rollover text color is different? At the moment only the drop down items text changes color on hover Code:
#navMenu {
margin:0;
padding:0;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background-color:#f0eccd;
}
#navMenu ul li a {
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
text-decoration:none;
width:95px;
height:30px;
display:block;
color:#ff9a29;
}
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:30px;
}
#navMenu ul li:hover ul {
visibility:visible;
}
#navMenu li:hover {
background-color:#ff9a29;
}
#navMenu ul li:hover ul li a:hover {
background:#ff9a29;
color:#FFF;
}
#navMenu a:hover {
color:#FFF;
}
Thanks Thomas This site..theres supposed to be a menu top-right. In IE it appears then dissappears when page finished loading! freehotsms(dot)com Html code can be viewed from the browser..heres my CSS-its quite messy and long! I think theres an JAVASCRIPT conflict but idk! THANKS..Darned IE..doesnt even support border radius Code: body {margin:0px;
}
input.rad {padding:5px;
background:#0bb9ff;
color:#000000;
font-size:12px;
font-family:Sans-serif;
text-align:center;}
#header {
background:#ffffff;
height:auto;
border-bottom:5px solid #e71b11;
}
#inside {width:100%;
padding-top:0px;
height:211px;
clear:right;
/*border-top:5px solid #e2e2e2;
border-left:5px solid #e2e2e2;
border-right:5px solid #e2e2e2;
-moz-border-radius: 1em 1em 1em 1em;*/
margin-right:auto;
margin-left:auto;
}
#infooter {height:20px;
width:700px;
text-align:center;
margin:auto;
padding-top:10px;
}
#set {width:441px;
margin-right:auto;
margin-left:auto;
background:url(images/info.png);
height:68px;
margin-top:5px;}
td{font-family:arial;
font-size:13px;
}
#out {width:100%;
height:10px;
background:url(images/bottom.png);}
#rightlogin {
float:right;
-moz-border-radius: 0em 0em .5em .5em;
padding:5px;
background:#f7f7f7;
border-left:2px solid #e2e2e2;
border-right:2px solid #e2e2e2;
border-bottom:2px solid #e2e2e2;
margin-right:80px;}
.right_ad{height:80px;
width:auto;
float:right;
margin-top:auto;
margin-bottom:auto;
margin-right:10px;}
.somepadding {padding-left:10px;
padding-right:10px;}
.eco{width:100%;
text-align:center;
padding-right:150px;
}
img.icon{width:60px; height:60px;padding-left:10px;padding-right:10px;}
.center {margin-left:auto;
margin-right:auto;
width:468px;}
.accountbutton {
padding:5px;
background:#0bb9ff;
color:#000000;
font-size:12px;
font-family:Sans-serif;
text-align:center;}
#button {height:17px;
width:80px;
float:left;
-moz-border-radius: 1em 1em 1em 1em;
padding:5px;
background:#0bb9ff;
margin-right:10px;
color:#000000;
font-size:12px;
font-family:Sans-serif;
text-align:center;
}
a.top:hover{text-decoration:none;
color:#ffffff;
font-style:strong;}
a.top:active{text-decoration:none;
color:#ffffff;
font-style:strong;}
a.top:link{text-decoration:none;
color:#ffffff;
font-style:strong;}
a.top:visited{text-decoration:none;
color:#ffffff;
font-style:strong;}
a.in:hover{text-decoration:underline;
color: #448;
font-style:strong;
font-family:arial;
font-size:13px;}
a.in:active{text-decoration:none;
color: #448;
font-style:strong;
font-family:arial;
font-size:13px;}
a.in:link{text-decoration:none;
color: #448;
font-style:strong;
font-family:arial;
font-size:13px;}
a.in:visited{text-decoration:none;
color: #448;
font-style:strong;
font-family:arial;
font-size:13px;}
a.tin:hover{text-decoration:underline;
color: #448;
font-style:strong;
font-family:arial;
}
a.tin:active{text-decoration:none;
color: #448;
font-style:strong;
font-family:arial;
}
a.tin:link{text-decoration:none;
color: #448;
font-style:strong;
font-family:arial;
}
a.tin:visited{text-decoration:none;
color: #448;
font-style:strong;
font-family:arial;
}
a.n:hover{text-decoration:underline;
color:#ffffff;
font-style:strong;}
a.n:active{text-decoration:none;
color:#ffffff;
font-style:strong;}
a.n:link{text-decoration:none;
color:#ffffff;
font-style:strong;}
a.n:visited{text-decoration:none;
color:#ffffff;
font-style:strong;}
#left_logo {width:487px;
height:211px;
background:url(images/logo.png);
float:left;
margin-left:8%;
}
#hold {width:600px;
float:left;
margin-left:346px;
}
#login {width:500px;
margin-right:auto;
margin-left:auto;
background:#f7f7f7;
-moz-border-radius: .5em .5em .5em .5em;
margin-bottom:10%;
margin-top:20px;
padding:5px;
border:2px solid #e2e2e2;
}
#log {background:#f7f7f7;
padding:10px;
}
input.o {height:35px;
width:300px;
font:28px arial;
border:1px solid #cecece;}
input.o:hover {height:35px;
width:300px;
font:28px arial;
border:1px solid #ffd35b;
background:#feff9c;}
h2.login{
font-family:Georgia;
color:#4E443C;
text-transform: none; font-weight: 100;
font-size:35px;
margin-bottom:20px;
text-align:center;
color: #000;
text-shadow: 0px 1px 1px #fff;
margin-top:10px;
margin-bottom:10px;}
#menu_container {height:25px;
padding:10px;
border-top:3px solid #e2e2e2;
width:auto;
margin-right:10px;
float:right;
background:url(images/menub.png);
-moz-border-radius: 0em 0em 1em 1em;
border-bottom:1px solid #e2e2e2;
border-left:1px solid #e2e2e2;
border-right:1px solid #e2e2e2;
}
.newsletter{background:#ffffff;
width:auto;
padding:8px;}
#menuright{height:25px;
padding-top:80px;
padding:10px;
background:url(images/rig.png);
width:auto;
border-top:3px solid #e2e2e2;
float:right;
-moz-border-radius: 0em 0em 1em 1em;
border-bottom:1px solid #e2e2e2;
border-left:1px solid #e2e2e2;
border-right:1px solid #e2e2e2;}
#menu_button {width:auto;
height:30px;
background:#0bb9ff;
float:left;
color:#ffffff;
font-size:13px;
font-family:Sans-serif;
padding-top:10px;
padding-left:20px;
padding-right:20px;}
#maincont{width:950px;
margin-right:auto;
margin-left:auto;
margin-bottom:10px;
background:#f7f7f7;
min-height:800px;
padding-left:10px;
padding-right:10px;
padding-top:0px;
border-top:2px solid #e2e2e2;
-moz-border-radius: 0em 0em .8em .8em;
border-left:2px solid #e2e2e2;
border-right:2px solid #e2e2e2;
border-bottom:2px solid #e2e2e2;
}
#bore {float:left;
width:172px;
height:74px;
background:url(images/bore.png);
clear:right;
margin-top:98px;
margin-right:10px;
}
.boretext {margin-top:34px;
text-align:center;
font-family:Georgia bold;
color:#ffffff;
font-size:15px;}
#rightcolumn {width:250px;
background:#f7f7f7;
min-height:600px;
padding-right:10px;
float:right;
margin-bottom:10px;}
#social{padding-top:10px;
padding-bottom:24px; width:190px; margin-right:auto; margin-left:auto;}
#centercolumn {width:655px;
padding:10px;
min-height:500px;
float:left;
height:auto;
background:#f7f7f7;
margin-bottom:10px;
}
/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */
/*--------------------------------------------------
REQUIRED to hide the non-active tab content.
But do not hide them in the print stylesheet!
--------------------------------------------------*/
.tabberlive .tabbertabhide {
display:none;
}
/*--------------------------------------------------
.tabber = before the tabber interface is set up
.tabberlive = after the tabber interface is set up
--------------------------------------------------*/
.tabber {
}
.tabberlive {
background:#ffffff;
margin-top:1em;
min-height:500px;
.6em .6em 0em 0em;
}
/*--------------------------------------------------
ul.tabbernav = the tab navigation list
li.tabberactive = the active tab
--------------------------------------------------*/
ul.tabbernav
{
margin:0;
padding:10px;
background:#f7f7f7;
font: bold 12px Verdana, sans-serif;
}
ul.tabbernav li
{
list-style: none;
margin: 0;
display: inline;
-moz-border-radius: .6em .6em 0em 0em;
}
ul.tabbernav li a
{
padding:10px;
margin-left: 3px;
-moz-border-radius: .6em .6em 0em 0em;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
ul.tabbernav li a:link { color: #448; }
ul.tabbernav li a:visited { color: #667; }
ul.tabbernav li a:hover
{
color: #000;
background: #AAE;
border-color: #227;
}
ul.tabbernav li.tabberactive a
{
background-color: #fff;
}
td.images {text-align:center; color:#448; font: bold 12px Verdana, sans-serif;}
ul.tabbernav li.tabberactive a:hover
{
color: #000;
background: white;
-moz-border-radius: .6em .6em 0em 0em;
}
/*--------------------------------------------------
.tabbertab = the tab content
Add style only after the tabber interface is set up (.tabberlive)
--------------------------------------------------*/
.tabberlive .tabbertab {
padding:5px;
-moz-border-radius:.6em .6em .6em .6em;
border-top:0;
/* If you don't want the tab size changing whenever a tab is changed
you can set a fixed height */
/* height:200px; */
/* If you set a fix height set overflow to auto and you will get a
scrollbar when necessary */
/* overflow:auto; */
}
/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}
/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
height:200px;
overflow:auto;
}
#leftcolumn {
margin-right:0px;
background:#f7f7f7;
min-height:500px;
float:left;}
.intro {height:auto;
border:2px solid #e2e2e2;
background:#f7f7f7;
margin:20px;}
.holdvideo {margin-left:auto;
width:400px;
margin-right:auto;}
.int{width:450px;
padding:10px;
margin-right:auto;
margin-left:auto;}
.testing {font-size:12px;
color:blue;
float:right;
margin:6px;
font-family:Verdana;
}
.anothercontain{width:350px;margin-right:auto;margin-left:auto;}
.containbutton {float:right;}
.containbuttonl {float:left;}
td.buttnreg {float:right;
margin:6px;
height:50;
text-align:center;
background:url(images/late.png);
border:3px solid #ffffff;
-moz-border-radius: 1em 1em 1em 1em;
padding-top:11px;
padding-bottom:11px;
width:180px;
color:#0261ab;
font-family:Verdana;
font-size:14px;
font-style:strong;
padding-right:6px;
padding-left:6px;}
td.buttnreg:hover {float:right;
margin:6px;
height:50;
text-align:center;
background:url(images/late.png);
border:3px solid #ffffff;
-moz-border-radius: 1em 1em 1em 1em;
padding-top:11px;
padding-bottom:11px;
width:180px;
color:#ffffff;
font-family:Verdana;
font-size:14px;
font-style:strong;
padding-right:6px;
padding-left:6px;}
.scroll{overflow:auto;
height:600px;}
p.red{
font-family:Serif bold;
text-shadow: 1px 1px 2px #fff;
font-size:20px;
color:#000;
padding-bottom:6px;
margin-bottom:5px;
padding-top:6px;
text-align:center;
background:#f3f3f3;
border:2px solid #e2e2e2;
}
p.black{text-shadow: 2px 2px 3px #818173;
font-family:arial;
font-size:16px;
color:#000;
padding-bottom:10px;
margin-bottom:5px;
padding-top:16px;
text-align:center;
}
p{font-family:Verdana;
font-size:13px;
color:#000000;
margin-top:0px;
}
p.small{font-family:Sans-serif;
font-size:12px;
color:#5f5f55;
line-height:160%;
margin-top:0px;
}
p.blue{color: #448; font: bold 14px Verdana, sans-serif;}
ul {font-family:arial;
font-size:16px;
line-height:15px;
list-style-image: url(images/arrow.png);
margin-right:7px;
color:5f5f55;}
li {margin-top:7px;
margin-bottom:7px;}
#footer {-moz-border-radius: 1em 1em 0em 0em;
background:#f7f7f7;
height:40px;
clear:left;
clear:right;
border:2px solid #e2e2e2;
width:970px;
margin-right:auto;
margin-left:auto;
}
#contain {width:900px;
margin-left:auto;
margin-right:auto;}
table.fh {border-collapse:collapse;
font-size:13px;
color:#ffffff;
text-decoration:none;
width:950px;
}
.foothead { border-bottom:1px solid #f3f3f3;
height:30px;
}
tr.top {padding-top:4px;
font: strong Georgia,serif;
font-size:15px;
}
th.top {height:30px;
padding-right:50px;
text-align:left;
font: strong Georgia,serif;
font-size:15px;}
td.t {padding-right:50px;
font-style:strong;
padding:2px;
}
I am wokring with a complex form layout that is within a rounded corner box. The problem is that in Explorer it makes the H2 dissapear... I have bugtracked it down to line 71 in this document: Code: 71 float: left; I have published the files I used for bugtracking. With the error included: http://www.student.uib.no/~st11920/...1_included.html and with the troublesome line 71 outcommented: http://www.student.uib.no/~st11920/...1_excluded.html As you can see I really need that float. But is there a way to di this and not making my H2 dissapear? Hi :-) Im having some troubles with IE and it sometimes displaying and background image and then other times deciding not to: http://www.curlykale.co.uk/dentalplusnew/testingnew3.html the blue section at the bottom has a graduatied blue background which sometimes just refuses to load, but on refresh magicly jumps back into life, everything is fine with firefox and safari, just IE being a bit pesky If anybody could shed any light it would be greatly appreciated! Many Thanks :-) RiverCottage |
|||||||