|
CSS - Ie7 Problem: Button Image Not Shown
Hello,
I have a weird problem with IE7. My solution works fine on FireFox, IE8 and even IE6, but on IE7 the button image does not want to load. Here is the HTML and CSS. Code:
<!DOCTYPE html>
<html>
<head>
<style>
.sayhello{
background: url("hello.png") no-repeat scroll 0 0 transparent;
border: medium none;
height: 49px;
margin-top: 10px;
text-indent: -9999px;
text-transform: capitalize;
width: 85px;
}
</style>
</head>
<body>
<input type="button" onclick="javascript:alert('hello');" value="Say Hello!!" class="sayhello">
</body>
</html>
I can get the button to show if I set the button as position:absolute or else display:block. However these would create me other problems. Is there any other way how I can get the button to show? considering I want to show the button in relative position and next to other buttons. Similar TutorialsHello, I am using image borders and the CSS I have works on FireFox, Chrome, Opera and Safari, but not IE. Here is my CSS and HTML; Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="" >
<head>
<style>
div {
width: 200px;
margin: 0px auto;
border-width: 0px 2px 0px 2px;
-moz-border-image: url(b.PNG) 0 41 repeat;
-webkit-border-image: url(b.PNG) 0 41 repeat;
-o-border-image: url(b.PNG) 0 41 repeat;
border-image: url(b.PNG) 0 41 repeat;
}
</style>
<head>
<body>
<div>Hello this is my test
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</body>
</html>
I have tried it on IE6 to 8 and image borders show on none of these. Is there any hack/way how to support image borders also on IE? Hi all, I use an background image for a menu. Code:
#menu a, #menu a:hover {
height: 20px;
width: 150px;
text-decoration: none;
padding-left: 40px;
padding-top: 3px;
padding-right: 3px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin-bottom: 10px;
background-position: 0px;
vertical-align: middle;
}
#menu a {
color: #9E007F;
background-image: url(../imgs/nav/subNav/subNav_bg.gif);
background-repeat: no-repeat;
}
#menu a:hover {
color: #FFF;
background-image: url(../imgs/nav/subNav/subNav_bg_over.gif);
background-repeat: no-repeat;
}
It works fine in IE but not in firefox. Somehow the background image is not completely shown. It stops after the last letter. Any suggestions?? Grtz, hi i have following xhtml Code: <body> <div id="content" class="centrehack"> <div id="header" class="centrehack"> <div id="topRightLogin"> <form action="#" method="post"> <input type="text" name="uname" value="username" /> <input type="password" name="passwd" value="password" /> <input type="image" src="images/headerlogin.gif" /> </form> </div> and following css Code:
.centrehack { margin: 0 auto 0 auto; }
#content { width:960px; text-align:center; height:100%; overflow:visible; background:url(images/headerback.gif) repeat-x; }
#header { width:960px; height:47px; text-align:center; }
#topRightLogin {
width:450px;
height:47px;
float:right;
color:#fff;
font-weight:bold;
font-family:Verdana, Geneva, sans-serif;
border:#000 solid 1px;
height:30px;
display:block;
padding:0;
}
#topRightLogin input,submit {
display:inline;
padding:0px;
margin-left:5px;
height:21px;
margin-top:0px;
}
i want to display form fields and submit button in a single line with perfectly aligned horizontally. but the form fields are showing empty area above them and going down than the submit button. the problem remains same in all browser. i am attaching a screenshot of the problem as well. any help is much apprecated. thanks Hi Everyone, I have a problem trying to position a submit button on a search form. The button is an image saying "go" and I am trying to move the button down by a few pixels using CSS. Whenever I use margin-top:3px; the textfield is also moved down although I am using a class on the button of "goButton" (see code below). I want to be able to move the button only. CSS code: Code: #searchField {display:inline;}
#goButton {display:inline; margin-top:3px;}
.goButton {margin-top:3px;}
HTML/PHP code: Code: $output = '<div id="searchField"><span class="white">Search</span><input name="searchword" id="mod_search_searchword" maxlength="20" alt="search" class="inputbox'. $moduleclass_sfx .'" type="text" size="'. $width .'" value="'. $text .'" onblur="if(this.value==\'\') this.value=\''. $text .'\';" onfocus="if(this.value==\''. $text .'\') this.value=\'\';" /></div>';
if ( $button ) {
$button = '<div id="goButton"><A HREF="javascript:document.searchForm.submit()"
onmouseover="document.searchForm.go_but.src=\'/silence/templates/rhuk_solarflare_ii/images/goOver.gif\'"
onmouseout="document.searchForm.go_but.src=\'/silence/templates/rhuk_solarflare_ii/images/go.gif\'"
onclick="return val_form_this_page()">
<IMG SRC="/silence/templates/rhuk_solarflare_ii/images/go.gif"
WIDTH="19" HEIGHT="19" BORDER="0" ALT="Go"
NAME="go_but" class="goButton"></A></div>';
}
Full CSS code: Code: html, body {margin: 0; padding: 0; border: 0;}
html {
height: 100%;
}
body {
color: #5f5c5c;
background-color: #8091b4;
font-family: verdana, sans-serif;
font-size: 80%;
text-align: center;
margin: 10px 0;
line-height: 130%;
height: 100%;
margin-bottom: 1px;
font-size:10px; /*added to change all font sizes*/
}
.clr {
clear: both;
}
.outline {
border: 1px solid #cccccc;
background: #ffffff;
padding: 2px;
}
#buttons_outer {
width: 635px;
margin-bottom: 2px;
margin-right: 2px;
float: left;
}
#buttons_inner {
border: 1px solid #cccccc;
height: 21px !important;
height: 23px;
}
#pathway_text {
overflow: hidden;
display: block;
height: 25px;
line-height: 25px !important;
line-height: 22px;
padding-left: 4px;
border: 1px solid #ccc;
margin-bottom: 2px;
}
#pathway_text img {
margin-left: 5px;
margin-right: 5px;
margin-top: 6px;
}
#buttons {
float: left;
margin: 0px;
padding: 0px;
width: auto;
}
ul#mainlevel-nav
{
list-style: none;
padding: 0;
margin: 0;
font-size: 0.8em;
}
ul#mainlevel-nav li
{
background-image: none;
padding-left: 0px;
padding-right: 0px;
float: left;
margin: 0;
font-size: 11px;
line-height: 21px;
white-space: nowrap;
border-right: 1px solid #cccccc;
}
ul#mainlevel-nav li a
{
display: block;
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
color: #333333;
background: transparent;
}
#buttons>ul#mainlevel-nav li a { width: auto; }
ul#mainlevel-nav li a:hover
{
color: #fff;
background: #c64934;
}
#search_outer {
float: left;
width: 165px;
}
#search_inner {
border: 1px solid #cccccc;
padding: 0px;
height: 21px !important;
height: 23px;
overflow: hidden;
}
#search_inner form {
padding: 0;
margin: 0;
}
#search_inner .inputbox {
border: 0px;
padding: 3px 3px 3px 5px;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
color: #c64934;
margin-top:3px;
}
#header_outer {
text-align: left;
border: 0px;
margin: 0px;
}
#header {
float: left;
padding: 0px;
margin-right: 2px;
width: 635px;
height: 150px;
background: url(../images/header_short.jpg) no-repeat;
}
#top_outer{
float: left;
width: 165px;
}
#top_inner {
border: 1px solid #cccccc;
padding: 2px;
height: 144px !important;
height: 150px;
overflow: hidden;
float: none !important;
float: left;
}
#left_outer {
float: left;
margin-top: 2px;
width: 165px;
}
#left_inner {
border: 1px solid #cccccc;
padding: 2px;
float: none !important;
float: left;
}
#content_outer {
padding: 0px;
margin-top: 0px;
margin-left: 2px;
/** border: 1px solid #cccccc; **/
float: left;
width: 635px;
}
#content_inner{
float: none !important;
float: left;
padding: 0;
padding-top: 2px;
margin: 0;
}
table.content_table {
width: 100%;
padding: 0px;
margin: 0px;
}
table.content_table td {
padding: 0px;
margin: 0px;
}
#banner_inner {
float: left;
padding: 0px;
height: 70px;
}
#poweredby_inner {
float: right;
padding: 0px;
margin-left: 0px;
height: 70px;
}
#right_outer {
margin-left: 2px;
width: 165px;
}
#right_inner {
float: none !important;
float: left;
border: 1px solid #cccccc;
padding: 2px;
}
.user1_inner {
border: 1px solid #cccccc;
float: none !important;
float: left;
margin: 0px;
padding: 2px;
}
.user2_inner {
border: 1px solid #cccccc;
float: none !important;
float: left;
margin: 0px;
padding: 2px;
}
table td.body_outer {
padding: 2px;
border: 1px solid #cccccc;
}
.maintitle {
color: #ffffff;
font-size: 40px;
padding-left: 15px;
padding-top: 20px;
}
.error {
font-style: italic;
text-transform: uppercase;
padding: 5px;
color: #cccccc;
font-size: 14px;
font-weight: bold;
}
/** old stuff **/
.back_button {
float: left;
text-align: center;
font-size: 11px;
font-weight: bold;
border: 3px double #cccccc;
width: auto;
background: url(../images/button_bg.png) repeat-x;
padding: 0px 10px;
line-height: 20px;
margin: 1px;
}
.pagenav {
text-align: center;
font-size: 11px;
font-weight: bold;
border: 3px double #cccccc;
width: auto;
background: url(../images/button_bg.png) repeat-x;
padding: 0px 10px;
line-height: 20px;
margin: 1px;
}
.pagenavbar {
margin-right: 10px;
float: right;
}
#footer {
text-align: center;
padding: 3px;
}
#footerNew {
font-size:12px;
padding: 3px;
margin-left:20px;
margin-right:8px;
border-top:1px solid #7f91b4;
padding-bottom:400px;
}
#footerLeft {
float:left;
margin-left:0px;
color:#5f5c5c;
font-size:10px;
padding-left:0;
}
#footerRight {
margin-top:-15px;
float:right;
margin-right:0px;
padding-right:0;
}
.contactRollover {
margin-right:0px;
display:inline;
float:right;
width:52px;
height:13px;
background: url(/silence/templates/rhuk_solarflare_ii/images/footerContactDual.gif) no-repeat;
text-indent:-9999px;
}
a{ outline:none;}
a.contactRollover:link, a.contactRollover:visited, a.contactRollover:active {
background: url(/silence/templates/rhuk_solarflare_ii/images/footerContactDual.gif) no-repeat;
}
a.contactRollover:hover {background-position:-52px 0;}
.legalRollover {
display:inline;
float:right;
width:93px;
height:13px;
background: url(/silence/templates/rhuk_solarflare_ii/images/footerLegalDual.gif) no-repeat;
text-indent:-9999px;
}
a.legalRollover:link, a.legalRollover:visited, a.legalRollover:active {
background: url(/silence/templates/rhuk_solarflare_ii/images/footerLegalDual.gif) no-repeat;
}
a.legalRollover:hover {background-position:-93px 0;}
#searchField {display:inline;}
#goButton {display:inline;}
.goButton {margin-top:3px;}
.goRollover {
display:inline;
float:left;
width:19px;
height:19px;
background: url(/silence/templates/rhuk_solarflare_ii/images/goDual.gif) no-repeat;
text-indent:-9999px;
}
a.goRollover:link, a.goRollover:visited, a.goRollover:active {
background: url(/silence/templates/rhuk_solarflare_ii/images/goDual.gif) no-repeat;
}
a.goRollover:hover {background-position:-19px 0;}
ul
{
margin: 0;
padding: 0;
list-style: none;
}
li
{
line-height: 15px;
padding-left: 15px;
padding-top: 0px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: 0px 2px;
}
td {
text-align: left;
font-size: 11px;
}
/* Joomla core stuff */
a:link, a:visited {
color: #c64934; text-decoration: none;
font-weight: bold;
}
a:hover {
color: #900; text-decoration: none;
font-weight: bold;
}
table.contentpaneopen {
width: 100%;
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
margin: 0px;
}
table.contentpaneopen td {
padding-right: 5px;
}
p.contentpaneopen {
padding-right: 5px;
}
table.contentpaneopen td.componentheading {
padding-left: 4px;
}
table.contentpane {
width: 100%;
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
margin: 0px;
}
table.contentpane td {
margin: 0px;
padding: 0px;
}
table.contentpane td.componentheading {
padding-left: 4px;
}
table.contentpaneopen fieldset {
border: 0px;
border-bottom: 1px solid #eee;
}
.button {
color: #c64934;
font-family: Arial, Hevlvetica, sans-serif;
text-align: center;
font-size: 11px;
font-weight: bold;
border: 3px double #cccccc;
width: auto;
background: url(../images/button_bg.png) repeat-x;
padding: 0px 5px;
line-height: 18px !important;
line-height: 16px;
height: 26px !important;
height: 24px;
margin: 1px;
}
.inputbox {
padding: 2px;
border:solid 1px #cccccc;
background-color: #ffffff;
}
.componentheading {
background: url(../images/subhead_bg.png) repeat-x;
color: #666666;
text-align: left;
padding-top: 4px;
padding-left: 4px;
height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
}
.contentcolumn {
padding-right: 5px;
}
.contentheading {
height: 30px;
color: #002469;
font-weight: normal;
font-size: 16px;
white-space: nowrap;
padding-left:2px;
}
.contentpagetitle {
font-size: 13px;
font-weight: bold;
color: #cccccc;
text-align:left;
}
table.searchinto {
width: 100%;
}
table.searchintro td {
font-weight: bold;
}
table.moduletable {
width: 100%;
margin-bottom: 5px;
padding: 0px;
border-spacing: 0px;
border-collapse: collapse;
}
div.moduletable {
padding: 0;
margin-bottom: 2px;
}
table.moduletable th, div.moduletable h3 {
background: url(../images/subhead_bg.png) repeat-x;
color: #666666;
text-align: left;
padding-left: 4px;
height: 21px;
line-height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
margin: 0 0 2px 0;
}
table.moduletable td {
font-size: 11px;
padding: 0px;
margin: 0px;
font-weight: normal;
}
table.pollstableborder td {
padding: 2px;
}
.sectiontableheader {
font-weight: bold;
background: #f0f0f0;
padding: 4px;
}
.sectiontablefooter {
}
.sectiontableentry1 {
background-color : #ffffff;
}
.sectiontableentry2 {
background-color : #f9f9f9;
}
.small {
color: #999999;
font-size: 11px;
}
.createdate {
height: 15px;
padding-bottom: 10px;
color: #999999;
font-size: 11px;
}
.modifydate {
height: 15px;
padding-top: 10px;
color: #999999;
font-size: 11px;
}
table.contenttoc {
border: 1px solid #cccccc;
padding: 2px;
margin-left: 2px;
margin-bottom: 2px;
}
table.contenttoc td {
padding: 2px;
}
table.contenttoc th {
background: url(../images/subhead_bg.png) repeat-x;
color: #666666;
text-align: left;
padding-top: 2px;
padding-left: 4px;
height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
}
a.mainlevel:link, a.mainlevel:visited {
display: block;
background: url(../images/menu_bg.png) no-repeat;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #ccc;
text-align: left;
padding-top: 5px;
padding-left: 18px;
height: 20px !important;
height: 25px;
width: 100%;
text-decoration: none;
}
a.mainlevel:hover {
background-position: 0px -25px;
text-decoration: none;
color: #fff;
}
a.mainlevel#active_menu {
color:#fff;
font-weight: bold;
}
a.mainlevel#active_menu:hover {
color: #fff;
}
a.sublevel:link, a.sublevel:visited {
padding-left: 1px;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #c64934;
text-align: left;
}
a.sublevel:hover {
color: #900;
text-decoration: none;
}
a.sublevel#active_menu {
color: #333;
}
.highlight {
background-color: Yellow;
color: Blue;
padding: 0;
}
.code {
background-color: #ddd;
border: 1px solid #bbb;
}
form {
/* removes space below form elements */
margin: 0;
padding: 0;
}
div.mosimage {
border: 1px solid #ccc;
}
.mosimage {
border: 1px solid #cccccc;
margin: 5px
}
.mosimage_caption {
margin-top: 2px;
background: #efefef;
padding: 1px 2px;
color: #666;
font-size: 10px;
border-top: 1px solid #cccccc;
}
span.article_seperator {
display: block;
height: 1.5em;
}
/*added styles*/
#search {
height:30px;
width:190px;
background-color:#4c6696;
margin-top:0px;
}
.white {
color:#fff;
padding:5px;
font-size:11px;
}
/*Added from 3 col layout*/
p {margin: 0; padding: 8px;}
h2 {font-size: 1.2em; text-align: center; padding: 10px;}
.clear { clear: both; }
a {text-decoration: underline; font-weight: bold; color: #000;}
.alignright {margin-top: 0; text-align: right;}
.small {font-size: .9em;}
.wrapper {
margin: 0 auto;
width: 768px;
text-align: left;
/*background: #add8e6;*/
background: #ffffff;
border: 0px solid #000;
color:#5f5c5c;
}
/*** Below is the Tan hack, needed because the decorative side borders (thin black) on
.wrapper. It fixes the box model of IE5.x/win, making it display the same as other browsers. ***/
* html .wrapper {
width: 771px;
w\idth: 768px;
}
.outer {
border-left: 150px solid #ffffff;
border-right: 190px solid #ccd3e1;
background: url(images/blackline.gif) 100% 0 repeat-y;
}
/*** These are the visible side col BG's. The image BG is needed to replace a side border
on div.inner, which can't be used because of problems in Mozilla. The image substitutes
for the thin black divider between the right green col and the center col. If the black divider
is not wanted, the BG image may be removed. The Tan hack below feeds a IE a different
BG location, due to a BG placement variation.
***/
* html .outer {
background: url(images/blackline.gif) 565px 0 repeat-y;
}
.inner {
margin-left: -2px; /*** This fixes a small overlap problem in IE6. ***/
width: 620px; /*** This width is for non-IE browsers. Mozilla makes this necessary. ***/
border: 0px solid #000;
border-width: 0 0 0 0px;
}
/*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid
blowing the layout apart. IE gets the original 100% width as in the Livingstone layout. It blows
my mind that all this hacking is being caused by the mighty Gecko engine! (shakes head ruefully)
***/
* html .inner {
width: 100%;
}
.float-wrap {
float: left;
width: 567px;
margin-left: -150px; /*** Same length as left column width ***/
}
/*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left,
div.left is carried over into the proper position.
***/
.left {
margin-top:25px;
}
#line {
border-right:1px solid #000000;
height:100%;
}
.right {
float: right;
width: 190px;
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
background-color:#ccd3e1;
}
* html .right {
margin: 0 -190px 0 0; /*** IE gets this margin. ***/
}
.center {
margin-top:23px;
float: right;
width: 415px;
background: url(/silence/templates/rhuk_solarflare_ii/images/navBlueLine.gif) repeat-y 0 0;
}
.leftCenter {
width:2px;
}
.wide {
background-color: #002469; /* header and footer colours */
width: 100%;
border: 2px solid #000;
font-size: 1.4em;
font-weight: bold;
}
.wide p {padding: 5px;}
.top {border-width: 0 0 0px;
overflow:hidden;}
.bottom {border-width: 2px 0 0;}
/* Mozilla bug fixes */
html>body .inner, html>body .float-wrap {
border-bottom: 1px solid transparent;
}
.grey {
color:#5f5c5c;
}
.newsflash {
padding: 15px 10px;
width:175px;
color:#5f5c5c;
font-size: 10px;
}
.newsflashTitle {
color:#4c6696;
font-weight:bold;
margin-left: -7px;
font-size: 11px;
}
a.readon {
color:#002469;
background: url(/silence/templates/rhuk_solarflare_ii/images/redArrow.gif) no-repeat left;
font-size: 10px;
}
a.readon:hover {
color:#002469;
background: url(/silence/templates/rhuk_solarflare_ii/images/redArrow.gif) no-repeat left;
font-size: 10px;
}
a.readon:visited {
color:#002469;
background: url(/silence/templates/rhuk_solarflare_ii/images/redArrow.gif) no-repeat left;
font-size: 10px;
}
Any help would be greatly appreciated. Thanks. P.s. How do I post links to the site on here?...I tried but it removed the URL saying (URL address blocked: See forum rules) Here's the deal. I want to have one generic button image that I can use for all buttons. Therefore, I don't want to have words on the image but instead want to write them in afterward. Normally, you could just do something like Code: <input type="image" src="..." and things are fine. However, like I said, I don't want to do that because this forces me to create an image with the words already on them. I want a black button that I can write the words on, but want it to still behave like a submit button. Which means, once I type in my username and password, I just want to be able to hit enter (and not be forced to click on the button) and submit the form. Am I asking for too much? The code for the problem are below. I have two examples in my html file. One using styles directly and one using styles via a file. The styles are identical. The first div tags that uses styles directly shows correctly, but the other div tags doesn't even show at all - or at least not with 'height' in '.page' set to 'auto'. If it's set for example to 200px that div will show but not the sub ones. This is strange since if using the same styles directly this isn't even a problem at all. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing...</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body style="margin: 0px; padding: 0px; text-align: center; background-color: #A0A0A0">
<div style="position: relative; width: 950px; height: auto; margin: 10px auto; padding: 0px; background-color: #FFFFFF">
<div style="position: absolute; top: 0px; left: 0px; width: 950px; height: 150px; margin: 0px; padding: 0px;">
<div style="position: absolute; top: 0px; left: 0px; width: 20px; height: 150px; margin: 0px; padding: 0px; background-color: #C08080;"></div>
<div style="position: absolute; top: 20px; left: 30px; width: 890px; height: 130px; margin: 0px; padding: 0px; background-color: #80C080;"></div>
<div style="position: absolute; top: 0px; left: 930px; width: 20px; height: 150px; margin: 0px; padding: 0px; background-color: #8080C0;"></div>
</div>
</div>
<div class="page" style="top: 200px;">
<div class="header">
<div class="header-left"></div>
<div class="header-image"></div>
<div class="header-right"></div>
</div>
</div>
</body>
</html>
I have differences between how elements I state in CSS are shown. Sometimes it's IE that makes the problems (mostly with overflow) but this time it's FF. I have a content, to which I decided to make a "wrap" border from right and left (shown in red on the screenshots). The name of the element is #content_wrap. Could you take a glance at the links below and help me out finding the problem that causes this difference between the display in IE and FF? The way I see the page using IE (the way it's supposed to be - shown via green) The way I see the page using FF (the wrap is not at it's full height - show via green) The complete page (the CSS is included in the html file) P.S. If you have any other comments and suggestions, they are welcome. I've changed how links are rendered - problem is that I can't stop same thing being done on images as links. Code:
a {
text-decoration: none;
border-bottom: 1px dotted;
}
a:hover {
text-decoration: none;
border-bottom: 1px solid;
}
And it works great on ordinary links (<a href="#">Text here</a>) but I cant turn it off when I have an image as a link (<a href="#"><img ... /></a>). I tried this : Code:
a img {
border: none; /* tried border: 0px; also */
}
img {
border: none; /* tried border: 0px; also */
}
And it doesn't work The only way I could achive the result is to specify an class for each link: Code:
.img-link {
border: none;
}
.img-link:hover {
border: none;
}
// in HTML
<a href="#" ... class="img-link"><img ... /></a>
Hi, I have a table with a scroll bar. My problem is that it works in ie but not in mozilla,netscape7.1, firefox...When I load the page in mozilla, the table is not shown, it's as if it were set to hidden, and it's really weird because the first time that I load the page, the table is shown with the scroll bar just for a moment and then hides..... I used a div tag that contains the table to be shown. I've tried different things as changing the z-index, using the display attribute, but none of them worked. Here is the style defined for the div tag: Code:
div.tableContainer_plegado{height: 420px; overflow: auto; width:100%;}
Please help me! Thanks in advance! I am using an external CSS where I am defining the color of my links when un-visited, visited etc. The problem is in Netscape 7.1/7.2 those links which are calling my other pages, are being shown up as visited when clicked,. But those where I say href='javascript:void(0);my js function' are not being shown with the correct 'visited' link color. They are being shown in the color specified for 'un-visited' links!! Can someone help?? Hello, Does anyone know of a way to design a button using CSS (or something else), and then save it as an image file? Thanks, Jeff Hi, Is it possible to change the default button image so that the same image can be used even when different text is set as the value of the button? I mean, can I change the button image in a way, that it will appear correctly when the value is set to "OK" and also when the value is set to "Much Longer Value"? Thanks and Regards, Sim085 Hi There, If you put images in in replacement for standard form buttons they don't align properly. I have been trying to move away from nested tables with my current work in favour of css layouts and was wondering if there is any quick and easy way to align button images? If you look at the following URL the 'add to basket' buttons are higher up thean they should be..... http://www.storesprite.org/taml/vie...l?category_id=3 Thanks Hello, I have a <h2> header consisting of "Contacts". I want an add button to the right of the header. The add button should be an 32 px image which changes upon hover, and the words "new" below the image. The image "new.png" is 32 px wide and 64 px high, and consists of the two images on top of each other. The following code is close but not perfect, and have several questions: How should I push the text under the image? Should the anchor go inside of the h2 tag? Any other improvements? Thank you Code: <style type="text/css">
a.button{
background-repeat: no-repeat;
background-position: 100% 0px;
height: 24px;
width: 24px;
margin: 0 0 10px 0;
padding: 4px;
}
a.button:hover{background-position: 100% -32px;}
.icon-32-new { background-image: url(new.png); }
</style>
<h2>Contacts
<a href="index.php?page=add_contact" class="button icon-32-new">New</a></h2>
Hi, I need quick help with this: I need to make matrix 4x4 of images. Each image has radio button over it (input type=radio). No table. Please show me some code with it - I know only the image has z-index:-1 and button z-index:0 but I have some trouble with position:absolute vs relative. It shouldn't be hard. Example: h t t p://img.photoamp.com/pa/07/07/21/gmqeT8S.jpg TIA I'm having trouble setting the background image of a submit button. This is my code: Code: <input class="submit" type="submit" name="submit" value="Submit" style="background-image:url('img/enter.jpg');" />
I've also tried putting the css in my external css file in the .submit tag... didn't work. I know the path to the image is correct because the following works: Code: <input type="image" src="img/enter.jpg" /> What gives? Thanks i ahve seen sites, using one image rollover that has one image one on top of the other... can someone give me a clue on the syntax thanks Hey, I try to set a button like that: Code:
<!-- Buuton --><table border="0" class="SiteButtonManageOff" onmouseover="this.className='SiteButtonManageOn'" onmouseout="this.className='SiteButtonManageOff'"><tr><td class="SiteButtonManageIn" onClick="location.href='/s/index.asp';">Edit</td></tr></table><!-- Buuton -->
.SiteButtonManageOff
{
font-family: arial;
border-width:1px;
border-color:#cccccc;
border-style:solid;
background-color:#2D3B72;
display: inline;
}
.SiteButtonManageOn
{
font-family: arial;
border-width:1px;
border-color:#cccccc;
border-style:solid;
background-color:#6280F6;
display: inline;
}
.SiteButtonManageIn
{
font-family: arial;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
white-space: nowrap;
cursor:pointer;
}
In IE it's look great but in FF the text go to the top of the button, any solution? |
|||||||