|
CSS - Help Needed With Form. Css Issue, Fine In Firefox But Not Safari And Google Chrome
Hi Guys
I am struggling to resolve a small issue i am having. I am using a mac, and am working on a contact form for a website. I am using the latest mac OS and latest versions of all browsers. The following link is fine in firefox, however, in Safari and google chrome, the 'Message' text area has a big gap above it and I do not know how to get rid of this. Here is the code for the form... <form id="form" name="frmQuote" class="contactForm" method="post" action="process.php" onsubmit="return validate_form(this);" > <ul> <li> <label for="name">Name:</label> <input name="name" id="name" type="text" class="required" /> </li> <li> <label for="email">E-mail:</label> <input name="email" id="email" type="text" class="required email" /> </il> <li> <label for="subject">Subject:</label> <input name="subject" id="subject" type="text" class="required" /> </li> <li> <label for="detail">Message:</label> <textarea name="detail" id="detail" rows="6" cols="60" class="required"></textarea> </li> <li> <input type="submit" name="submit" id="submit" value="Submit" tabindex="100" class="submitBtn" /> </li></ul> </form> Here is the css for that page... #content_about { color: #666666; } /*************************************************** CONTACT ***************************************************/ #form { margin: 0px; position: relative; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 15px; float: left; } #form div { width: 510px; position: relative; float: left; padding-bottom: 9px; } #form div label { width: 400px; } #form div label.error { color: #a80000; position: absolute; top: 0px; right: 0px; text-align: right; font-size: 11px; } #form div.message_sent { background-color: #31B8DA; width: 890px; float: left; padding: 10px; margin-bottom: 15px; color: #FFFFFF; } #form input { width: 499px; padding: 8px; font-size: 13px; color: #999999; background-color: #FFFFFF; float: right; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #C3C3C3; border-right-color: #E8E8E8; border-bottom-color: #E8E8E8; border-left-color: #C3C3C3; } #form input:focus, #form textarea:focus { background-color: #F4F4F4; } #form textarea { width: 500px; padding: 8px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; background-color: #FFFFFF; color: #aaaaaa; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #C3C3C3; border-right-color: #E8E8E8; border-bottom-color: #E8E8E8; border-left-color: #C3C3C3; float: right; margin: 0px; } #form .submitBtn { background-color: #31b8da; width: 95px; color: #FFFFFF; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; padding: 0px; font-size: 16px; height: 35px; display: block; margin-top: 20px; } #form .submitBtn:hover { background-color: #1F93B4; color: #FFFFFF; } #form .submitBtn:focus { background-color: #4FC1E1; } #form strong { font-size: 24px; color: #FFFFFF; font-weight: normal; padding-top: 0px; padding-right: 0px; padding-bottom: 5px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #6a6a6a; display: block; } #form .font-11 { font-size: 11px; color: #CCCCCC; display: inline; } #content_about #form li label { margin-top: 0px; margin-right: 35px; margin-bottom: 0px; margin-left: 0px; line-height: 30px; } #content_about #form li { padding-top: 10px; padding-right: 15px; padding-bottom: 10px; padding-left: 0px; } Any help would be greatly appreciated. Regards Jay Similar TutorialsHi All, I am new to this forum and to CSS and Web Development as a whole. I am a notch up from "total n00b". I can't post links so the website is www (dot) authenticimpressions (dot) com I built this site for my wife using Wordpress, some plugins, and some themes I bought. The Galleries all look great in Chrome and Firefox on PC, and in Firefox and Safari on Mac. But in IE7 on PC, I get a 4 or 5px white border on the bottom and the left in each of the galleries. I've played and played with the stylesheets and cannot figure this one out. What other information should I post or provide to get some help? Thanks in advance, I really appreciate it. Hi, If you check this site out with Google Chrome or Safari, you'll see (just below the header) the mid-section is offset to the right. http://www.ergopro.com/ I noticed if I remove the "Icons" div everything is okay, but I need it there. I tried adjusting it, but no dice. Any ideers? Much thanks in advance. I have a website (www.fullforcecreative.com) that displays properly on I.E. and Firefox. I just recently pulled it up in Google Chrome, and it appears no style sheets are being imported. I then thought "that is strange, but Safari is based on the same thing (kinda), so I'll load it in Safari." Same issue. No style sheets. Has anyone seen anything like this before? I link to one style sheet in the header. Code:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css; charset=utf-8" media="screen" />
This style sheet linked to from that line: Code: @charset "UTF-8"; @import url(yaml/core/base.css); @import url(css/navigation/nav_shinybuttons.css); @import url(css/screen/basemod.css); @import url(css/screen/content.css); @import url(yaml/print/print_003.css); All the other stylesheets open with the Code:
@charset "UTF-8";
@media all {
insert css here
}
The site is using YAML (http://www.yaml.de/en/) as a framework for the CSS. The only issue I could find relativly close to it was this: http://www.davidroessli.com/logs/2007/03/safari_utf8_rendering_glitch_f/ I made the change listed there (because the CSS stylesheets are in UTF-8), but it made no difference. Does anyone have any ideas? This is driving me up the wall. It does display properly in I.E. and firefox. Thanks, seth If you go to the example site: devbum.com/coded/audven/ The top navigation seems to be pushed upwards in Windows Safari and Google Chrome and not centered like in FF, IE6, IE7, and Opera. I'm not sure why it's doing this though... does it also render differently on Mac Safari? Hi all, My first post, a request for help please! I have been designing a site and checking in Safari, just come to check in IE7 and its all over the place. I get the feeling that there is a simple bug fix I need to add, but with deadline approaching fast (tomorrow am client reviews the site) my mind is all over the place! If anyone would be kind enough to view: cavendish-cs.co.uk/beta/ You will see in IE7 the top image will not sit next to the navigation. Check in Safari or Firefox and you can see how it should look Any help greatly appreciated Thanks Craig http://www.pearl.ru/isdunyasi/vnewsall.asp Everything appears right with Firefox and Safari. Footer floats right with IE. Can anyone tell why. Thanks. I'm building a "Coming Soon" page in Dreamweaver. It looks the way I want it to when previewed in Firefox (version 3.6.13), but not in Safari (version 4.1.2). Specifically, my line breaks and the margins on my image are ignored. Here's my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Quest Sports Medicine</title>
<link href="file://Macintosh HD/Volumes/My GS Drive/global.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.center-wrap p {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #000;
font-size: 30px;
line-height: 35px;
padding: 0px;
float: left;
margin-top: 15px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.center-wrap h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 66px;
font-weight: bold;
color: #942610;
text-align: center;
line-height: 64px;
margin-top: 83px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.center-wrap img {
margin-top: 47px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 248px;
}
}
-->
</style>
</head>
<body>
<div class="all-wrap">
<div class="center-wrap">
<h2>NEW WEBSITE<br />
COMING SOON</br></h2>
<p>For information on the products we sell, how to place an order or any questions regarding recent orders, please call us at (717)-687-7178<br />
or toll-free at 1-800-387-1067. You can also reach us at our new e-mail address, questsports@comcast.net</br></p>
<img src="images/qsm-logo.gif" width="436" height="260" alt="Quest Sports Medicine logo" />
</img></div>
</div>
</body>
</html>
Any thoughts on what I need to change? Thank you. I just finished an element for a redesign of my website. I open it in Firefox, working. I open it in Safari (for Windows), fine. I open it in IE, I almost cry. My entire page is screwed up! I can't tell if it's the floats, the margins, the lists (I think it's the lists). Anyways, does anyone know whats wrong so I could fix it? http://www.politinks.com/topbar Any help would be appreciated. Thanks! Hi All, I was wondering if someone could help and take a look at this. I have a site that is not displaying correctly in chrome and also Safari (at least on the iPhone). The rest of the page is fine, but these images appear stretched vertically (the horizontal width appears OK). The CSS for the element is: CSS Code: Original - CSS Code .keybox{float:left;margin:1px;width:100%;text-align:justify;padding:0px;padding:5px;line-height:100%;} .keybox img{float:left;width:35%;padding:0px;margin:0px;} .keybox div{float:right;width:60%;padding:1%;} .keybox div ul{text-align:left;margin:0px;padding:0px;}
.keybox{float:left;margin:1px;width:100%;text-align:justify;padding:0px;padding:5px;line-height:100%;}
The html for the element is: html Code: Original - html Code <div class='keybox'> <img class='products_images' src='/images/powerparts.gif' alt='Perkins Generator Parts Basket' /> <div> <h2><a href='/diesel_generator_ranges/www_support_spares/'>Perkins and Volvo Spares </a></h2> <p> ".COMPANY_SHORTNAME." spares for <strong>Perkins Engines</strong> and <strong>Volvo Penta engines</strong>. <strong>Mecc Alte AVR</strong>, <strong>Newage Stamford AVR</strong> and many other makes. </p> <ul> <li><a href='/parts/perkins/'>Perkins Spare Parts</a></li> <li><a href='/parts/volvo/'>Volvo Spare Parts</a></li> <li><a href='/parts/mecc-alte/'>Mecc Alte Spare Parts</a></li> <li><a href='/parts/newage-stamford/'>Newage Stamford Spare Parts</a></li> </ul> </div> </div> <div class='keybox'> <img class='products_images' src='/images/powerparts.gif' alt='Perkins Generator Parts Basket' /> <div> <h2><a href='/diesel_generator_ranges/www_support_spares/'>Perkins and Volvo Spares </a></h2> <p> ".COMPANY_SHORTNAME." spares for <strong>Perkins Engines</strong> and <strong>Volvo Penta engines</strong>. <strong>Mecc Alte AVR</strong>, <strong>Newage Stamford AVR</strong> and many other makes. </p> <ul> <li><a href='/parts/perkins/'>Perkins Spare Parts</a></li> <li><a href='/parts/volvo/'>Volvo Spare Parts</a></li> <li><a href='/parts/mecc-alte/'>Mecc Alte Spare Parts</a></li> <li><a href='/parts/newage-stamford/'>Newage Stamford Spare Parts</a></li> </ul> </div> </div> The image stretches - it works fine on firefox and IE8. The web address is www.wellandpower.net There are 3 of these html elements on the left hand side of the page. TIA Regards Charlie Hello all, I have bumped into some strange problems. Chrome seems to be viewing my fonts alot thinner/smaller than Safari and Firefox. Is there a method to create consistency and ignoring the webbrowsers standards? Its creating a mess, specially with my text which is using text-shadow. The blur looks like disaster. Thanks in advance. Hey guys, I'm in need of some help here. Okay, so. My site looks the way I want so far on google chrome and safari (mac). And right now I'm at the stage of getting it to display like the two. If anyone who decides to help doesn't have access to certain browsers, I'll further explain, but I think it's easiest said to see for yourself. Right now I'm focusing on ie6, ie7, ff3. The markup in some areas is whacky, I know, but I decided to pick up where I left off on this project (which I first began building awhile ago) instead of starting completely over with a good template. http://thecheckoutplace.com/compute...eOneNetbook.php If anyone can offer a hand, it means a lot. Cheers guys. Hello All, I have an image with a text label to the right that is linked. Now, I want a little whitespace between the image and the text, so that the text doesn't butt up right against the image. To accomplish this, I could use a non-breaking space ( ) However, the space then becomes part of the link and it gets underlined. So, by adjusting the image's margin (or padding) CSS, I can achieve the desired result... at least in Internet Explorer. Firefox/Safari/Chrome seem to underline a linked image's margin as well. I tried using "padding" CSS instead, but produced the same result. How can I get Firefox/Safari/Chrome to underline JUST the text in a link, and not the image (and it's margin) as well? This is how the code is displayed in IE: http://img407.imageshack.us/img407/2360/pfieeu9.jpg Firefox/Safari/Chrome: http://img407.imageshack.us/img407/5421/pffirefoxvv1.jpg You can see the little extra "nubbin" of underline between the icon image and the text. CSS: Code:
a.red10ullink:link {color: #a80000;
font-size: 10pt;
font-family: arial;
text-decoration: underline;}
a.red10ullink:visited {color: #a80000;
font-size: 10pt;
font-family: arial;
text-decoration: underline;}
a.red10ullink:hover {color: #333333;
font-size: 10pt;
font-family: arial;}
img.icon {vertical-align: middle;
border-width: 0px;
margin: 0px 5px 0px 0px;}
HTML: Code: <a href="somepage.html" class="red10ullink"><img src="icon_pf.gif" alt="" width="20" height="20" class="icon" />Printer Friendly</a> Thanks! Never mind. Thx. Quick question, can someone tell me why do i get a white space on the right side of the screen http://www.impulsanl.org/testing.htm on IE 7 and IE 8? It seems to work ok with firefox and google chrome. (all screen). CSS code: Code: #extraDiv1 {
background: url(images/header1.png) repeat-x;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
margin: 0;
padding: 0;
}
HTML Quote: <div id="extraDiv1"></div> thanks. Here is the issue in firefox: It's displaying the divider 1 pixel down? It displays inline with IE. The code is: #navigation { height:37px; background: url(/img/menu_bg.jpg) repeat-x; } #navigation ul{ list-style:none; } #navigation ul li{ display: block; float: left; width:83px; /* 751 divided by number of items (9) */ text-align:center; background: url(/img/divider.jpg) right no-repeat; line-height:37px; } #navigation ul li.last{ background: none; } #navigation a:link,#navigation a:visited { color:#FFFFFF; font-weight:bold; text-decoration:none; } #navigation a:hover { color:#ff9f47; } Help appreciated. http://www.refinethetaste.com/step3.htm Can someone tell me why this page appears perfectly fine with ie but appears awfully wrong with firefox. I am almost done with the project, please help..... s.o.s Code:
style>
/*review order*/
#checkoutprocess { width:576px; float:left; margin-right:2px; }
#checkoutprocess .checkoutprocess { float: left; width: 574px; margin: 10px 0; border: #ece7d1 1px solid;}
#checkoutprocess h1 { height:30px; font-size: 18px; color:#716759; line-height:30px;}
#checkoutprocess .checkoutprocess .thdesc { float: left; width:264px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; }
#checkoutprocess .checkoutprocess .th { float: left; width:70px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#checkoutprocess .checkoutprocess .thh { float: left; width:568px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; }
#checkoutprocess .checkoutprocess .tddesc { float: left; width:274px; height:80px; font-size: 14px; color:#716759; margin:3px; padding:3px; vertical-align:text-top; }
#checkoutprocess .checkoutprocess .color { float: left; width:70px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; vertical-align:text-top; }
#checkoutprocess .checkoutprocess .noncolor { float: left; width:70px; text-align: center; color:#716759; margin:3px; padding:3px; vertical-align:text-top; }
#checkoutprocess .checkoutprocess .intprice { font-weight:bold; }
#checkoutprocess .hline { border-bottom:5px solid #ece7d1; margin:10px 0 10px 0; padding:0; }
#checkoutprocess img#updatesbasket { float:left; width: 141px; height: 15px; border: 0px; }
#checkoutprocess img#remove { float:right; width: 52px; height: 15px; border: 0px; }
#checkoutprocess img#contshopping { float:right; width: 141px; height: 25px; padding-right:50px; border: 0px; }
#checkoutprocess img#checkout { float:right; width: 89px; height: 25px; border: 0px; }
</style>
I added a tab content js to my main page. I did not change anything at css file. Area where I added tab content js works fine with Firefox but not with Internet Explorer. What happens with IE is that contents at the center of the page moves under. I am not sure if I clearly described the problem. Please take a look at: http://www.pearl.ru/isdunyasi/ I am a bit of a loss as to why the menu on this page http://www.laurieannre.com/welcome.asp looks great on IE but not in other browsers. If it is not too much trouble and someone can be of some assistance I'd appreciate it. Tom My web page looks fine on FF and Chrome, but doesn't on IE. Everything is pushed up. Anyone have any suggestions? I have searched the net and can't find a solution. egoboosters . org / newindex1 . htm |
|||||||