I have a problem with css and FF3 / IE7 and Opera 10.
I have one input[type="submit"] and one anchor and I want to style them the same. No matter what I try the only logical browser seems to be Opera 10 (it styles them the same with the same css).
FF seems to have different padding (I would need to have the submit box 1px smaller in padding to fit but that would throw Opera 10 off) and IE7 is just way off.
code for you code lovers:
<form action="/login" method="post" id="loginform">
<fieldset>
<input type="submit" value="Login" />
Register
Lost Password?
</fieldset>
</form>
css:
fieldset a {
color: #ffcc00;
border: 1px solid #707070;
background: #000000;
font-size: 10px;
font-weight: normal;
padding: 2px;
/*vertical-align: text-top;*/
}
fieldset a:hover {
color: #ffcc00;
border: 1px solid #707070;
background: #333333;
cursor: pointer;
font-size: 10px;
font-weight: normal;
text-decoration: none;
padding: 2px;
}
fieldset input[type="submit"] {
color: #ffcc00;
padding: 2px;
border: 1px solid #707070;
background: #000000;
font-size: 10px;
font-weight: normal;
}
fieldset input[type="submit"]:hover {
color: #ffcc00;
padding: 2px;
border: 1px solid #707070;
background: #333333;
cursor: pointer;
font-size: 10px;
font-weight: normal;
}
any help to solve the issue of alignment between browsers is desired as I need to support all three (safari too but I think if I get these 3 aligned it should work there too).
Many thanks in advance (p.s I'm going on lunch now and will check answers right after so sorry for the slow replies in advance)
The Firefox problem is solved like this
button::-moz-focus-inner {
border: 0;
padding: 0;
}
Try this in isolation. I recommend using a reset.css file to force all browsers to treat apples as apples, and then styling your INPUT and A elements accordingly.
It's possible that other CSS rules are coming into the mix.
See http://meyerweb.com/eric/tools/css/reset/ for a reset file.
I've had issues with the past with IE and styling certain elements (specifically disabled elements), and how IE differs in its handling of this styling between versions 6 and 7.
The following DOCTYPE seemed to help in those circumstances, but rendering in IE 6 may no longer work as expected:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Related
I'm trying to change the color of the date picker that shows in some browsers but don't know the selector's name.
HTML:
<form action="pledge.html" method="post">
<input type="date" id="birthday" name="user_bday">
</form>
CSS:
body {
background-color: black;
}
input {
height: 45px;
width: 40%;
border-width: 3px;
border-style: solid;
border-color: white;
border-radius: 90px;
margin: 10px;
text-align: center;
font-size: 24px;
color: white;
font-weight: bold;
background-color: transparent;
outline: none;
}
input[type="date"] {
/*Something Goes Here Probably*/
}
Here's a fiddle
https://jsfiddle.net/froggomad/gznx60j1/25/
Thanks!
There are only 8 pseudo elements that are available for customization by default using webkit
::-webkit-datetime-edit
::-webkit-datetime-edit-fields-wrapper
::-webkit-datetime-edit-text
::-webkit-datetime-edit-month-field
::-webkit-datetime-edit-day-field
::-webkit-datetime-edit-year-field
::-webkit-inner-spin-button
::-webkit-calendar-picker-indicator
and sadly, there is no cross browser way of styling a native date picker.
your selector is okay.
input[type="date"] {
/*CSS Rules*/
}
If your codes run on one browser and don't run on another browser, then you need to write Cross Browser Supported Codes with the prefix such as -webkit- , -moz- etc.
But, I will suggest you to use https://jqueryui.com/datepicker/ for flexibility and more features.
I am running a site inside of an application viewer. This viewer will render the website in IE8 compatibility mode which I have no control over and can't change.
I have an input with top/bottom padding of 6px and left/right padding of 12px, but for some weird reason the bottom padding is ignored and the padding is incorrect.
Here is a screenshot of what I'm seeing:
Here is the CSS I'm using to style the input field:
input[type="text"] {
line-height: 1.42857143;
vertical-align: middle;
font-size: 14px;
font-weight: normal;
padding: 6px 12px 6px 12px;
*padding: 6px 12px 6px 12px;
}
I have Googled around for a while now and can't seem to be able to find a solution to my problem. Many tips I found suggest to use various line-height adjustments, while some suggest to use *padding: 6px 12px 6px 12px;. None of these tips work and the issue still exists.
How can I force the input to have equal top and bottom padding in IE8?
Note: I CANNOT use the http-equiv meta tag as it will cause other problems with the viewer.
You cannot :(
you may style a regular tag instead :
span {
float: left;
border: inset gray 2px;
background: white;
line-height: 2em;
height: 2em;
}
span input {
border: none;
}
.submit,
.submit input {
background-color: #337AB7;
border: solid #337AB7 2px;
width: 3em;
color: white;
text-align: center;
}
p {
display: inline-block;
box-shadow: 0 0 3px white;
}
body {
background: tomato;
}
<p>
<span>
<input type="text" value="(800) 123-456789" />
</span>
<span class="submit">
<input type="submit" value="Dial"/><!-- unless this a link , styles to be applied here & span can be skipped -->
</span>
</p>
I'm having an issue with css in Internet Explorer, however it is only showing when i'm testing in Browserstack. It shows on all versions of IE that I test on with Windows 7. On my PC it appears fine with my version of IE and when I change the browser mode from within. I'm not sure if it's a quirk or Browserstack or an IE issue that i'm missing.
The area concerned has 2 paragraph tags, 1 floated left the other right, both width 45%, display block, overflow hidden. Each has an anchor tag inside display block, with a background color and border on. The second link is like it's mirroring itself, looks really odd and i can't find anything on this, anyone seen this before and know how to fix? Or is it a Browserstack quirk?
Screenshot of what's happening here
Thanks!
edit, added code:
<style>
a.button {
background: #c10075;
-webkit-background-clip: padding-box;
color: white;
display: inline-block;
padding: 15px 0;
border-radius: 4px;
border: 2px solid #c10075;
border-bottom: 2px solid #8e0056;
border-right: 2px solid #8e0056;
text-transform: uppercase;
text-align: center;
font-family: Rokkitt, serif, Arial, Helvetica, sans-serif;
font-size: 28px;
display: block;
}
a.button:hover {
background: #8e0056;
border: 2px solid #8e0056;
color: white;
}
.cta-buttons p{
width: 45%;
float: left;
}
.cta-buttons p.last{
float: right;
}
</style>
<div class="container cta-buttons">
<p>
Apply now
</p>
<p class="last">
Book your visit
</p>
</div><!-- .cta-buttons -->
This question already has answers here:
iOS forces rounded corners and glare on inputs
(6 answers)
Closed last month.
I have a site which is working properly except for the input field and submit button next to it. They are not showing properly on iPad. The height of the input box is slightly more than the submit button, making it look weird.
What I think is that Safari mobile has different viewports(1024px) etc, but renders the same WebKit appearance as of Chrome. Then why the input box is showing different on iPad?
Here is how it looks in Google Chrome on my desktop:
And here is how it looks on iPad:
The HTML part goes simply as:
<div id="search-form">
<input id="Search" class="defaultText defaultTextActive" title="search shzamm!" type="text" spellcheck="false">
<input onclick="javascript:someFunction();" type="button" value="Go" class="search_btn">
</div>
And the CSS for the same is:
#search-form {
overflow: auto;
box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.1);
margin-bottom: 26px;
}
input#Search {
-webkit-appearance: none;
border-radius: 0;
-webkit-border-radius: 0;
}
.defaultText {
width: 88%;
padding-left: 4px;
height: 29px;
float: left;
background-color: #f7f7f7;
border-right: 0px solid #666;
border-bottom: 1px solid #666;
border-color: #999;
margin-right: -33px;
}
.defaultTextActive {
color: #999;
font-style: italic;
font-size: 15px;
font-weight: normal;
}
.search_btn {
font-size: 13px;
font-weight: bold;
height: 34px;
cursor: pointer;
float: right;
margin: 0;
width: 33px;
background: url("../images/search.jpg") no-repeat;
text-indent: -99999px;
border: 1px solid #999;
border-top: 2px solid #000;
margin-top: 0px;
margin-right: 1px;
}
As you can see, the border effects of input are also not being rendered properly in iPad. Anyone have any clue about it?
This snippet of CSS will remove the default WebKit styling from your textboxes:
input[type="text"] {
-webkit-appearance : none;
border-radius : 0;
}
Works on iOS 7 too.
Try to use -webkit-appearance to get rid of the default styles.
Check this answer: iOS forces rounded corners and glare on inputs
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