I am working on GunsAmerica.com and some users with IE8 are noticing (with great distaste) that the images are not showing up on our listings. I am using Browserstack.com to test and can confirm the beheavior. You can see the problem on the homepage http://www.gunsamerica.com
Here is the CSS for the image:
.listing-thumb img, .listing-thumb > a > img {
height:auto;
width: 170px;
display:inline;
max-width: 100%;
}
Here is an example listing image html:
<div class="listing-thumb">
<img itemprop="image" alt="CSC ARMS " elite="" model"="" 2014="" 5.56="" .223="" 16""="" src="/UserImages/142343/945864089/wm_md_6737932.jpg"><br>
</div>
The class "sr_image" doesn't do anything so try to ignore that.
As far as I can tell it should work. Anyone that can help would be greatly appreciated.
Maybe this works
<!--[if lt IE 8]>
<style type="text/css">
a img { display: inline; }
</style>
<![endif]-->
The solution about making the website compatible with IE8 will be temporary, because Microsoft is going to get rid of it anyway.
Check the link below for information on how to resolve the problem:
http://www.codeproject.com/Articles/310368/Make-Site-Compatible-to-IE-IE-IE-and-IE
Alright guys it's working now. What seemed to be the issue was the width property of the div that was enclosing it with the class "listing_thumb". This apparently required a width to be set because the inner wasn't giving the container width information (required static px width).
From:
.listing-thumb {
margin: 0px 10px;
display: inline;
float: left;
max-height: 119px;
overflow: hidden;
}
To:
.listing-thumb {
margin: 0px 10px;
display: inline;
float: left;
max-height: 119px;
overflow: hidden;
width: 170px;
}
So there ya have it folks. If you've exhausted all other possibilities make sure all the enclosing containers have width properties that support the inner html.
Related
For some reason the footer on one page of my site is not full width. There's a huge white space on the left that I cannot seem to get rid of and its causing my entire footer to be shifted to the right.
This is the current CSS:
#main-footer {
width: 105%;
margin-bottom: -50px;
margin-left: 0;
margin-right: 0;
height: auto;
padding: 50px;
background-color: #2E2E2E;
}
#top-footer {
height: 30px;
background-color: #77CAE9;
margin-left: 0;
width: 105%;
}
I have a feeling it's related to the page width but I can't figure out where to adjust that either. I'll be so grateful if someone can help me out with this!
EDIT: The URL to the page is http://tstand.com/blog
Thanks :)
Angela
Start with moving your <footer> outside of the <div class="container">.
The class .container is used to centre it's content in middle of the screen. See more details here here:
http://getbootstrap.com/css/
A common cause for this can be a default padding or margin of <body> or even <html>. In that case CSS like this should fix it:
body {
margin:0;
}
If the problem persists please post a complete, but minimal example that demonstrates the issue.
When rendered in Chrome/Android the website shows as intended but in IE/Firefox some vertical scrollbars appear. Simplified code:
CSS
html, body {
overflow: hidden;
position: relative;
}
.menu, .slide, .ico {
overflow-x: hidden;
overflow-y: scroll;
position: fixed;
height: 100%;
width: 100%;
}
.menu::-webkit-scrollbar, .slide::-webkit-scrollbar, .ico::-webkit-scrollbar {
display: none;
}
.container {
display: table;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
}
.links {
height: 100%;
display: table-cell;
vertical-align: middle;
}
HTML structure
<html>
<body>
<div class="menu">
<div class="container">
<div class="links">
I hope I copied the sufficient code to show the issue. If needed I can link the website.
The idea is having the links div be scroll-able vertically but without showing the scrolling bar.
Edit: here is the full code: http://www.jcml.pt
Edit2: I was able to fix it (but created another problem as can be seen on my answer).
well...
overflow-y: scroll;
Means if content overflows in y axis (vertical), show a scroll bar. It sounds like this is what your seeing. And that this code worked! (lol)
Try adjusting the height: of the element (or parent element) where this is occurring it may need a few more pixels of space in IE or Firefox to show all of the content in vertical space; as browsers render / read slightly differently (especially if defined as 100% or auto).
Then remove overflow-y: scroll; leave it blank or declare overflow-y: auto; or if your still having an issue trying define your height in pixels or declare a max-height: with the 100% if your still having issues please try to update your question so we can fully understand and provide a JSfiddle demo and / or screenshot.
Since it was working on Chrome I thought I was going on the right direction and searched even more things and found this scheme:
http://blogs.msdn.com/b/kurlak/archive/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari.aspx
I was able to fix it the problem by creating two containers instead of one (but now it doesn't scroll at all - something I'll have to work on later). Code can be seen here: http://www.jcml.pt/3
Is there a way to have buttons that auto-resize to fit its container , in order to have responsive design?
It would be even better I think If there is an approach , not based on media queries (= less code)
Hope the image helps you. Here is the CSS for the button
.formButtonfront {
width: auto;
border:1px solid gray;
border-radius:7%;
float:right;
font-size:0.875;
}
The browser is Chrome in a laptop, just sized down
I want the grey button (placed after the image) to fit the white container
Thanks in advance
PS About the float : I have a clear:both; in the footer. Also even If I remove the float, the result is the same.
UPDATE
Here 's a jsfiddle
So you don't need display: block or float: none, but a max-width
.formButtonfront {
border:1px solid gray;
border-radius:7%;
font-size:0.875;
word-wrap: break-word;
width: 100px; // only for IE8
max-width: 100%;
}
Look at this fiddle (I reduce the size of the content to see how it looks)
make float: none and display: block for that button.
It will make button as container and fit the parent box.
I think it will help you.
button{
width: 250px;
max-width: 100%;
padding: 15px;
}
<button>
Button
</button>
I've applied the CSS sticky footer tutorial that I got from here on my website, but for some reason I can't get it to work?
JSBin
Thanks in advance.
Remove the top margin from #body and replace it with padding:
#body {
width: 1200px;
margin: 0 auto;
overflow:auto;
padding-top: 80px;
padding-bottom: 170px;
}
add 100% height to html (not only body):
html, body {
background-color: #FFF;
margin: 0;
padding: 0;
height: 100%;
}
Full JSBin solution and preview
Did you apply the correct #footer id in your HTML code?
<div id="footer">
</div>
I can not immediatly see what is wrong with your code (it is a lot of css, and you use strange tags like center). I swear by this version of the sticky footer however: http://ryanfait.com/sticky-footer/
Works fine for me and is very much legacy/cross browser compatible. Perhaps this is an option for you...
I've been searching through forums to find a solution for the problem I'm facing and couldn't find any. So here I am, again, asking for remedy.
I have this page which encase personal profile form. That form is enclosed in page container div and is quite long that it requires main scrollbar in order to see those hidden. And there's a footer section at the bottom of the page where copyright statements are displayed.
My problem is I can't find a way to make my page container div to stretch along with the body element. I've applied height: inherit to that div but still it refused to stretch so that it covers till the border of the footer section. Now, there is big gap between the footer and that div filled with body background color. Here's a screencap for better understanding.
screencap
/*Form container*/
#form_container{
width: 600px;
background-color:#FDAE80;
margin-top: 15px;
margin-left: 110px;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
}
body{
margin-top: 0px;
margin-bottom: 0px;
height: 100%;
background-color: #683468;
}
/*Page Container*/
div.mcontainer{
width: 1032px;
height: inherit;
background-color: #ffffff;
}
/*Footer Section*/
div.footer{
width: 1032px;
height: 80px;
border-top: 1px solid #683468;
margin-top: 10px;
text-align: center;
font-family: Arial;
font-size: 12px;
color: red;
position: relative;
bottom: 0px;
background-color:black;
}
Any help would be appreciated.
EDIT Just to clarify, Footer section is inside page container div. Here my html - htm
Try adding a clearing element as the last item in your page container, after all the form elements. Could be <br clear="all" /> or a div with style clear:both.
A better idea - remove the height: inherit; from your mcontainer style. This fixed it for me.
try adding html to the height to:
html, body {
height: 100%;
}
as discussed on A List Apart: http://www.alistapart.com/articles/footers/
Try to use overflow: hidden; on div.mcontainer.
If you have floating elements in your container, try placing clear-both-div at the end of the container div:
<div id="mcontainer">
...code
<div style="clear:both;"></div>
</div>
I had the same problem, now I am using java script (jQuery) to solve it.
In my case it was the div for the menu bar and I calculated the height from the main container plus the height from the header.
$(document).ready(function(){
var h = $(".main").height() + $(".main").position().top
$(".lmenu").css({height:h+"px"})
$(".rmenu").css({height:h+"px"})
});
Right now it seems to make more sense to use the height of the body:
$("body").height()
If there is a version without javascript, it would be interesting to know. But meanwhile this could be a workaround.
Maybe you should try adding: clear: both to footer class