I'm working on this website.
If you open it on Chrome everything is displayed as intended.
At the footer of the website, you will see 8 logos which fit perfectly.
If you open it using Mozilla Firefox, the logo list extends beyond the website container.
Below are the 2 pictures -
Chrome :
1
Firefox :
The logos are inside a ul as list items
and the CSS is like this
.clients ul {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
display: table;
}
.clients ul li {
display: table-cell;
}
How should I fix this?
This is actually a difference in how the images' widths are calculated inside of the table, and not the table elements themselves.
Tables make sure that all content is visible, so if it cannot shrink or wrap its contents then it expands past 100%. Chrome figures out that the images can shrink and adjusts the table width thereafter, while Firefox uses the full widths of the images to calculate the width of the table.
Almost ironically, setting width: 100% on the images will force Firefox to behave in the same fashion as Chrome.
Edit: As a footnote, your "table" structure isn't completely right. It doesn't seem to cause any layout issues in this particular case, but you should make sure to always have the proper table > tbody > tr > td hierarchy to prevent weird behaviour.
make table-layout: fixed
.clients ul{
table-layout: fixed
}
if you want all eight logos in the row you could give them a fixed width of 12.5%
otherwise set
.img-responsive{
display: block;
width: 100%;
/*max-width: 100%;*/
height: auto;
}
Related
I'm using a 3rd party full-screen slider on the homepage of this website. The images inside each slide are set to be no larger than 75% width, and it seems to work in Safari and Chrome, but not in IE (11) or Firefox.
Any ideas what's going on with this one?
http://www.communitychurchbunnell.com
Set your width to make it work with IE
#main-content #fullpage .section img, #main-content #fullpage .slide img {
width: 100%;
max-width: 75% !important;
}
Also, !important is not necessary.
EDIT
the .fp-tableCell div is being set to the width of the image within.
In the file jquery.fullpage.min.js add max-width:100vh to fix the problem:
.fp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
max-width: 100vw;
}
Apparantly there seems to be an issue with max-width on images inside tables/cells in FF and IE (haven't tested others), but the way I ended up fixing this issue was adding table-layout:fixed; to the element that was set as display:table
http://www.remotegoatdesign.com/sayhey/pages/edit-valentines-marc-card.html
Doing this site for an assignment due tomorrow. In the proccess of making it responsive.
I am having an issue with the last color block, although its put into its container using percentages, it keeps moving out. In chrome its outside it straight away, whereas in Firefox its only when I resize. Although the difference is only a few pixels, so I'd assume its to do with the monitor size.
Any ideas guys? I'm stumped.
Try add this code snippet into your css file.
#tab-1 > div > div
{
width: 8%;
}
You can change the width.
Good Luck!!
Try using property " display:inline-table " for the class color_container
and give margin for the smaller color divs for space inbetween
try putting slightly smaller percentages(in the color block) and test it until it looks good. also it fits right in wider monitors as you say, because you have one css, that is best for wide screens. the point of responsive design is to have more than one media queries if the one you have breaks the design in smaller screens. so either make the color blocks really small, or myou should make more media queries
Your issue here is display: inline-block;. When you use it, it adds an extra space between elements. If you want to sort out this, you have 2 fixes:
a) negative margin-right
.box {
display: inline-block;
width: 8.74%;
height: 100%;
margin-right: -4px;
}
b) font-size: 0; on the container and default font-size on the elements inside
.color_container {
width: 98%;
height: 60px;
min-height: 60px;
padding: 5px;
background-color: #fff;
font-size: 0;
}
.box {
display: inline-block;
width: 8.74%;
height: 100%;
font-size: 1em; /* or what is your default font-size */
}
What is the best no JS way (most commont browsers friendly) to achieve this?
I have found a few related questions & answers:
width: 100% / number_of_li-s_in_ul;
http://jsfiddle.net/qx4WG/ ("static" calculated size for each li) - unable to use due different sizes of li
li {display: table-cell;}
UPDATE: http://jsfiddle.net/jwJBd/1035/ -> works good, but I'm also using sub-menus and position: relative; doesn't work here to position the sub-menu below current li. When position is set to static it enlarges the parent LI every time it's set to display:block;
display: box;
never used it before, just read a few articles and it looks like the browser support is minimal
If i understood your question correctly, you want to display evenly menu elements like a table would do AND be able to display css sub-menus using absolute and relative positioning.
Your jsfiddle was close, the only thing i had to fix was the positioning of the sub-menu
.sub-menu {
display: none;
/*left: 0;*/ /* i removed this */
position: absolute;
/* PLAY with this */
}
jsFiddled here
[post edit]
It would also be relevant to set your <li> parent with a table-layout:fixed property. This way, <li> will be set to equal width.
#horizontal-style {
display: table;
width: 100%;
table-layout:fixed; /* try this */
}
Using the display:table and display:table-row CSS attributes, I want my content to fill the remaining available height of a div. In case the content exceeds the available height, I want a scrollbar to be shown.
Here's the fiddle: http://jsfiddle.net/3HYJx/2/
The behaviour as shown in Google Chrome and Safari is the one I'm trying to achieve. However, Firefox and Opera show it differently. Haven't tried IE yet, but fearing the worst.
Why is this behaviour so different? And even better: how can I achieve what I want (as shown in Chrome) in every browser?
Thanks a lot in advance.
Chrome and Safari:
Firefox and Opera:
Using the table display properties, you could overcome the firefox problem by wrapping two more elements around the text of the scrolling section, so you have three:
the outer one is a table-row container that fills the rest of the table
inside which we have a relatively positioned container with height and width set to 100%, and with set vertical scrolling overflow-y:scroll;
the innermost container is absolutely with height and width also set to 100%
So here I just quickly added two div containers around your content paragraph (you could probably found a more appropriate set of containers according to your needs, but this will do for the illustration):
<div id="wrapper">
<h2 id="date">Date</h2>
<h1 id="title">A title ...</h1>
<div id="contentbox-outer">
<div id="contentbox-inner">
<p id="content">The content ...</p>
</div>
</div>
</div>
And your whole CSS has to be modified. Your original selectors, with slight modifications:
#wrapper {
position:absolute;
display: table;
table-layout:fixed;
background-color:black;
padding:10px;
width: 250px;
height:350px;
border-spacing:20px;
}
#date {
display: table-row;
font-weight: normal;
font-size: 25px;
background-color:yellow;
}
#title {
display: table-row;
font-weight: normal;
font-size: 40px;
line-height:90%;
background-color:blue;
}
note that the table-row and table elements take now speciffinc styling for tables, like the border-spacing property that sets spacing between the table rows, and this you can now combine with the padding property of the table for the appearance you want.
And the styling for the added containers would be something like this (first is still based on your styling, the last two are the additional - inner ones):
#contentbox-outer {
display: table-row;
font-size: 12pt;
width: 100%;
height:90% !important;
text-align: justify;
background-color:red;
overflow-y: scroll;
}
#contentbox-inner {
position:relative;
height:100%;
width:100%;
overflow-y:scroll;
}
#content {
position:absolute;
height:100%;
width:100%
}
I also updated your fiddle for a quick check:
http://jsfiddle.net/3HYJx/7/
Edit: This works in browsers like Firefox, Chrome, Safari, but for example not in Opera cause height: 100% does not get rendered in documents in strict mode. So with a little more research I found out that you can get it to work in quirks mode, here is a test html - the above code but in a quirks mode document. Thanks for giving me a reason to learn that, it's good to know =)
Working fiddle: http://jsfiddle.net/3HYJx/3/
The problem is height:90% !important; you have set on #content.
You have fixed heights set on #wrapper, #date and #title.
If you set a fixed height on #content (since you have everything else with fixed height, so this won't be a problem) you will get the expected result in FireFox too.
Here's the page: http://www.thresholds.org.uk/museums-collections-poets/kettles-yard/
It looks great in Chrome even when you resize the browser, everything looks great. However, in Firefox, columns overlap one another and images don't resize.
The main grid classes are .c-1 (the smaller width column) and .c-2 (the width of two .c-1 columns). Whats going on in my code to cause this problem?
For quick reference, I'm using CSS3 box-sizing: border-box for my grid, here's the code for my .c-1 and .c-2 classes:
.c-1 {
width: 288px;
float: left;
margin-left: 28px;
display: block;
}
.c-2 {
width: 604px;
float: left;
margin-left: 28px;
display: block;
}
.c-1:first-child, .c-2:first-child, .c-1:nth-child(4n+1) { margin-left: 0; }
I'm also using the following code for responsive images:
img {
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: middle;
max-width: 100%;
height: auto;
margin-bottom: 1.875em;
}
EDIT Ok I've seemed to have fixed the responsive images for most sections now. A classname of .active was missing a width value but I've still got a crazy problem with the Blog section. Even though the same layout has been used on that page (.c-1 and .c-2 inline together) this section seems to overlap one another...odd!
Ok well it seems Firefox doesn't like calculating widths of elements when these elements don't have a width specified, which explains why responsive images were not working. An image set to max-width must have a container with a set width otherwise images won't scale.
I thought browsers defaulted elements to 100% width, if a width hasn't been specified in the CSS?
Anyways, all fixed now. Put widths on your wrappers people!