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!
Related
I had big trouble with printing from Firefox (any version, mine is 16.0.2, but even Aurora dev builds did the same).
When printing the page, Shrink to fit in the Print preview doesn't work. Only way, how to fit the page onto the paper is selecting Zoom 70% in the same dialog.
Other problem:
it prints only first page.
What to do?
I needed to adapt the CSS file for printing, so I've done one. It works flawlessly anywhere, but not in Firefox. What was the problem?
First I've tried specifying Width and height for BODY and HTML in the print.css file. Than margins, etc.
Later I figured out what was the problem:
standard CSS file had the following in it:
body {
...
overflow-x: hidden;
overflow-y: scroll;
}
So I've added the following into the print.css file:
body {
overflow-x: visible;
overflow-y: visible;
}
I guess, if you had only overflow specified in the CSS, not -x & -y, you would need to specify only overflow:visible in the print.css file.
Printing from Firefox works now as it should. I just thought, that this may help somebody, who has strange printing behavior happening in Firefox.
In addition to the Kokesh's answer, some times attribute
display: table
generates this problem too. So you need change it to 'block' or another that fits to your requeriments.
I tried the fixes suggested in other answers but they didn't solve the problem for me. After a lot of research and trial & error, I have found this article by A list apart. I was skeptical because it's so old but it states that:
If a floated element runs past the bottom of a printed page, the rest of the float will effectively disappear, as it won’t be printed on the next page.
As I have a big floated container I thought I'd give it a try. So, I made a mix from the other answers and this article and came up with this:
body {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
}
/*this is because I use angular and have this particular layout*/
body > .fade-ng-cloak {
height: 100%;
display: block;
flex: none;
float: none;
}
.l-content,
.l-sidebar {
float: none;
}
So basically:
Setting body to overflow: visible
Setting elements that behave as wrappers to display: block, eliminate all flex styles and reset height if necessary
Eliminate float on long containers
That mix worked for me! I'm so happy I thought I'd share :)
The guy who created the website for my church said there is no way to fix the issue and that we shouldn't worry about it. But I think he's wrong and I'm attempting to fix it myself. My coding background is in C++ and Cobol but not really in CSS. I'm learning though, so any help here would be great.
The site uses Joomla and is here: http://www.anointedesign.com/mtvernon/site2/
It looks good in Firefox and Chrome but in Internet Explorer there is a huge gap at the top between the top header box and the slide show. I believe this is an IE issue in the way it handles negative margin values but I may be way off here and need help.
The entire top nav, logo and seal should be very close to the slide show, to the point where the left seal should overlap the slide show by about 15px.
This css code will fix it:
#horiz-menu {
float: left;
width: 100%;
margin-bottom: -110px;
}
#header-bg > div.wrapper {
clear: both;
}
#showcase-section {
margin-top: 0;
}
The problem is caused by floats and clears inside the horiz-menu div. IE doesn't like divs with that kind of CSS code. :)
I am having problems having "extra space" at bottom of page. in Opera, and firefox. and on IE, sometiems it happens sometimes it doesn't on chrome works fine all the time. I am new to css and html5, and on top of that. haven't done any web design in a lot of time. used to just use tables and old html. the website i'm having problem with is
http://jconstruction.us.cloudlogin.co/index2.php
I tried everything and now i gave up. it is a modified template the templates works well in all browsers so my guess is is some of my modification. the template where i having problem is from here http://www.jonathansconstruction.com
if anyone can help will be glad.
Thanks in advance I am really needing this spent lot of time with no success
Edit
Thansks a lot for all the HeLP ..... I did manage to fix the problem on most browsers, However, still having a hard time on IE, if anyone can help will be greatly appreciated (already about to pull my hair out ) lol.. I even tried validating. and although some errors, i tried taking the errors aout and still, same result.
This is because you might have used top:-***px; in the CSS for any <div>. Try using absolute positioning.
I found the issue, set this property
.ui-datepicker
{
position:absolute;
}
To do this, I usually create two parts to the page:
<body>
<div id="main-part"></div>
<div id="footer"></div>
</body>
Then style it:
#main-part { height: 100%; padding-bottom: 110px; }
#footer { height: 100px; margin-top: -100px; }
Try using fixed headers and footers in a div with the 100% height, so that the space will not mess up in any browsers. If you can try over position:relative also and try setting margin-top values for the space.
I also had the same issue. I found the solution by making change in the CSS:
.Zebra_DatePicker.dp_hidden {
visibility: hidden;
filter: alpha(opacity=0);
-khtml-opacity: 0;
-moz-opacity: 0;
opacity: 0
}
Instead of visibility: hidden; use display:none; and it will work perfectly.
I researched this problem already, heres what I know: It's most likely a CSS issue. Most answers pointed to removing "overflow" code in the CSS However, I don't have any code like that in my CSS. It seems like the CSS on my website is a bit more complex than the websites that were used in the questions I researched.(I did not do my own coding, I'm just a lowly designer!)
Anybody have any idea why this is happening?
Website: www.100apparel.org
Thanks so much :)
PS: I'm also having a problem with my slide show on the main page displaying in chrome. Anybody have any idea why that is happening?
Just wanted to add something That I found, the height: 100; solution didn't work for me, and what I actually found is an Windows 8 (IE 10, even rendering in older modes), is the cause of the issue. This behaviour is controlled by:
-ms-overflow-style:
Listed here: http://msdn.microsoft.com/en-gb/library/ie/hh771902(v=vs.85).aspx
consider putting this in your CSS to force the vertical scrollbar:
html {
height: 101%; /* setting height to 101% forces scroll bar to display */
}
your css code looks like this...
div.wrapper {
background-color:#F8F8F8;
width: 924px;
_width: 924px;
margin: 0 auto;
}
change it to this see if that helps...
div.wrapper {
overflow: auto;
background-color:#F8F8F8;
width: 924px;
margin: 0 auto;
}
HTML:
<td align="center" width="100%">
<a class="Forum_ib_moderate" href="Default.aspx" title="Moderate"></a>
<a class="Forum_ib_admin" href="Default.aspx" title="Admin"></a>
...
CSS:
A.Forum_ib_moderate:link, A.Forum_ib_moderate:visited, A.Forum_ib_moderate:active, A.Forum_ib_moderate:hover
{
background-image: url(images/ib_moderate.png);
background-repeat: no-repeat;
background-position: center;
padding-left: 2px;
padding-right: 2px;
padding-top: 8px;
padding-bottom: 0px;
height: 35px;
width: 35px;
display:table-cell;
}
A.Forum_ib_admin:hover
{
background-image: url(images/ib_admin_hover.png);
}
the menu looks just fine in IE, shows up vertical in Firefox. If i turn off "display:table-cell;" style in Firebug and then turn it back on, it fixes that menu node.
any ideas?
p.s.: i don't want to mess with the menu itself, since it's a part of a DNN Forum 4.4.3. I'd rather fix the CSS to make it show correctly.
Actually I think you'll find that IE works because it ignores display: table-cell. Display: table-cell is actually you're problem.
What I'm guessing is happening is that IE is reverting those to be inline element, hence horizontal.
Change it to:
display: inline;
add some padding (left and right) as necessary and you'll get what you want.
Alternatively you can float them (left and/or right).
Besdies, they're already in a table cell. Table cell display inside that is a bit wrong.
We've run into this issue as well. Still looking for a solution. In our case, we need to keep display: table-cell layout.
It appears Firefox sometimes and seemingly randomly, will cause table-cell objects to wrap rather than act like an actual table. A REFRESH fixes it, which just makes it that more difficult to bug fix.
Seems to be a simple FireFox bug. I encountered the problem the other way around: The DIVs with table-cell arranged below each other after the refresh in FF 3.5.9 on Win XP.
I was not able to not find any solution (wrap the cells into a row, overflow hidden, etc) but to update FireFox to 3.6.3 and hope there are few users with that version.
This sounds similar to a firefox reflow bug that I'm trying to fix as well. Apparently tables are really bad for rendering, since they cause a reflow and it seems that Firefox sometimes misses the reflows.
I found the following pages to be helpful:
http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
http://www.mozilla.org/newlayout/doc/reflow.html