So, before this starts a flame war, I realize that this is ridiculously bad form. However, I'm stuck within web software that can only output table layouts (I know, I know) and I want to override that behavior.
Basically, I have a single-row table with two cells, and I want to break the layout so that the second cell displays below the first one (instead of next to it). For modern browsers, there was an easy fix: set the <td> to display:inline-block. Problem solved. However, this (nor anything I've tried) does not work for IE8. IE8 stubbornly refuses to move that right cell below the left cell. And unfortunately, it seems I have to support IE8.
Anyone know of a way to make this terrible hack work?
Related
I noticed today that a website that I've completed months ago was not showing well on Firefox and IE8 (works fine in IE9). It's quite old now and I'm pretty sure that I tested browser compatibility at the time but I guess one does make mistakes.
Problem is I can't seem to understand the problem. Basically I have a left floated sidebar with a fixed position but it renders on the right (outside its container) on FF and IE8. I could always build the layout again from scratch (it uses Skeleton Grid system) but would still like to understand the problem.
Example page that's broken on the website.
Try to open it with various browsers and see for yourself. Also, if someone views it right on FF, I'm interested too.
Thanks a lot!
Edit: I'm not asking for a whole debugging. Just if someone knows of this issue.
Edit2: Validator links are irrelevant here. I checked it already and they're basically prefixes for css and CMS-related for html.
Edit3: I fixed it and prepared a kinda complete answer to post but as I'm a new user, I can't answer my own question in the next 7 hours... so here it is:
I just sorted the whole thing out with hints from your answers (thank
you!).
Basically, it's something to do with how browsers handle floats on
fixed elements. Imagine we're dealing with successive "float:left"
element, which is the case in most grid system (960gs, bootstrap,
etc.).
Here's how browser will handle these elements without fixed
positioning: http://jsfiddle.net/cPjdK/ And with float:right :
http://jsfiddle.net/cPjdK/1/
Now what if we have a very long third column and want to fix the first
(my example)? Well it basically disables the floats because fixed
elements are out of the flow. http://jsfiddle.net/cPjdK/9/
So you have to position them absolutely (or with margins in my case)
http://jsfiddle.net/cPjdK/6/
Now what about my website? The fixed elements were floated anymore and
the whole grid system kinda fell apart. Fixing this appeared to be a
long work. But, for some reason, replacing my "float:left" properties
on floated elements with "float:right" basically fixed it. Why did it
fix it? Why was it not working on FF and IE8 but appeared fine on IE9
and Chrome.
I have no idea.
But it looks fine now (after a few tweaks) and I've already been paid
so...
Problem solved but question unanswered, sorry...
You have a FIXED positioned element without giving it any coordinates.
Try giving it something like:
#side-right{
position:fixed;
top:0;
left:0;
}
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 have a problem where everything looks as expected in Chrome and Firefox but when I open my homepage in IE, I have two tables in particular that shift to the left quite a bit. One part of the table kind of stays in place but the rest of it moves...seems really odd to me.
How can I make these tables stay in the same place? Is there any attribute I can use to keep the tables in fixed places?
Cheers guys
looks like this in chrome
and this in IE
Maybe you can take a look at your code and see if the individual columns have width set to it.
One scenario where one part of table stay in place, the rest of it moves could be due to the part that stays has width style added to it, while the rest does not have any width style.
If the above scenario is the one that applies, you can easily set the individual column width by giving a style - style="width: XXX px;"
This is why you need an online account. Anything we say is all guesswork. The fact that IE is not acting like the other far more modern browsers is expected. Are you using a doctype? Without one, you are in quirks mode.
So I have a table that is contained within a div. The table is larger than the div. I don't want to resize the div by hand and all browsers except IE resize it to contain the whole table automatically. Without any overflow attribute changes, IE makes the last td overlap with the containing div's border. If I set overflow: auto;, IE adds scroll bars and the other browsers still just resize the containing div.
While we have a temporary fix in the aforementioned solution of using overflow: auto;, I don't think the client will be much happier with the scroll bars than they are with the element overlapping the border. Is there something I can do to make IE behave as the other browsers without manually resizing the containing div explicitly? Perhaps a display: property?
An image of the overlap can be seen at http://i.stack.imgur.com/lwWUk.png .
All help appreciated. Thanks very much everyone.
Just to be sure, you are using a DOCTYPE, aren't you? If not, IE will be going into quirks mode, which will trigger all kinds of odd layout incompatibilities. In fact, the other browsers will also go into quirks mode without a doctype, but it'll be quirky in different ways. With a doctype, they all go into standards mode, which should eliminate a large proportion of the weird layout glitches you may get.
If this does apply to you, then add the following line to the top of you HTML:
<!DOCTYPE html>
If that doesn't help, it's hard to diagnose exactly what is causing your problem without some code that replicates it. The graphic you supplied does help but isn't sufficient. A good way to share the problem is to re-create it with a snippet of code in JSFiddle, and share that (a lot of questions here are solved this way).
I have been given an existing table layout (for tabular data) with the task of making it as accessible as possible.
I added a caption tag to each table within the layout and I realized the caption width is not consistent across different browsers. After a bit of trial and error with CSS, I managed to get it right on all the browsers I need to support aside from Firefox (very last release) where the tables are larger than their own captions (with same width declared in the CSS)
I have googled a bit and this seems to be a known issue.
Any standard solution/suggestion for this?
Thanks in advance
Mirko
Keep in mind that captions don't HAVE to be visible and they still will be accesible, for instance if you hide them (display:none OR visibility:hidden), the width won't matter, as they won't be "seen" in the page, however a screen reader will still pick them up.