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.
Related
I am making a website, where when i preview it in safari. It turns out exactly as i want it to be. But when i test it out with firefox.
In my page i have a element that is aligned on the page using
Padding-left and Margin-top. Which works perfectly when i preview it in safari. But when i open the file in firefox. The element's Margin-top increases by a few pixels.
How do i code my css file so that i can have the same page for different browsers. I have tried looking on the web for a solution, but none of them so far has helped with the problem.
Reply's will be much appreciated.
As jsteinmann said, check use http://validator.w3.org/ to ensure your page validates. This will take some time to figure out if you are new, but it is an essential step.
If you are having an issue with FireFox, you are probably going to die when you look in IE. Bookmark this link! http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
You have a lot to learn and google will help: https://www.google.com.au/search?q=introduction+to+cross+browser+testing&oq=introduction+to+cross+browser+testing&aqs=chrome.0.57.5763&sugexp=chrome,mod=12&sourceid=chrome&ie=UTF-8
In future, use stackoverflow for specific questions with code examples. You will find that you get specific answers quite quickly.
Also, don't forget to tick the answer that you find most useful, and also vote some up a level. That's why people spend the time answering your questions.
Enjoy the long road ahead :)
Specify all four margin and all four padding values explicitly. That will eliminate the diffferences in the browsers' built-in default stylesheets.
There can be several reasons why your finding your layouts aren't cross-browser compatible, so it would take a considerable amount of info of the markup and css to make any kind of determination on how to help you code a 100% W3C valid web page.
I would suggest using a css framework like blueprint or 960 for your layouts, so you have less issues in this way. It's a good way to start and maintain projects, and learn how to create layouts if you choose not to use a framework.
Also, I would suggest testing all of your projects in chrome and firefox first, then safari, simply because of the amount of users that use those two browsers compared to safari. I would also say, if it looks good in chrome, it will probably look good in safari and firefox, but it's always worth testing.
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.
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 have been experimenting with the Majestic template at freecsstemplates.org. So far so good; I really like the look (or to be more specific, my boss really likes the look).
However, I am noticing that the CSS that drives this template seems very brittle; small changes can cause really radical breakage. In particular, if I reduce the size of the header in the CSS (to eliminate some of the empty space at the top of the page), both of the outside columns suddenly disappear.
With small websites, sometimes I cry uncle and just use tables for layout. I realize this is heretical; should I be leaving the design to the professional designers? Or maybe I'm going about this the wrong way, and someone can set me straight.
I honestly think this layout has been made pretty badly. The width of the elements seems to change where they appear on the page, and they're all need to be pixel perfect for everything to be centred.
For some bizarre reason the whole page has been placed inside the div element marked 'header'... This doesn't make much semantic sense for a start.
However, it seems if you decrease the width of every element which has one, then everything does get smaller, and nothing should disappear.
I would recommend looking at some other more sensible layouts, since I don't think this is a very good way of attaining that style -- as you've said, it's brittle. Have you tried using the extension Firebug for firefox? It allows you to make on-the-fly changes to the css, and see how it affects the style, which will help you learn fast.
CSS is delicate, but still easier to deal with than a site full of table layouts. I found Dave Shea's book CSS ZenGarden to be a great help in learning CSS from a designers perspective.
Often in layered templates there are a few places where changes to CSS can be made, and it can be really confusing to follow which selectors are controlling the element you wish to manage. There are many tools out there that can help, but some that have been useful to me are:
Google Chrome and its Inspect Element option
Selector Gadget - a bookmarklet that will help you visually determine the selectors that affect an element
Firefox's Web Developer plug in
One other tip is to learn about the !important modifier - it can come in handy to force a particular property setting when there are multiple CSS selectors affecting the same element.
CSS in my experience is easy to understand in concept, but takes a long time to master.
Brittle CSS can be very brittle, but good CSS can be wonderfully flexible.
As it stands CSS can either make layouts wonderfully simple and flexible or it can make the simplest of tasks an absolute nightmare.
Purists will tell you to use CSS no matter what, a pragmatist will tell you to use what works. If using a table or non-CSS solution makes something infinitely easier to do, then use it!
Personally I try to use pure CSS as much as possible, but there have been times when I want to do nothing but swear when something glorious in FireFox looks awful in IE. This is where the hacks come in. It is these hacks and work arounds that tend to make CSS brittle in the first place.
Half the problems with CSS would go away if all the browsers did precisely what the CSS spec says they should do. Alas, this is yet to happen so we have to live with either using tables, or on occassion, brittle CSS.
The best solution is to make the design as simple as possible. If you find you have a hundred divs and lots of CSS trickery to do something straight-forward, stop. Re-think how you are approaching it and try again.
At the end of the day your website users don't really give a monkeys what your website looks like as long as they can get at the information they want with minimum effort. Successfully manage that and they will not care how photorealistic that shiny nav bar is, or how well the borders line up etc.
That's my 18pence at any rate :)
I agree most css template is hard to read, and different people may have a very different approach to the same layout strategy. Since there are too many hacks/tricks/techniques in css it is really fragile when you try to modify those existing one since almost all cases, the styles are very dependent to each other.
Css doesn't break as long as you don't break it ;) It's a language. Just like a regular one, if you don't use proper grammar people won't understand what your saying.
If a layout doesn't work or suddenly your page looks rubbish, I'll guarantee you it's your fault. Css isn't brittle, the code you wrote with it might be.
So start by learning the basics and don't just dive into some file you found online which might (in your case, does) contain very bad code.
If you end up wanting to use tables for everything may I suggest you start looking at some grid systems like http://960.gs/ and ease your pain.
Gideon
I am looking for a way to condense relatively small areas of text on a page in an effort to mimic a graphic button that was done with a non-standard font. Ideally, just the letters would get squished or made thinner, leaving the space between words more or less the same. I know there are some CSS attributes that do things like this, but they are more focused on spacing between the letters and not so much on the widths of the letters themselves. These CSS methods are also not very cross-browser friendly. The majority of the user base is using IE6, so that puts a large restriction on CSS-based methods out of the blocks.
So, is there any way to control the character width/spacing that is cross-browser friendly? I know jQuery works across browsers quite well, so could this perhaps be done with jQuery by manipulating the location of the letters and possibly their widths? These are small bits of text, 5 words at a time, or so, so speed is something that can be dealt with later.
EDIT: Ok, so, the CSS letter-spacing property, as well as the word-spacing property will allow me to control the space between letters/words. However, this makes things look squished. If this truly is the only option, then I'll have to make it work, but what I am really looking for is a way to squish the letters themselves, to make the characters thinner.
maybe
letter-spacing:-1px
will help
Short answer: I don't think there is a working cross-browser example that meets your requirements.
The CSS3 specification includes a font-stretch property, but sadly enough, CSS3 is barely (if at all) supported at this time.
Some possible ways that could emulate this behaviour that I can think of:
Use a flash-based approach like sIFR
Use a javascript / canvas based approach like Typeface.js. There's a font-stretch example included on the example page
Use condensed fonts (icky-approach, since this means you are relying on the font being available for the client), like Arial Narrow.
Use a server-side script that generates an image from text parameters
In short, there is no simple and elegant solution to this problem because text and image manipulation is generally something you'd do in a graphics editor.
If this is not possible, I'd definately recommend looking into Typeface and sIFR.
I think this sort of thing should probably be done in a graphics editor and output to a lightweight image (png or similar). I think this is the only simple and reliable way to control the visual output of the text to this extent.
Make sure you repeat the text in the alt attribute on the img tag for accessibility.
This approach has issues with localization - in that you need a version for each locale - but this is still doable.
There are also going to be issues if you wanted to keep this text in-line with some other text - e.g. in the middle of a paragraph. But if that's what is being done, it sounds like "squished up text" may not really be a good UI.
So, you want to squish it without squishing it?
Try adjusting the font-size then. Or some combination of letter-spacing, word-spacing and font-size. (All of which work just fine in IE6).
.nav {font-size: 80%;
letter-spacing: -.05em;
word-spacing: .05em; }
It sounds like a nightmare.
You can fudge the whole thing by putting each word if a floated DIV and fiddling with the width each DIV.
Are you sure you're specifying your doctypes properly? Perhaps your browsers are interpreting your CSS in quirks mode, resulting in the unpredictable behavior.
I don't think jQuery will be of much help to you if letter-spacing isn't working properly. You can't alter the positions of individual letters unless every letter is inside its own element, such as a span, which just seems messy.
EDIT: If you want to shrink the horizontal width of the characters themselves, that would theoretically be done with font-stretch: narrower, for example. But it seems the major browser don't support it properly or at all. Apparently it was in CSS2, but then dropped in CSS2.1 and is now planned for CSS3.
I'd have to question the wisdom of even trying to do this in the first place. Just replace the darn graphic with something readable; or something you can duplicate with your text.
What you want to do is change the text's font. I think your best bet is looking through a bunch of different fonts that come preinstalled for your userbase and trying for the best font+size combo.
You may be able to track down the original font with WhatTheFont
Approaching ten years later, font-stretch is still virtually unsupported. But
transform:scaleX(); will do. Here.