The page in question is here: http://www.allweatherwood.com/test-page/
If you look at it in Internet Explorer or Firefox, you should find that it looks perfectly fine. But in Chrome, for some reason, it is a completely different animal. What in the world is going on? It looks like the navigation area is getting bumped down slightly, and that is causing the strange issue with the main content area being moved to the right side of the page? And why is only a small sliver of that area being shown? I am positively stumped. Have tried looking at the code and I just can't figure out where the issue is.
CSS can be found here: http://www.allweatherwood.com/wp-content/themes/allweatherwood/style.css
Any help on this is MUCH appreciated!
If you set width: 960px; or even width: inherit to your content-wrapper div it looks alright. For whatever reason, webkit isn't calculating the width of that div they way it's expected when it's overflow is set to hidden.
Perhaps someone knows exactly why?
The elements in the main menu are all float:left, and so the content floated on to these elements. Insert
<div style="clear: both"></div>
after the header to stop further elements from floating.
By the way, if you declare your HTML as XHTML 1.0, please serve valid XHTML 1.0.
Related
I know this has been asked many times, and I have been searching for the answer in a lot of places but I can't seem to fix my code. Thank you for reading this because I'm going crazy here! First I had a different z-index problem with safari, than another with explorer, but now the z-index problem I'm having with mozila I can't fix in any way. I code in chrome, where it seems to work perfectly (for me it seems at least!)
I believe now it works more or less fine in most browsers but not on mozila. The idea of the page is to make (only with CSS because that's the only language supported by the website) a flipping book of several pages. I see some examples around of CSS only flipping cards (only one page), but not a book of more than one page. So I essentially overlap several "cards", in order to give this effect. You can see the demo from codepen here: pkrein/pen/qBOewem
Btw I do know this code is not as clean as it could be, but that's the way I figured to make a fuction like that works only with CSS, and I hope it will make sense for you.
Ok, so the matter is, the content inside the book pages is not "scrollable" on firefox. I guess this is indeed a z-index problem, because when I move any page outside the book, that is, from behind the rest of the content, it scrolls fine.
Let me know if I can give any more info that could help you understand my issue!
I figured a possible solution for this. It's not quite the solution for the problem itself but it's something that can make what I want to do work.
The problem was: (what I had to remove in order to make it work):
(1) The div #content-holder holding all the text inside the flap
(2) The div .preparation-text inside the .preparation (that's the text I want to scroll). That was a scrolling div (.preparation) inside a non-scrolling div (.preparation-text). I always add a scrolling div inside a non-scrolling div in order to hide the scrollbar, by adding a high padding-right to the inside div. I know I can use code to hide the scrollbar but it do not work in all browsers.
How I fixed:
(1) I just removed the #content-holedr divs, since it was not strictly necessary.
(2) I removed the .preparation-text and transformed .preparation into a scrolling div. Then I just covered the scrollbar with an image of the same size and colors as the background (a print of the layout).
Here is the link to the website I am talking about.
My problem is that when you navigate between the different pages in the main navigation, the main wrapper does not align on the different pages I have used. So if you are on the home page and you click on "WMH" in the main navigation bar the whole page jumps to the left by about 8px.
This creates a jitter between pages that my client really doesn't like. I used some padding-left and padding-right in css to align it correctly. Unfortunately when I get it pixel perfect in Firefox, it is wrong in Chrome and Safari. If I get it pixel perfect in chrome, it jitters in Firefox. This is very irritating. I don't want to have to write separate styles for Chrome, Firefox, IE, Safari unless it really is the only solution.
Thanks for your feedback.
Archie.
The browser scrollbar looks to be causing this. You can force a scrollbar to always appear which would solve the issue. Add this to your CSS:
html {overflow-y: scroll;}
You would also probably need to remove the padding that you tried to fix the problem with originally once the above style is in your CSS.
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.
A friend of mine ask me for help, but I'am not able to spot the mistake.
It's about:
http://www.nachhilfe-hh.de/nachhilfe-hamburg-west.php
The problem is that the phone image is getting cutted and the text is overlapping with Internet Explorer. Firefox works fine. I analysed the CSS with Firebug and found out that there was a missing "< /div >". That solved a problem, but not the ones with the image.
If I try to change width of the image: Not happens.
If I try to change position of the text: Either the appearance sucks in IE or Firefox.
And changing "< div >" to "< span >" is also causing no effect.
Does someone have an idea? Pls?
.telefoncontainer got a width:329px and the picture got one of 370px.
It works on other browser because .telefoncontainer p's width is good. But IE ignore children's width to resize the parent's one.
First off: There is still a </div> missing: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.nachhilfe-hh.de%2Fnachhilfe-hamburg-west.php
I'd suggest to avoid position: relative. It the reason for the overlapping, and even if you find the error in this case, it can lead to more overlapping in other places.
Simplify the HTML for the telefoncontainer to:
<div class="telefoncontainer">
<div id="stadt">Nachhilfe Hamburg West</div>
<div id="telefon">040 / 839 75 03</div>
</div>
(All the extra, ps, divs and center are unnecessary).
And then just adjust the padding of the container, until the content are positioned correctly.
Example: http://jsfiddle.net/sVhd2/
have you tried using a conditional comment to target IE specifically? this will allow you to have different styles for each browser, so a change in one shouldn't break the other. See: http://www.quirksmode.org/css/condcom.html for a good run-through of the capabilities and usage of these
I am using the CSSStickyFooter.com tutorial in my amateurishly imperfect attempt to get the perfect sticky footer working.
This is a specific question regarding the overflow:auto; style on the "main" div. With this in place, and when the window is narrowed by the user, I get a horizontal scrollbar halfway down my page. Can't this added scrollbar automatically appear at the bottom of the window like it's supposed to?
The reason you're getting the scrollbar in an odd place is because it is on the <div> rather than on the page. This is a result of using overflow:auto;.
overflow:auto; tells CSS that you want that particular <div> to get scrollbars (either horizontal or vertical) when it is too small to display all its content.
Therefore the direct answer to your question is No; you can't position the scrollbar elsewhere on the page, since it is attached to the <div>.
However, there may be ways around it.
Firstly, if you don't mind the content being clipped when the display is narrow, you can set the scrollbars such that it only gives you a horizontal one, and supresses the vertical one. You'd do that something like this:
overflow-y: scroll;
overflow-x: hidden;
Alternatively, there may be other ways to fix your code; CSSStickyFooter.com is quite well know, so if it works for others without this glitch, it can probably be made to work for you too. But we'd need to see a bit more of your code in order to help you further down that line.
I researched and tried many techniques for sticky footers and found this one to work great:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
I had problems with many other techniques I used before that one. If using CSSStickyFooter.com is not a strict requirement for your project, I recommend you use the technique described in the link I referred to.