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.
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 am having an extremely odd issue creating a template for my zencart ecommerce website.
I find that many times I load the website my menu will break up and split over two lines as shown below.
The reason I find this behavior odd is that if I refresh the page it correctly displays.
Now I could understand how to fix this if it was consistently one way or the other but it seems to vary between the two with no obvious difference in the code... I am not sure if this is some sort of technical bug with chrome as I haven't been able to replicate it in other browsers however even if it is I really need a way of working around it. So I am curious as to whether anyone has had this issue before and if so how they got around it.
Link to live site: http://digitalmatrixonline.com.au/
Thanks Jason
If you add
white-space:nowrap;
To the div that contains the list it should prevent this, not sure why it's happening though.
Edit: here is a jsfiddle showing the technique http://jsfiddle.net/RM4S2/
Edit: No floats http://jsfiddle.net/BsGfu/2/
This is a really strange problem, and I was able to recreate the quirkiness in Chrome. While I don't know the direct cause of the issue, I think I found one way that works.
If you set the width of the second div within 'navEZpagesTop' that you are floating right that is wrapping,to 'width:485px;'. This seems to give the section room and does not wrap. If you want to leave more room for this expand without modifying the css you could set it to a much larger size, and float all the links inside of this to the right(instead of the left).
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'm having some CSS issues that seem to only occur in chrome. The site in question is liveinthelead.com, and it's still being worked on so if you notice any other strange problems feel free to let me know, I won't be offended. My main problem is this though:
In all of the browsers I've tested except for chrome the site looks fine. However, in chrome, on the main page, the middle post in the three-post divs are shifted down about 20px. But when I open up the developer interface, they shift back to where they're supposed to be! Maybe it's just a local problem, but here are some pictures of what I'm talking about. If you don't experience the same issue then maybe it's just something weird going on with my computer. Cheers.
When I initially load the page
After I open the developer console
One thing that I noticed is that in your div#three-post you set float:left to div.member1 but not to the remaining div.member2 or div.member3.
That's where I would start investigating the problem. Maybe you should set the remaining two divs to also float left. You may need to clear them afterwards too.
For the sake of convention — and so that you don't encounter this confusions again — use IDs for selecting specific elements, e.g., member1, member2, member3, and use classes for selecting multiple elements that should share the same attributes.
I'm unable to replicate on Chrome 15.
=\ could be a good thing! Try another computer!
On most of my web site (http://sellsbrothers.com), the right-hand column where I keep the search bar and the ads stays on the right-hand side as I intended. However, on some pages (http://www.sellsbrothers.com/Posts/Details/12670), it doesn't. How do I fix the ones that don't? Thanks!
Looks fine on my machine - generally though, I have this problem if the combined widths including padding and margins are too large. This can sometimes happen when the contents of a div forces it to be larger than you have specified, so you have to take this into account. Try experimenting with the padding/margin/width of each element.
I checked it with firefox 3.6.2 and was able to see both search box and the ads on both pages. You can check for yourself at Browsershots. It is very possible that on certain browser it might not behave it should.
Two Pages at Browsershot:
Result