This is the first site I have built with Gumby and I am something of a beginner when it comes to web design in general.
I have been scratching my head for hours now about why my site shows up perfectly in Firefox and Safari, but is a chaotic mess in Chrome. It looks like every set of columns are showing up as block elements, whilst the navbar isn't showing up at all...
I ran it through the W3C html validator and it informed me that the hgroup tag has been abolished, but that shouldn't mess up the page so much, should it? And most of all, not only in Chrome?
Possible causes:
In an effort to make the site non-responsive while I develop that aspect of things, I removed the breakpoints and messed with some of the settings in _var.scss / Probably the most likely reason but I don't know what is affecting it in this way.
I've used the row as a wrapper around the header and section parts.. Could this be messing with the way columns are displayed somehow?
In the header part I used #include columns(6) to include the columns in the html without creating another div. Does Chrome not like this?
This is the link to my site: http://work-in-germany.eu/
As you can see, it looks fine in Firefox and Safari, but not in Chrome.
THANK YOU so much for any help!
Tom
Wow, it really is a mess in Chrome! But not unmanageable.
First of all, you should wrap the whole page. This to center the content. For example:
HTML:
<body>
<div id="page_wrap">
-- Your content (rows etc.)
</div>
</body>
CSS:
.page_wrap {
margin: auto;
width: 980px;
}
As for the rows. Add the following to the css classes:
CSS:
.index_section .row {
overflow: hidden;
padding: 15px 0;
}
.index_section .img_box img {
float: left;
margin: 0 15px;
max-width: 280px;
}
Sorry, due to lack of time this was all I could do right now. Good luck!
http://metagraf.github.io has been behaving well in all tested browser until IE10 came along. The top menu is overlaying the entire page when viewed in IE10.
A screenshot of how the page looks in IE10 can be seen here: https://dl.dropboxusercontent.com/u/2897577/ie10.png
Any ideas on how to fix this?
regards Oskar
So when I run the site in question in IE 10, yes indeed, the top menu does look buggy in IE 10.
The immediate source of the problem is the img in the navbar.
If you hit F12 and use IE's developer toolbar, and then if you set the width property of the img from auto to just being un-checked (so that auto is no longer the value, the site all of the sudden looks normal.
Digging deeper into the issue, here's the css setting for img in bootstrap:
img {
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Ok, so what in the world is width: auto\9?
Well, looks like it is an IE hack, but a hack that does not apply to IE 10.
CSS \9 in width property
http://www.paulirish.com/2009/browser-specific-css-hacks/
So as a quick fix, I suppose one thing you could do would be to set a custom css property
on the img in the navbar that is exact about the width of the img.
I currently have a search "button" that I made sit on the side of a textbox, as shown in the picture below, this renders fine in chrome and firefox.
In IE9 it renders like this.
Has anyone ran into a similar problem? How can I get around this?
The CSS for the search button is:
.txtSearchBtn
{
display: inline-block;
width: 16px;
height: 16px;
position: relative;
left: -20px;
top: 5px;
cursor: hand;
cursor: pointer;
background-image: url(../Images/magnifier.png);
}
EDIT: The error seems to have something to do with my page being rendered inside of a fancybox. IE9 is not treating inline-block the same way outside of the fancybox.
EDIT 2: Figured out the problem. My max-width setting doesn't have enough room for the textbox and the image, even though I'm moving the image -20px to the left, so IE renders it on the line above.
IE support for inline-block got a lot better in IE8+. This sounds like you are rendering in compatiblity mode, which basically means render this page like you are IE7 (or worse - Quirks mode).
Are you declaring DOCTYPE? try adding this to the top of your html file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
This should force it to use IE9 rendering which can do inline-block correctly.
This is a problem due to IE being unable to recognize the attribute
display: inline-block;
IE explorer will display it inline, and to achieve the desired effect you need to give the content 'Layout' using
zoom: 1;
display: inline;
or similar.
This article was helpful to me, check it out to fully understand what I'm trying to say!
http://flipc.blogspot.co.uk/2009/02/damn-ie7-and-inline-block.html
EDIT: If you are ONLY trying to cover your back as far as IE9 and no less, then #Porco has that covered with the correct DOCTYPE declaration.
*I'm re-posting this question because I only got one response before, and it didn't work. Hopefully someone new will see this and know what to do! *
I'm using IP Net Renderer to view my newly installed forum (http://www.datesphere.com/forum/) in IE7. If you care to take a look, you can see the forum is overflowing its containing element (it's wider than the 960px container I have for my entire site).
I've tried adding overflow:hidden to the .wrapper class as well as width:100% to .tborder per advice received on StackOverflow, but it didn't work.
The forum renders correctly in IE8+, FF, Chrome and Safari, but not IE 7. Does anyone know how I can fix this?
If you use IE9/8 and run the Developer toolbar you will notice that the global.css that is being generated is different for IE7 from IE8. Take a look at what is generating that Style Sheet for you and see if you can modify it to make the MIN-WIDTH:930px; or MIN-WIDTH:100%;
Or a second option add somewhere after the glboal.css style sheet a inline-style or on page css or link another style sheet .wrapper { MIN-WIDTH:930px !important; } or .wrapper { MIN-WIDTH:100% !important; } so that it overrides whats generated in the global.css file.
IE7:
.wrapper {
MIN-WIDTH: 970px; MARGIN: auto; WIDTH: 85%; MAX-WIDTH: 1500px
}
IE8:
.wrapper {
MARGIN: auto
}
Change your min-width value for your wrapper class. You can set an static width or set it to 100%.
Remove #wrapper div
And set IE7 specific .tborder {display:inline-table}
I'm working on a printable list of events, the printer prints one page fine, but cuts off some of the text on the bottom, then it print a second blank page
I've tried everything I know but am at a loss.
In print.css, set overflow: visible instead of overflow: auto on div#content. That fixed it for me in Firefox at least. The definition of overflow auto is: "If overflow is clipped, a scroll-bar should be added to see the rest of the content" -- but scroll bars don't exist on printed pages.
I'm guessing that since the content div should span across multiple pages, the browser thinks "you're flowing outside your container and must be clipped with a scroll bar". The container in that case is the first page the content div appears on.
I know this is an old question but here's another, newer way this can happen.
Check if you're using display: flex; on the clipped element. It was the problem for me, setting it to block fixed it.
I found that setting display: inline on container divs also helped. Some of these great answers here have worked for me in certain situations while in others no.
<div class="container">
<div class="content-cutting-off-here">
Some long text that gets cut off at the end of the page...
</div>
</div>
Most people set containers to display block or inline-block. For me it was cutting off text, and setting it to inline circumvented that. This also makes width and height irrelevant for the offending container div; which I have found to be a nuisance when printing.
#media print {
.container {
display: inline;
}
}
Here is a great article that helped me with this solution.
If any of the containers you're trying to print are floated, they'll get cut-off like you're seeing.
In your print.css, make sure you turn off all the floating that you can without destroying your layout. It's a pain, but browser support for printing is weak at best.
Are you already using the print value for the media attribute for your stylesheet like
<link rel="stylesheet" href="print.css" media="print" />
You might also want to use page-break-before attributes for elements that you don't want to break.
I just resolved this problem in ie7. This was in a Sharepoint project, which had various table cells and/or divs set to height:100%. When printed, it would print long forms, the first page or 2 would print as usual, then blank pages instead of the rest.
In my print stylesheet, I set those tables & divs to height: auto, and now it prints fine.
I'm having a different problem in IE8 now. UGH!
if overflow:visible; not works, try overflow-y:visible;
(i had body{overflow-y:scroll;}, and body{overflow:visible;} in print.css not rewrited it...)
I fixed the problem by adding overflow:visible; and give it padding-right: 30px; to substitute for the scroll bars width.
I just ran into this issue and have been scouring the internet for a solution that fit my specific needs. In my case I had about 7 tables nested in a larger table. The only way I was able to get the entire web page to print and display in print preview correctly was to use page breaks. Page breaks are CSS properties that allow you to specify and/or force page breaks by attaching the property to block elements.
https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-before
just setting display: inline solved my same problem.
Reference link I got, https://www.bennadel.com/blog/851-fixing-divs-that-cause-content-truncation-when-printing.htm
I setup my print sheet to only print the modal content. My fix was to make the modal position: absolute;. My modal was originally position: fixed;.
For me setting overflow:visible; for body solved the problem.
body {
overflow: visible;
}
I've had this issue to. In my case, this was due to an
position: fixed;
Element. I changed this to
#media print{
position: relative;
}
Now I even see new elements that were behind my fixed element, and no cutting off at the bottom anymore.
If the items on the page are getting partially cut off, adding an :after element of 10px did it for me.
<div class="print-row">
<div class="print-items">
<div class="print-item"></div>
<div class="print-item"></div>
<div class="print-item"></div>
</div>
</div>
.print-items {
page-break-before: auto;
page-break-after: auto;
page-break-inside: avoid;
}
.print-item {
break-inside: avoid;
}
.print-item:after {
position: relative;
display: block;
min-width: 100%;
height: 10px;
width: 100%;
content: "";
}
for me, the issue was this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
which putting any value other than 1 for initial scale solves my problem:
<meta name="viewport" content="width=device-width, initial-scale=0.8"/>