Wondering if anyone can help with an IE8 issue, I've searched high and low and tried many different things. On a WordPress site for a client, an input text box appears much smaller than it should, and off to the side of the page, as compared with all other browsers I've tested.
You can see a grab of how the page looks on IE8 (on Windows 7) here:
http://perfectitaliano3.fonterra.safecom.com.au/wp-content/uploads/grab2.jpg
If you compare that to the page http://perfectitaliano3.fonterra.safecom.com.au/recipe/potato-rosemary-and-speck-pizza/ in a modern browser you’ll see the width and placement of the search box and filter dropdown menu at the top right is all messed up.
I'm a bit a noob at IE8 issues, but I’ve tried changing the css, patching it with modern.js, html5 shiv, modernizr, all sorts of things, but nothing makes any difference!
If you have any suggestions please let me know, thanks.
Try this
#top #s{
height: 40px;
padding: 0px 47px 0px 5px;
}
Thanks so much for answering #Jenti. I tried your suggestion but it didn't seem to work, although because it's now live I tried it in the developer tools in a virtual machine version of IE8, so one can never be sure ;)
However I've since found a solution, I added the following:
#searchform > div {
width: 500px;
}
#s {
display: table-cell !important;
}
and that seemed to do it. Thanks again and appreciate it.
Related
I've read through every SO question and article I can find on the topic and have tried every suggestion, but nothing has made any difference. I just need to print webpages like this one on mlb.com without cutting things in half at the page breaks. It might seem trivial but it's for someone who has been wrongfully imprisoned and can't do anything but sit and read for the next few years (and is a huge baseball fan), so any help would really be appreciated and make a difference.
I've tried many variations of the following, which I inserted at the bottom of the webpage's body (I also tried the bottom of its head) using Chrome's (and Firefox's) developer tools:
<style type="text/css">
#media print {
.view-header, .action, .pitches-exist {
break-inside: avoid !important;
break-before: auto !important;
overflow: visible !important;
float: none !important;
display: block !important;
position: static !important;
}
}
</style>
But when I tell the browser to save/print a PDF, things are still cut off at the bottom of every page like this:
Is there any good solution to this or will I need to try to find some hack that involves changing the absolute positions or margins of elements? Of course, that wouldn't be ideal, especially since I'm not a web developer. Thanks in advance for any help you can give.
Notes:
Please don't share any ideas that you haven't tested yourself and found to work on this particular webpage.
I'd prefer a solution that works in Chrome but would gladly settle for one that works in another browser.
indeed you add a bigger paper size in System printer setting
So i have this weird behaviour in Internet Exlporer 9-11 and EDGE (Spartan).
In all browsers now i see my example like this (which is desired):
In Internet Explorers i see it like this:
Before i had this stuff pretty much everywhere except Firefox, until i added:
svg {
width: auto !important;
}
This fixed problem everywhere, except IE...
Here's working simplified example that you can tweak:
http://codepen.io/failure13/pen/waxaOx
For myself i have no idea, i absolutely have no idea how IE behave here and calculates width: auto; based on what values...
I always thought it should be parent or element height itself.
I tried everything that came in my head for now.
I see no logic, so this seem to be some nasty bug.
If so, maybe there's workaround?
I really need it, coz i really don't want to use fixed width values (of course it will fix problem, but it's not solution).
Thanks in advance to everybody who may help with it, let's make web better place!
in your class
.svg-flex {
width: auto;
height: 100%;
display: block;
}
change the width to max-width:72px;
this works in ie 11 anyway. I checked
here is a working codepen: http://codepen.io/anon/pen/aOjNrN
I'm working on my new online portfolio at http://asbjorn.org/ny/, and I've come across the weirdest issue!
Every time you open the page for the first time, the next and previous buttons for the slideshow don't appear. If I open the inspector, they pop up immediately, and they also appear when reloading the page.
They're pretty standard html elements, not added dynamically, so I have NO clue as to why this happens! Of course I can't have the site visitors reload the page just to see them. :/
I really hope someone can help me! :)
update: seems like it's a chrome only issue. For me it happens consistently in chrome on both Win7 and OSX. A few of my friends also has the same issue (probably in chrome on osx)
So I'll take a stab at an answer. When I see the problem in Chrome 22, and I bring up the inspector, I note that the #previousLink and #nextLink divs have a width of 0 in the broken state. Try setting an explicit width for these in your CSS, or make the nested image use display: block.
#previousLink { width: 31px; }
#nextLink { width: 37px; }
or
#previousLink img,
#nextLink img { display: block; }
I think the combination of these inline items and your overflow: hidden rule are biting you. I think. This is a tricky bug!
I have a site at http://www.dellsvet.com/ which is being affected by a bug in IE6. The page will only show what will fit in the viewport, and you're unable to scroll down in IE6. I thought that I was dealing with the unscrollable content bug detailed here: http://www.positioniseverything.net/explorer/unscrollable.html -- but it's not a match as far as I can find. I've been tinkering with this for a while with no result.
Does anyone have any insight on this bug? I've got a feeling this is something simple staring me in the eye, but I'm missing it.
Thanks.
You should consider not caring about IE6 because it's becoming more and more rare. Nevertheless, you asked a question, so I'm going to answer it.
Simply remove position: relative and z-index: 1 from #container.
Doing that fixes IE6, and I did not notice any differences in IE7/IE8 or Firefox.
Bonus, because I'm nice:
To fix the menu buttons, add this to your CSS:
.ie6 #nav li a { zoom: 1; display: inline }
Thanks to your use of HTML5 Boilerplate, you have that nice easy way to feed CSS to IE6.
To get (the drop downs) ul#nav li:hover ul working in IE6, you can use Whatever:hover.
Other than the above issues, that page looks fine to me in IE6.
This is an issue not easy to explain, basically, when you open my site (http://www.securebitcr.com/test/sbcr/) and resize, you can see an "extra" space at the end of the site, is there a way to limit that?
It is like, if I have a div(height:800) but the window itself is sized to 400px, I am able to see the rest of the site, but all the other objects that I'm attaching to the bottom (like the footer) ... you can see all the code at once in my file.
http://www.securebitcr.com/test/sbcr/
Any help is greatly appreciated.
Thanks,
Marco
I didn't test this in any other browser, so you may have to serve these changes to just IE7, by using a stylesheet just for IE7, via a conditional comment.
Set these styles:
html, body { margin: 0; padding: 0; height: 100% }
body { position: relative }
I recommend trying those changes, and seeing if they're fine to apply for all browsers - that might well be the case.
It looks like #content_frame is causing the scrollbar to appear even though you're using overflow: hidden on the parents. I'm guessing position: relative has something to with it, try removing that. It works fine in IE8 and Firefox.