Im working with a cross-browser compatibility, fixed everything fixable for IE7 and IE8. But it seems there is a slight (huge) problem with the background which is called by CMS.
As far as it seems, there is no problem in IE7 v8.0 BUT in IE7 v7.0 looks moved to the side in most pages, but not in others.
I figured it was because of a fix i did for some lost positions, but when i searched for a lost object in the right there was none.
And i have no idea how to make this bg to look right.
Please help me! im going crazy with this!
Page:
http://www.tvazteca.com/homes/laislaelreality
I think the problem its the background position. I cant make it work for the IE7.
<body class="fondo-pagina" data-twttr-rendered="true">
<style type="text/css">
.fondo-pagina {background:url(http://static.tvazteca.com/imagenes/2012/29/1634805.jpg) no-repeat; background-position: 50% 40px;background-color:#0b4a51;
*background-position: 50% 0 !important;
}
.bgBottom{background:url() bottom center no-repeat;}
</style>
The style up there is added automatically by the CMS. Although i have the same class in the style sheet:
.fondo-pagina{
background: url(../img/fondoislaEtapa1.jpg) top center no-repeat;background-color: #0b4a51;
*overflow-x:hidden;background-position: 50% 0px!important;
*background-position: 50% 0px!important; }
I havent been able to make it work. I know im using hacks, and its not the best option, but i was asked to only use one style sheet for the site, so another one for IE7-IE8 was out of the question.
How can i make IE7 to read the background position? Is it going crazy because of the double clases?
Using Chrome and FF, element inspectors i found out none of the background position clases were taken for IE.
TY for reading :)
I found the problem.
Nothing was wrong with the Html php and my Css
The problem comes from FACEBOOK:
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
The scrip has to be placed in the div that contains the likes/comments etc. Other way it will go crazy in IE.
It opens up a big div that forces the page to be contained and makes horizontal scrollbar to be extended. As result, the background will take such width as the base one and position itself on the 50% 0px of that thing.
It only affects IE versions. The other browsers work fine.
Related
Slightly baffled by this one - I'm working on a tiny static site with a large background image, which is rendering with a 1px black top border in Firefox. There's no border in the image and it doesn't render in any other browser. I haven't managed to find any references to this happening with a background image anywhere and am not quite sure how to fix it!
This seems to be fixed in the latest build of Firefox (not sure whether to post this as an answer to my own question or as part of the question?)
You should make sure you have resets for all css, like normalize.css. This way all browsers act the same.
img { border:0; }
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
I have researched this and found some IE CSS bugs, but none of the known fixes seem to cover this scenario.
This site went live today and the issue that was found is that the logo does not display in SOME versions of IE8. If the person resets IE to factory settings it works, but otherwise the logo is invisible.
Site can be seen here: http://www.ethicsgame.com/exec/site/index.html
CSS to display the logo is
h1 a {
background:url(images/logosmall.gif) no-repeat left center;
padding-left:325px;
text-decoration:none;
color:#1f396d;
position:relative;
top:45px;
left:15px;
width: 325px;
}
it seems to be working fine on my IE8, have your tried adding display: inline-block to its css? Also, for good measure you could throw a inside the a tag.
so you get:
<h1> </h1>
just so it has content...
good luck -ck
Looks like a difference in spacing with IE8 vs Chrome. Check it out in the fiddle: http://jsfiddle.net/5Vt3f/.
Basically your image is probably displaying, just too far to the left that it's not visible.
Also, you have "left" and "center" on the image. This is conflicting. It's either left or center.
Mary,
This has to do with the fact that A tags are inline elements. in IE < 8, the height/width of the element isn't getting rendered--so it's collapsing and becoming invisible. Adding display: block; into your CSS declaration for this element will fix this in IE < 8. You'll want to apply this same principle to other inline elements that you're trying to get to behave more like block-level elements (setting width/height/margin/padding is usually a good hint on this behavior).
If you don't need to support IE 5.5 (which most people don't nowadays), you can also use display: inline-block; (keep in mind that IE 6-7 only support inline-block on elements that are natually inline elements, such as A, SPAN, STRONG, EM, etc.). You can find much helpful compatibility information here:
http://quirksmode.org/css/display.html
You'll probbaly also notice that once you change that display type, the padding which isn't being rendered will be--so you might need to change that markup a bit to compensate.
Using the Developer Toolbar in IE is a great way to test old versions, as well as test these solutions in the older versions.
It works perfectly alright on IE8 but if does not show earlier versions of IE then replace center with left in background attribute.
background:url(images/logosmall.gif) no-repeat center left;
ie8 doesn't support background image position, in your case "left center". If you remove "center left" it should work. You might be able to specify background image position if you specify !DOCTYPE
I'm a real CSS beginner, so please forgive my ignorance. I've been searching around without success regarding something which must be obvious to experienced CSS folks.
Basically the CSS below displays as expected in FF/Chrome/IE8, but not in IE6 (and who knows about other IE versions). In IE6 a friggin horizontal scrollbar keeps being displayed since some elements are overflowing the browser window. My reading seems to indicate this has something to do with padding, 100% width being a problem with IE6, or something... I've added bg colours to better visualise the problem.
I only really want the #ch/div ("head") to fill the browser window horizontally. I suppose it boils down to: why are the div's for bs_ext and cd extending beyond the right-hand browser window, causing the horizontal scrollbar to be displayed?
<head>
<style>
<!--
body{margin:0px 0px 0px 0px}
#ch,#cs{position:relative;width:100%}
#ch{margin-top:0px;height:90px;background-color:#edeff4;border-bottom:1px solid
#dddddd}
#cs{height:55px;width:1024px;border-bottom:1px solid #dddddd}
#cb{width:1024px}
#ci{float:left;width:200px;background-color:#efefef}
#cr{float:left;width:530px;background-color:#cccccc}
#cd{float:left;width:294px;background-color:#dddddd}
#bs{position:relative;float:left;top:18px;left:15px;width:185px;background-
color:#cccccc}
#bs_ext{position:relative;float:left;top:18px;left:15px;width:824px;background-
color:#dddddd}
-->
</style>
</head>
<body>
<div id=ch>head</div>
<div id=cs>
<div id=bs><span>sssssss</span></div>
<div id=bs_ext><span>ppppppp</span></div>
</div>
<div id=cb>
<div id=ci>111<br>111<br>111<br></div>
<div id=cr>222<br>222<br>222<br></div>
<div id=cd>333<br>333<br>333<br></div>
</div>
</body>
I would appreciate any pointers on how to make this work in IE6.
Also, I'd like the bottom border of #cs to be 100% of the browser at all times (it's currently 1024px). But, if I use "100%", then when resizing the browser moves "ppppppp" down - I'd like it to be fixed so that resizing the browser does not change the content position.
Thank you so much for any pointers/assistance
I would not try to make my website compatible with IE6.
IE6 is over 10 years old, you should use your time checking your code with newer browsers.
If you insist to make it IE6 compliant, you should look into using different stylesheets for different browsers.
Check this link out: http://www.thesitewizard.com/css/excludecss.shtml
Short answer:
bs_ext is 824px wide, so any browser (not just IE6) will display a scrollbar if browser size goes below that
cd is positioned 200+530px from the left and is 294px wide, meaning it extends to 1024px which is too wide (any browser uses about 16 pixels of the window's width to be used for a vertical scrollbar)
Also:
Go with bvd's suggestion; don't try to optimize for IE6 too much
Try to build the site in IE6 first and modern browsers later.
Solutions:
The following CSS will remove any scrollbars on the html/body of your page. A terrible fix, as you're destroying the user's tools to navigate your site:
html, body { overflow: hidden }
Also, if you want a footer that sticks to the bottom of the page (I'm not sure if you do but it looks that way), try to follow this tutorial:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Lastly, if you want more help, I suggest you post a picture or design of what you're trying to achieve. A lot is possible in IE6, if you know how to work around CSS imperfections that browser has.
A final tip is modernizr: http://www.modernizr.com/
Modernizr solves a lot of IE6 issues, but not all. Also, you'll have a JavaScript dependency in your website which will affect at least IE6 and 7 users.
Good luck!
To remove the scrollbar you could give this property to #CS {overflow: visible;} it may fix the IE6 Scrollbar issue.
As mentioned by BVD you shouldn't be checking for compatibility in IE6, you should install the latest versions of IE i.e., IE9. IE9 provides a Developer Tool which allows you to check the html page for compatibility in IE7, IE8 and IE9. You should ignore IE6 and focus on compatibilty from IE7 version onwards. To get an idea of which browsers are popular check NetMarketShare
The naming conventions you've used for the Div's are not right, check this article it may help you understand what I'm talking about css naming conventions.
I am working on a small project, and am having two tiny problems with CSS.
I have played around with everything to no avail.
1) In IE6 the content and logo is not lining up correctly.
2) In Firefox, the tooltip box fixed at the bottom of the page (which degrades in IE6) although styled as width:100%; is not spanning the whole screen. There is a gap on the left hand side.
These problems can be seen by viewing http://gua.com/wd/ in the respective browsers.
If anyone could advise as to what has gone wrong, and why, it would be greatly appreciated.
Thanks
for firefox: Yyou can add left:0; for #bottom
for internet explorer: I see your menu to be wrong not the logo. To solve this just add margin:0 for #top-nav
You should ideally be using some sort of css reset stylesheet to overcome specific browser idiosyncrasies.
In your case appending a margin: 0px; to your body should do the trick (For Firefox). IE6, well, its usually best left to a IE6 specific conditional stylesheet.
"100%" means "100% of the parent box's client space". Not "100% of the entire viewport".
And IE6's CSS support is f*cked beyond sanity. If it doesn't work, use absolute positioning or whatever else it takes in a special stylesheet and include it with conditional comments.