I recently noticed that my site is broken in Chrome despite displaying well in Firefox. Having studied the HTML and CSS at my page -
http://www.designlagoon.com/what-we-do/
There is a larger gap below the 4 blue titles in Chrome than in Firefox - which is breaking the frame of the containing box. This seems to be related to padding / margin of the table layout I'm using but I'm struggling to work out a fix.
If anyone can shed some light on what might be causing the problem I'd really appreciate it!
This is related to a question I posted yesterday: Firefox: wrong interpretation of box model?
Actually, it's Chrome that's behaving correctly: td with height 150px + padding 15px (x2) = 180px.
Firefox does a miscalculation when adding padding to td.
So your best shot would be to remove the padding on the cells, and add a margin to their contents instead.
Thanks for the advice. I tried removing padding from the table and td and applying it to the paragraph instead. This improved the problem to an extent but we were still left with different borders in firefox, IE and chrome.
In the end we decided to remove the table completely and use 4 floated 25% columns instead. I will avoid using tables for any site layout in future. Lesson learned!
Related
I've got a development site (http://www.tentenstudios.com/clients/swls/our-surgeon) that works well in FF, Chrome, and IE8+ but the right-corner image breaks in IE7 and I can't seem to figure out what's causing the problem. The right-corner image is in a left-floated container DIV but there is also an absolutely-positioned graphic on top of it, not sure if that's got something to do with it or not.
Thanks for any help anyone can provide!
Per request, here is a JSFiddle with (I think) the relevant code: http://jsfiddle.net/HyVcG/
Also, to see this work you can open the link with IE and hit F12 to bring up the development console, then click Browser Mode: IE9 and change it to IE7.
The widths and interior margin for .eightcol and .fourcol add up to more than 100%. Some browsers may round decimal values differently than others.
65.4546% + 3.63636% + 30.9091% = 100.00006%
Here's a jsfiddle demo where you can see that the right column breaks in IE6/7 but is fine in all other browsers.
It's possible that this CSS grid wasn't built to support IE6/7. If all else fails, you could edit or override some of the widths or margin values in the CSS grid. But the changes would have to be reapplied everytime the CSS grid is upgraded. Not sure if there's an easier solution.
Edit: For comparison purposes, here's a version of the jsfiddle demo with integer percents that add up to exactly 100%.
I am trying to get this registration form to look consistent across all of the major browsers, or at least Firefox and Chrome.
http://www.lukaspleva.com/MoneyThink/new_mentor_application.html
It looks GREAT in Chrome, especially as far as the spacing between all of the input fields is concerned (it's equal). In Firefox, though, the spacing/padding is kind of all over the place.
Any idea how to fix this issue?
You already have each input/label in td-s, so either give td-s widths (if the input is 100px wide, make its td 120px wide), either increase the table's cellspacing property. However, using tables for layout is not recommended. Use CSS floats and padding/margins instead.
if someone could help on the following would appreciate this as I spent the whole evening without result on this issue.
I have a site where I want to modify tags appearance after every article.
The problem is that firefox (version 14.0.1) provides smaller height for the text (total <a> height is 15px icnluding 1px bottom padding), while chrome and rest browsers give height 19px. So the difference is 4px. Because of this - the "tag hole" is displayed at different levels. A little bit lower than vertical middle for FF and upper than middle for rest browsers.
I made a picture to get the problem easier:
I have general css reset, so that different browsers behave similar. But it looks like not everything is included there.
Has anyone an idea what could cause this?
Add display: inline-block; to your .tags li a
This won't affect the well-behaving browsers, but will fix FF
Ok sensible answers and not "IE is crap"...
I've produced this site at www.letsrentuk.com and in IE it looks like this:
Now what I've done in the CSS is change the width on the left column, however nothing changed in IE.
Please help, thanks.
IE is crap, and that's what you get for using tables for layout!
..just kidding. Mostly.
The problem seems to be, in ie.css:
.main-right-only {
width: 740px;
}
Remove that, and it works.
All other browsers have width: 680px applied instead, and IE needs the same thing.
It looks like you are floating that left column and there's just not enough room for it so it gets pushed down. If it's the left column that is floated left, try putting the entire column code AFTER the right column code. If the right column is what is floated, try putting the right column code BEFORE the left column code. (I know, it's technically the same either way.)
There are articles about describing IE's method of rounding percentages compared to other browsers which is why IE may have this issue when others don't. And IE is crap, too.
Looks like a width issue. In IE I can see that the left main content is wider than in other browsers. Chrome computes it at 668px, with IE at 728px. This will push the main content down because it can't fit anymore. Either fix your widths or get a better CSS Reset to standardize your element properties.
I am currently developing a new website and have problems with IE7. First image is what it should look like. Second image is what IE7 renders (I use IETester to test older IE versions).
The first problem is with the white background which is applied with the following trick. There is a div that contains both left and right column with background-color: white; The left column has the same background as the page (and some padding-right) so that even if the right column' height is less that left's they appear to have equal height.
The second is with the list (ul) below the dummy text, which appears really messed up.
At first I thought that this would be easily solved with some "clear: both" here and there, but it didn't. I've tried lots of things but with no luck.
Any idea what I should do?
Tia,
Nikos.
Modern Browsers:
IE7:
Ok, I solved the problems mentioned, after I read some articles about hasLayout. By applying specific width or zoom: 1 (there are other ways too in the previous link) to certain divs that didn't wrap or clear properly, everything seems ok now.