good morning all!
i'm struggling at the present time to style a drop down select menu that will fit into my current design for mobile devices (i.e. especially the iPhone right now)
this is how it looks like at present time on my iPod
this is how it looks at present on Google Chrome
i would really like for the iPod select drop down to mirror the desktop drop down if possible as demonstrated with the textfields but i seem to be stuck at a hard point.
please find the current css code i am using below:
/************************************************************************
FORM STYLING
*************************************************************************/
button.button{
font-size: 14px;
font-weight: bold;
background-color: #333;
width: 95%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 10px;
text-align: center;
color: #CCC;
border: none;
}
input, textarea{
font-family:Helvetica,Arial,sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
color:#555555;
background:#FBFBFB none repeat scroll 0 0;
border:1px solid #E5E5E5;
font-size:12px;
line-height: 16px;
margin-bottom:16px;
margin-right:6px;
margin-top:2px;
padding:10px;
display: block;
width: 92%;
}
select {
font-family:Helvetica,Arial,sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
color:#555555;
background:#FBFBFB none repeat scroll 0 0;
border:1px solid #E5E5E5;
font-size:12px;
line-height: 16px;
margin-bottom:16px;
margin-right:6px;
margin-top:2px;
padding:10px;
display: inline-block;
width: 30%;
}
label{
font-size: 12px;
font-weight: bold;
color:#5B5A5A;
display: block;
}
label span, .required {
color: #C00;
}
i would appreciate any help in resolving this css conundrum!
many thanks in advance
This article by 37 signals explains that you must employ a css reset of the webkit styles before your own css will take precedence. They provide excellent code examples.
http://37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit
Related
I am trying to set the position of a close button over a div and cant get it to the top right hand side. I have read many of the Stack articles relating to this but cant get this working.
Is anyone able to assist?
http://jsfiddle.net/grantfeldman/K4p6g/1
<div class="tag">
<a class="closeButton"></a>
Foo
</div>
div.tag
{
color: #EEE;
font-size: 15px;
font-family: Georgia, Times, serif;
display: inline-block;
border: 2px solid #324566;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
background-color: #283957;
padding: 8px;
margin: 5px;
}
.closeButton
{
display:block;
float:right;
width:27px;
height:27px;
background:url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}
Working Fiddle: http://jsfiddle.net/K4p6g/2/
Needed changes:
#divMyTags div.existingTag
{
position: relative;
}
.closeButton
{
display:block;
position:absolute;
top:-10px;
right:-10px;
}
This absolutely positions the close button relative to its parent.
Quick update for another requirement in your comment:
http://jsfiddle.net/K4p6g/5/
Note that it's a quick update using jQuery, but it should give you the idea. If you're already using jQuery in your project then you're good with this.
I just changed some things, have a look
#divMyTags div.existingTag
{
color: #EEE;
font-size: 15px;
font-family: Georgia, Times, serif;
display: inline-block;
border: 2px solid #324566;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
background-color: #283957;
**padding: 0px**;
margin: 5px;
}
**#divMyTags .theText
{
margin:10px;
}**
Updated sources here : http://jsfiddle.net/K4p6g/4/
This is my site:
http://www.michelepierri.it/
I correctly see my theme in FF and IE but if I open it in Chrome menu voice are not correctly visualized:
Can you help me to resolve this problem?
After reviewing your css, I found too many unused styling please remove those and use these rules:
.menu li {
float: left;
}
.menu a {
white-space: nowrap;
border-left: 1px solid #585858;
color: #fff;
display: inline-block;
font-size: 13px;
font-weight: 700;
height: 45px;
line-height: 45px;
padding: 0 0.9em;
text-shadow: 0 1px 1px #242424;
}
Please see the attachment after doing that changes.
See I am also using the same version and for me its fine
Prevent menu options from wrapping text
Add an additional style rule to your menu links CSS so all text stays in the same line.
.menu a {
border-left: 1px solid #585858;
color: #fff;
display: block;
font-size: 13px;
font-weight: 700;
height: 45px;
line-height: 45px;
margin: 0;
padding: 0 0.9em;
position: relative;
text-decoration: none;
text-shadow: 0 1px 1px #242424;
white-space: nowrap; /* THIS ONE */
}
And add the same thing to .sub-header-menu a style definition because when I check the site even Cloud Computing is wrapped and breaks the whole situation.
Advice: It is ok that you're exploring the possibilities of CSS but you're playing a bit too much with it producing legibility problems. Letter and word spacing should only be cautiously manipulated. I'd suggest to remove majority of letter and word spacing settings.
I would like to apply this css on my .FileUpload button , but It only works on IE and not on Chrome and I still don't know what is wrong with it. Someone as got an idea ?
Thanks for helping
.FileUpload
{
width: 90px;
float: left;
color: black;
font-family: Segoe UI,Arial, Sans-Serif;
border: 1px solid #C7D2D8;
height: 30px;
text-decoration: none;
display: inline;
background: white;
margin: 10px 10px 10px 540px;
text-align: center;
padding: 4px 0;
letter-spacing: -1;
border: none;
cursor: pointer;
}
AFAIK it is not possible to style an <input type="file">, for all browsers. But you could replace the upload-field with javascript and the replacement can by styled as much as you want.
You'll get an example of such a replacement script in this blog entry.
You can try using jquery instead, this would be cross browser compatable then, more info here > http://jqueryui.com/demos/button/#default
either that or there are several examples here on different methods of achieving what you want http://speckyboy.com/2010/05/26/20-awesome-jquery-enhanced-css-button-techniques/
I am talking about the "Previous" and "Next" post navigation links below the articles on my website, which look like this (below) in all modern browsers (IE > 7)
But in IE6 and IE7, it looks like this
Yes, the rest of my website looks very fine in these browsers as well, and want to get this to work, and without breaking anything else. I see that IE6 and IE7 can have float issues, and that there's a fix as well (a working one, I couldn't find).
This is the HTML code pertaining to the post navigation (mentioned above):
<div class="post-entries">
<div class="nav-prev fl"><span class="meta-nav">?</span> LG's A530 3D Notebook Shoots And Plays In 3D [PICS]</div>
<div class="nav-next fr">LG's Mouse Scanner Saves Scanned Material To Image, PDF or DOC <span class="meta-nav">?</span></div>
<div class="fix"></div>
</div>
and here's the CSS code pertaining to the above:
.post-entries { clear:both; margin-top:20px; background-color: #F8F8F8; border-bottom: 1px dashed #AAAAAA; border-top: 1px dashed #AAAAAA; line-height: 1.7; margin-bottom: 15px; padding: 5px 10px; font-weight: bold; font-size: 1.1em; }
.post-entries a:link, .post-entries a:visited { font-size:0.9em; color:#888; }
.fl{float: left;}
.fr{float: right;}
.fix{clear: both;height: 1px;margin: -1px 0 0;overflow: hidden;}
I hope I am clear. Can someone help me out with this?
How about this? Added css:
/*.post-entries{float:left;width:600px}*/
.nav-prev,.nev-next{display:block;width:100%}
Updated fiddle: http://jsfiddle.net/y3MBC/14/
I think if you just add a <div style="clear:left;></div> in between the two divs it will format the way you want. I tested it in ie7 but don't have an effective way of testing for ie6. Here's the updated fiddle: http://jsfiddle.net/D3Jja/
Looks like you haven't specified a width for the div's. Try this:
.fl{float: left; width: 100%}
.fr{float: right; width: 100%}
Also if you plan on using margin/padding add a display: inline to your floated elements to prevent old IE from doubling the amount of margin/padding.
Thanks to #marissa.c for the help, this is the answer...
modify this line:
.post-entries { clear:both; margin-top:20px; background-color: #F8F8F8; border-bottom: 1px dashed #AAAAAA; border-top: 1px dashed #AAAAAA; line-height: 1.7; margin-bottom: 15px; padding: 5px 10px; font-weight: bold; font-size: 1.1em; }
to his:
.post-entries { clear:both; margin-top:20px; background-color: #F8F8F8; border-bottom: 1px dashed #AAAAAA; border-top: 1px dashed #AAAAAA; line-height: 1.7; margin-bottom: 15px; padding: 5px 10px; font-weight: bold; font-size: 1.1em; height: 100%; }
And then add this line:
.nav-prev, .nev-next { display:block; width:100%; }
And that fixes the float issues. It now even works in IE6, all credit to #marissa.c
Some times I may may want an anchor beside a submit button, but I always seem to have problems lining them up ...
a, input[type=submit], input[type=button], button {
font-family: arial;
background: #fff;
color: #777;
border: 1px solid #ccc;
font-size: 12px;
line-height: 20px !important;
padding: 5px 10px;
margin: 0;
}
http://jsfiddle.net/cXgzM/
with that, anchors are still 2 pixels short
Simply add this to your CSS:
a
{
display: inline-block;
}
I updated your example. Note that this property doesn't work in IE7 and lower. :)