I am stuck at a website error and need help.
My website quantum-leap
Opens perfectly well in Mozilla Firefox, IE.
But it does not open well in Chrome.
Apparently the problem is with max-width tag in the table.
I have tried almost every solution mentioned, like, wrapping table in div, display=block,etc.
But nothing seems to work. It will be great if someone can help me out with this.
Try to remove css attribute white-space: no-wrap from <marque> on the moving text.
However, the consequences is the moving text will no longer become one line.
Just out of curiosity, have you try to use bootstrap or foundation.
Because, it has a lot to offer and I'm quite sure it will remove you from this kind of issue.
Related
So working on this website and faced with an issue of blank space on the right side of the page on mobile view. I've looked at everything and still cant seem to get rid of it.
I deleted each section of the site hoping to find the area where the issue was (overflowing form something I thought) but it was always there so I don't know what to do.
[link removed] is the site on the dev server.
Im really stumped by this so hope someone can help me. Thanks in advance
The issue is visible only on mobile and almost no way to debug that (well there is a way, kind of a hard way to debug that).
Any long story short ... i suppose one of the page elements is not behaving as it should in mobile view. With this i mean, an element, element X for example is wider then the width of your mobile screen so it creates that white screen issue.
What im gonna propose here is not a 100% solution, is more like a workaround but it will work if the issue is what i supposed:
Apply this css rule on the body tag:
body { overflow-x: hidden; }
http://validator.w3.org/nu/
Copy Paste your url or paste your code (at the "Check by" dropdown) and you'll see unclosed elements.
Close your elements, I think there is the solution
Thanks to everyone for your help. So I found the issue, As Arber suggested it was an element behaving badly. It was the contents of the carousel overflowing causing whitespace to appear, so I was able to rectify the problem. Thanks again! Tthe validation helps with a few other side issues too.
On my clients website in all versions of I.E. I can see a white big whitespace I have searched everything divs for their height, display type, float, and also line heights but nothing seems to work for me.
I came across this post which has smiliar or same issue. He managed to solve it. I have already used what he used but still didn't resolved yet.
I have also addded a doctype for IE no luck. I' am using I.E. 10 to view my site currently.
More information
I have notices that it only appears after the LIKE and TWEET.
Please help.
can you try removing vertical-align property in you css for HTML. this should solve you issue.
I was not actually was able to find the correct solution for my problem but I had made workout of solve this issue. The problem was on AddThis LIKE AND TWEET Feature. Something was causing problem from it. What I did I made them hide in all versions of I.E.
if it is a page with no vertical scroll then try setting the position of your footer as fixed, top:100% and margin-top:"minus the height of your footer", this will do the trick!
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 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 have a simple textarea which works in all browsers i.e. I can click inside it and type.
But I can't do this with IE6! I am however, able to press the tab key until I get to the textarea and then I can type in it. But I cannot click it.
What a strange quirk? Anyone know what the hell is going on?!
The source of my form can been found here.
Thanks all for any help
Update
Here is the CSS. Nothing jumps out at me.
Update 2
Annoying, I have narrowed down the problem to this line:
background-image:url(../../images/checkout_fuzzy.png);
I use this setup for all my sites pages, but this is the first page that has text areas in it so I guess that might be the reason why it doesn't like the above. What possible could I change the above to so that it doesn't overlay the textarea.
Solved
A position:relative on the containing div solved my IE6 problem! The problem was that the text area was not clickable due to something (div) covering the textareas as identified by Chris.
I don't know what's going on but I have some thoughts that may or may not be the problem. I would hazard a guess that it might be stylesheet related. Its possible in HTML to have something invisible in front of a form element that stops it receiving a click but I would think that wouldn't stop the input getting tabbed to.
To test if this is the case see if you get the same problem if you don't reference your stylesheet at all. If this allows you to click its something to do with your CSS/layout. If you still can't click then I'd probably try turning javascript off on your browser and seeing what difference that makes...
The HTML looks totally fine to me at a glance but I of course can't see what your CSS and/or javascript might be doing on the page. Best of luck. :)
Not 100% sure if this will fix it, but try setting the 'cols' attribute in the textarea.
Here's an example.
<textarea rows="2" cols="20"></textarea>
IE6 can be a bit fidgety if it doesn't get what it expects.
I don't have a copy of ie6 handy but I do know that ie6 can get real funky with absolute and relative positioning. try commenting out your absolutely and relatively positioned CSS styles and see if any of them are covering your form.