I'm banging my head on this one.
I have a disturbing horizontal scrollbar that appears only when browsing my site in IE7:
http://www.regia.it
I have tried and tried to stop this from happening by using overflow:hidden on my divs but for some reason I just can't seem to find what is causing the problem.
Any help is greatly appreciated.
This does seem odd. I am assuming you don't mind if the page is not horizontally scrollable even on small screens, since you have tried to use:
body{overflow-x: hidden;}
In which case if you apply it to html rather than body it should do the trick:
html{overflow-x: hidden;}
I wouldn't really want to implement this long term, but if you are looking for a quick fix this should be ok as a temporary measure until you can work out what is going wrong. I would also put it in a conditional comment so as not to ruin the experience for the majority of people on modern browsers.
<!--[if IE 7]>
Link to alternate style sheet
OR
<style> /*CSS in here*/ </style>
<![endif]-->
EDIT : I have found the cause of the issue, so there is no need to use the above workaround. As I had suspected the issue was related to absolute and relative positioning.
You just need to remove position:relative from .grid_2 and .grid_12 and the scrollbar will disappear.
I came across this vexing issue too. I had a table in a div, and these were inside an outer div. When I removed the style to make the inner div width:100%, my 'IE7 only' scrollbar situation disappeared.
Hopefully that is somewhat helpful.
Related
I already tried out a lot of suggestions that were made in related threads on Stackoverflow. However it doesn't seem to have worked. Please check my site http://popundernetwork.com - the footer works correctly on Chrome, Firefox,etc. But on IE 8, the footer not only floats right in the middle, but also prevents people from entering details on the form input screen.
I have already tried the position:absolute; bottom:0; commands as well as clear:both on the footer div. This has still not fixed the issue on the IE 8 browser.
Any help is greatly appreciated.
It's issue is not fixed in any browser if you ask me. (no pun intended)
Your body is becoming shorter than page height when you make you footer absolute.
Remove the position and the padding entirely from your footer and it should solve everything.
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.
http://www.mapleboutique.com/_blog/maple_blog
can someone explain what's going on here? according to this link: http://austinmatzko.com/2007/07/25/internet-explorer-7-float-bug/ –I thought it made perfect sense. I had container elements with set heights causing the weird floating. But after spending an hour going through and essentially deleting any associated heights I still have the problem in IE7/windows.
You need to remove clear:right from .blog-post .post-body to fix the heading overlap with the image and remove zoom:1 from .post-body a to fix the text-wrap around the image.
The heading is also floated and cleared right but clear:right on the post-body seems to be causing IE to clear all the floats, even the heading.
The zoom:1 seems to be clearing the image's intended float by giving the image layout.
As #Webars has already said, this layout is overly floaty and should be simplified and could be done without the need for zoom hacks. However in the meantime, the IE specific styles (zoom being one of them) could be added to a seperate stylesheet and included for IE only using Conditional comments.
EDIT: Solution found. The pink block had overflow:visible !important, which in Internet Explorer invalidated z-index. After removing it, the logo came to the top.
See: http://bit.ly/i7ER3e
See logo "**" (beside top menu) with Firefox/Chrome, it correctly appears above left-content block (the block with pink background).
In IE7/IE8 the logo, it becomes hidden behind the pink block.
I've been messing with this for 2 hours now. Tried a lot of stuff. Can't get it to appear right in IE7/IE8.
Any suggestions?
(Note: I'm working in a really restrictive framework where I cannot simply float the logo before the menu. I have to use position:absolute to place it.)
The problem is not z-index in your case
your body has some line height which is not sufficent...
line-height:180%
change this to 200 or so it works, but still that is not good approach
but just found the issue....
Try using:
z-index: -1;
for the elements that should be below the logo.
try setting position:relative; as well as the z-index.
The default position style is position:static;, and IE has bugs around the z-index handling when combined with static positioning; setting position:relative can solve some of them, without affecting too much else.
See this page for more info. (the link is for CSS3Pie, which is an IE hack to help it support some CSS3 features like border-radius, but the info on the z-index bug is general and likely covers your issue as well)
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.