I'm having problems trouble shooting the difference in display between IE8 (works fine) and IE9 for the site:
http://www.exploreolympics.com/
Seems this problem just developed, both browsers had displayed the same two days ago.
In IE9 the right 2/3s (below the header) doesn't seem to fit and is dropped down below the left 1/3 panel.
It seem that there should be sufficient room as I review the CSS... but I must be missing something.
CSS file is here:
http://www.exploreolympics.com/style...in_styles3.css
Best wishes
You have float left on your div with id "l_third" shouldn't this be float:right for this?
I have tried this on ie9 but it doesnt fix the issue. In the situation i would normally have the right content before the left content in your html. Try swapping the div#l_third with div#r_2thirds. Also add float:right to div#r_2thirds.
Ive copied your html to give you an idea of what i mean - http://jsfiddle.net/pjsSn/
This link will be very hard to read. I would suggest using it in notepad++ to see how i have swapped the 2 sections over
Related
I usually have no problems finding a solution to line up divs horizontally but however this only happens in google chrome.
This page here http://webdesignbird.co.uk/free-quote/ that iv'e just started working on has the issue, the 3 pricing plans should be side-by-side with no margin or white space between them.
If you view the page on firefox it shows the way I intended, but any changes I try to make for chrome then effects firefox.
I could target chrome specifically (after iv'e researched how to) but I would rather find out why this isn't aligning as it does in firefox. Perhaps i'm missing some code. I have only been building websites a year so my code skills are very average.
I cannot find the answer to my problem at the moment and would really appreciate a nudge in the right direction.
Don't know, why it works on firefox, but it seems that you just forgot the float:left on the tier-2-container.
Edit: I got the containers confused.
Okay, it's late at night and I can NOT figure this one out. I have 11 thumbnail images on a page HERE which are all hard coded (don't ask) and the code is IDENTICAL with exception to the filenames for the images and the query string attached to each of the link URLs.
The first two thumbnails (top left and top right) do not behave as links in Firefox, Safari, Chrome or Opera, but they DO in IE9 when hovered over (though in FF Firebug shows the link code is there) but all of the rest do. This has to be some inane jibberish I am too frazzled to see. Yet I reviewed the code over and over and nothing looks amiss.
What's worse, if I copy the code for the first two links (upper left and upper right thumbnails) and paste the code in below the first two entries, the thumbnails show up AND the links work!
Whatda...?
Any help will be sincerely appreciated!
Your div #mainText is large enough to go OVER the first two thumbnails. Different browsers either treat this differently or it has something to do with different takes on z-indexing or something, but decreasing the heigth of that div, or removing the height attribute (so its just as high as needed) will fix it...
On my home page in ie for some reason it makes a line about 3px high right about the content and right below the bread crumb bar. example.
Second problem, is that it also makes a box on this page
example
On the second example it messes with the user photo moves it into a box that should not be there. Along with the follow forum button. Which should be right below in the box as well. To see how it should look check those pages in any browser but ie. I really could use a fix for this. If its a css thing i have a ie specific css file i can put code in i just cant figure out what i need to put in there.
Also can someone check it out in ie 8 because i don't have it anymore and if there is a different fix maby you could help with that as well.
Looks like you have something going on that's changing your HTML or your DOM based on the browser. Likely you either have some client or server side code that manipulating things in a browser-variant way.
For example, in IE you have two DIVs with ID "boardindex", but I only see one in Chrome. Use F12 and/or Firebug to further investigate the differences. Isolate the code that's causing the differences using a binary search method if necessary.
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'll start by saying this is not my work, but I am trying to figure out how to fix it nonetheless... Here is the page in question:
http://www.getredwood.com/pro/
The three content areas at the bottom are the part in question. It looks fine when I look at it in Firefox or Chrome, but in IE 9, everything collapses left to right and the boxes actually overlap each other a bit. The CSS that's in there now looks a bit of a mess and I'm not sure where to begin. Would be most grateful for any ideas. Thanks!
I'm not sure whether I need to post the CSS code here or not...it should be visible through "Inspect Element" in FF, but if anyone can't see it, please let me know...
This lies within the compatibly that browsers have, what you will need to do is use javascript to determine which browser is in use then create a custom style for each, thus allowing you to make it work on any and all browsers
Here are some links that should help you out
http://www.quirksmode.org/js/detect.html
http://www.w3schools.com/js/js_browser.asp
Best of luck to you
it is very bad CSS and HTML coding...
try to reduce width of each 3 divs, should be solve your problem.