I m using a ruby code in select list i need 15px gap from left so i used a padding left="15px" its working fine in firefox but its not working ie and safari so i want to use text-indent ="15px" its working fine i safari and ie but not in firefox please any one help me to resolve this problem,,
padding left is working fine in textfeild but why it giving problem in ie and safari ...
Code:
<% #sex = [['male', '0'],['female', '1'], ['other', '2']] %>
<%= select_tag :sex, options_for_select(#sex), :style=>"width:100px; height:30px;padding-left:15px;vertical-align:middle;" %>
Thanks
select elements are very difficult to style consistently cross-browser, and even worse cross-platform (they're very different-looking things on Windows and MacOS X for instance).
However, assuming the document is in standards mode, I've been able to get a consistent result across IE8, Chrome and Firefox on Windows using this code:
select { padding-left: 15px; }
IE7 falls back to the default styling (i.e. no padding), if you can live with that.
Another option might be to wrap the <select> in another element (e.g. a <span>) and apply some styling to that. That would indent the entire element, rather than it's contents though.
Related
Here's my deal:
The boss asked me to fix a page not displaying properly in IE7.
I'm working with a div tag initially set as:
<div id="login_content" style="left: 0px; text-align: center;">
And so it is rendered in Firefox, Chrome, Safari, and IE9. The issue comes in IE7--somehow the div is cut off when IE7 automagically decides to set the inline style with a height of 8px.
There are no scripts that modify this (as I said, it doesn't get touched in other modern browsers) and upon inspection with IE9 developer tools, it's not inherited from a style sheet. Does anyone know what might cause this behavior?
If it's running through an external script it's probably an inline style in that. If you post a link we can use inspection tools.
You can use the conditional <!--[if IE7] code to fix it [endif]--> to just change how it renders on IE7.
I'm trying to get this menu working with IE (mainly 9+ atm) and am having trouble. There seems to be some weird padding issue that I can't seem to track down. Any ideas?
Here is the JS Fiddle: http://jsfiddle.net/Ztzn6/
IE Verion:
Chrome Version:
Add vertical-align: top; to your second rule group (the one with display: inline-block). You're running into some fun rules about how line-boxes and inline elements work, IE seems to be using a different default behavior.
Just finishing up a site and having an issue with position: fixed on IE7. I've Googled it and tried different Doctypes but the fixed area is still moving out of position on IE7.
I've not got IE7 but a client staffer has it and I can see the issue using an online IE renderer/tester.
I've removed the .htaccess from the test site so you can see the site/code.
http://drinkzing.com/test
Any advise or help would be appreciated.
There is a <div> and an <ul> element which both have id="logo-nav". They've both set position:fixed and some other properties. I think this is the main problem. Remove the duplicate ID, set position:fixed only for the <div> element and then we can investigate the issue (or the problem should disappear at best).
If you have newer version of Internet Explorer, you may emulate IE7 by clicking the Compatibility View button or choosing IE7 document mode in Developer Tools.
edit: I noticed that you haven't set any left property for #logo-nav. I don't know why IE7 computes the default position other way than all other browsers, but simply adding #logo-nav { left: 225px } works for me.
Try this in your css:
* html idorclasshere {
position: absolute;
}
Note: replace "idorclasshere" with your, well, ID or Class of the non-responding div (don't worry, due to the asterisk, other browsers aside from IE won't see it, add it in conjunction to your "position:fixed" style).
how can I fix this problem on Internet Explorer 7:
If I resize the browser window you'll see that the letters of the last tag on the right (in the header) are displayed in vertical one above each other.
This happen only in IE, and not in other browser (you can better see the bug by visiting the website: http://www.sanstitre.ch/drupal/portfolio
How can I ask IE 7 to consider the word as block, and move it to next line instead of listing the letters in vertical ?
thanks
Try using:
.views-exposed-widgets
{
white-space: nowrap
}
In your CSS.
Of course, IE 7 isn't a great browser, so if you're having trouble, try also:
<span style=”white-space: nowrap”> your content here </span>
That might do the trick.
I've run into a weird quirk. The website I'm building for Escondido Arts Gallery has all of it's text in each element left-aligned in firefox and IE, but for some reason everything is center aligned in Safari. Is there one simple css or html fix I can do to fix this, or am I going to have to 'text-align: left' every element?
No surprise there:
<body tracingsrc="../../non assets/web2.jpg" tracingopacity="30" align="center">
Just get rid of the proprietary attributes (align="center" especially), and your problem is solved.
There is something wrong with the CSS (or there's an unclosed html tag). The center align property must be cascading from some other element because it's not only safari/chrome (which also uses webkit) but also opera that shows the things center aligned, and both safari/chrome and opera are more standards compliant than ie and even firefox.
* { text-align: left; }
If things are cascading properly this should conceptually be enough:
html, body { text-align: left; }
Depends on why it is left-aligned. If it's simply the browsers applying different defaults, you can do as greyfade says to make all tags default to left-align in all browsers.
If the problem is bugs in the browsers CSS implementations, then you may have to trace down why the browsers disagree, and find some workaround to that.
Specifying a strict rather than transitional doctype may also help in getting more uniform behavior from the browsers (and let's be honest here, can we really claim to still be "transitioning" to HTML4.01 or XHTML1.0? Both standards have been out for close to a decade.)