I've read through other questions but to no avail - I really can't work this out.
The site is (Been redesigned, so isn't relevant anymore. It used HTML5 elements, but they weren't declared as block, and IE doesn't assume that they should be.)
The gradient on the footer looks great in non IE browsers, but fails to show in IE 7,8 and the IE9 dev preview.
Any ideas?
You could try adding this to your footer CSS (in addition to your existing footer styles).
footer
{
display:block;
}
This fixed it for me under FF3.6, and I'm assuming will fix it in IE as well - The default display style for <footer> is inline which doesn't play nice with backgrounds regardless of browser. Applying block to it will treat it more like a div.
You'll also want to be careful with your use of HTML 5. Not sure of how well supported it is in all browsers. You might want to consider <div id="footer"><!-- contents of footer --></div> and applying styles to it by id in CSS instead..
I had a similar problem, but finally find the solution.
Change your format image to png.
And works fine in IE8.
This works:
#footer_text {
background: url(/media/img/gradient.php?w=4&h=160&sc=4c4c4c&ec=000000) repeat-x scroll top left;
}
I'd be careful about applying any styling to html5 elements like footer right now. They're not well supported by all browsers.
You can use them for semantic reasons, though.
If I look at the footer using IE 8's developer toolbar, I get this as the background-image definition:
url(/media/img/gradient.php?w=4&h=160&sc=4c4c4c&ec=000000); TEXT-ALIGN: center
Notice the part to the right. I'm not sure where it comes from - it's not in the style sheet. Maybe the sheet is somehow garbled. If I remove the text-align part, the footer image shows fine. The same is happening to your body definition.
try opening the file in Photoshop or similar, and doing a clean save for web as a PNG.
Related
I am developing a website in Angular2. In the css for all of my components, I am making use of the :host selector. The css there is brief and more or less identical in every component:
:host
{
position:relative;
top:60px;
background-color:black;
width:100%;
}
Most of my components are dynamically populated with data retrieved from a database, so the host element should grow with the content dynamically placed inside of it. This works as intended in both Chrome and Firefox, but not in Safari. In Safari, the data is loaded properly, but :host doesn't grow, and as such, the black background color just cuts off at a certain point as you scroll down the page. I should mention that the version of Safari I'm using is 9, which is certainly outdated, so for all I know, this may not even be an issue in more recent versions, but this still has to work in older versions for backwards compatibility. Also, I've not yet tested in IE or Edge, so I'm not sure if this is an issue there or not.
So I'm just wondering why :host isn't growing with its content in (at least this older version of) Safari and if there's a way to fix it? And I know I can just use a wrapper class in each of my components, put the background color in there instead of :host, and that will work(I tried it), and that's what I'll do if I have to, but I just wanted to inquire here first to see if anyone knows why I'm having this issue and if there's a way to fix it without resorting to a wrapper div/class.
Angular host elements have inline display by default. Try changing the default display of the host element:
:host {
display: block; // or any other value.
}
Inline elements ignore any height or width values.
See this for more explanation.
I figured it out. I had an old, unnecessary display:flex in a :host style for a parent component that was screwing things up. Removing that fixed the problem.
I thought I had finished the markup for this website that I am creating for my mom’s dog walking business, but then I realized that my CSS is only partially applied to my site in Internet Explorer. It’s strange because the body background image in my CSS displays but my nav image and nav's anchor tags don’t show and the borders to my divs are missing in IE.
Everything works fine in Firefox.
Also the padding and margins are crazy in ie.
I’ve read from people that ie generally isnt too friendly towards margin-left margin-right padding-left and paddin-top- stuff like that. That it generally prefers for example padding: 20px; or margin: 30px;
But I don’t know if that was what I did wrong. I don’t see how that would make my borders and nav image disappear in ie. Very frustrating.
The url is www.grinningpup.com/dannytesting/grinningpup.com/index.html
I tried to write semantic markup. I hope the solution isn't due to a stupid mistake I made.
Welcome to SO!
I've taken a quick look at your site and I can see the issue is that you've used HTML 5 elements which aren't supported in older versions of IE.
Easiest fix is to add Modernizr which is a javascript library aimed at detecting browser support, and in most cases, polyfilling them (only in this case). There are numerous resources on the subject. My fvourite is this; http://diveinto.html5doctor.com/ but just google and check SO for more information.
I hope this helps you!
You are using HTML5, which IE8 and below don't interpret right.
You'll need to include html5shiv and add the following to your css:
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
HTML "nav" tag and "section" tag not support IE 8 and earlier versions. So, you only use "div" tag solve all problem.
So I have built a website and I looked at it on internet explorer 7 and the menu bar is seriously misaligned. I looked into conditional comments and tried it out, and I don't know if I'm missing something. I put the conditional comment in the head tag of the website and then created a css style sheet just for ie7 and it didn't seem to do anything. Can someone tell me if there is a quick fix to this situation or a step by step to the conditional comment and custom stylesheet method? Any kind of help would be appreciated. Thanks. The website is here http://sgconstruction.org. The CSS involves a float of the page links to the left and a float right on the facebook and yelp icons within the blue bar. Both positions are relative. Thanks!
The issue involves the CSS you are using for your #connectguy <div>. This element is a block-level element which you have set to display: inline-block. Unfortunately, Internet Explorer 7 only recognizes inline-block on elements which are inline by default. You can work around this by setting the <div> to display: inline in your IE7 stylesheet.
check applying * before the css property you likes to apply for ie7 and below browsers only.
for eg:
#test {*color: #999; /*hack for IE7 and below*/
color: #F00;/*for all other browsers*/}
I have a png with transparent background that doesn't work in IE 6. I have gotten round the problem by replacing the few img tags using that image with a DIV, and in CSS I use:
#div {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/img.png")}
the problem I have with this is that I then lose alt and title attributes which doesn't make the site very accessible. If I use the above CSS with an img tag I see the correct image but it has the big 'X' over it that IE shows when it can't display an image.
Any suggestions on how I can get IE to behave by showing the transparency correctly in an IMG tag?
One way you can continue to use the DIV tags, but still be accessable is to place a second SPAN tag within the DIV element and put the value for the ALT inside that, then style it to not be off the page... for example...
div.image {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/img.png");
}
div.image span {
position : absolute;
top : -9999px;
}
Then the HTML would look like this...
<div class="image" title="The title for the image" >
<span>The ALT Text</span>
</div>
The title tag will still work on the DIV so you should be okay on that part.
I don't think you can simply hide the text (as in display:none;) because I think screen readers will respect that rule (as in not read it)
you could use javascript to enable transparency in ie6. there are many examples you can find. here is a link to one i have used.
http://jquery.andreaseberhard.de/pngFix/
another option is to use htc for ie6 - see here for solution:
http://www.twinhelix.com/css/iepngfix/
only requires an extra line added to your css file - sorry still may require javascript - not too sure.
I used a small javascript tool for solving this problem a couple of month ago. It's named Unit PNG FIX and it's very easy to use.
While someone here gave a JS implementation for this, this solution will be also executed for FF and other browsers. There are better ideas, for example using MS technology :)
One of them uses something called HTC (hypertext component, if I am not mistaking). It's something like... a CSS for behavior. It's really an XML file which lets you attach some functions to a CSS selector. Again, an MS only technology.
In short, visit this site:
http://www.twinhelix.com/css/iepngfix/
I am using this withing a drupal module and I am very happy. If you are wondering, this is the module: http://drupal.org/project/pngbehave
Note: this does not work under IE tester: http://www.my-debugbar.com/wiki/IETester/HomePage
I am using a Windows 2000 with IE6 (running under vmware, if you have to know) to test IE6 sites.
IE6 supports PNG-8 transparency, but not PNG-24. One of my favorite tools to "fix" IE6 is IE8.js.
I need to prepare print css style for some page. It's possible to have footer on every printed page?
I tried the code, I've found on the web:
display:block;position:fixed; bottom:0px;
but it works only in Firefox.
I can try to fix it with table, but in Q. here: CSS: Repeat table headers in print mode is info, that it doesn't work in IE5 (maybe I made some error, but it seems, that it doesn't work even in IE7).
Does anybody fixed problem with printing footer on every page in IE? Doesn't matter if with tables or without them.
Thanks for help.
I do not think it is possible to print headers and footer using IE current, since Even in IE8 it is compliance to CSS 2.1. But there are other tweaks to get around the problem. Hope this URL will help: http://msdn.microsoft.com/en-us/library/dd433064(VS.85).aspx.
PS: The URL you referenced, on the bottom of the page specifically said works only on safari.