I'm redesigning the skin and layout of a user info form. Initially it was done using a table, but I really don't want to use a table for the layout. My code is here http://jsfiddle.net/Chris22/eNqrM/ I've tested my code in all browsers, Opera 11.x, FF 12.x, Chrome 18.x, Safari 5.1.x and the form looks great. My problem is IE9.
Please take a look at the code in IE9 and see if anyone can figure out what I've mis-coded as to why the form elements don't line up and some have a different text treatment. I just can't seem to figure it out.
Here is the original table-layout if any one wants to compare. http://jsfiddle.net/Chris22/q3sCb/3/ Both sets of code have java spring form tags, so it was a little difficult for me as well to figure it as I am a FED (front-end dev). Maybe I've got something mixed up here. I don't know.
Thanks!!
P.S. If modifying the original table-layout is the better way to do this, I'd appreciate some help on how to begin to code that... I haven't used tables for layout in a while.
IE9:
I fixed this. May not be the best way, but I wrapped the input elements in the label tag and added a rule float:right to the input tag within it. Thanks for everyone's feedback
I've got the same problem with a relatively straightforward form that has inputs with a value attribute. Not sure if that's actually an answer, but it may help to know that you are not alone in seeing a misalignment. I'm slightly baffled as to why some people are NOT seeing a misalignment. The fact that float:right gives a fix is useful to me and may have something to do with the mysterious hasLayout property that has long been a 'feature' of IE. Floating, left or right, induces 'hasLayout' but may have other consequences. A common fix for not 'having layout' is to give everything a zoom:1 in CSS - this induces 'having layout' and usually without any visual change, because zooming with a factor of 1 doesn't resize anything.
Related
Ok, I've been dealing with IE bugs for a long time now, but this one is beyond me. IE 7 and even 8 does it for sure, I've not seen it on FF or Chrome.
So here's a live URL which produces it: http://mog.com/music/America/Holiday
Reproducing isn't easy, it can take a few times to make it happen. Watch your scrollbar to see it change size so you know the page length was suddenly dropped quite a bit.
Here's how you do it:
Hover over any sub-nav link (Main, Albums, Songs, Photos, News, etc.)
Try them until you see the scrollbar change size. Once it does, scroll all the way down and notice the footer has jumped up on top of much of the page content.
Be careful scrolling down that you don't roll over a few other page elements that will suddenly fix this. So far I can see that any of the Play buttons will somehow fix this.
It's just beyond weird. How could a rollover state cause this kind of behavior?
I've tried:
Removing the a:hover style - THIS FIXES IT... WTF? Of course we ideally would keep some hover state, so hoping to avoid this fix.
Reproducing the hover functionality using jQuery hover(). - THIS DOESN'T FIX IT.
I figure the clues are in the elements that somehow magically fix it...and possibly in where the page jumps to, what elements suddenly get obscured by the footer.
Lastly, I didn't produce this site from scratch and it uses a lot of absolute and relative positioning for certain things and I know that is partly what causes these weird bugs. I rarely, rarely use esp absolute positioning to avoid these kinds of bugs, but it's a bit too late now.
Thanks for anyone willing to check it out!!
Well, I figured it out. It was an odd case of the "Guillotine" bug. One I luckily haven't come across before. Turns out the "special" CSS rules on those nav links' hover state (particularly it seemed the border and bg image) were enough to trip this bug. One way around was to drop those styles, but not ideal. The real fix, however, was an unsemantic clearing div placed in just the right spot. More info found here:
http://www.positioniseverything.net/explorer/guillotine.html
Hi just a short note: When did you validate your html the last time?
As you probably know, but might have forgotten, fixing your html can sometimes solve a lot of problems. There are 72 errors seen by http://validator.w3.org
Okay, this is REALLY starting to bug me...
This page works fine in both Chrome and Firefox. www.bloggan.tk
But if it's opened in internet-explorer it always expands beyond the page and introduces the scrollbar no matter what the resolution of the browser is.
I have NO idea what change in the html it was that cause this...
Here's the blogger-template-html-source
I'd REALLY appreciate if someone could help me with this.
Thanks in advance!
Edit:
I've "solved" it for IE using javascript, but that's only temporary (i hope). The version without javascript can be seen here, so that you still will be able to know what I'm talking about. Still trying to solve it, and still hoping for someone to help me.
Before you ask a question here, you'll need to do some basic research yourself.
Strip out everything from that HTML file you reference until you have the simplest possible document that reproduces the error. Don't expect people to dig through a 40k HTML file to find the thing that's causing you grief.
Isolate it before you ask about it.
Incidentally, however, there is no CSS width or height specifier for "the rest of the page". You need to meticulously keep track of your percentage widths to make them add up to 100%, or use tables. If your sample is using percentages, then I'd look for borders and padding, since those are the things that cause discrepancies in box size between old IE versions and modern browsers.
I've discover so far that:
stating the width in some elements fix issues in IE.
and of course using a CSS reset
Do you know any others?
Learn about hasLayout
Inline block behavior can be achieved on IE7 by turning on hasLayout, then setting display to inline. This has turned out to be quite useful to me.
Make sure your doctype is present and correct. This alone can save hours of pain.
Use conditional comments anytime you need to hack something especially for IE. PLEASE don't fall into the amateur's habit of adding star/underscore junk in your main stylesheet.
I'd say that manually setting width would more often than not break things in IE, as a lot of IE versions implement a flawed box model.
I'd also say that a lot of all browser incompatibilities originate from a sub par understanding of the box model and float/clear, block/inline.
Having said that, I of course do not deny that it is IE, rather than the developer, that is the real problem, but I usually seek to avoid browser incompatibilities by using HTML structures that not even IE could miss-interpret, rather than through CSS hacks, and I've found that that is often quite doable.
I am pulling my hair trying to find a fix for this problem. If you go to this site you will see that (under IE) the slider and the menu on the top is broken. Works fine under all modern browsers.
Any idea how to fix this? Thanks.
Edit: Want to add that the original site design works fine under IE. I did a massive amount of editing under the hood and somewhere along the line this one was broken that I can't seem to find a fix for. Since I did a lot of customization, I think it seems unfair to ask the original author for a fix (and he is not very responsive either).
The document invalid. In particular, there is a <style> element before the Doctype. This triggers Quirks mode and causes browsers to become very inconsistent (e.g. IE emulates a log of bugs from IE 5.5).
Always work in standards mode and perform basic automated QA.
I can't check it for you, since I've not got access to IE right now, but I've often found that adding position:relative to misbehaving elements is something of an IE magic bullet.
No fix but a lead: the issue with the menu bar is one of IE's mysterious float positioning bugs, as can be demonstrated by putting <div style="clear: both">xxx</div> after the navbar ul. (Note that it won't work if the div has no content!)
stuff about box model deleted: as David Dorward mentions this is caused by quirks mode, and moving the style down past the doctype causes the slider to behave sensibly.
This is a somewhat open-ended question, but I really want to understand this one so I don't care.
I have a two-element "table" (CSS with spans). The left column always has an icon which is 20x20 pixels. The second column has a single line of text associated with the icon.
I have gone through all sorts of ideas I could come up with to make this look exactly the same in IE6-8, Firefox 3.5 and Google Chrome, but all ideas result in the text being one or two pixels off at best.
I'm looking for a fool-proof non-<table> way to make this list look exactly the same in all browsers. I mean every single pixel.
Pixel perfect doesn't exist - you simply don't have that kind of control over the range of browsers out there, and nor is it profitable for you to attempt to make it so. Diminishing returns, thy name is IE6.
Fwiw, it also sounds likely that you would do better here to simply have a list (<ul>) with list-style-type set to none and using background images to display your 20x20 icons.
You are chasing a moving target. With so many broswers and so many versions there will most likely never be a way to make it perfect. Then even if you do get it close to perfect the next release of any of the browsers may break it again.
Here's my question: if it's really a table, why not use <table> ? It's one thing to avoid using tables for purposes of general page layout, but the table tag is still perfectly legitimate for, well, displaying tables.
If that doesn't work for you, consider a <ul> modification or similar. It's unlikely, though, that you'll ever get it truely pixel-perfect in all browsers.
Yes...
Render an image ;)
(Sorry, but if you want it really "pixle perfect", then this is most likely the easiest way)
I agree with Tony and annakata. However, usually the best result comes from something simple like this:
<span><img src="images/icon.gif" style="vertical-align:text-bottom;" />Some text</span>
Which at least looks exactly the same in webkit, ie8 and firefox. (I believe ie7 too, but I didn't test)
I'm sory for this huge edit I didn't read the question properly.
As some have already said it's very hard to achieve pixelperfection on a website as every browser render the pages differently.
With css you can use absolut and relative positioning of basically anything but its far from perfect when it comes to cross browser compatibility.