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.
Related
I have a webite where i position some events in a calendar with position relative. But the problem is that in Chrome the layout it pixel perfect, but in firefox and IE it does not work at all.
The events get positon about 10px wrong downwards. And my tooltip that also uses relative positoning gets stuck at its "orginial" position.
I have a live demo at: http://jonasolaussen.se/dev3/?page_id=6
You can see the black box positions different in Chrome and Firefox. And when you click on a tooltip it turns up at the date in Chrome but in the bottom left corner in Firefox.
I cannot understand why!?
Please! Help Me!
One way of doing this would be to use css hack so that you can style it dependant on the browser.
Here is a demo:
#media screen and (min--moz-device-pixel-ratio:0) {
.firefox {
background: red;
}
}
Fiddle example:
http://jsfiddle.net/Hive7/3HYmZ/1/
Here are my references:
http://browserhacks.com/
http://css-tricks.com/snippets/css/browser-specific-hacks/
I know this is an old post and because of your lack of detail I can't be sure, but quite often the reason for this is that different browsers will render their box models differently when widths, padding, margins etc are not explicitly set. setting widths for the elements you wish to position around will usually solve this problem.
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.
In my first attempt at a responsive web design I have run into a curious problem. When I resize my browser down to 615px width or less, a horizontal scroll bar appears. I'm not sure what element is causing this. I tried putting a border around each element using
* {
border:1px solid #FFF;
}
to help me visualize where the edges of the elements were but I don't see any borders extending beyond the window boundaries.
Can someone take a look at my site and give me some insight? http://www.ritualbliss.ca
Thanks!
Edit: So I only get the scroll bar in Firefox. Chrome works fine and the desktop version of Safari but on my iPhone it scrolls horizontally.
Edit: the site is for a legitimate massage business but some may consider the picture NSFW
Devin,
Try using a tool like Firebug for Firefox, IE Developer Tools, or the Chrome Developer tools. I'm sure Safari and Opera have similar tools, as well. These things will give you the ability to highlight and view the various properties of every visible HTML element on the page, including Javascript and CSS information.
One other thing to think about is not using the * selector in your CSS. I am not sure why you would want to put a border around every single element on your page because to me, that would not look visually appealing. The border style attribute adds the thickness of the border to whichever dimensions it is applied to. So, in your case, every element in your page has 2px added to both its height and width, even the "html" element. This could be why you have the scroll bar but can't tell where the extra pixels are.
Also, do you have any CSS styles that set a width or min-width to 617 pixels? Or a combination of elements that share the same area and add up to 617 pixels? Maybe a table with columns that are not shrinkable?
There is a lot to look at and your URL looks like it's probably porno or something so I cannot go there at work and check it out...
Good Luck,
Matt
Edit
I fooled around with firebug for a few minutes and agree with Ruben that handling the overflow would be a good idea. Although I think the setting should be on the body instead of #content.
Try this:
body { overflow-x: hidden; }
Like Ruben's answer it is hiding overflow, but you can still get the vertical scrollbar if people REALLY narrow down their browser.
can you please warn us when it's nsfw :s
use this css:
#content { overflow: hidden }
not the best solution but you have to use firebug to find out what's sticking out
padding and borders increase the width of your element too
css3 box-sizing:border-box solved this one.
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.