My problem is an Internet Explorer issue. I have an element, basically just a block, with the css:
md-card{
min-width: 80%;
background-color: #fff;
}
And this element is full of data elements consisting of an icon and text.
Each one is either a file or folder, and clicking a folder just navigates to that folder's contents.
These elements are using data binding and are dynamically updated when you click a folder (so it removes the current contents and replaces the data with the opened folders new contents) and for some reason this causes a problem in IE
The md-card element despite having min-width set to 80% will sometimes squash down to like an inch big on the screen when a folder is opened. Sometimes this happens only for an instant, and it resizes, and sometimes it sticks. But resizing the page will cause it to resize back to the intentded width.
I was thinking it was some weird interaction between angularjs and IE but I'm wondering if this is an issue anyone has encountered or and ideas on why this is happening.
Edit: On further inspection it seems to involve the min-width: 80% attribute.
Changing it to min-width: 600pxeliminates the problem.
The problem with Internet Explorer is always bugging but I figured out the solution please add this line to md-card CSS sheet . As you mentioned that it is basically a block , consider this .
md-card{
display: block ; /*Add this line*/
min-width: 80%;
background-color: #fff;
}
Internet Explorer is not as intelligent as chrome or Firefox , so the default is always display:inline ;
Therefore the layout problem occurs .
Related
I have a static site based off a theme. The CSS has not been touched but something caused it to break recently. I was a bit confused since I hadn't made any changes so I checked the example site and it's broken there as well. I checked with the author, no new changes but they also noticed it's broken for them now.
So the issue. On Safari, IE, Chrome, and Edge there is a weird header weird "pop-in(?)" upon page load. All elements are shifted down immediately. Firefox operates properly.
It's easiest to see on this page https://mmistakes.github.io/so-simple-theme/theme-setup/, but effects all pages in the theme.
I'm not a CSS wizard but after troubleshooting for a day I found it may be related to this CSS selector? I could be completely wrong.
#site-nav {
display: none;
z-index: 5
}
Second question (less important) is I'm wondering what could cause something to break after the fact. I'm assuming one of the JavaScript libraries linked in?
Thanks much!
You are correct, the reason your content, say "pops-in" or simply shifts down abruptly is because the content just appears when page is loaded.
To fix this initialize your CSS to start like:
#site-nav {
height: 0;
transition: height .2s, max-height 200ms;
overflow: hidden;
}
Then in your #media for 48em have your css do this:
#site-nav.closed {
height: 5em;
}
This will ensure your content actually slides in and no abrupt behavior exists anywhere.
So I have a site built using the Kentico CMS. On page load, sometimes the scroll bars will not show up in Chrome on Mac. They do show up in Safari, reliably. I previously had this issue with Safari, and added
html {
overflow-y: scroll;
}
to my css, and that seemed to fix it. It's not working for Chrome, however.
I did notice that if I open up the dev console and then close it, it gains a scroll bar. If I change the CSS of an element to be width 99%, rather than 100%, it gains a scroll bar. However, this only works if I change the CSS that targets that element. If I change it just for that element (either with javascript or by modifying the element.style through the console), it does not gain a scroll bar.
There are no JavaScript errors upon opening the console.
My thought was to try to change the CSS itself with JavaScript, but I'm not positive how to do that.
Does anyone have any other ideas? Or how I could accomplish my plan?
I unfortunately can't reduce the problem any further. It seems to be the interaction of the whole site, including Kentico, so it doesn't seem possible to get a jsfiddle or anything.
I have solved the issue. This was caused by the following css:
html {
overflow-y: inherit;
}
I do not know why this caused the problem. I commented out this line, and the issue was resolved.
My button looks fine in all browsers(Firefox, Safari, Chrome) except IE 10 (I tested on two different computers with windows 8.1). The image appears to be a bit lower in IE while other browsers have it right in the middle.
IE:
Firefox:
CSS:
#checkout {
background-image: url(../img/checkout.jpg);
border: 1px solid #D6D6D6;
float: right;
width: 184px;
height: 29px;
}
HTML:
<input type='submit' id='checkout' class='jcart-button' value='' />
I have tried using:
line-height: 29px;
Also, I noticed it works fine when I use input type='image' but the problem with that is, I need the ability to have a different image on hover. onMouseClick does the trick but doesn't work without javascript. I need something that works without javascript as well.
Edit:
Removed all my css except the #checkout part but I am still encountering the problem. So I think it is a problem with the #checkout css or the HTML part.
demo: link
Found my answer after hours of debugging :)
All I had to do was remove the border from the image and use:
border: none;
I hope that helps others!
That's probably because all browsers have quite different user agent settings for input element.
Those differences are found in margins, padding, border and god knows what else.
Open DevTools (F12) and you can see all the rules involved with the input and input[type="submit"] element.
To be absolutely cross-browser-sure you have to set all those rules manually for #checkout in the CSS.
UPDATE:
Could also be that you didn't set the width and height of the button correct.
The way you have it now it's actually not perfectly in the middle. As you can also see in your screenshots, the left/top of the button has a white edge, the right/bottom doesn't.
If I change it to width:186px; and height:31px;, it is perfect.
(With any luck that also fixes your problem in Win8.1/IE10, or at least makes it less obvious)
I am using the jAlbum program with the Lightflow Skin to create a gallery. Works well but when I attempt to navigate the gallery on my laptop and the images will slowly creep up and the titles will disappear. I cannot replicate this issue on my desktop, however, my screen size is large enough that the max image size does not override the screen size. This happens in Firefox (multiple versions) only. In Chrome and IE it displays correctly. Also the Close X is off to the left a bit too much (In all browsers on laptop only).
It would appear that the script is calculating the top property incorrectly.
Here is a bit of code:
<div id="lightwindow_container" style="height: 469px; width: 532px; left: -266px; top: -235px; display: block; visibility: visible;">
For the photos that go off the page if I change the top property I can make it fit the page without issue. (By changing it in Firebug when looking at the page.)
Here is a screenshot showing the issue:
Here are the page(s) in question.
How do I check and see if this is a script error or simply a local browser issue and how do I fix it if it is a script error?
Note: I would add the code but there is so much code it will reach the max limit allowed here in SO.
I am trying to override the default page setup margins for my users. The document that I need them to print needs to have the margins gone. After TONS of looking, I found the following, and IT WORKS IN GOOGLE CHROME:
#page{
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
When I print this to PDF in Chrome, it prints a document with virtually no margins around the side. However, when I do the exact same thing in FF4 and IE9, it prints a document with large default margins.
Any ideas on how to make this work for IE9 and FF too? Supposedly the #page CSS stuff was part of the CSS2.1 spec, which all browsers IE8 and later support. So, I am not sure why it isn't working for these pieces, and why Chrome is the only browser that has it.
dont use the px
The page context has no notion of fonts, so 'em' and 'ex' units are not allowed. Percentage values on the margin properties are relative to the dimensions of the page box; for left and right margins, they refer to the width of the page box while for top and bottom margins, they refer to the height of the page box. All other units associated with the respective CSS 2.1 properties are allowed.
Specs