|
CSS - Styled Submit Button Not Working In Ffox
When I add a gradient image to my submit button it works fine in IE but won't depress in Firefox or Netscape. The form action works OK, but it's just the button doesn't do anything on screen with the mouse click...What am I doing wrong?
input.btn{ border-style: outset; border-width: thin; border-color:#CCFFFF; color:black; font-size: 60%; font-weight:bold; background: url(images/gradient.jpg) repeat-x; } Similar TutorialsHey any idea why submit button at this page is not working??? http://www.ajilanyureq.com Hello I've been developing a new website for my dad.. Unfortunatly i cant seem to get some of the things to look how i want them. so i was wondering if you could help, as some of you have been a great help to me on previous websites. the pages in question are the following: http://visitours2london.com/v2/ (in internet explorer) the middle conent drops below the sidebars. (in firefox its fine) http://visitours2london.com/v2/tours2.html (both in i.e. and firefox doesnt come out right) i cant get the titles of the dt tags to align to the right hand side.. and in i.e. the back to top text jumps to the far right, overlaying onto side bar two.. All pages are xhtml valid... link to check is on bottom of the page... Ignore everything else on the website, its simply those two pages that im working on.. other aspects of the website will either not load or not work properly as ive not finished them. Hey guys i have some image layout problems with my images on safari and firefox on Mac only. Firefox and safari on PC seem fine but its only happening on Mac. The positioning of the images have moved dramatically. Not sure how to fix it CSS is validated and so is xhtml strict 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. 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!! 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? When viewed in IE my form's submit button shows up with a black border around it, and when clicked onto another blank space of the space, it goes to normal colors as applied in this css code. Code: font-family:verdana,arial,helvetica,sans-serif; font-size:12px; background-color: #FFFFFF; color : #000000; border: 1px solid #A5B4BC; What could fix this? Thank you. 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"> Hi 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. 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 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 form located below the google map on this page - http://www.hometowntrans.com/map_hours.asp I want to style it such that it has a 3d look to it if you will, with a gray background and black text. Ok, so I just used Pagination for the first time (Yay). I'm creating a make shift shopping cart, and was trying to align "Add to Cart" to show at the bottom of the product listing. Right now, the products show 5 per row, and the format is: image of item item name price Then there is some padding and I want the submit button to appear at the very bottom of the div (within the a href if possible). I have the a href set as display:block, so when hovered over, the area is gray. I want the submit button to be within that area. I have tried with several variations (I did move the </a> to after the </form> line: - Placed the <form> lines within a separate div and tried aligning it to the bottom using margin-bottom - Tried styling the <input> using margin-bottom as well. My knowledge of divs isn't really that good as I never really used them much before, so I'm sure it's something simple enough. Right now when I do place it in the <a href></a> area, the Add to Cart button shows up right under the item_name... so it's staggered as item names may take up 1, 2, or 3 lines. And keeping it under the link area makes the button too far down. If you need further info, let me know. Here's the code to pulling the info from the products table: Code:
$query = "SELECT `id`, `image`, `item_name`, `msrp` FROM products $limit";
$result = mysql_query($query, $conn) or die(mysql_error());
$i == 0;
while($row = mysql_fetch_array($result)) {
extract($row);
$i ++;
$image_loc = "images/products/" . $image;
$j = $i/5;
$display .= "<div id=\"store\"><a href=\"view_item.php?id= ".$id."\"><img src=\"".$image_loc . "\" style=\"width:100px; padding-bottom:5px;\"><br />" . $item_name . "</a>";
if ($logged_in != 'false') {
$display .= "<form action=\"add_cart.php\" method=\"post\">";
$display .= "<input type=\"hidden\" value=\"".$id."\">";
$display .= "<input style=\"margin-left:20px;\" type=\"submit\" value=\"Add to Cart\">";
$display .= "</form>";
$display .= "</div>";
}
if (is_int($j)) {
$display .= "<div style=\"clear:both;\"></div>";
} else {
}
}
Here's the CSS: Code:
#store {width:150px;
float:left;
padding-bottom:30px;
padding-left:15px;
padding-right:15px;
}
#store a{display:block;
text-decoration:none;
padding:10px;
height:200px;
}
#store img{border:0;
}
#store a:hover{background:#ccc;}
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 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>
i'm trying to style my submit button to have a gradient background with a solid blue border. looks awesome in FF, however when I try to apply the background image to the submit button in IE (6 and 7), there will be an extra border inside of the blue border. it seems to be whatever color i set my background-color to. Code: border: 1px solid #69A2CC; background: transparent url(gradient.jpg) no-repeat scroll 0 center; 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) Hi, Can someone give me an example of a table styled with css that looks better than the standard html thing. I am trying to get a table with alternate colored rows and a thin line between the cells, and good looking cell headings. This is a small thing, but it's kind of annoying. I'm using CSS to make some buttons on my site purty. And they are purty. The problem comes in when I set a buttons state to "disabled". IE o' so nicely makes the button "grayed out". Mozilla browsers do squat. Observe he http://www.drcwbt.com/codetests/disabledbutton.htm I was hoping I might be able to skirt around this problem with the pseudo class ":disabled" but it appears that this is too new still and nobody supports it. Any ideas on how to "gray out" in Mozilla? I want to place a styled box with rounded corners around text in a heading. The problem is that the the heading may have one, two or three lines and I can't seem to get my box to adjust. Here is my code: I appreciate any help you can provide! 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>Title</title>
<style type="text/css" media="all">
.specialHeader {
background: #F4F1F1 url(http://d9qjx79zqpo3.googlepages.com/specialHeadingA.gif) no-repeat scroll 0 0;
padding: 1px 0 0 0;
}
.specialHeader h2 {
display: block;
margin: 10px 0 0 0;
padding: 0 0 0 10px;
background: transparent url(http://d9qjx79zqpo3.googlepages.com/specialHeadingA.gif) no-repeat scroll 0 100%;
}
.specialHeader span {
display: block;
margin: 0;
width: 100%;
padding: 1px;
background: transparent url(http://d9qjx79zqpo3.googlepages.com/specialHeadingB.gif) no-repeat scroll 100% 0;
}
.specialHeader em {
text-transform: uppercase;
display: block;
text-style: normal;
margin: 10px 0 0 10px;
padding: 0;
font-size: 18px;
font-family: 'Trebuchet MS', Tahoma, sans-serif;
color: #98002E;
font-weight: 300;
background: transparent url(http://d9qjx79zqpo3.googlepages.com/specialHeadingB.gif) no-repeat scroll 100% 100%;
}
</style>
</head>
<body>
<div class="specialHeader"><h2><span><em>Hello World</em></span></h2></div>
<div style="margin: 50px; width: 600px;">
<div class="specialHeader"><h2><span><em>Two<br />Lines</em></span></h2></div>
</div>
<div style="margin: 50px; width: 300px;">
<div class="specialHeader"><h2><span><em>This Has<br />Three<br />Lines</em></span></h2></div>
</div>
</body>
</html>
|
|||||||