I have a web application originally designed to target IE7. I am readjusting the CSS to make the app presentable in the latest version of Chrome without breaking it for IE7 users. I've fixed mis-aligned sliding door input boxes throughout the site but there is one page where I cannot get the sliding door to align in both IE7 and Chrome. The setup is very simple:
<span>
<input type="text" ... />
</span>
In this case the span holds the left cap of the sliding door and the input holds the right cap and body. I've styled both span and input as inline-block with the same height and no margins or padding. Chrome nails it and it looks great but IE7 is rendering the input 1 pixel lower than the span like so:
need more reputation to post images
If I add -1px of top margin to the input then IE7 renders the thing correctly and Chrome renders it misaligned. I've tried comparing this instance to all of the other sliding door inputs in the app that work in both IE7 and Chrome but I cannot for the life of me see what is different here....
Anyone run into a problem like this before?
There's almost certainly a better way to fix this, but without seeing it..
Add a class to the broken input such as "ie7fix", then:
/* applies to only ie7 */
*+html .ie7fix {
margin-top: -1px;
}
http://en.wikipedia.org/wiki/CSS_filter#Star_plus_hack
Related
I have never had this happen before. I have an image in the background of this input field. I have it aligned using the X and Y positioning and I aligned it in Firefox. When I look at it in chrome, it is too close to the words "log in" and is about 2 px too low.
I found this link on SO, but I guess I am not really following it.
How to write specific CSS for mozilla, chrome and IE
I was trying to use :before but could not get it to work. -webkit and -moz do not seem to be a good solution and I could not get thsi to work anyways.
the link is http://www.splitlightdesigns.com/oxbridge
UN - oxbridge PW oxy510
Many thanks,
Houston
every browser has its user style sheet that it applies on its own to some elements unless you override it with custom styling.
you should first of all, reset all of your styles using a 'reset' sheet, here is the first google result: http://meyerweb.com/eric/tools/css/reset/
just reset everythign and then start styling
There is 2px margin on submit input, but not in all browsers. It could be the problem, so set margin: 0 to submit button (or set margin: 2px for all browsers).
Here is the link to the website I am talking about.
My problem is that when you navigate between the different pages in the main navigation, the main wrapper does not align on the different pages I have used. So if you are on the home page and you click on "WMH" in the main navigation bar the whole page jumps to the left by about 8px.
This creates a jitter between pages that my client really doesn't like. I used some padding-left and padding-right in css to align it correctly. Unfortunately when I get it pixel perfect in Firefox, it is wrong in Chrome and Safari. If I get it pixel perfect in chrome, it jitters in Firefox. This is very irritating. I don't want to have to write separate styles for Chrome, Firefox, IE, Safari unless it really is the only solution.
Thanks for your feedback.
Archie.
The browser scrollbar looks to be causing this. You can force a scrollbar to always appear which would solve the issue. Add this to your CSS:
html {overflow-y: scroll;}
You would also probably need to remove the padding that you tried to fix the problem with originally once the above style is in your CSS.
I have a HTML 5 drag and drop game that doesn't work in IE so I want to basically just show the answers in the form of an image. At the moment I'm using CSS to hide the game div in IE and display a div with using display: block; to show the image and hide it using display: none on browsers like Chrome.
Is this an ok way of switching content based on browser or is there another method I should be looking at? What is the correct way to do this?
The only draggable elements in IE are the <a> and <img> elements.
Some people just wrap their (text) content with <a> tags that go nowhere, as is seen in Remy Sharp's demo: http://html5demos.com/drag. This works just fine in IE9, and probably older versions of IE.
So the "correct" way to handle IE is to use those elements.
I'm having an issue with my navigation, the first list item appears to have a huge gap on the right.
I have a list of links inside an UL each have their own class so I could set a background icon to them. The first link has a background to give it the rounded effect.
I used relative to push to left so it would have that rounded effect for the hover and active states on the homepage and hover for when i'm on other pages.
Now it all works fine in new browsers apart from IE7 and probably older versions.
I've put it on JSFiddle to make it easier to view.
http://jsfiddle.net/datastream/Gta3h/2/
and http://eminemforum.net/navtest/nav2.html
Thanks
Live Demo (edit)
I got rid of <div id="navHold">.
I removed right: 40px from #topNav2 .home-icon.
I changed the width of #Navigation-Holder from 750px to 830px to make it appear the same width it was before I changed anything.
I've tested that this looks consistent in: IE7, IE8, Firefox, Chrome.
i have a blog and i have placed a form in right but it shows different result in different browser.
The Link named "Subcribe in a reader" should be in center but it shows in left in Safari and Opera but IN FF and Ie7 Shows Perfectly in center.
And The border is 5-6 pixel going up in Opera and Safari but in FF & IE 7 it shows Perfectly fine. And In Ie6 it shows border line 10-12 pixel downside ... strange
i m using this code to adjust for postioning..
please help....
my blog : ww.techieinspire.blogspot.com
check image here
http://techie2inspire.googlepages.com/csspositioningproblem.JPG
Your markup is seriously jacked up. Use Firebug on Firefox to look at it. Here's a couple things I noticed:
You have your elements for your subscribe link inside the form above it. This is not apart of your newsletter form, so shouldn't be contained inside that form.
Your using a lot of <span>s with block elements inside them. <span>s are generally for inline content and sticking block elements (like <p>) inside could give weird results.
Check your stylesheets where your setting the left padding for ".newsletter p" this is affecting your subscription link.
Try to avoid specifying styles inline (using the style attribute).
Stop using postion:relative everywhere. Instead using padding and margins for layout your sidebar.
Generally to center something, you can do this:
.centered_thing {
margin: 0 auto;
text-align: center;
}
Edit: The marquee thing is terrible. Read about what happened to the HTML marquee tag. There's many good reasons to avoid it or Javascript knockoffs.