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).
Related
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?
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;
}
I've been designing an HTML e-mail template, and have a few bugs that I haven't been able to solve. Here's my page:
When I view the page in IE, the right most column has a really large right margin that I can't seem to get rid of. I have tried setting margin-right: 0px.
When viewed in Chrome, the FB badge doesn't stay in the bottom right fully. Rather, it slightly floats above. CSS floats are not an option in HTML emails.
Any ideas? I'd greatly appreciate any help.
Some notes: yes - nested tables. For those unaware, in order to ensure the html/css formatting isn't stripped out, tables are a necessity for HTML emails. I originally coded this with pure CSS, but to no avail (doesnt render across major clients).
Regarding your problem with IE, your web-page does not have a DOCTYPE. As a result, quirks mode is activated. In quirks mode, the page is rendered differently. To disable quirks mode, add a DOCTYPE at the top of your web-page:
<!doctype html>
you've set your td width to 100px..
make a new column and set the td to valign="bottom" and align="right"
I'm having an odd problem with some floated divs on this page that I'm working on. There are 3 of them across the page, with 1em margins between. In Chrome they line up perfectly, but in IE and FF, the right hand one drops a little - but not all the way below. I thought this might be best described with a picture, please see below:
I can't work out which bit of the CSS is causing this - I've been through the new FF code inspector and highlighted all block level objects with the webdev toolbar but can't see anything that would cause such a drop.
I did wonder if it was something within the JS twitter feed causing it, but I've swapped round the Twitter and "Update" boxes and it's always the right-hand one. I've also tried removing additional elements from the page - everything between the menu and these three boxes.
I must admit, I'm at my wit's end! Can anyone spot something obvious I've missed? The CSS is fairly large, and I'm not sure which bit to show, so I haven't copied it in in, but will do if anyone desires. Otherwise everything can be viewed at http://www.woodexperts.com
Change width: 15.25em in div#main div.tricolumn to width: 15.24em
That should take care of the issue.
I understand that this is a hack, but if IE is the only browser causing problems, you might want to consider IE conditional comments that restrict certain styles only for IE:
http://msdn.microsoft.com/en-us/library/ie/ms537512(v=vs.85).aspx
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.