EDIT:
On the above site whenever I zoom out in firefox the main content div is displaced to the right. This issue only exists in firefox, not in internet explorer, opera or chrome. Could someone help me fix this?
EDIT 2:
I do NOT want the div to displace in firefox. Sorry about the first question, I was in a hurry but should be clear now :)
If you give float:left; to the .wrapper element and the ul.menu everything will be ok :)
The issue you are having is not with #content but rather with the class wrapper. If you remove the rule overflow:hidden from the class, the issue will go away. It looks like the wrapper class is also associated with your button bar.
I would suggest removing wrapper from the div which holds all of the page contents and instead use a rule which only has width="100%".
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'm struggling to get the CSS right for IE7 and I hope someone here can give me a hand before I throw my pc out the window :p
I made a fiddle that shows what I mean:
http://jsfiddle.net/ZqkEE/
The div with the word "joepie" hides behind the image in IE7.
How do I fix this?
Thanks a lot in advance!
It seems that the text is not shown at all in IE7. If you remove the img-tag, you'll see that the text is not under the image, it's actually not there at all.. Not quite sure why it's not there but here's some suggestions: There's no specified left-attribute, that might be it? Or maybe IE7 doesn't like the bottom-attribute?
I'm no IE7 expert, but I hope I pointed you in the right direction! :-)
Couple things here. You have a height of 1 on intro and a line-height of 0 on the .wrp div. Also, the entire .intro div was being pushed off to the right. I added a left property and it moved back into place - jsfiddle.net/Rpjhc/2/
I have this small testcase: http://jsfiddle.net/sV8js/
You can see that in Chrome (tested on win7 11.0.696.68) the first 2 links right border is "cut off" and is not shown. FF and IE 7/8/9 seem to show it OK.
Browsershots: http://browsershots.org/http://top3skills.com/1.html
Also "buggy" on Safari (so it's webkit related?)
Anyone knows what's the problem with this approach or how to solve this?
(or if I should report a bug to chrome) Any workaround that doesn't affect other browsers?
Also, my testcase is different from Right border not displaying on google chrome but maybe it's the same bug?
Updated: I don't want to use inline-block as IE7 doesn't support it and I'm finding this bug because I'm removing the inline-block I previously had there :) Also this is dynamic so it's not easy to add after each link because some links can break to a new line, others don't... so I'm trying first to get the "right way" and then resort to more "tricky" ways.
You have set the containing DIV at a fixed width of 250px. This is cutting off the edges. Also, you should add display:inline-block; to your CSS link class. This will make your link a block element while keeping it inline. It will also apply the padding you have asigned properly.
See updated link here http://jsfiddle.net/sV8js/12/
Dan
Try giving those links a display: inline-block or display: block property, as links are inline elements.
you need to add display: block to .referencesSkills
Not sure whats going on here or where I've gone wrong but FF3.6 doesn't render the green button in the link below correctly compared to Chrome 9. IE8, Opera 11 or Safari 5.
All others put the button in the bottom right corner of the parent, 12px out. FF3.6 puts it 24px up and against the right side:
http://jsfiddle.net/sxkWZ/2/
Anyone aware of this issue or have I missed something obvious?
Update: Confirmed the issue in FF4 Beta 11. Thinking about filing with Mozilla.
Thanks,
Denis
After fiddling some more, it appears as though the bug is only applying to the fieldset when teh container element has padding set to it. I removed the padding (and instead added a margin to the p element) which solved the issue of the button being pushed up:
Take a look here: http://jsfiddle.net/sxkWZ/11/
If you just want the button to appear bottom right the alternative is to float it: jsfiddle.net/sxkWZ/10
Regards,
Simon
Definitely looks like a Gecko bug as changing fieldset to div makes it render properly:
http://jsfiddle.net/sxkWZ/6/
You can probably just use an enclosing element like a div and switch the position:relative to it to workaround this issue.
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)