According to Browserlab, this page displays fine in everything but IE8 and under. IE6 I can certainly live without, but I'd really like to at least fix the issue in IE8.
See screen shot below illustrating the problem: It seems to me that the first column under the logo has a left-margin of 10px or so that is causing the third column to drop below.
Is this a common bug? Or do I need to post more info on the issue?
Any tips would be greatly appreciated!
This might work :
Take div class four columns and move it just after div id content.
Then apply this style to content :
width:960px;
Then this style to four columns :
float:right;
Let me know if this works.
Related
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.
The website: http://epic.lexcorp.ca/capabilities
If you open it in Firefox and then in Internet Explorer/Chrome you should see what I mean, and this is in regards to the two areas below the content (View Our Projects and News)
I've been trying to figure this out for about 40 minutes now and I'm at a loss. Help is greatly appreciated.
It's only a CSS problem.
Add this to your CSS file:
.bottomBox .region {
overflow:hidden;
}
With help from BumbleB2na I noticed there was a at the front of one of the tags.
That helped, but didn't fix it completely. I then noticed that there was margin-top areas that were pushing down the boxes entirely, so I adjusted the values to the div wrapping container and changed them to padding.
Seems to be seamless in all 3 browsers now.
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.
Please have a look at http://bestofyoutube.com. Anyone who knows what I am doing wrong here?
Seems like the IE (version 7+8) put the menu a lot further down then what Safari/Chrome/Firefox do. The little pic I have to the right when people log is also completely thrown out of the normal standard in Internet Explorer (The others worked fine).
Screen shot on IE:
Appreciate any help I can get. Thanks!
Interesting bug in IE. To be quickly fixed you need to add in your stylesheet.css this code:
body {
margin-top:0;
padding-top:8px;
}
In good to iterate over the options with top padding, removing it from the body.
I think IE tries to draw invisible borders for your menu table.
Try to disable borders for this table.
And don't forget about table cells padding/margin.
I am working on a small project, and am having two tiny problems with CSS.
I have played around with everything to no avail.
1) In IE6 the content and logo is not lining up correctly.
2) In Firefox, the tooltip box fixed at the bottom of the page (which degrades in IE6) although styled as width:100%; is not spanning the whole screen. There is a gap on the left hand side.
These problems can be seen by viewing http://gua.com/wd/ in the respective browsers.
If anyone could advise as to what has gone wrong, and why, it would be greatly appreciated.
Thanks
for firefox: Yyou can add left:0; for #bottom
for internet explorer: I see your menu to be wrong not the logo. To solve this just add margin:0 for #top-nav
You should ideally be using some sort of css reset stylesheet to overcome specific browser idiosyncrasies.
In your case appending a margin: 0px; to your body should do the trick (For Firefox). IE6, well, its usually best left to a IE6 specific conditional stylesheet.
"100%" means "100% of the parent box's client space". Not "100% of the entire viewport".
And IE6's CSS support is f*cked beyond sanity. If it doesn't work, use absolute positioning or whatever else it takes in a special stylesheet and include it with conditional comments.