I've checked cross-browser and everything works well except on windows machine. Strangely IE looks fine but chrome and firefox on a windows machine has a strange effect on the menu items. The text is cut from above as you can see in this text.
The font-size is of 12px, If I change the font-size to 13px or 11px the problem is solved, but I do not want to change the font size. Is there another trick I could use? Has anybody had this problem before?
css and html code would have been helpfull, try line-height:3% or padding-top:5px;
customise values for attribute if it works!
The only solution I found for now is changing the font size by one pixel. So at this moment the font is font-size:13px; It works... but I would like to find another solution as maybe one day I won;t have the option of changing the font size due to a tight design. Please let me know if anybody has different solution for this.
I've just started a new project for my clan. First i worked in chrome, but one of my friends told me there was a strange problem with the site. At the top of the page there is a white space, but this happens only in Mozilla. When i inspect it, it says it's apart html. I've triple checked the css for margins and paddings, but i couldn't find the problem.
Here is the CSS:
https://docs.google.com/file/d/0B8jNXRky-LW_aUw4Z1hXVlVwbHM/edit?usp=sharing
This is quite a strange issue. I see it in chrome also. It seems to go away if I add display:inline-block to .content
I'm looking through it atm but i am unable to find why it requires this. will edit if I find
EDIT:
its the span inside .content it has a lot of margins / padding on top of it, it is shoving everything else down. You need to modify this
Here is the site: http://lju-silenter.rhcloud.com . If you load the site on chrome and then click on the yellow section, then the section completely fills the entire screen, however in firefox, there appears to be some problem with margins. I've looked through firebug, I can't seem to find what is causing the issue. Here are two images just to clarify what's going on:
Chrome version:
Firefox version:
Any insight into the issue would be really helpful. Thanks!
By navigating to #three, the browser may scroll to bring that element into view, even if you have overflow:hidden. It appears IE and Firefox do this, while Chrome does not.
You should change the ID of the target element to something like id="box-three", then make sure you adjust selectors accordingly to add that prefix.
So here is where the page is hosted: see comment
The problem is in the bottom content box titled 'Mortgage Recent News', you'll notice how the borders of the div are misaligned in ie9. However, they are perfectly aligned in FF and Chrome.
I realize that this code isn't ideal to begin with, but it's what I have to work with. I cannot include the images in any part of the ul as it's generated by a backend script that we do not have access to.
I'm just looking for a way to fix the current code so that it looks the same on ie9 as it does on FF and Chrome right now.
Any help is greatly appreciated.
Fixed the problem. Basically I needed to specify both the padding and height of each li in the css instead of letting the browser default. Works now.
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