CSS position between Win / Linux / Mac Logo Position - css

i've a little bit trouble to fix one thing, may you could help me out with it?
I try to make Chrome/Firefox works with a Logo sliding problem. You can see here the first pci is how does it looks like in win with chrome or firefox. IE looks normal like the second pic.
What did i wrong in the code? many thanks in advance.
http://abload.de/img/bildschirmfoto2013-067oqb8.png
http://abload.de/img/bildschirmfoto2013-06u6rho.png

I can't tell you unless I see the CSS. Post the css on something like pastbin.com or if it isn't real long then add it to your question and then you are likely to get some answers, but I can't tell you what is wrong with your CSS from a picture of the results. Too many possibilities.
Now I'm wishing I had asked for a demonstration instead. Am I correct in thinking that the text is part of a horizontal menu and the logo is completely separate and not contained by the text container at all? If this is the case and the image looks and behaves like you want then perhaps it is the menu that needs tweaking to get it to match up correctly. At first I was thinking this was something like a div containing text and an image or having an image as a background.
If you could go ahead and post a link to a page or a pastebin or something that has the html and the css for the menu and the logo together then I'll try it out myself and see if I can find the solution. Someone else may already see it, but I'm still not seeing the clear picture of your situation or a resolution to your problem yet.

Related

CSS fixed background issue when scrolling

So i recently got this CSS style for Facebook which is acting really wierd.
It's using a fixed background image and whenever i scroll it's doing this:
Click
Wierd thing is: This occurs on every style with a fixed background, if i completely remove said background the site works like a charm.
Still, I have no idea if it's just faulty code that causes the problem or if it's the browser itself.
I'm not that good at CSS but if I knew where to search or what could cause the issue, I could probs fix it myself.
Sooo... If anyone wants to take a look at the code, here it is: Click
Thanks in advance to anyone who decides to put up with my shit, heh
edit: changed link to Dropbox temporarily

Unwanted free space on right side of webpage with Bootstrap

I have a problem with unwanted free space on right side of my webpage.
I am using Bootstrap version 3.3.4. The problem disappeared when I used the following CSS for the body tag:
body{width: auto !important;overflow-x: hidden !important;}
But for mobile devices the problem still exists. I do not know what is causing it and I would like to get response from you.
Here is the complete example website: http://www.filedropper.com/zapytanienastackoverflow_1
Here is a screenshot with the white space. It appears when you scroll the webpage to the right.
I can't post comment because of a reputation (I really understand these limitations, I didn't find single one which would actually help and not the other way around), so I have to post it as an answer.
The link you provided doesn't work so I can't be sure. But to me it looks like it could be a problem of the size of the picture in addition to the bootstrap gutter? What dimensions did you use with the picture?

z-index and CSS issues

How do I set a specific section of a page (div section?) to be on top of another section? I tried adding a z-index on the CSS file but it's not working. Or maybe I'm adjusting the wrong CSS file. In the end, I am confronted with:
--- which CSS file do I adjust? (I'm using Firebug but now I'm not sure if I'm using it correctly
--- what exact code adjustments do I need to do?
This is a sample page: http://www.criminal-lawyers.com.au/offences/aggravated-assault. The testimonial box to the lower right part of the page gets covered by the brown area when you scroll down. The goal is to put it on top so it's not covered whenever you scroll down (I know I should better position it "absolute" instead, but that's not the goal).
Any feedback would be appreciated. Thanks!
Finally had it solved! Many thanks to all your comments below. Although some answers did not exactly solve the problem, there were concepts behind them that really helped.
You need to set z-index:21 on the div with id it_widget_content-11-background-wrapper which is the main container of the sidebar widget. That should solve the issue.
it's pretty simple, to this widget-background-wrapper sidebar-widget-2 add z-index:9999. sorry i would rather comment this, but reputation < 50.
Remove position:fixed on the classes
CSS file - wp-content/themes/Criminal-Lawyers-it/style.css
sidebar-widget-1
and
sidebar-widget-2
They will remain in place.
Just realised it may not be exactly how you want it to look :) However, even with correct z-index, it may look weird having them overlap the footer...

drupal - problem with quicktabs

Hello
I have quite a strange problem using quicktabs. I used the framework theme to develop a custom look for my site. I used quicktabs in the center content area to create a tabbed look for placing links within the body. Everything is working fine. However, when I view the site in IE8 at a resolution if 1024*768, I have trouble with a few links. It seems that sometimes the first link under my buttons are difficult to click. The link is there - I can actually click it, but it is very difficult to locate - it only appears at the very beginning of the link text - it is not the first letter, it seems to be only the first pixel.
I looked at the source and everything seems to be correct - I can't figure out what could be wrong.
Has anyone seen any similar behavior that might be able to point me in the right direction for a fix for this?
Thanks for any thoughts.
Edit - I looked further into it and I think it has something to do with my CSS. I disabled css in ie8, and every link is clickable, even the ones that were difficult to locate earlier. I guess there must be an overlapping of containers or something, so I will have to start messing around with those files.
It sounds like a CSS thing, have you inspected the elements in question using the developer tools (press F12) to see whats going on?
I found the solution. In the style.css file for my theme, the .block had position: relative; applied to it. removing that bit of themeing appears to have fixed the link issue.
Thanks

Div that should take up the "rest of the page" expands beyond the page in ie

Okay, this is REALLY starting to bug me...
This page works fine in both Chrome and Firefox. www.bloggan.tk
But if it's opened in internet-explorer it always expands beyond the page and introduces the scrollbar no matter what the resolution of the browser is.
I have NO idea what change in the html it was that cause this...
Here's the blogger-template-html-source
I'd REALLY appreciate if someone could help me with this.
Thanks in advance!
Edit:
I've "solved" it for IE using javascript, but that's only temporary (i hope). The version without javascript can be seen here, so that you still will be able to know what I'm talking about. Still trying to solve it, and still hoping for someone to help me.
Before you ask a question here, you'll need to do some basic research yourself.
Strip out everything from that HTML file you reference until you have the simplest possible document that reproduces the error. Don't expect people to dig through a 40k HTML file to find the thing that's causing you grief.
Isolate it before you ask about it.
Incidentally, however, there is no CSS width or height specifier for "the rest of the page". You need to meticulously keep track of your percentage widths to make them add up to 100%, or use tables. If your sample is using percentages, then I'd look for borders and padding, since those are the things that cause discrepancies in box size between old IE versions and modern browsers.

Resources