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.
Related
In my first attempt at a responsive web design I have run into a curious problem. When I resize my browser down to 615px width or less, a horizontal scroll bar appears. I'm not sure what element is causing this. I tried putting a border around each element using
* {
border:1px solid #FFF;
}
to help me visualize where the edges of the elements were but I don't see any borders extending beyond the window boundaries.
Can someone take a look at my site and give me some insight? http://www.ritualbliss.ca
Thanks!
Edit: So I only get the scroll bar in Firefox. Chrome works fine and the desktop version of Safari but on my iPhone it scrolls horizontally.
Edit: the site is for a legitimate massage business but some may consider the picture NSFW
Devin,
Try using a tool like Firebug for Firefox, IE Developer Tools, or the Chrome Developer tools. I'm sure Safari and Opera have similar tools, as well. These things will give you the ability to highlight and view the various properties of every visible HTML element on the page, including Javascript and CSS information.
One other thing to think about is not using the * selector in your CSS. I am not sure why you would want to put a border around every single element on your page because to me, that would not look visually appealing. The border style attribute adds the thickness of the border to whichever dimensions it is applied to. So, in your case, every element in your page has 2px added to both its height and width, even the "html" element. This could be why you have the scroll bar but can't tell where the extra pixels are.
Also, do you have any CSS styles that set a width or min-width to 617 pixels? Or a combination of elements that share the same area and add up to 617 pixels? Maybe a table with columns that are not shrinkable?
There is a lot to look at and your URL looks like it's probably porno or something so I cannot go there at work and check it out...
Good Luck,
Matt
Edit
I fooled around with firebug for a few minutes and agree with Ruben that handling the overflow would be a good idea. Although I think the setting should be on the body instead of #content.
Try this:
body { overflow-x: hidden; }
Like Ruben's answer it is hiding overflow, but you can still get the vertical scrollbar if people REALLY narrow down their browser.
can you please warn us when it's nsfw :s
use this css:
#content { overflow: hidden }
not the best solution but you have to use firebug to find out what's sticking out
padding and borders increase the width of your element too
css3 box-sizing:border-box solved this one.
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!
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.
I am using floats when specifying dimensions of an element. Please see this jsfiddle jsfiddle.net/yMTGJ But both Chrome and Opera fail setting up the right widths and as a result there one pixel gap between the two divs, as you can see from see image i.stack.imgur.com/O9ZxW.png Can't Chrome and Opera handle the float properly? Why is there that one pixel gap?
this happens because you're specifying the width as 466.5px, wich is roundet up to 467px by other browsers (firefox for example). chrome tries to render this correctly, so there's a one pixel line that shows in red/yellow combined (wich confuses the browser and looks like but isn't a gap).
to avoid this, don't use half pixels to specify dimensions (what did you think the example should look like? chrome does exactly what i would expect, but i don't know your intention to use half pixels).
take a look at http://jsfiddle.net/Lupna/ where i have adjusted the width of the outer div to 932px and the inner ones to 466px - works perfectly on chrome.
EDIT:
another solution that would make all browsers display the same if you need a width of 933px would be to built in a gap on your own that should be there: http://jsfiddle.net/eS7Qd/
There's your problem: width: 466.5px; Decimal point is not universally supported. Some info and possible solution: http://www.latentmotion.com/browsers-trim-pixel-decimals/
As said above the problem is with the half pixel. Monitors work and pixels which is a block of light which cannot be halfed. Some browsers may try and be clever to fix this problem but you cannot obtain a consistent result across all browsers when doing this.
I would recommend you work to a 960px width and use something like http://www.960.gs
There is no way you can get this to work as it is not valid CSS.
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'