Here is the url to the site in question: http://www.katiesamsonlaxfest.com/index.html
The site looks fine in all the browsers except IE6 and below. I would like if possible to find an easy css fix because as you can see the content is not contained within the divs.
I recommend the YUI CSS Foundation (Reset, Fonts, Grids). I find far less IE issues when building sites this way and often it requires almost no IE fixes/hacks once built and tested in Firefox.
It may take a little effort to learn, but I consider this to be the easiest fix because it almost eliminates the need for IE specific CSS and it saves you time in the long-run.
There is no "easy fix". You need to address the problems one at a time.
You can add "IE6"-specific CSS by adding things like:
.box {
margin-left:20px;
_margin-left:15px; /* this is the ie-specific fix */
}
...etc.
Also, transparency doesn't work with 24-bit PNG files. Use 8-bit. They're only titles, you don't need 24-bit anyways (or just use GIF). This is why your titles have strange boxes around them.
Related
So my nightmare have come true. I need to make this website im developinglook good not only for IE8 but for IE over Win XP, apparently this company still get support for XP and they have all their intranets working under XP.
After doing a first check on a virtual machine the website looks like hell even the layout was totally broken so i decided to use html5shiv js (that fixed the basic layout) besides things like reset all margins and paddings and <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><![endif]-->.
BUT everything still looks pretty messy, specially things like image re-sizing on the html for retina display matters (i know, LOL) and things that i float with display-block. I have read tons of things with the display-block situation over IE8 but i just cant find a way to make it work without changing all my display-blocks for floats or create another huge specific ie (under win xp..ugg) stylesheet.
Do you guys have a general advice in order to make my website (flat design nothing with transitions or anything fancy) at least look decent on ie8 under xp ? Any help will be really appreciated
I own (and use) a Windows XP machine in addition to something more modern and I actually still have IE6 on the XP machine so as a web designer, I am way too familiar about coding for something as quirky as IE.
One of the biggest and continuing quirks with IE is the fact that it is VERY unforgiving about processing CSS 'instructions'. Leave out one declaration - like heights and widths for example - and you get rubbish because the engine decides it will try to interpret as it will.
These quirks are annoying as heck to experience, but the truth is, these quirks can help you to become a stricter CSS coder.
That said, some thoughts to help avoid these particular problems:
1) Declare ALL dimensions of objects. This includes heights, widths, margins, and paddings.
IE does NOT like 'auto' sizes unless it is exceptionally obvious.
An example of 'exceptionally obvious' would be two blocks floated side by side both whose percent dimensions are explicitly declared which, when added together, equals to 99% (for the sake of the example) which leaves 1% explicitly available to be used as a margin space which can be calculated by IE correctly.
2) When using floats side by side and if the floats don't want to float politely next to each other, try adding this to the floated block element: display: inline;
Normal compliant browsers won't care about it and some designers will gripe about it being a 'hack' (and yes it is), but it's SHORT, sweet, and does the job without resorting to queries.
3) Make sure the container that holds the floats has overflow.
Some thoughts about 'pretty' vs 'older IE and people using XP':
1) If using CSS3 and having it render correctly is all that important to you, then I would suggest either a) use CSS3 for unimportant things only or b) create a stylesheet specifically for non-CSS3 browsers.
a) This way, if unimportant things don't load correctly (and don't cause cascading problems), big deal.
b) This way, so you can use CSS3 all you want however you want without worrying about how it will look for non-CSS3 browsers as you will have a separate stylesheet for them.
A thought on image scalability between browsers and operating systems:
1) This webpage HERE has a great discussion on Fluid Images and scalability and it also offers an approach for addressing image scaling in IE and Windows in particular.
You might have seen it already, but if you haven't, there it is.
This problem appears on every bit of text, no matter if it is table,div or something else
As you can see on every right side of text elements, 1-2 pixels is missing. Adding of padding never helps
Any suggestions please?
You could try to following fix for webkit browsers.
Replace the button span with your text class..
#media screen and (-webkit-min-device-pixel-ratio:0) { /* Safari and
Google Chrome only - fix margins */ your classname { margin-top: –1px;
} }
Have you set the viewport meta tag to specify its width and zoom scale? Maybe that would help? It's documented in the Apple dev docs
You could try using -webkit-font-size-adjust.
Look here for more info on it:
http://webdesignernotebook.com/css/the-little-known-font-size-adjust-css3-property/
This is happening probably because of
Inherited CSS property
If CSS does not seem to fixed it, check html doctype. Some tags although in rare cases do not work with certain doc types.
use !important attribute in CSS to enforce a certain rule be applied which discards all others.
try to set display: inline-block and a negative text-indent to <span> elements (embedded inside a webkit-only media query)
I have tried to deal with this problem for a month. Here what I have tried and found out. But I could not get actual solution;
I have followed up this thread, unfortunately nothing worked.
Tried several simple html documents with most possible doctypes,css,font-size,font-styles reset ..etc did not worked.
I discovered; when using with a remote url, it seems work fine, rendering is ok. When using embedded html pages, causing the problem.
In Titanium issue list; I have found out that, they represented as a Webkit bug.
https://jira.appcelerator.org/browse/TIDESK-136
Solution might be upgrading webkit version but Titanium has a lot functionality over webkit. So upgrading would not be an easy task.
My solution to this problem in TideSDK in windows was to do the following on the font in question:
font-weight: 600;
Maybe not the best solution for your application, (maybe you don't want to add any space or weight to the font since it seems you may have a much larger table of data to display) , but acceptable by my client.
Right now, we are trying to achieve consistent formatting of textarea elements, across Safari/Chrome/Firefox/IE on Mac and Windows. I believe this may be a rabbit hole, since any combination thereof could produce formatting in a slightly different way -- maybe one combination adds a bit of padding to a div here differently than the others, another one breaks multi-line text there differently than the others, and so on.
Instead of using textarea (or div) elements, can we achieve pixel-perfect positioning using HTML5's canvas? Or using the Raphael JavaScript library? Or maybe some other JS library?
Mainly, by pixel-perfect, what I mean is any arbitrary text should get rendered in the exact same way (especially with respect to line breaks and padding) in any of the above-mentioned browsers.
(I'd prefer to avoid Flash-based solutions for the moment, unless that is the only solution...)
Send the text to the server, have the server render an image, display the image. Voilà.
I would say this is nearly impossible.
I would also say that there is no reason to have pixel perfect across all browsers because the overwhelming majority of visitors only view your site with one browser. And those who do visit your site in more than one browser (say at work and at home) are unlikely to notice elements that are off a few pixels or have slightly different border colors.
What we should be concerned about is that the content looks good in each browser.
That said, here's a great list of textarea tricks: http://css-tricks.com/6841-textarea-tricks/
One main reason that PDF exists is that browsers are not about pixel-identical layout but PDF is. Among other things, not even typefaces are guaranteed to be the same from one OS/browser to the next.
Even, if you don't let the browser position anything and you do all your own pixel level positioning, you still won't necessarily have the same fonts to work with. If you let the browser position anything, then you can have variations.
Would one solution be to begin your css with a clean slate? Give everything a known default?
For example, I start my css files like this so I always know what to expect:
*{
margin:0;
padding:0;
}
Is that what you're looking for? Similarly, you could change '*' to 'textarea'.
I'm not sure if it is possible, however one thing you may want to look into is using the web developer toolbar for firefox or the web developer add-on for chrome. There is an option to disable browser default styles. Check this and then style everything. The borders, border type, all margins, paddings, background colors, etc. Then reenable browser default styles and make sure it looks the same. If not, wash, rinse and repeat.
Also, if fonts play a part, you will have to embed them into the page since some operating systems may not have a particular font installed.
I'm writing a web app. It's only ever going to be used with IE8, so I'm not concerned with the behavior of any other browsers here.
So: I know how to custom-style a button using CSS properties e.g. background-color, border, and so on. However, when you apply styles that way, the resulting button looks like a blocky table cell, nothing like the nice, glassy-looking button that IE8 renders by default.
Is there some way to add a tint to the nice glass-looking button? I.e., it looks just like it normally does, but with a red outline instead of blue, and a red highlight on mouse-over?
Or is this something I'm going to have to do by hand with images? Again, IE8-specific methods are perfectly acceptable.
Thanks!
-dan
There isn't really a filter that will get you as close to the default in IE, though you can get pretty close using the button tag and standard css. It will not look the same in all versions of IE though.
Here's the filter reference though if you want to try other things.
Regardless of browser, one of the quickest, easiest, most widely tested methods for styling buttons via markup is Jquery UI's button It's a matter of adding a few tags to the class element, and you've got a button based on an link, button, or input field. For styling, you can handle styling via CSS, or via the very well done ThemeRoller option, where you can control everything from text size to background type via a simple gui interface--and you can change on the back end or even the user end on the blink of an eye, even via drop down.
One caveat, since IE is non-standards compliant, rounded buttons fail gracefully to square--with proper styling.
I realize that you have determined that you can use a proprietary solution for IE, and in your case it might be just fine over the long term. But in my experience, that's a really dangerous path to follow. What if the actual long term is longer than your anticipated "long term?" You're specifying that it's acceptable to be proprietary to a browser that's well behind the accepted standards, is already a version behind, and uses unsupported (by universal standards) solutions to solve problems. Conceivably, that version is going to get tougher and tougher to find, and if Microsoft holds true to their patterns, once you install IE9 it will effectively render your computer difficult of downgrading. And, I can't emphasize enough that IE's market share is dropping like a rock, which is scary considering basically 95% of the machines out there have it pre-installed. All it's going to take is one overzealous IT director with "security in mind" to render your programming efforts moot. Sorry for the rant, but IE proprietary code has bit me hard more than a few times...
I'd have to double-check, but you should be able to use a combination of a background color and use a transparent PNG or GIF as the "background image" to add the highlights.
All things being equal, I've rather embraced the flat, square button - finding ways to make it work well with the design - but then again I've always been a straight line, square edge kind of guy. :)
As others have mentioned, you do want to be mindful (within reason) of what you may have to handle. It's quite possible that before the next re-write you're going to have to deal with IE9 - writing code that works well in IE8 and IE9 would be the most prudent approach.
Have a look at http://www.webdesignerwall.com/demo/css-buttons.html and also http://css3pie.com/.
Combining those you can get nice looking buttons in IE as well..
Is it good to use bullet image inplace of browser default bullets for UL to get cross browser result?
Unless it's a very stylized/graphics heavy site, I'd say no. Users don't expect your webpage to have any particular look/feel...but they do expect it to be familiar and intuitive. If you have a completely different theme and a completely custom look, then yes, go for it. If you don't...let the user see what they're used to seeing.
Example: Checkboxes look different on different browsers, but 99% of the time, the same to the user that's always using that browser on their computer. Now using images/javascript to change what those checkboxes look like is slightly jarring, because they're suddenly unfamiliar.
If you're totally immersed in a different environment anyway (example: lots of graphics, black background, etc) then make your styles on anything fit that...for the standard-ish looking webpage that's very light on styles, I'd let the browser defaults prevail.
Well, if you are using list-style-image:url(), then you pretty much enter a world of pain, since different browsers will position the image differently. If, however, you're using background images + padding, then you can indeed get consistent cross-browser results at almost no cost.