Here's a screenshot of the website I'm coding in 4 browsers: http://img801.imageshack.us/img801/2510/browsersj.jpg
There are CSS3 columns (in IE, there's a jQuery plugin simulating the CSS3 columns behaviour). As you can see, Opera and Firefox render the first column slightly lowered in relation to the other columns. This is the first paragraph's margin. Chrome ignores the first paragraph's margin and aligns everything correctly.
I have found that this CSS rule helps to eliminate the issue:
.column-3 > *:first-child { margin-top: 0; }
Still, I find this a bit hacky (what if I WANT the first element to retain the margin in some specific scenario?). Do you happen to know of any other solutions to this problem (preferably something clean and reliable, sort of like the box-sizing property taking care of different default box models in different browsers)?
[EDIT]
Alright, I have found that in Firefox, the issue was an overflow:hidden; set on the container div. Removing it solved the issue.
Still, Opera won't cooperate.
As per #Kyle's request, here's the code to reproduce the issue in Opera: http://jsfiddle.net/LVqtD/1/
not sure if it's still actual, but i did some reading and doctype might be the reason.
http://www.opera.com/docs/specs/presto28/doctypes/
just sayin'
Related
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.
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.
A lot of my floats are showing up on a separate line when viewing in IE7 ... in Ffox, chrome, IE8 etc they look fine.
The site in question is:
http://208.43.52.30
The places where the float is not working are the location for "events near me", "Show" for the show month buttons ..
I'll attach some screenshots
IE 8:
IE 7:
I personally can't see the difference (the closest thing I have to IE7 is compatibility view in IE8), but based on your screenshots it looks like the "Upcoming Events" font-size is much bigger in the IE7 screenshot.
Did you define font-size for your h1 tag? Different browsers sometimes handle the size and margins of header tags different, so if you put h1{font-size:14px;} in your stylesheet maybe it'll fix it.
The Upcoming Events problem is being causes by IE7 pushing the float:right to the next line instead of keeping it in line with the h1, despite no clear I can't figure out a way to get that to stop. An alternative I came up with was to float the h1 left instead and give the default text-alignment:right; This will cause the same layout, and IE7 is happy.
http://jsfiddle.net/znRxq/
Same solution for the show button.
IE7 might be making your input larger (from experience), you should set a different width for IE7.
First off, 'float' is pretty well supported, even on IE. When validating the HTML on you website, I am getting 43 errors (wont really be that many). Correct those and see if it fixes the problem. Earlier versions of IE (<= 7) are not as friendly to slightly invalid markup as IE8, chrome, firefox, etc...
Second, if you are really just trying to display block elements inline, 'display:inline-block' is the easiest way. Contrary to popular belief, this is supported on IE7 & 8. Here is the css for cross browser support:
.inline-element {
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
}
http://betawww.helpcurenow.org/media/press/
You'll see I have used spans within an anchor, with the span.hover-description set to display:none; by default, and on a:hover that span is set to display block and absolutely positioned to create a tool-tip effect when hovering over the name and email of the "For Immediate Release" contact names.
Everything looks as desired in Firefox, but Chrome reveals my unknown blunder somewhere.
Any help on what's the problem that is causing Chrome to not display like Firefox?
Incidentally, Explorer shows the tool tip as expected, although I'm getting a funky bottom margin issue below the names, and Safari has the same issue as Chrome (must be a webkit rendering setting that I need to accommodate for).
OK, I figured it out. Since I'm using a pretty complex nesting structure to accomplish the CSS tool-tips, I overlooked the fact that I had actually nested a p tag within a p, and of course that is a no-no.
Firefox is really friendly to a lot of validation errors, but Chrome and Safari seem to be much more strict.
In the end I changed the p's to span elements and all is well across browsers.