3 replies [Last post]
lukesewell
lukesewell's picture
Offline
newbie
Last seen: 2 years 43 weeks ago
Joined: 2011-11-12
Posts: 3
Points: 5

My site www.latinlink.co.uk I can not get to display correctly in firefox

I have installed contact form 7 as a word press plugin with the following styling. The browse buttone in firefox is alyways misaliged. Puzzled Any help greatly appreciated

form{background-color:#c8c8c8; padding:20px 20px; border-top:2px solid #FFFFFF; border-right:1px solid #FFFFFF;margin-bottom:20px;}
			#uploader{border:1px solid red;}
			.form_txtfield{background-color:#fff; color:#000;float:right;width:230px; height:15px;}
			.form_txtfield_spaecial{ border:1px solid red;background-color:#333; color:#FFF;float:right;width:230px; height:15px;}
			.form_upload{background-color:#333; color:#000;float:right;width:230px; height:15px;}
			div.form_message_area{height:100px;}
			.form_message{background-color:#fff; color:#000;float:right;width:230px; height:80px;font-size:10px}
			#form_upload{background-color:#c8c8c8; color:#fff; height:20px; width:250px; float:right;}
			#captcha{position:relative; top:10px;}			
			p.frm_clear{clear:both;}
			.comment-row{color:white;}
			.hidden{visibility:hidden;position:absolute;top:-9999px;}
			.captcha_input{width:84px; height:23px;}
			span .wpcf7-not-valid-tip-no-ajax{color:red; font-weight:bold;}
 
 
			/*input.wpcf7-file form_txtfield_special{border:1px solid red; width:400px;}*/
			#form_upload{width:250px;}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 1 year 3 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Different widths

You've made .form_upload 230px but #form_upload is still 250px making it wider than it's container.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

lukesewell
lukesewell's picture
Offline
newbie
Last seen: 2 years 43 weeks ago
Joined: 2011-11-12
Posts: 3
Points: 5

Still a problem...

Thanks!

I have set it to 200px but there is still a problem, any ideas?

Thanks

Luke

/*reset css*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}
table { border-collapse: collapse; border-spacing: 0;}
/*reset css*/
 
*, html, body{font-family: Verdana, Arial, Helvetica, sans-serif;}
			body{background-color:#D0D0D0;}
strong{font-weight:bold;}
			#wrapper{border-right-color: yellow; border-left-color: yellow; width: 850px; height: auto; margin-left: auto; margin-right: auto; background-image: url(images/background.png); background-repeat: repeat-y;}
			#header{position: relative; padding:0 40px; width:770px; height: 126px; background-color: black; background-image: url(images/banner.png); background-repeat: no-repeat; overflow: hidden;}
			#navbar{padding:0 0; width: 850px; height: 50px; background-color: #de3219;}
			#content{padding:0 40px; width:479px; /*min-height: 400px;*/ float: left; /*background-color:none;*/}
			#content ul{margin-bottom: 15px;}
			#content ul li{font-size:13px; line-height:1.5em; list-style:square; margin-left:10px; font-weight:bold;}
			#sidebar{width:290px; /*min-height: 400px;*/ float: right;/* background-color: none;*/ overflow:hidden;}
			#sidebar img{width:289px; float: right; /*background-color: none;*/ overflow:hidden;}
			#footer{padding:5px 40px; width: 770px; height:40px; background-color: black; clear: both;}
 
			p{ color: black; font-size: 13px; line-height: 1.5em; margin-bottom: 15px;}
			p.form_label{ color: white; font-size: 13px; line-height: 1.5em; margin-bottom: 10px;}
			h1{position: absolute; bottom:10px; color:white; font-size: 35px; font-family: 'Raleway', sans-serif;}
			h2{padding:0 0 10px 0; border-bottom: 10px solid #edd9be; margin-bottom: 10px; margin-top: 20px; font-size: 25px;font-family: Verdana, Arial,Helvetica, sans-serif; }
			h2 a{color:#000; text-decoration:none; }
			h3{padding:0 0 10px 0;border-bottom: 5px solid 	#DCDCDC; font-weight:bold; margin-bottom: 10px; margin-top: 20px; font-size: 15px;font-family: Verdana, Arial, Helvetica, sans-serif; }
			#languages{position: absolute;top:20px;right:40px;}
			#languages img{margin-left: 5px;}
			#contact_email{position: absolute;top:90px;right:40px; color:#FFF;}
			#contact_email a{color:#FFF; font-size:18px; text-decoration:none;}
 
			.menu-main-navigation-container > ul{display: block; height: 50px; list-style-type: none; margin-left: auto; margin-right: auto; text-align: center;}
			.menu-main-navigation-container > ul li { font-size:13px;display: inline; color: white; padding: 0 30px; line-height: 50px;}
 
			.menu-main-navigation-container > ul li.current-menu-item {background-image:url(images/current_page.gif);background-repeat:no-repeat;background-position:left;}
 
			.menu-main-navigation-container > ul li a {color:#FFF; text-decoration:none;}
 
			/*footer re-styling*/
			.menu-footer-navigation-container ul{ margin:auto; text-align:center; margin-top:10px;}
			.menu-footer-navigation-container li{color:white; display:inline;font-size: 10px; padding: 20px 20px;}
			.menu-footer-navigation-container li a{color:white; text-decoration:none;}
 
			form{background-color:#c8c8c8; padding:20px 20px; border-top:2px solid #FFFFFF; border-right:1px solid #FFFFFF;margin-bottom:20px;}
			#uploader{border:1px solid red;}
			.form_txtfield{background-color:#fff; color:#000;float:right;width:230px; height:15px;}
			.form_txtfield_spaecial{ border:1px solid red;background-color:#333; color:#FFF;float:right;width:230px; height:15px;}
			.form_upload{background-color:#333; color:#000;float:right;width:230px; height:15px;}
			div.form_message_area{height:100px;}
			.form_message{background-color:#fff; color:#000;float:right;width:230px; height:80px;font-size:10px}
			#form_upload{background-color:#c8c8c8; color:#fff; height:20px; width:200px; float:right;}
			#captcha{position:relative; top:10px;}			
			p.frm_clear{clear:both;}
			.comment-row{color:white;}
			.hidden{visibility:hidden;position:absolute;top:-9999px;}
			.captcha_input{width:84px; height:15px;}
			span .wpcf7-not-valid-tip-no-ajax{color:red; font-weight:bold;}
 
 
			/*input.wpcf7-file form_txtfield_special{border:1px solid red; width:400px;}*/
			#form_upload{width:250px;}
			#language_area{float:right; margin-top:20px; width:210px; height:50px; background-image:url(images/flags.png); background-repeat:no-repeat;}
			#qtrans_select_qtranslate-3-chooser{float:right;}
 
.alignleft{float:left;margin:5px 20px 20px 0;}
.alignright{float:right;margin:5px 0 20px 20px;}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 1 year 3 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You've got #form_upload twice

The second one still says width: 250px.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference