Jump to content

Styling file upload control


elementalgrace

Recommended Posts

Hello there.I'm creating a custom made theme to work with a Drupal CMS system and so far so good, it's all been going well until we get to trying to style the file upload input button. I have always found these things notoriously difficult to work with but here's hoping that you can help.The input button has a class applied to it called "form-file" and is within an ID called "content so I have been referring to the element in my CSS as #content input.form-file and applying a width to the element. All my other browsers are picking up the width apart from firefox which is stretching it right across the page and into other floated elements. As firefox normally does exactly what it's told, I can only assume that my CSS is wrong. Unfortunately because the HTML is being generated by Drupal, I can't change it - only style it using the CSS.Generated HTML

<!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">  <head>	<meta name="author" content="" />	<meta name="copyright" content="" />	<meta name="robots" content="all" />	<meta name="description" content="" />	<meta name="keywords" content="" />	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <link type="text/css" rel="stylesheet" media="screen" href="themes/ttmobiles/styles.css" /><!--[if lt IE 7]><link type="text/css" rel="stylesheet" media="all" href="themes/ttmobiles/ie.css" />	 <![endif]--><link rel="alternate" type="application/atom+xml" title="" href="/rss.xml" /> </head><body><div id="all"><!--HEADER--><div id="header"><a href="index.htm"><img src="themes/ttmobiles/images/logo.png" alt="ttMobiles logo. Click on the image to return to the homepage"  class="logo"/></a><!--TOP NAV--><ul class="links"><li class="first menu-1-1-2"><a href="/drupal-5.3/" title="Shortcut to home" class="menu-1-1-2">Home</a></li><li class="menu-1-2-2"><a href="/drupal-5.3/?q=node/add" title="Shortcut to the online company noticeboard" class="menu-1-2-2">Noticeboard</a></li><li class="menu-1-3-2"><a href="/drupal-5.3/?q=node/add" title="shortcut to gallery" class="menu-1-3-2">Gallery</a></li><li class="menu-1-4-2"><a href="/drupal-5.3/?q=node/add" title="Map of client locations" class="menu-1-4-2">Client Map</a></li><li class="menu-1-5-2"><a href="/drupal-5.3/?q=node/add" title="Meeting Room Planner" class="menu-1-5-2">Meeting Room Planner</a></li><li class="menu-1-6-2"><a href="/drupal-5.3/?q=node/add" title="Calendar" class="menu-1-6-2">Calendar</a></li><li class="last menu-1-7-2"><a href="/drupal-5.3/?q=node/add" title="Contacts" class="menu-1-7-2">Contacts</a></li></ul><!--END TOPNAV--><img src="themes/ttmobiles/images/header.jpg" height="60" width="794" alt="Decorative Images" /><!--END HEADER--></div><!--LEFT--><div id="left-sidebar"><div class="block block-menu" id="block-menu-46"><div class="blockinner">	<h2 class="title"> Service Delivery </h2>	<div class="content">	  <ul class="menu"><li class="leaf"><a href="/drupal-5.3/?q=node/8" title="Service Delivery Test Item 1">Service Delivery Test Item 1</a></li><li class="leaf"><a href="/drupal-5.3/?q=node/9" title="Service Delivery Test Item 2">Service Delivery Test Item 2</a></li><li class="leaf"><a href="/drupal-5.3/?q=node/10" title="Service Delivery Test Item 3">Service Delivery Test Item 3</a></li></ul>	</div>	  </div></div><div class="block block-menu" id="block-menu-57"><div class="blockinner">	<h2 class="title"> Admin & Forms </h2>	<div class="content">	  <ul class="menu"><li class="leaf"><a href="/drupal-5.3/?q=node/11" title="Admin & Forms Test Page 1">Admin & Forms Test Page 1</a></li><li class="leaf"><a href="/drupal-5.3/?q=node/12" title="Admin & Forms Test Page 2">Admin & Forms Test Page 2</a></li><li class="leaf"><a href="/drupal-5.3/?q=node/13" title="Admin & Forms Test Page 3">Admin & Forms Test Page 3</a></li></ul>	</div>	  </div></div><div class="block block-menu" id="block-menu-64"><div class="blockinner">	<h2 class="title"> IT </h2>	<div class="content">	  <ul class="menu"><li class="leaf"><a href="/drupal-5.3/?q=node/6" title="IT Test Item 1">IT Test Item 1</a></li><li class="leaf"><a href="/drupal-5.3/?q=node/7" title="IT Test Item 2">IT Test Item 2</a></li></ul>	</div>	  </div></div></div><!--END LEFT--><!--CONTENT--><div id="content"><h1>Themes</h1><div class="tabs"><ul class="tabs primary"><li><a href="/drupal-5.3/?q=admin/build/themes" title="Select the default theme.">List</a></li><li class="active"><a href="/drupal-5.3/?q=admin/build/themes/settings">Configure</a></li></ul><ul class="tabs secondary"><li><a href="/drupal-5.3/?q=admin/build/themes/settings">Global settings</a></li><li class="active"><a href="/drupal-5.3/?q=admin/build/themes/settings/ttmobiles" class="active">ttmobiles</a></li></ul></div><div class="help"><p>These options control the display settings for the <code><em>ttmobiles</em></code> theme. When your site is displayed using this theme, these settings will be used. By clicking "Reset to defaults," you can choose to use the <a href="/drupal-5.3/?q=admin/build/themes/settings">global settings</a> for this theme.</p></div><form action="/drupal-5.3/?q=admin/build/themes/settings/ttmobiles"  method="post" id="system-theme-settings" enctype="multipart/form-data"><div><input type="hidden" name="var" id="edit-var" value="theme_ttmobiles_settings"  /><fieldset><legend>Toggle display</legend><div class="description">Enable or disable the display of certain page elements.</div><div class="form-item"> <label class="option"><input type="checkbox" name="toggle_logo" id="edit-toggle-logo" value="1"  checked="checked"  class="form-checkbox" /> Logo</label></div><div class="form-item"> <label class="option"><input type="checkbox" name="toggle_name" id="edit-toggle-name" value="1"   class="form-checkbox" /> Site name</label></div><div class="form-item"> <label class="option"><input type="checkbox" name="toggle_slogan" id="edit-toggle-slogan" value="1"   class="form-checkbox" /> Site slogan</label></div><div class="form-item"> <label class="option"><input type="checkbox" name="toggle_mission" id="edit-toggle-mission" value="1"   class="form-checkbox" /> Mission statement</label></div><div class="form-item"> <label class="option"><input type="checkbox" name="toggle_node_user_picture" id="edit-toggle-node-user-picture" value="1"   class="form-checkbox" /> User pictures in posts</label></div><div class="form-item"> <label class="option"><input type="checkbox" name="toggle_comment_user_picture" id="edit-toggle-comment-user-picture" value="1"   class="form-checkbox" /> User pictures in comments</label></div><div class="form-item"> <label class="option"><input type="checkbox" name="toggle_search" id="edit-toggle-search" value="1"   class="form-checkbox" /> Search box</label></div><div class="form-item"> <label class="option"><input type="checkbox" name="toggle_favicon" id="edit-toggle-favicon" value="1"  checked="checked"  class="form-checkbox" /> Shortcut icon</label></div></fieldset><fieldset class="theme-settings-bottom"><legend>Logo image settings</legend><div class="description">If toggled on, the following logo will be displayed.</div><div class="form-item"> <label class="option"><input type="checkbox" name="default_logo" id="edit-default-logo" value="1"  checked="checked"  class="form-checkbox" /> Use the default logo</label> <div class="description">Check here if you want the theme to use the logo supplied with it.</div></div><div class="form-item"> <label for="edit-logo-path">Path to custom logo: </label> <input type="text" maxlength="128" name="logo_path" id="edit-logo-path"  size="60" value="" class="form-text" /> <div class="description">The path to the file you would like to use as your logo file instead of the default logo.</div></div><div class="form-item"> <label for="edit-logo-upload">Upload logo image: </label> <input type="file" name="files[logo_upload]"  class="form-file" id="edit-logo-upload" size="60" /> <div class="description">If you don't have direct file access to the server, use this field to upload your logo.</div></div></fieldset><fieldset><legend>Shortcut icon settings</legend><div class="description">Your shortcut icon or 'favicon' is displayed in the address bar and bookmarks of most browsers.</div><div class="form-item"> <label class="option"><input type="checkbox" name="default_favicon" id="edit-default-favicon" value="1"  checked="checked"  class="form-checkbox" /> Use the default shortcut icon.</label> <div class="description">Check here if you want the theme to use the default shortcut icon.</div></div><div class="form-item"> <label for="edit-favicon-path">Path to custom icon: </label> <input type="text" maxlength="128" name="favicon_path" id="edit-favicon-path"  size="60" value="" class="form-text" /> <div class="description">The path to the image file you would like to use as your custom shortcut icon.</div></div><div class="form-item"> <label for="edit-favicon-upload">Upload icon image: </label> <input type="file" name="files[favicon_upload]"  class="form-file" id="edit-favicon-upload" size="60" /> <div class="description">If you don't have direct file access to the server, use this field to upload your shortcut icon.</div></div></fieldset><input type="submit" name="op" id="edit-submit" value="Save configuration"  class="form-submit" /><input type="submit" name="op" id="edit-reset" value="Reset to defaults"  class="form-submit" /><input type="hidden" name="form_token" id="edit-system-theme-settings-form-token" value="a6c3fb1e39345f0142c76190bf0c85fe"  /><input type="hidden" name="form_id" id="edit-system-theme-settings" value="system_theme_settings"  /></div></form> </div><!--END CONTENT--><!--RIGHT--><div id="right-sidebar"><div class="block block-search" id="block-search-0"><div class="blockinner">	<h2 class="title"> Search </h2>	<div class="content">	  <form action="/drupal-5.3/?q=search/node"  method="post" id="search-block-form"><div><div class="container-inline"><div class="form-item"> <input type="text" maxlength="128" name="search_block_form_keys" id="edit-search-block-form-keys"  size="15" value="" title="Enter the terms you wish to search for." class="form-text" /></div><input type="submit" name="op" id="edit-submit" value="Search"  class="form-submit" /><input type="hidden" name="form_token" id="edit-search-block-form-form-token" value="90b7fbd314696adb17f4cd0da9265c2b"  /><input type="hidden" name="form_id" id="edit-search-block-form" value="search_block_form"  /></div></div></form>	</div>	  </div></div><div class="block block-poll" id="block-poll-0"><div class="blockinner">	<h2 class="title"> Poll </h2>	<div class="content">	  <div class="poll"><div class="title">What do you think of the ttmobiles intranet</div><div class="text">Great</div><div class="bar"><div style="width: 67%;" class="foreground"></div></div><div class="percent">67%</div><div class="text">Rubbish</div><div class="bar"><div style="width: 33%;" class="foreground"></div></div><div class="percent">33%</div><div class="total">Total votes: <em>3</em></div></div><div class="links"><ul class="links"><li class="first last 0"><a href="/drupal-5.3/?q=poll" title="View the list of polls on this site." class="0">Older polls</a></li></ul></div>	</div>	  </div></div><div class="block block-user" id="block-user-1"><div class="blockinner">	<h2 class="title"> admin </h2>	<div class="content">	  <ul class="menu"><li class="collapsed"><a href="/drupal-5.3/?q=node">Content</a></li><li class="leaf"><a href="/drupal-5.3/?q=user/1">My account</a></li><li class="expanded"><a href="/drupal-5.3/?q=admin">Administer</a><ul class="menu"><li class="collapsed"><a href="/drupal-5.3/?q=admin/content" title="Manage your site's content.">Content management</a></li><li class="expanded"><a href="/drupal-5.3/?q=admin/build" title="Control how your site looks and feels.">Site building</a><ul class="menu"><li class="leaf"><a href="/drupal-5.3/?q=admin/build/block" title="Configure what block content appears in your site's sidebars and other regions.">Blocks</a></li><li class="leaf"><a href="/drupal-5.3/?q=admin/build/menu" title="Control your site's navigation menu, primary links and secondary links. as well as rename and reorganize menu items.">Menus</a></li><li class="leaf"><a href="/drupal-5.3/?q=admin/build/modules" title="Enable or disable add-on modules for your site.">Modules</a></li><li class="leaf"><a href="/drupal-5.3/?q=admin/build/themes" title="Change which theme your site uses or allows users to set.">Themes</a></li></ul></li><li class="collapsed"><a href="/drupal-5.3/?q=admin/settings" title="Adjust basic site configuration options.">Site configuration</a></li><li class="collapsed"><a href="/drupal-5.3/?q=admin/user" title="Manage your site's users, groups and access to site features.">User management</a></li><li class="collapsed"><a href="/drupal-5.3/?q=admin/logs" title="View system logs and other status information.">Logs</a></li><li class="leaf"><a href="/drupal-5.3/?q=admin/help">Help</a></li></ul></li><li class="leaf"><a href="/drupal-5.3/?q=logout">Log out</a></li></ul>	</div>	  </div></div></div><!--END RIGHT--><div style="clear:both;"> </div></div></body></html>

CSS (it's massive - don't say I didn't warn you!)

/*ALL*/*{margin:0; padding:0;}body {margin:0; padding:0;text-align:center; font:100% arial, sans-serif;background-color:#217eb8}#all{width:794px;border:1px #c0c0c0 solid;margin:auto; background-color:#ffffff; text-align:left;}/*header*/#header{ width:794px; background: url(images/topnav_bg.gif) no-repeat; background-color:White;}#header img{padding:0; margin:2px 0 0 0;}.logo{float:left;border:none; height:39px; width:100px;}#header .links{margin:5px 3px 0 0; padding:0;float:right;}#header .links li{display:inline; margin: 0px 4px 0px 0px; text-align:right;  letter-spacing:-1px; font: bold 85% arial, sans-serif;}#header .links li a{text-decoration:none; color:#000066;}#header .links li a:hover, .links li a.on{color:#868686;}/*general*/h1, h2, h3, h4, h5, h6{text-transform:capitalize;letter-spacing:-1px;}h1{ font: bold 95% arial, sans-serif; color:#000066; padding: 5px 5px 5px 0;}h2{ font: bold 90% arial, sans-serif; color:#494949; padding: 5px;}h3{ font: bold 85% arial, sans-serif; color:#09405C; padding: 5px;}h4{font: bold 82% arial, sans-serif; color:#1A4F75; padding: 5px;}h5{ font: bold 82% arial, sans-serif; color:#000066; padding: 5px; background: url(images/bgnavigation.jpg) repeat-x 0px 100%; margin: 0 5px 0 5px;border:solid 1px #cedbe3;}h6{font: bold 75% verdana, sans-serif; color:#000066;font-weight:bold;}p{color:#494949;}a{text-decoration:underline; color:#000066;}a:hover{color:Gray;}.node{padding-top:10px;}/*leftside*/#left-sidebar{width:195px; background-color:#e2eff7; min-height:300px; height:auto !important; height:300px;float:left; border-top: 1px solid #cedbe3; border-right:1px solid #cedbe3;}.left-block{border-right: 1px solid #cedbe3;}/*content*/.title{background: url(images/block_title_bg.gif) no-repeat; height:29px;  letter-spacing:-1px; font: bold 85% arial, sans-serif; color:#000066; text-align:center; padding:5px 0 0 0; margin:0;}#content{letter-spacing:-1px; font: normal 73% verdana, sans-serif; color:#494949; line-height:140%;width:373px; margin-left: 7px;min-height:510px; height:auto !important; height:510px;float:left; background-color:#f6f6f6; padding: 0 10px 20px 10px;}#content p{line-height:150%; padding:5px;}#content h2.title{background:none; text-align:left; font-size:120%;}#content h1{font-size:120%;}#content h3{background:none; text-align:left; font-size:117%;margin-left:0; padding-left:0;}#content h4{background:none; text-align:left; font-size:110%;}#content h5{background:none; text-align:left; font-size:110%;}#content h6{background:none; text-align:left; font-size:110%;}#content div.tabs{margin-left:5px;}#content p.description{margin-left:0; padding-left:0;}#content div.description{font-size:1.1em;}#content div.compact-link{margin-left:5px;}#content dl.admin-list{background:#e7e7e7; padding:5px 15px;}#content dt{font-weight:bold; padding-bottom:3px;}#content dd{font-weight:normal; padding-bottom:10px;}#content li.node_read_more{text-align:right; list-style:none;letter-spacing:-1px; font: normal 115% verdana, sans-serif; color:#000066;}#content li.node_read_more a{text-decoration:none;}#content ul.menu{margin-left:25px;}#content li.leaf{border:none; list-style-type:disc; font-size:1em;}#content li.leaf a{background:none;}#content code{font: bold 1em verdana, sans-serif; }#content fieldset{margin: 10px 0;}#content legend{font-weight:bold; color:#000066;}#content label{font: normal 1.3em verdana, sans-serif;color:#000066;width: 15em;text-align: left;display: block;}#content .form-item{margin-top:10px;width:100%;}#content input.form-text{width:10em;}#content input.form-file{background-color:#fff; width:15em;}/*rightside*/#right-sidebar{width:190px; background-color:#e2eff7; min-height:300px; height:auto !important; height:300px;float:right;border-top: 1px solid #cedbe3;border-left:1px solid #cedbe3;}#right-sidebar form, #right-sidebar div.poll{padding-left:10px;}#right-sidebar div.text{font: normal 75% verdana, sans-serif; color:#000066; margin:0; padding:0;}#right-sidebar div.percent{font: normal 75% verdana, sans-serif;color:#000066;}#right-sidebar div.total {font: bold 75% verdana, sans-serif;color:#000066; padding: 5px 0;}#right-sidebar .poll .bar {height: 1em; margin: 1px 0; background-color: #cde7fe;  margin-right:15px;}#right-sidebar .poll .bar .foreground {background-color: #aecae0; height: 1em; float: left;}#right-sidebar .links{float:none; letter-spacing:-1px;font: normal 0.89em verdana, sans-serif;margin-bottom:10px;text-align:right; margin-right:5px;}#right-sidebar .links li{list-style:none;}#right-sidebar .links a{ text-decoration:none;}#right-sidebar .links a:hover{color:#868686;}#right-sidebar input.form-submit{border: 1px solid #000066; background-color:White; color:#000066; min-height:20px; height:auto !important; height:20px; width:5em;}/*navigation menus*/li.leaf {border-bottom: 1px solid #cedbe3; list-style-type:none;  letter-spacing:-1px; font: normal 0.8em verdana, sans-serif;}.leaf a {background: #e2eff7 url(images/bgnavigation.jpg) repeat-x 0px 100%; font-family: verdana, sans-serif;color: #000066;display: block;padding: 8px 4px 8px 12px;text-decoration: none;}li.leaf a:hover {background: #e2eff7;color: #553;}ul.menu ul.menu li.leaf a{font-size:1em; }ul.menu ul.menu ul.menu li.leaf a{font-size:0.85em; text-indent:25px;}li.expanded{border-bottom: 1px solid #cedbe3; list-style-type:none;  letter-spacing:-1px; font: verdana, sans-serif;}li.expanded a{background: #e2eff7 url(images/bgnavigation.jpg) repeat-x 0px 100%; font-family: verdana, sans-serif;font-size:0.8em; color: #000066;display: block;padding: 8px 4px 8px 12px;text-decoration: none;}li.expanded a:hover {background: #e2eff7;color: #553;}li.collapsed{border-bottom: 1px solid #cedbe3; list-style-type:none;  letter-spacing:-1px; font: verdana, sans-serif;}li.collapsed a{background: #e2eff7 url(images/bgnavigation.jpg) repeat-x 0px 100%; font-family: verdana, sans-serif;color: #000066;display: block;padding: 8px 4px 8px 12px;text-decoration: none;}li.collapsed a:hover {background: #e2eff7;color: #553;}ul.menu ul.menu li.collapsed a{font-size:0.8em;}ul.menu li.expanded a.active{font-size:0.8em; font-weight:bold;}ul.menu li.collapsed a{font-size:0.8em;}/*poll*/.item-list{padding:5px 0 5px 0;}.item-list ul li{list-style:none; font-size:75%;}.item-list ul li a{text-decoration:none;}.item-list{padding:5px 0 5px 0;}.item-list ul li{list-style:none; font-size:75%;}.item-list ul li a{text-decoration:none;}div.text{font: normal 100% verdana, sans-serif; color:#000066; margin:0; padding:0;}div.percent{font: normal 100% verdana, sans-serif;color:#000066;}div.total{font: bold 100% verdana, sans-serif;color:#000066; padding: 5px 0;} div.title{background:none; text-align:left; font: normal 75% verdana, sans-serif; padding-bottom:5px;}.container-inline{padding-bottom: 10px; padding-top:10px;}.form-item label{letter-spacing:-1px; color:#000066;}.form-item input.form-text {border: 1px solid #000066; background-color:#ffffff; min-height:20px; height:auto !important; height:20px;}input.form-submit{border: 1px solid #000066; background-color:White; color:#000066; min-height:20px; height:auto !important; height:20px; width:10em;}.vote-form{padding-bottom: 10px; padding-top:10px;}.form-radios p{margin-bottom:4px;}.form-item {font: 82% verdana, sans-serif;letter-spacing:-1px; padding: 1px 0 2px 0; margin:3px 0 3px 0;} .form-item input {height:auto; width:auto;margin-right: 0.5em; background-color:Transparent; border:none;}/*misc*/.doc{background:#e7e7e7; margin: 0 5px 0 5px; border-bottom:3px solid #f6f6f6;}.doc img{display: block;margin-left: auto; margin-right: auto; padding-bottom: 10px; }.icon{ float:left; width:65px; margin:5px 0 0 5px;}.icon img{border:none;}.details{margin-left:70px; text-align:left; }.details h1 a{text-decoration:none;}.details p{color:#000066;}.thumbs{background:#e7e7e7; padding:7px; border:3px solid #f6f6f6; text-align:center; float:left;}.thumbs img{border:none;}.gallerynav{text-align:right;}.gallerynav a{text-decoration:none;}.tabs ul, .tabs ul li {display:inline; margin-right:15px; padding-bottom:10px;}.tabs a{text-decoration:none;}.tabs a:active{font-weight:bold;}.picture img{border:none; padding: 5px 5px 5px 0; float:right;}.profile dl{margin:0; padding:0;}.profile dt{font-weight:bold;}.profile dd{ text-align:left; padding-top:3px; padding-bottom:3px;}.profile p{margin-left:-6px; padding-left:0;}/*tables*/#content table th{width:370px; background-color:#000066; font:normal 0.9em verdana, sans-serif; color:#fff; }#content table td{width:370px; background-color:#e7e7e7;}#content table td label{display:block;}/*Clearing*/.clear-block:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}.clear-block {display: inline-block;}/* Hides from IE-mac \*/* html .clear-block {height: 1%;}.clear-block {display: block;}/* End hide from IE-mac */

Link to comment
Share on other sites

There are known styling differences with input type="file" between browsers. See for instance this which sheds some light and suggests one approach.BTW if you have large chunks of code to post, you can use codebox instead of code (it puts scrollbars).
Thanks, I'll have a look at that in a bit more detail.I am rather limited in that I can only use the ID and class names to apply solutions and I need an entirely CSS based solution because of the system that we're using and the constraints that have been placed on the project *humph* and I think the solution here uses javascript. I'll post back to let you know how I get on, but if you have any suggestions in the meantime then do let me know.EGPS - Thanks for the tip about Codebox, I always forget where to look.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...