|
CSS - Button Behaving Badly In Ie - Please Help!
I am almost finished with a site, but the buttons in the main navigation are behaving badly; when you put the mouse over them (only in IE of course..) they only activate when you are about 10 pixels away from the top of the page.
Link- http://www.hamlettinstruments.com/beta/ can someone help me figure out why this is? Thanks, ad Similar Tutorialshttp://cad-design-engineering.com/New/contact_us.php The text areas are not fitted and floating in IE the same as they are in other browsers. Instead, they are all strung in a single column. (and my sidebar is broken) I'm terrible at hacks - don't know the first thing. So, here is my code... Code:
<div class="leftbox2">Please note:
- All fields marked with asterisk (*) are required.
- The "Tab" key will navigate through the fields in sequence.</div>
<div class="leftbox2">
name*
<input name="name" type="text" value="" size="30" tabindex="1" />
Company*
<input name="company" type="text" value="" size="30" tabindex="2" />
Address 1*
<input name="address1" type="text" value="" size="30" tabindex="3" />
Address 2
<input name="address2" type="text" value="" size="30" tabindex="4" />
</div>
<div class="rightbox2">
City*
<input name="city" type="text" value="" size="30" tabindex="5" />
State or Province*
<input name="stateprov" type="text" value="" size="30" tabindex="6" />
Postal Code*
<input name="postal_code" type="text" value="" size="30" tabindex="7" />
Country*
<input name="country" type="text" value="" size="30" tabindex="8" />
</div>
<div class="leftbox2">
Email*
<input name="email" type="text" value="" size="30" tabindex="9" />
Confirm Email*
<input name="confirm_email" type="text" value="" size="30" tabindex="10" />
</div>
<div class="rightbox2">
Phone*
<input name="phone" type="text" value="" size="30" tabindex="11" />
<em>(valid format = xxx-xxx-xxxx)</em>
</div>
<div class="leftbox2">
Message*
<textarea name="message" rows="7" cols="40" tabindex="12"></textarea>
<div class="leftbox2"><input type="submit" value="Submit" tabindex="13" size="1.5" /><input type="reset" value="Reset" tabindex="14" size="1.5" /></div>
</div>
AND THE CSS...
.leftbox2, .rightbox2 {
margin: 3px;
padding: 3px;
font-size: 12px;
}
.leftbox2 {
text-align: left;
float: left;
margin-right: 7px;
}
.rightbox2 {
text-align: left;
float: right;
margin-left: 7px;
}
As usual, thank you for your time and help. Hi everyone, I am bad at this bit and i don't really know why. I have a div and a floated UL. I want the div to sit next to the UL, however, it sits above it and I cannot get them to sit together. Could someone please just post a brief method of getting them to sit side by side and I will try and work it for myself. Thanks. Page is http://www.wellandpower.net Anyone know how to fix the bottom bars width? Page he http://www.milztech.net/ Cheers! Alright, so in the site I am designing, I have underline images (lines that are a bit longer then a typical underline). I am placing them directly under the text they are related to. All of the placement of text and the images is done using absolute positioning in CSS (this is done inside a div tag that is positioned relatively, so absolute positioning works properly). Anyways, this is the problem I am having, the underline image looks great in Firefox, and then in IE it is about 10px or so lower then it should be and it doesn't look near as good, so I was wondering if there is some problem in my code that I should correct. Anyways, here are some images to help describe the problem and the code that relates to this. This is what I want: This is what I get in IE This is the HTML for the placement Code:
<div id = "news">
<div id = "title">
<span class = "title">Latest News</span>
</div>
<div id = "news_underline">
<img src = "/testing/inertia/news_underline.JPG" alt = "Latest News" />
</div>
</div>
This is the CSS for "news" Code:
#news
{
position: absolute;
top: 5px;
left: 415px;
width: 185px;
height: 275px;
background-color: #519dbd;
background-image: url(/testing/inertia/news_gradient.jpg);
background-repeat: repeat-x;
border-bottom: #0e1f29 medium solid;
border-right: #0e1f29 medium solid;
}
And the code for "news_underline" Code:
#news_underline
{
position: absolute;
top: 25px;
left: 30px;
width: 122px;
height: 2px;
}
And the code of the div that these are both inside of Code:
#main
{
width: 608px;
height: 500px;
position: relative;
background-image: url(/testing/inertia/blue_gradient.jpg);
background-repeat: repeat-x;
background-color: #14495b;
margin-right: auto;
margin-left: auto;
}
So, I've got the following CSS code that I use to give a cell a background that aligns to the bottom: Code:
td.flag {background: url(images/flag_s.gif) no-repeat center bottom;}
td.main {background: url(images/march.gif) no-repeat center bottom;}
Unfortunately, only the td.main works as it should. The first entry td.flag doesn't show the image. I have verified that the gif image of flag_s.gif exists in /images/ and I cannot figure out why td.flag won't work when td.main does.... Any ideas? The CSS is syntactically correct. In my html I call td class="flag".... doesn't work. Any help would be appreciated! Ok ive got this small concept i need to work in order for me to implement it on the actual website. this code works 100% correct to how i want it to in FireFox. I have an image within a table TD tag , but i need the image to float outside the tables borders, i can do this with the margin-right: -20px; In firefox i can still see the full image been displayed, but in IE the image falls behind the table limits and then does not display any more. Please help me sort this one out. Code: <html>
<head>
<title>Untitled</title>
<style>
.test {
margin-right: -30px;
float: right;
z-index: 2;
}
.table{
z-index: 10;
}
</style>
</head>
<body>
<table align="center" width="300" border="1" class="table">
<tr>
<td> </td>
<td><img class="test" src="http://nexxon.galore.co.za/images/stories/animated_slidshow_02gif.gif" /></td>
</tr>
</table>
</body>
</html>
I'm having a horrible time trying to figure out what is wrong with my dropdown menu. I cannot get it to work as it should in Internet Explorer, though it's fine in Firefox and Chrome. In Firefox, it is perfectly aligned to the center of the navigation bar, but in Internet Explorer, it is not and is elevated towards the top. In FF, there are links that dropdown under a few of the links when you hover over the initial link. This does not happen in IE. However, in both IE and FF, the background of the initial link turns dark green when you hover over it (as it should). Simply, I need the links in Internet Explorer look as they do in Firefox. I've gone through for days and tried to see what's wrong, but I can't think of anything. Here's the menu's CSS: Code: .menu {
border:none;
border:0px;
margin:0px;
padding-top: 5px;
padding-left: 3px;
font-family: Tahoma;
font-size: 20px;
}
.menu ul {
margin: 0px;
padding: 0px;
list-style: none;
height: 35px;
}
.menu li {
float: left;
padding: 0px;
}
.menu li a {
color: #000;
line-height: 35px;
display: block;
padding: 0px 25px;
text-align: center;
text-decoration: none;
margin:0px;
}
.menu li a:hover, .menu ul li:hover a {
background: #919d21;
color: #000;
text-decoration: none;
}
.menu li ul {
background: #919d21;
display: none;
height: auto;
position: absolute;
width: 150px;
padding: 0px;
border: 0px;
margin: 0px;
z-index: 200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul {
display: block;
}
.menu li li {
width: 150px;
margin:0px;
padding:0px;
display: block;
float: none;
}
.menu li:hover li a {
background: none;
}
.menu li ul a {
display: block;
height: 35px;
font-size: 12px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
.menu li ul a:hover, .menu li ul li:hover a {
background: #a7b235;
border: 0px;
color: #000;
text-decoration: none;
}
.menu p {
clear: left;
}
Here's the menu's HTML: Code: <ul> <li><a href="home.html"><img src="/images/icons/house.png" border="0">Home</a> <ul> <li><a href="home.html">Home</a></li> <li><a href="createacre.html">Acres</a></li> <li><a href="facilities.html">Facilities</a></li> <li><a href="inventory.html">Inventory</a></li> <li><a href="brand.html">Brand</a></li> <li><a href="shop.html">Shop</a></li> <li><a href="logout.html">Logout</a></li> </ul> </li> <li><a href="corral.html"><img src="/images/icons/world.png" border="0">Atlas</a> <ul> <li><a href="corral.html">Corral</a></li> <li><a href="shows.html">Shows</a></li> <li><a href="trade.html">Giving Center</a></li> <li><a href="jobpage.html">Employment Agency</a></li> <li><a href="store.html">General Store</a></li> <li><a href="searchvets.html">Veterinarian</a></li> <li><a href="traininglinks.html">Training</a></li> <li><a href="bank.html">Bank</a></li> </ul> </li> <li><a href="mbindex.html"><img src="/images/icons/comments.png" border="0">Interact</a> <ul> <li><a href="mbindex.html">Forum</a></li> <li><a href="chat.html">Chatroom</a></li> <li><a href="championshipboard.html">Championships</a></li> <li><a href="onlineusers.html">Online Players</a></li> <li><a href="http://www.paradigmprogrammingllc.com/community/">Community</a></li> </ul> </li> <li><a href="referrals.html"><img src="/images/icons/magnifier.png" border="0">Other</a> <ul> <li><a href="referrals.html">Referrals</a></li> <li><a href="search.html">Search AA</a></li> <li><a href="item_submission.html">Submit Image</a></li> <li><a href="goals.html">Goals</a></li> <li><a href="http://www.rpg.sg/vote.php?id=62">Vote for AA</a></li> </ul> </li> <li><a href="rules.html"><img src="/images/icons/shield.png" border="0">Help</a> <ul> <li><a href="rules.html">Rules</a></li> <li><a href="htmlhelper.html">HTML Helper</a></li> <li><a href="mods.html">Moderators</a></li> <li><a href="privacy.html">Privacy Policy</a></li> <li><a href="tos.html">Terms of Service</a></li> </ul> </li> <li><a href="userarea.html"><img src="/images/icons/newspaper.png" border="0">News</a> </li> <li><a href="upgrade.html"><img src="/images/icons/arrow_up.png" border="0">Upgrade</a> </li> </ul> www.clydesdaleframes.com/test/fortran.html Does anyone know why my "next page" button's background is extending the full width of the text like that? css is www.clydesdaleframes.com/test/styles.css thanks in advance, Chris My link hover style isn't happening consistently in either browser. It seems to work better in FF than in IE7. Does anyone have a clue as to what I could look at to see what is causing this? All my navbar links behave just fine... URL removed Thanks! I've used the 3 column layout from http://bluerobot.com/web/layouts/layout3.html to create this page http://www.quiznightatthefrog.co.uk/teams.php The rest of the site is OK in IE but on this page the middle column stretches over to the right when there is a lot of content in the middle column. When I remove the middle column content it works ok. The problem does not appear in Opera6 or Netscape7 but they make the right column move down under the left column. sigh. Any suggestions please?? oops, here's the code body { scrollbar-base-color : #339900; scrollbar-track-color : #009900; scrollbar-arrow-color : honeydew; background: honeydew url(images/lily_pad.gif) no-repeat bottom right; color:#333; background-color:honeydew; margin:20px; padding:0px; font:11px verdana, arial, helvetica, sans-serif; } h1 { margin:0px 0px 15px 0px; padding:0px; font-size:15pt; font-weight:900; font-family: verdana; color:#006600; } h2 { font:bold 12px/14px arial, helvetica, sans-serif; margin:0px 0px 0px 0px; padding:0px; } .teams { font:bold 12px arial, helvetica, sans-serif; color: #003300; line-height:20pt; } p { font:11px/20px verdana, arial, helvetica, sans-serif; margin:0px 0px 16px 0px; padding:0px; } .Content>p {margin:30px;} .Content>p+p {text-indent:30px;} a { color:#09c; font-size:11px; font-family:verdana, arial, helvetica, sans-serif; font-weight:600; text-decoration:none; } a:link {color:#006600;} a:visited {color:#006600;} a:hover {background-color:#c0c0c0;} /* All the content boxes belong to the content class. */ .content { position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */ width:auto; min-width:130px; margin:0px 190px 20px 190px; border:3px solid #003300; background-color:white; padding:10px 10px 10px 10px; z-index:1; /* This allows the content to overlap the right menu in narrow windows in good browsers. */ } #navAlpha { position:absolute; width:150px; height:500px; top:20px; left:20px; border:2px solid #003300; background-color:honeydew; padding:10px; z-index:2; /* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style declaration. The incorrect IE5/Win value is above, while the correct value is below. See http://glish.com/css/hacks.asp for details. */ voice-family: "\"}\""; voice-family:inherit; width:150px; } /* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct length values to user agents that exhibit the parsing error exploited above yet get the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */ body>#navAlpha {width:150px;} #navBeta { position:absolute; width:170px; top:20px; height:300px; right:10px; bottom:0px; border:2px solid; padding:30px 10px 10px 10px; z-index:3; /* Again, the ugly brilliant hack. */ voice-family: "\"}\""; voice-family:inherit; width:168px; } /* Again, "be nice to Opera 5". */ body>#navBeta {width:168px;} I have a new layout I'm currently working on. It's got a container with 2 columns, one floated left and one floated right. Inside the left column (lcol) I have a series of content areas making up two columns. Floated left and on the upper left is a flash video. Below that and also floated left is a table of contents list. On the right side of lcol, my intent is to add a news list and an events list. I have the news list floated right with the left floats cleared. My issue is that the news list is pushing way to the bottom of the screen even though my width is not larger than the available width for that column. In IE6, the list is behaving as expected, but not in FF which I always do my primary testing in, so that's what led me to believe something is wrong. Here is my code (remember the site is in its initial development) I've also attached a screenshot of the appearance in FF. 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Orion Main</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.play = "true";
params.loop = "false";
params.menu = "true";
params.quality = "high";
params.scale = "showall";
params.wmode = "window";
params.devicefont = "false";
params.allowfullscreen = "false";
params.allowscriptaccess = "sameDomain";
var attributes = {};
swfobject.embedSWF("orion_intro_video.swf", "intro", "320", "310", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
</head>
<body>
<div id="logo"><img src="images/orion_logo.jpg" alt="Orion Logo" title="Orion Home" width="154" height="100"/></div>
<div id="container">
<div id="lcol">
<div id="intro">
Your browser cannot display FLASH, please follow the link below to install it.<br/>
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</div>
<ul id="nav">
<li><a href="#">Thought Leaders</a></li>
<li><a href="#">Success Stories</a></li>
<li><a href="#">Validation</a></li>
<li><a href="#">Strategic Partners</a></li>
<li><a href="#">Environmental Stewardship Award</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Energy Solutions</a></li>
<li>
<a href="#">Media</a>
<ul>
<li><a href="#">News Releases</a></li>
<li><a href="#">Media Kit</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
<li><a href="#">Investor Relations</a></li>
<li><a href="#">Partners for Profits™</a></li>
<li><a href="#">Agricultural Division</a></li>
<li><a href="#">Orion Asset Management</a></li>
</ul>
<ul id="latest_news">
<li><a href="#">News Item #1</li>
<li><a href="#">News Item #1</li>
<li><a href="#">News Item #1</li>
<li><a href="#">News Item #1</li>
<li><a href="#">News Item #1</li>
</ul>
<ul id="events">
<li><a href="#">Event #1</li>
<li><a href="#">Event #1</li>
<li><a href="#">Event #1</li>
<li><a href="#">Event #1</li>
<li><a href="#">Event #1</li>
</ul>
</div><!-- end lcol -->
<div id="rcol">
</div><!-- end rcol -->
</div>
</body>
</html>
CSS Code:
@charset "utf-8";
/* CSS Document */
body {
font-family: Verdana, Geneva, sans-serif;
margin: 15px auto 0;
padding: 0;
text-align: center;
background: url('../images/body_back.jpg') repeat-x #373737;
}
#logo {
width: 960px;
height: 100px;
margin: 0 auto;
text-align: left;
background: url('../images/header_back.gif') repeat-x #b4de5a;
}
#container {
width: 940px;
margin: 0 auto;
height: auto;
text-align: center;
background-color: #FFFFFF;
clear: left;
padding: 0px 10px 10px 10px;
overflow: auto;
}
#lcol {
float: left;
width: 626px;
height: auto;
overflow: auto;
text-align: left;
}
#intro {
text-align: left;
float: left;
width: 320px;
height: 310px;
background-color: red;
}
#nav {
clear: left;
width: 320px;
height: auto;
list-style-type: none;
text-align: left;
padding: 0;
margin: 0;
float: left;
}
#latest_news {
background-color: green;
height: auto;
width: 250px;
list-style-type: none;
padding: 0;
margin: 0;
text-align: left;
float: right;
clear: left;
}
#events {
clear: right;
float: right;
width: 250px;
height: auto;
background-color: yellow;
list-style-type: none;
}
#rcol {
float: right;
width: 303px;
height: 500px;
}
one line of text isn't in the position that i want it to be for ff and ie. Chrome is able to read the css code: chrome: Code: p1 {
line-height: 1.3em;
font-size: 1.2em;
font-weight: bold;
display: block;
-webkit-margin-befo 5.4em;
-webkit-margin-after: 1em;
-webkit-margin-start: 220px;
-webkit-margin-end: 0px;
}
ff,ie: p1{ line-height: 1.3em; font-size: 1.2em; font-weight: bold; } I want the " learning from questions" at the bottom right of the logo. Thanks for helping! site link: http://www.nyitforums.com/ Hi, I'm having an interesting problem. I have a left floated containing div and then a right floated containing div to split multiple contents between the left and right side of a popup window. It works great in IE 7, Chrome, FF3, but for some reason not in FF2. In FF2, it forces the contents of the right floated containing div below the left floated div (instead of beside it) and makes it's width the entire width of the popup. Any idea why? (there is a reason I had to put all the css directly in the code - normally it's separated) Here's the code: Code:
<div style='padding: 15px; text-align: left;'>
<div style='float: left;'>
<table style='margin-top:16px; font-size: 12px; font-family: Verdana,Arial,sans-serif;'>
<tr>
<td>Name:</td><td colspan='2'><input id='popupName' name='popupName' style='float:left' type='text'></td>
</tr>
<tr>
<td style='padding:5px 0 17px 0;'>Type:</td><td style='padding:5px 0 17px 0;' colspan='2'><select id='popupType' name='popupType' style='float:left; width: 148px; height: 21px' ></select></td>
</tr>
<tr>
<td style='padding-bottom: 14px;' colspan='3'><div style='width: 280px'>This is some text.</div></td>
</tr>
<tr>
<td style='padding-bottom: 5px;'>Group Title:</td><td style='padding-bottom: 5px;'><input id='popupGroupTitle' name='popupGroupTitle' style='float:left' type='text'></td><td></td>
</tr>
<tr>
<td>Titles:</td><td><input id='popupTitles' name='popupTitles' style='float:left' type='text'></td><td><input style='float:left; padding: 0;' type='button' value='Add >>' onclick=\"addToList()\"></td>
</tr>
</table>
</div>
<div style='float: right;'>
<div style='margin-bottom:5px;'>Element Titles:</div>
<select id='newOptionSelect' style='float:right; width: 247px;' size='12'></select>
<input id='popupDeleteBtn' style=\"clear: right; background: rgb(190,190,190) url('/url') no-repeat center center; float:right; margin: 5px 2px;\" type='button' onclick='removeFromList(\"newOptionSelect\", newOptionArray)'/>
<input id='popupMoveDownBtn' style=\"float:right; background: rgb(190,190,190) url('/url') no-repeat center center; margin: 5px 2px;\" type='button' onclick='moveDown(\"newOptionSelect\", newOptionArray)'/>
<input id='popupMoveUpBtn' style=\"background: rgb(190,190,190) url('/url') no-repeat center center; float:right; margin: 5px 2px;\" type='button' onclick='moveUp(\"newOptionSelect\", newOptionArray)'/>
</div>
</div>
</div>
Hey Guys... I have a piece of code that displays ok in Firefox (and I suppose IE) but not Safari. Here's the URL - http://www.pizza.bowlerhatmedia.com/spc/theusual.html In safari everything squishes left. In firefox they spread out like they are supposed to across the bottom. Here's the line of code in the html doc: Code: <div class="contentbox2_2"> <span style="padding-right:10px"></span>Petite: <span class="red">$11</span> <span style="padding-right: 160px;"></span> Medium: <span class="red">$14</span> <span style="padding-right: 170px;"></span> Large: <span class="red">$16</span> </div> and here's the supporting CSS Code:
}
.contentbox2_2, .contentbox3_2 {
font-size: 15px;
font-weight: normal;
}
.red {
color: #ac3a24;
}
What can I do to position these across the bottom in safari and make everything else ok in the other browsers? thanks! I have a very simple drop down menu that I'm playing around with and trying to make cross-browser. The drop-down currently looks OK in Mozilla/Firefox. Presently, it does not work in either IE 6 or IE 7. You can see the drop down HERE I have noticed that when you alter the URL in this line of code, inside the href attribute (for example): Code: <li><a href="">Computer Hardware (1)</a></li> ...sometimes the menu will work (or break) in ANY given browser (IE or Mozilla)... Try substituting different values for the href attribute inside the link. Depending on the href value, sometimes the code works, and sometimes it doesn;t (in either IE or Mozilla). Something screwy is going on with the href attribute, but I can;t tell what it is. Any help is appreciated. Hi guys. Straight to pictures: Fig. 1: Differences in rendering between Standards compliant browsers and Internet Explorer. Link for html page is www.sential.co.uk/releases.html (this is my example page, but it's the same problem with all pages.) Now, apart from the fact they're different colors (which is a little strange), the positioning of the border images in IE is different than Safari/Firefox. I've tried playing with the code and positioning over and over with no luck. If I change one to look right, basically, the other ends up looking wrong. I have 4 corner images and 4 repeating borders. They're all positioned using css in my style sheet, in the format of, basically: Code: .corner_topleft{
position: absolute;
top: 0px;
left: 0px;
...
}
and so on in that respect for the 4 corners and: Code: .border_left{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
background-repeat: x;
...
}
etc. for the borders. I have specified all the heights of the images. Now the problems in the pictures a #1: the left and right borders don't repeat down, #2: the right edge border+corners seem to be out 17px (the width of the border). Although don't think you can simply specify the right border to be inwards 17px because if you do that, in Safari/Firefox, the background blue color overflows 17px outwards (because it's currently underneath that right border. Although, apparently not in IE.) If any of you guys can offer any help, suggestions, or maybe even a fix, that would be awesome and very appreciated. Regards, -Luke (: Hi I have this small problem with one of my sites when viewed in IE *surprise surprise* Let's say I have a div called "foo". I specify a width and set a padding of 10px. Code:
<style>
.foo {
width: 100px;
padding: 10px;
}
</style>
<div class="foo">Bar</div>
Firefox, Opera and Mozilla interprets this as an element which's "text area" is 100px and there's an additional 10px on both sides. So the actual width of the div is 120px. IE doesn't interpret it like that. If I set widht=100px, then the actual width is 100px regardless if I have paddings or not. Now these different types of interprations are causing me a head ache. Is there any "trick" to make the div to be equally wide in all browsers? If not, I guess the only option is to use tables - Kimppa i know that IE doesnt support the :hover being added to anything but links, is this the same with :active? was just wondering whether i could have a style change when the user clicks on a form button basically if i add a border around a button in FF i can click the button however the effect of "pressing" a button is lost.. IE mainatain this! is there a solution or will i have to live with it? Hello everyone! I'm currently working with the <button> tag, simply because I want Safari users to be able to see button effects added onto submit buttons. It's pretty simple, except, I'm having problems centering text. Obviously, text-align: center; works for putting the text in the center of the button, but not the middle. I want to vertically align the text as well as horizontally. Anyone? Thanks in advance. |
|||||||