I cannot figure out why, but on certain pages like:
http://www.serif.cz/folio.htm
the menu shifts just a bit to the left of where it appears on the rest of the site:
http://www.serif.cz/
I have compared the HTML and it looks exactly the same.
Any ideas?
Its the scroll bars. Firefox and Chrome do not display scroll bars unless the content actually needs to scroll. IE will display a disabled scroll bar if the content does not scroll.
You can add a disabled scroll bar to pages that do not have content long enough for a scroll by using the following CSS:
body{overflow-y:scroll;}
Or you can just kind of accept the fact that it's going to do it on those pages. It's just one of those things where it makes sense why it's happening, it's just annoying. :)
Related
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.
I am developing a website in asp.net; and on this page is the collapsable panel control installed from ajax. My question is, when i open the panel (in which there is a few labels) the scroll bar appears on the side of the page, and the page shifts. This looks unclean. I was wondering if there is a way to prevent the scrollbar from appearing.
Thanks in advance!
If you are talking about disabling the browser scroll bar you can add overflow-y: hidden to your html element in css.
Caution - this will disable scrolling on the website.
If you want to prevent from appearing and disappearing a scrollbar you can just enable it to be always there.
html {overflow-y:scroll}
It should help with the effect of moving site to the left or right depending on scrollbar appearance. Hope it helps.
I have some images in my div. I want to scroll that with a horizontal bar; I would like the scroll bar to be an image. Also how I can change the color and the shape of the default scroll bar?
I used to edit the safari, chrome scroll bars using webkit and there are many examples about that.
But For image scroll bars on all browsers you will need some javascript.
May be jquery scrollbar
It used to be (is?) possible to set colours of scrollbars in IE, Opera and Konqueror. However it didn't look good.
You may use JavaScript, however it is very bad idea.
You have to hide standard scrollbars somehow.
You have to implement mouse wheel, some keyboard actions: arrows, Page Up, Down...
There will be problems with mobile browsers.
There may be problems with zooming whole page or text without images.
There may be some problems with obscure browsers.
The final experience could be worse than with standard scrollbars.
You may look for some kind of JavaScript gallery too. With horizontal scrolling but without scroll bars.
http://louisehall.clanteam.com/ is the website in question.
I designed this homepage to be horizontal scrolling only, which works on certain size monitors. However obviously on small browser windows the vertical scroll bar appears meaning the layout is ruined when the user scrolls down i.e. the 'Louise Hall' image and the navigation bar appear over the images.
I have done some research, however the answers I have found haven't really helped. It may be my amateur CSS knowledge but you catch my drift.
If you look at this website for example: http://www.banksy.co.uk/outdoors/outusa/horizontal_1.htm
The navigation area is fixed no matter what size the browser window.
Is there anyway I can fix the 'Louise Hall' and navigation bar horizontally (as it is now) but then make it scroll vertically.
Thanks
Josh
That fixed is achieved using position: fixed.
However, in the example you linked to, they are using frames. I wouldn't recommend using frames.
I am working on this philippedecor.com site and I am having a difficulty in figuring out this css issue.
When I on mouse over on "Main categories" that appears on the right side, it shows a drop down with links in it.
Two things happens,
1) in IE(7) - the drop down hides behind another div
2) in both ie and ff, it pushes other div below that to go down and on mouse out, it looks fine.
I am not sure which css property can fix this.
please help me out
Next time, please make your URL clickable: http://philippedecor.com/
In Firefox, I also see a tiny bit of the background showing through the menu, as you can see. Mousing over this thing triggers a mouseout event, closing the menu. In IE 7, I don't see the push-down effect, only the hiding of the menu under the Flash panel and everything below it.
To prevent the menu pushing down other elements on your page, you should use position: absolute on #downmenu and probably incorporate it into the div containing "Main Categories" to position it in the right place. Use an appropiate z-index will likely prevent the drop down menu from popping under another div in IE (untested, as I don't have a debugging tool for IE at the university where I'm typing this message now).
Furthermore, I think you shouldn't use two menus containing exactly the same content, that can be confusing to visitors of your site (actually, I didn't read your post well enough and moused over the left instance). Also, you shouldn't put text in images without providing alternate texts, screen readers and the like can't "see" it this way (preferably use a suitable image replacement technique). And all those s in the lis are totally unnecessary and not according to rules for semantic HTML; just use padding on them or something. By the way, you should make the rounded cursors of 'Main categories' transparent (now two little white corners are shown). Just my $ 0.02...