|
CSS - Opera 7.54 Submit Button Cursor Problem
I am trying to use CSS so that when a user hovers their mouse over a submit button, they get a "hand" or "pointer" instead of the default arrow. Below is an example page to demonstrate what I am doing. It works fine in the latest version of Internet Explorer and Mozilla Firefox, but not in Opera 7.54. In Opera 7.54, the cursor changes when I hover over the border of the button, but when I move to the center of the button it goes back to an arrow. Does Opera 7.54 support this style properly or am I doing something wrong?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="dr0n3" />
<style type="text/css">
/* I have read that I should use pointer, then hand so it is compatible across a range of browsers, but this still doesn't work properly in Opera 7.54 */
.button
{
cursor: pointer;
cursor: hand;
}
</style>
</head>
<body>
<form action="page.php" method="post">
<p><input type="submit" name="submit" value="Test" class="button" /></p>
</form>
</body>
</html>
Similar TutorialsHi all, I've got a standard 'submit' button that I've applied a CSS style to, with this code: <input type="submit" name="sign in" value="sign in" style="font-weight: bold; color: #FFFFFF; font-size: 10px; border: 1px solid #FFFFFF; background: #A4B1C1;"> The only problem I'm having is that in IE, there's a black border around it, but in Firefox, there's only the white border stated in the CSS style. Can anybody tell me how I can fix this? Cheers. 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) hello, i'm placing a custom cursor on a stylesheet like so: body { cursor: url(normal.cur), default; } and a weird effect appeared on internet explorer... when the cursor is over any layers or images (i guess, over any actual elements), the custom cursor appears. but when it's on an empty area, say the page background, the default cursor appears instead. how can i fix this (while trying to maintain the default cursors for every other browser)? thanks for any help! Anyone know a trick to get a submit button to display on the same line as an input field and not have it drop. My issue is that it is either pushed down a few pixels, or up a few pixels, as if something is padded. Code: <form action="#" method="post">
<span>Join our mailing list</span>
<input type="text" name="email" value="your e-mail address" class="v-email" />
<input type="submit" value="" name="submit" class="btn" />
</form>
In the above example, the submit button is pushed down a few pixels as if it is padded. In Firefox however, it is pushed up a couple pixels. How can I get it to display inline perfectly. Assume that the styled button and the input field are the same height. Sorry to bother you guys again, but I'm having some image and CSS related problems with IE and Opera. I've just finished implementing sIFR into my textpattern-powered journal, and have now come across some odd bugs in Opera and IE. The first problem is apparent in Opera and IE, which involves the browsers enlarging my image icons from the 16px x 16px to twice their size. Here is a link to some screenshots: Internet Explorer and Opera Only FireFox renders the page correctly. However, since IE contributes to 60% of my visitors I need to ensure that I fix this bug! Internet Explorer also displays the main blog/article below the sidebar content. This should be apparent in the IE photo, if not, please check out: my website to see what I mean in your own browsers. I believe the second problem can be fixed with CSS, but I'm not even sure where to start looking! Any help would be greatly appreciated! Sajid Hello there! I am new here.. So Hello to all of you people. I am having a problem. I run my website locally and i can preview it fine in chrome, firefox and ie.. but i have a problem with opera. I see a white space under my footer.. Let me give you my code and please tell me your opinions! Code: * { padding:0; margin:0 0 0 0px; outline:0; }
html, body { height:100%; }
Code: /* center all content */
.center { width:950px; margin:0 auto; }
/* keep all content except footer */
#wrapper,
#wrapper-error
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -82px;
}
#wrapper-error { margin-bottom: 0px; }
.footer
{
width:100%; height: 82px;
position:relative;
background-image: url('../images/bgfooter.jpg');
background-repeat: repeat-x;
-moz-box-shadow: 0px -13px 130px 20px #808080;
-webkit-box-shadow: 0px -13px 130px 20px #808080;
box-shadow: 0px -13px 130px 20px #808080;
}
.push
{
width:100%; height: 82px;
position:relative;
}
Thank you! Hi, have a weblog, powered by wordpress, styled with css. it looks all right in firefox & IE, but i'm not too happy with the look in opera, as the content has a large blank gap between the first post and the rest of the content. to view my site: http://www.jarra.nl/ CSS: http://www.jarra.nl/css/weblog.css and this is a screenshot: http://www.jarra.nl/_TEST/opera.gif I can't find out what's causing it, and don't have an idea how to solve it, any help is appreciated a lot.. thanx, jarra Hi, Well, they're at it again, those cheeky browsers. Check it out. I have a site that consists of a main, central container, with a background image of 675x1px. So far I also have a top banner and a menu bar both 600px wide. The extra 75px are drop shadows either side of the main box of colour. In IE, I put my banner and menu divs into the container and everything works fine - they're nicely centred and look good. However, in opera/firefox, the divs are over to the left of the central container, and hence screw everything up. Also, even though my central container has 100% height, in Opera it doesn't extend to the bottom of the page. Here's the CSS: Code:
/* CSS Document */
body
{
background-color:#E1FFDC;
text-align:center;
margin:0px;
}
#container
{
width:675px;
height:100%;
background-image:url(mainbg2.gif);
background-repeat:repeat-y;
margin-left:auto;
margin-right:auto;
text-align:center;
}
#mainphoto
{
width:600px;
height:278px;
margin-left:2px;
background-image:url(maintop.jpg);
position:relative;
}
#menubar
{
width:600px;
height:39px;
margin-left:1px;
position:relative;
}
mainbg2.gif is the central container background And the page is here Any help would be much appreciated. Cheers NEWSFLASH Problem solved - i basically just took the images out of their divs. I still have a problem with Opera not stretching the div down though, but I think that will be solved once I put some content in. Hi there, I have a simple submit button with the word "Search!" as the value. However, in FF, it is appearing aligned nearer the bottom of the button where as in IE it is centered correctly. This is what I mean: This is my CSS: PHP Code: .search_button{ background: url("images/search.jpg") repeat-x; border: 0px solid ; font-family: verdana, Arial, Helvetica, sans-serif; color: #373737; font-size: 11px; width: 80px; height: 24px; font-weight: bold; vertical-align:middle; } and my HTML: PHP Code: <input name="" type="submit" value="Search!" class="search_button"/> Any ideas why this is and how I can center it in FF? Do any questions get answered here? How would I get a simple input form to align with a submit button? You can see the problem at: bit.ly/ovFGhR The CSS txt file: bit.ly/nMyP45 My CSS I think is telling the input text box to be a part of the paragraph above and the button sits below, misaligned. Please help!! Here is my design. Look at it in IE and/or Firefox. Everything looks right. Now look at it in Opera. You can see some of the "wrapper" layer, which I've given a pink background. Is there any way to fix this? Here is my code: Code:
<html>
<head>
<style type="text/css">
body {
background: #3e1f00 url(../images/background.gif);
background-position: top center;
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 80%; color: #FFFFFF;
margin-top:30px;
}
#top {
background: red;
position: relative;
margin-left: auto; margin-right: auto;
width: 758px; height: 167px;
text-align: left;
}
#wrapper {
position: relative;
margin: 0 auto;
width: 758px;
background: pink;
}
#middle {
position: relative;
margin: 0 auto;
width: 758px; height: 200px;
text-align: left;
background: yellow;
}
#bottom {
position: relative;
margin-left: auto; margin-right: auto;
width: 758px; height: 23px;
text-align: left;
background: green;
}
/*** see http://www.positioniseverything.net/easyclearing.html
for explanation of Tony Aslett's elegant hack ***/
.clearing:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearing {
display: inline-block;
}
/* hides from IE/Mac \*/
* html .clearing {
height: 1%;
}
.clearing {
display: block;
}
/* end hide from IE-Mac */
/*** end clearing hack ***/
</style>
</head>
<body>
<center>
<div id="top">
TOP
</div>
<div id="wrapper" class="clearing">
<div id="middle">
MIDDLE
</div>
</div>
<div id="bottom">
BOTTOM
</div>
</center>
</body>
</html>
Hello, I have a code below which works fine in IE and Firefox. However in Opera the 4 boxes are displayed in a 2x2 form insetad of 4x1. Any idea? 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>Untitled Document</title>
<style type="text/css">
#container {
margin: auto;
padding:0px;
width: 980px;
border: 1px solid #000000;
}
#center {
margin: 0px;
padding: 0px;
clear:both;
}
#left_panel {
width: 240px;
float:left;
border:1px solid #ff0000;
}
#main_panel {
padding: 0px;
margin: 0px;
margin-left:295px;
width:660px;
border:0px solid #ff0000;
}
#main_panel #main_panel_header {
padding-top: 5px;
border:1px solid #ff0000;
overflow:hidden;
}
#main_panel_header .photo_box {
float:left;
background-color:#000000;
}
#main_panel_header .photo_box img {
background-color: #000000;
height: 115px;
width: 140px;
border:2px solid #000;
border-bottom:0px;
margin:0px;
}
#main_panel_header .photo_box a{
color: #ffffff;
text-decoration:none;
font-size:10px;
font-weight:bold;
display:block;
text-align:right;
text-transform: uppercase;
width:140px;
float:left;
padding:2px;
margin:0px;
background-color:#000000;
}
</style>
</head>
<body>
<div id="container">
<div id="center">
<div id="left_panel">
Menu1<br/>Menu1<br/>
</div>
<div id="main_panel">
<div id="main_panel_header">
<div class="photo_box">
<img src="style/tmp/pic.jpg" />
<a href="#">Link</a>
</div>
<div class="photo_box">
<img src="style/tmp/pic.jpg" />
<a href="#">Link</a>
</div>
<div class="photo_box">
<img src="style/tmp/pic.jpg" />
<a href="#">Link</a>
</div>
<div class="photo_box">
<img src="style/tmp/pic.jpg" />
<a href="#">Link</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This page - juicyart dot net / test.html (sorry I can't post URLs yet) - displays fine in IE, but not in Firefox or Opera. In those two browsers the top image and white background of the container div won't display. The top image displays, but not completely - only about half of it shows up. Any suggestions? I can't figure this out for the life of me and W3C validates my css as valid so I'm at a loss. Hi. I've been banging my head against the wall for ages with this! Could someone please explain, and perhaps offer some code, on why the footer on the Home and About Me pages (http://www.freewebs.com/mike-elley/) renders the page header and title below, differently. These pages seem to work fine in IE6. I'm testing on Opera 7.23 by the way. Thanks very much for any help! Does anyone know how to remove the "white space" between the bottom borders of #navinner and #navouter? Code: #navtop {
color: #000000;
font-size: small;
font-variant: small-caps;
}
#navtop {
margin: 0 auto;
background-color: #828282;
width: 136px;
text-align: center;
}
a,a:link,a:active,a:visited {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #6699CC;
text-decoration: underline;
}
#navinner {
padding: 16px;
margin: 0;
border: 1px #C0C0C0 solid;
height: 1%;
}
#navouter {
padding: 0;
margin: 0 auto;
border: 1px #808080 solid;
width: 134px;
}
/* Hides from IE5-mac \*/
* html #navinner {height: 1%;}
/* End hide from IE5-mac */
#navinner a,#navinner a:hover {
display: block;
width: 88px;
margin: 16px auto;
padding: 8px 0px;
text-align: center;
text-decoration: none;
}
#navinner a#active {
background-color: #000066;
}
#navinner a {
border: 1px #0000FF solid;
}
#navinner a:hover {
border: 1px #C0C0C0 solid;
}
Code: <div id="navtop">Quick Navigation</div> <div id="navouter"><div id="navinner"> <a href="http://www.somedomain.com/" id="active"><Main Page></a> <a href="http://www.somedomain.com/page2.php">Page 2</a> <a href="http://www.somedomain.com/page3.php">Page 3</a> <a href="mailto:some.email@somedomain.com">EMAIL ME</a> </div></div> 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 have created a nice tablesless form with CSS except for the submit buttons. I can't seem to align them to the middle and in IE6 they overflow the form border html4strict Code: Original - html4strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>Interest</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <STYLE TYPE="text/css"> <!-- #Interest label,#Interest input { display: block; width: 200px; float: left; margin-bottom: 10px; } #Interest label { text-align: left; width: 150px; padding-right: 20px; font-weight: bold; } #Interest br { clear: left; } #Interest form { border : 1px solid #000; padding : 5px; } --> </STYLE> </HEAD> <BODY> <DIV ID="Interest"> <FORM METHOD="POST" ACTION="/cgi-bin/form.pl"> <INPUT TYPE="HIDDEN" NAME="form_owner" VALUE="paul.wright@npl.co.uk"> <BR> <LABEL FOR="name">Name</LABEL> <INPUT NAME="name" ID="name"><BR> <LABEL FOR="company">Organisation</LABEL> <INPUT NAME="company" ID="company"><BR> <LABEL FOR="email">E-mail address </LABEL> <INPUT NAME="email" ID="email"><BR> <LABEL FOR="phone">Telephone no. </LABEL> <INPUT NAME="phone" ID="phone"><BR> <LABEL FOR="outcome">Comment(s) </LABEL> <TEXTAREA NAME="outcome" ROWS="10" COLS="60" ID="outcome"></TEXTAREA> <BR> <INPUT TYPE="SUBMIT" VALUE="Submit Interest" NAME="Submit1" ID="Submit1"> <INPUT TYPE="RESET" NAME="Reset1" VALUE="Clear Form" ID="Reset1"><BR> </FORM> </DIV> </BODY> </HTML> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Hey any idea why submit button at this page is not working??? http://www.ajilanyureq.com Is it possible to display a submit button in a form as a regular link? I'm not allowed to use Javascript, so it has to be done in CSS. Thanks |
|||||||