This is very strange and I'm pretty sure it's to do with some sort of width issue in CSS, but as you start to re-size the browser, it adds this strange gap to the right (Which is off screen).
Here is the page in question
I've tried looking through the CSS and I can't exactly find anything, I keep going over and over it but it's not sticking out to me.
The website is WordPress driven, so most of the CSS is in theme.css and lessframework.css. The Sidebar is a fixed width at 202px and the Content is next to it, which has different width sizes based on what screen size. I'm pretty sure it's something to do with that but I just need a second opinion/set of eyes!
Can anybody help?
I hope im not bringing an old question back to life, but i find Firefox's developer tools have been invaluable in ascertaining, on-the-fly, what elements are actually displaying.
The easiest way is to right click on the area in question, and choose the last option 'Inspect Element'. This will open up the source and CSS console and displays the elements current id/class and style.
To go one better, once the console is open, click on the 3D box icon on the right of the console bar to make Firefox render the page in 3D, which will allow you to spin and zoom in on the affected area.
Related
I am trying to make a responsive website, but I am stumbling upon a weird problem. When I am looking on the desktop page, everything is in the right position. There are no pixels left.
However, when I am loading the responsive version on my mobile, I see some pixels left (just scroll to the left or the right and you will see what I mean). The problem gets bigger when there is content like a single post or page.
The website is here: http://FavoriteFM.com.
I can provider the CSS code, but it will be a lot of lines. I am suspecting something in the content is 'sticking out'. But I am not sure of a tool that can see such problems.
Thanks,
Dennis
Today I have disabled every div by div. I figured out the problem is with the sidebar. I still had: 'left: 8px;' on. Removing it did the trick for me. So if you have this problem, check if something of your content is 'sticking' outside your wrapper. Even if you can't see it, it still can be there.
I'm going nuts on this, I can't figure out what causes the margins of the right sidebar gallery images to be rendered differently on opera browser. More specifically the bottom margin of the images seems to be doubled in every other common browser, its set to 2px and only opera displays it as 2 px.
This is the url - http://www.roxopolis.de/media See screenshots here.
Please help me out with this, I don't care too much about the fact that its displayed differently but it exposes a bit of the following gallery images which are supposed to remain hidden so thats what bothers me. If there is another way to hide the following images (which are placed by widget) that'd be fine too. Maybe setting the margin conditionally for opera?
I've had a quick look at the page in Dragonfly as well as Chrome's inspector for comparison and no particular style, including inherited ones, strikes me as "causing" this issue. Maybe someone else can find something, but at a glance, I'd say Opera seems to be "doing the right thing".
You might have more control over the spacing if you put each anchor tag along with its respective image inside its own container and tried to style those (e.g. a div containing the anchor containing the image for each item, and float them left within the parent container div).
Is there a particular reason you have more images than you want to display? I don't see any controls to scroll the images on that page, so I'm not sure why you need to have more than the six images you're showing already. Surely if you have code somewhere that randomises the order, you can change it so that it only displays the first six images.
Also, have you tried breaking the problem down to a smaller use case that can be tested/tweaked in a jsfiddle? That may help to get to the bottom of your issue if you can't solve it using the above suggestion.
I'm having a hard time trying to figure this out. For example, if you re-size this website's (http://www.noxinnovations.com/) window size until you see the horizontal scroll-bar and then scroll to the right, you'll see that the header's dotted line disappears as well as the color. But sites like facebook or twitter don't have this problem. I was wondering how they do it?
If you take a look their Html and Body elements do not fill the whole page. (The Firebug extension for Firefox makes this evident.) That isn't normal. What happens though is the element which contains the bar's background ends up being constrained by the body element's size. It is probably just the product of bad design on their part. You shouldn't have that issue if you create a site yourself.
Here is the web site: plantcatching.com
Set "Montreal" in the search textbox and hit Enter. The map should go there and show results (after you zoom in one notch I think). A panel will slide from the left for the list of results. This panel has a white arrow attached so that it's possible to collapse/expand it. Here is what happens:
On IE/Firefox: the panel slides well.
On Chrome: the first time the panel extends, it works well. Then any
new manipulation shows the issue. The content of the panel and the
tabs will change position only after the jquery.animate("left") is
finished.
I let you have a look at the css structure under firebug or other dev bar, but basically it seems that chrome doesn't like the various "position:relative" css rules inside the panel. The problem is that I don't control them. They are set by the mCustomScrollbar jquery plugin. To check that this is the actual reason, just zoom out a little until a small window appears notifying that you should zoom in again. This empties the content of the pane and collapses it. See how it closes nicely this time, since there is no content anymore in the pane.
The question is: how should I modify the css (the part I control) so that it works well in Chrome and continues to work well in other browsers?
Let me know if something is unclear, I will update this question.Thanks for your help.
There was no answer here, so I decided to fix it myself by adopting css3 transitions on chrome only. This is now far better but you will notice that the tabs are a bit lagging when the panel slides. This does not happen in non webkit browsers.
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...