Hello i seem to have a problem with what could be technically called 'a huge gap down the bottom of my website on Google Chrome'. I think it is to do with this code-
#container {
width: 968px;
min-height: 2100px;
}
I have changed the min height down to 600px and things seem to be ok on Firefox and IE9. On Chrome though there is a massive gap. You can view my site here-
http://onlinebanter.com/
It's depressing as i use Chrome for the admin side of things on my site and i have to look at all day every day and it's starting to get me a little down. I have asked about the internet but have had no response even from the place where i bought the theme (they seem to have the same problem on their demo site)
Id there anyway to fox this?
Thanks
Reg.
Without looking at the actual problem...
You're using an HTML 4 Transitional doctype with namespaces in your <html>. Funny and faulty.
-- edit 1
The problem is the weird located footer img. Make that a block with CSS and you're golden: display: block;
-- edit 2
The min-height has nothing to do with it. Why do you even have a min-height??
Related
In the given site below, I have a sidebar menu with CSS positioning fixed. However, when I scroll, the menu seems to lag behind. This behavior seems to repeat itself with the image below it.
I've tested the site on IE and everything's working as expected. I have a feeling it's the embedded object behind the menu causing the problem - But CSS fixed positioning should work regardless no? Looking for suggestions or fixes to this issue.
I'm using Chrome 39.0.2171.65, on Windows 7 Ultimate N x64
Image of behavior
SITE LOCATION
Ok, so the problem was with your object, but exact problem - with css rule "z-index: -1"
I made following changes in developer tool
1) Put your object after all site content
2) Add to your object css left: 0 and z-index: 0
3) Add to block .left and .wrapper styles - position: relative and z-index: 1
And after this changes - it looks fine in my Chrome. Hope it helps
I have a site that can be seen at gronenproperties . com
I am using a div with an id "contact-add"
and absolute positioning it in the DIV where I want it to be.
Firefox shows it fine for the most part, but it shifts when i resize the window, and different browsers and OS's seem to place it somewhere else entirely.
I have been out of the game for awhile when it comes to css and making things cross compatible...In my research, it says to make the parent div relevant and should solve issue.
Pretty sure Ive done that.
If someone could teach me old tricks, but new trick to me.
Id greatly appreciate it
Thanks
Put everthing in a div with margin: 0 auto; and width: 960; or width: 1120;
I have a mysterious (at least for me) css background image problem, that I run into only with Google Chrome. I have found similar topics, but unlike those, here no Javascript, JQuery or anything else is involved, it is pure CSS. It's just not working as it should.
If you open up the page www.bodrogietterem.hu, the background image should be below the entire content area (as it is in other browsers). In Chrome a horizontal and vertical white area is appearing.
Once you start scrolling, the background image appears all okay, and it stays there from then on. Similarly, when you open the dev tool with inspect element, the background image is immediately there, and stays there, too.
this is the pertaining css:
body.page-node-1 div#main{
background:#FFFFFF url('/sites/all/themes/bodrogietterem/images/bodrogi_bodrogi.jpg') bottom;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:50% 135px;
padding-bottom:0px;
margin-bottom:0px;
}
and attaching two screengrabs on how it looks like, and how it should look like (well, I'm not allowed to attach these, as a new user, but have a look here:
http://www.bodrogietterem.hu/chrome_issue.JPG
and here
http://www.bodrogietterem.hu/should_look_like.JPG
It happens on sub-pages, too, but I think the root of the problem must be the same.
I'm using Vista, with up to date Chrome (20.0.1132.57), and up to date other browsers. btw, the second screenshot was taken in Chrome, too, but after opening the dev tool
many thanks for your kind help,
bests,
Zsolt
The latest version of Chrome is 21.0... so try updating chrome browser and see if it appears ok in the latest version. The screenshots lead to a 404 error page, so try uploading the screenshots again.
I also checked the page in IE7, IE8, IE9 the page looks good in all 3, IE7 however shows a horizontal scrollbar at bottom but the background image looks ok.
Your page looks fine in Chrome in windows 7 (Chrome 20.0.1132.57)
I have had problems in the past where various toolbars / addons that have been installed interfere with the CSS on a page quite significantly rendering Chrome to appear to bug out in isolated incidents. Try running chrome with no addons / plgins installed and see if it fixes your problem.
One observation on your CSS: #content contains floated elements that aren't cleared. I dont think that's the problem here but could be mixed with the above possibly.
Let me know if that helps at all.
Thanks for your helpful thoughts, I finally managed to resolve the problem.
While fiddling around, I measured the height of the white area, and it turned out to be 135px (which is exactly the top position of the background in the CSS above). So I decided that for whatever reason, that attribute was causing the problem, and I was right.
as a quick and dirty solution, I added 135px of white area to the top of the background image, and set the background-position property's top to 0px - which immediately fixed the issue.
as for the vertical white area, it was resolved by binding the background image to the #main-wrapper div instead of the #main div (it is a Drupal 7 build). Again, I don't exactly know why, but it fixed the problem instantly.
I love, how the web should be precise and logical, and it still stays random and ad hoc at times
thanks again for your time and effort, bests,
Zsolt
Had the same problem with two pages of http://www.stoerbeton.nl but I think I solved it after reading your above posts and some thinking.
The problem was probably in the general background: url; attribute and loading of the website css. I replaced all general background: #222222 url repeat etc.; for background-image:; , background-repeat:; and background-color:; etc.
Please let me know if your website works after editing your css. I'm still testing.
Greets, aquaster.nl
Im makin' a mobile website for a friend - and im using media queries to adjust her website for a more mobile feeling when watching it on any smartphone.
Feels like im done with the webpage - but when i view it on my phones iphone 3gs and htc incredbile S its like that you can scroll 2-3 pixels horizontally.
Some element is messing with this and im growing gray hair since i can't really find out which it is.
how do i solve this?
webpage link
http://www.linaahlen.se/
Had a quick look with the inspector in Chrome and it looks like it's this property:
div.entry {
padding: 0em 1em;
}
Line 106 of style-responsive.css - it's pushing the content just a few pixels wide, changing it to be padding: 0 0.8em; worked for me.
Oh, and just for the record, it's scrolling horizontally, not vertically!
Late, but for future reference.
I would like to point out the way to go searching the cause for the problem.
Open the site using Google Chrome Device Mode. Then check to see that the problem exists there (this solution relies on the problem to show up in the Device mode). Then start setting "display: none" to the elements one by one starting from larger elements like header, content container and check after hiding each element if the unwanted scrollability has dissapeared. This way you can track down the cause of the problem.
I had the same problem and tried to identify the cause at first by looking at the CSS code of every single element, wasted a lot of time and didn't find the cause. Probably a browser can render a page better that a human reading CSS...
This is a CSS related question, I got one good answer from my previous question, which suggested the use of some CSS code like overflow:auto together with a fixed height container.
And here is my actual implementation : on uni server
If by any chance you cannot access that server, try this
Please follow the instructions on screen and buy more than 4 kinds of tickets.
If you are using IE8, Opera, Safari, Chrome, you would notice that the lower right corner of the page now has a vertical scroll bar, which scrolls the content inside it and prevent it from overflowing. That's what I want to have in this section.
Now the problem is, this would not do in FireFox 3.6.2. Am I doing something not compliant to the CSS standard or FireFox has its own way of overflow control?
You can inspect the elements on screen, and all controlling functions are done in one javascript using jQuery. All CSS code is kept in a separated file as well.
According to the professor, FireFox would be the target browser, although the version was set to 2.0...
It seems you have to set a height / overflow to the <tbody> tag, not just the table (or maybe not the table at all, didn't test that).
So...
tbody { height: 130px; overflow: auto; }
And I specifically tested with "height", it seemed "max-height" didn't work as intended. Very odd behavior, indeed.
Have you tried overflow: scroll?