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.
Related
So this is my first time trying to use a responsive framework...also fairly new to building responsive sites in general - but had a lot more luck with just building them from scratch and sizing each element...though Foundation seems like a much better solution if I could just get my head around it!
Work in progress is here: http://client.analog.la/360/
It's behaving 'alright' in my desktop browsers (resizing down to 400) except for a problem with the menu - the issue I'm having is trying to get the menu to drop down below the logo and be properly centered.
On actual mobile and tablet having way more issues...the menu is sitting above and the whole layout or to one side and not dropping down at all. On ipad the whole layout seems to be only about 95% page width with a random margin down the right hand side...on iPhone the whole layout only seems to be about 50% width...which just looks...awful. There's so much discrepancy between how the layout looks on devices vs. how it looks on desktop at the same resolution that I'm a bit baffled...Also, really not sure where I went wrong with the sizing to make it look so wrong on devices!
Any help would be massively appreciated!
Thanks,
Not sure if you're still looking for help on this, but there are a number of issues in your codebase, and it's hard to say which ones are causing the behavior you're trying to address. Your very first div uses the columns class, but it's not nested in a row. Elsewhere, you have rows immediately nested in other rows with no apparent benefit, more columns nested in other columns without an interposing row, and nested rows that aren't set to collapse. You're also using spacer.png in a few places, which almost reduced me to tears.
And your top level headers are in spans instead of h1. My only guess here is that you were attempting to sidestep Foundation's default styles? Use a class. You need those h1s for SEO, semantics, etc.
No insult intended, but you might do well to check out Treehouse and sharpen your coding skills - could save you a lot of time and frustration in future work.
I am having a real problem with a tables being rendered incorrectly in IE in an e-commerce store I'm setting up for a client. Here's the link:
http://jpgrv.zjbzq.servertrust.com/products-s/1819.htm
The tables are the areas the actually products are contained in. If you look in IE, you'll see that the height of the rows are too high. I've tried to apply CSS directly to the rows and to the columns (inline, external stylesheet and internal stylesheet).
I had a thought that maybe the images were too tall so I resized them and tried it, but to no avail.
I've done a Google search knowing that there are quite a few bugs in regards to tables and IE but none of the known issues that I've found have helped me find a solution.
BTW, as you look at the source code and inspect the site, it may look like a crazy mess of tables, etc. which is because this site is built within the Volusion framework so there's a lot of dynamically generated content.
If anybody has any suggestions or can point me in the right direction, I would greatly appreciate it.
The extra height is there because of a div "add_button" inside a div "container".
You can see it is this screenshot:
I am attempting to create a webpage formatted to fit the width of all screen
sizes (or resolutions).
In other words, I want to format the width of my page in such a way that anyone who views it will not have to use a horizontal scroll bar at the bottom of the screen.
So far, I have found no help on this topic.
Well, there are several approaches. One would be to use ems/percentages for your widths thus achieving a fluid design that adopts to your users screen resolution. The other is to have several css sheets for different widths and call them based upon a screen resolution check from a simple js code.
The first one is a bit harder, but yields good stable results. On the other hand, (as a designer) it kinda restricts your creativity a bit.
It seems to me like the latter is more widely used. Nowadays, 3 different stylesheets will suffice for most devices around the world. One around 900px will cover somewhat older screens, one around 1160px will handle the larger and more modern screens, and one for mobile devices(sorry, no idea on approximate width) should do the trick.
The way you're asking this question, not only will the width of the body have to be 100%, but the width of its the child elements will also have to be in percentages.
The only way to achieve a scalable web page is by avoiding fixed sizes. Of course that presents problems with text since it will attempt to wrap it on the following lines, so you must either specify a minimum width or combine it with a pre tag with overflow: hidden so that it won't affect your page layout at the expense of simply not being able to read the text.
Fortunately, you can easily test your page by simply shrinking your web browser to smaller resolutions and seeing how it pans out.
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.
I have a page using JQuery and I've implemented infinite scrolling on a div. There is a text area on the page. I've noticed that as more rows get added to a table in the scrollable div performance of the page gets worse. You can really tell when the page size is large and you try to type anything in the text area because there is a large lag between the time text is typed into the textarea and the time that you actually see the text appear. This only happens in IE8. I haven't tried other IE versions. It doesn't happen in Firefox. It is really fast in Firefox.
I've used a tool to check what IE was doing and it is spending most of the time doing generic rendering of the page for each key stroke even though nothing new is being added to the page.
Why is the page rendering so often and slowly in IE8 and is there a way to improve this?
I believe that the tables are the cause of your performance issues. I had similar problems when using js to dynamically add rows to a table containing form elements.
See this Microsoft Article for tips on how to improve performance, specifically when using tables.
Set the table-layout CSS attribute to fixed on the table.
Explicitly define col objects for each column.
Set the WIDTH attribute on each col.
e.g.:
table
{
table-layout:fixed;
}
Avoid nesting tables within tables etc.
W3Schools highlights the advantages and disadvantages to using different table layout algorithms.
FireFox appears to handle the rendering of tables more efficiently than IE but using these techniques appears to help most browsers.
Hope this helps!
A similar problem can occur with lag on text areas in IE8 for very large pages. It does seem to be a problem with IE8 rendering the page on every key press.
One solution is to use an iframe with contentEditable set to true instead of a textarea. This works without any noticeable lag at all on the same page. I suspect this is because IE8 is only rendering the contents of the iframe on each keypress and not the parent document. It may also work with a textarea inside an iframe but I haven't tried this.