Here's the situation: my WordPress Gallery looks fine in Firefox, Safari, etc. but running on IE (under Windows), the the last image in the gallery wraps to the next line.
So far, I've tried adjusting the gallery width, padding, inline, block, and changing the number of columns to no avail. There is plenty of room on the row to fit the images.
Here's what I think are the pertinent CSS bits:
#gallery-1 {
float: right;
height: 70px;
margin: 1px;
padding-bottom: 20px;
width: 480px;
}
.gallery-icon {
width: 55px;
padding: 3px;
margin: 0;
float: left;
}
.gallery-columns-7 {
padding: 0;
margin: 0;
}
.gallery-item {
float: left;
margin: 3px;
padding: 0 2px 0 0;
width: 55px;
}
Anyone have any ideas?
Fix this
<dl class="gallery-item">
{
margin-right: 3px;
margin-left: 3px;
}
Either change it to 1px or delete them or delete just the right or left margin in the styles.css line 1219
Try setting overflow: hidden; in your .gallery-item class.
Related
I have a title and subtitle displaying in a div.
I am facing an issue when either of the title or subtitle are longer they get mixed up otherwise with shorter titles and subtitles its not an issue.
To display the title my css is
.sch-task-name {
margin: 5px 0;
}
and to display subtitle
.sch-tool-text-activity {
position: relative;
top: -44px;
font-size: 13px;
margin-left: 1px;
color: blue;
}
.sch-task-inner {
height: inherit;
overflow: hidden;
padding: 27px 2px 7px 8px;
}
.sch-tool-ct {
float: left;
width: 100%;
margin-top: 7px;
padding-right: 20px;
}
html
<div class="sch-task-inner">
<span class="sch-task-name"> Ticket Under Needs Information 2</span>
<div class="sch-tool-ct">
<span class="sch-tool-text-activity">Kanban Deliverable</span>
</div>
</div>
Here sch-task-name displays title and sch-tool-text-activity displays subtitle.
I am new to css and dont know much of it.
Would appreciate any help!Thanks in advance!
If your goal is to get sch-task-name to display underneath sch-tool-text-activity without rearranging the content in the HTML, then you may want to use the order property of flexible items.
You'll need to set the parent container's display to 'display:flex' first. Then, since you want them to stack, you'll have to allow the items to flow onto multiple links by setting 'flex-wrap:wrap' (still on the parent container). Lastly, you'll set the order of the spans to 'order:1' and 'order:2' to rearrange their order, with '1' displaying first.
Updated fiddle: https://jsfiddle.net/ph0rn16w/1/
.sch-task-name {
margin: 5px 0;
font-size:20pt;
order:2;
}
.sch-tool-text-activity {
position: relative;
//top: -44px;
font-size: 13px;
margin-left: 1px;
color: blue;
}
.sch-task-inner {
height: inherit;
overflow: hidden;
padding: 27px 2px 7px 8px;
display:flex;
flex-wrap:wrap;
}
.sch-tool-ct {
float: left;
width: 100%;
margin-top: 7px;
padding-right: 20px;
order:1;
}
I have made a simple example here ->http://jsfiddle.net/Tryah85/DV4N8/
#contactContainer {
background-color: #999;
float: left;
font-weight:900;
text-align:center;
margin: 0 auto;
}
.contactLeft {
position:relative;
margin:auto;
background-color:lime;
float: left;
margin: 0 0 0 0;
width: 230px;
border-left: thick solid #006;
padding-left: 33px;
height: 100px;
}
.contactRight {
position:relative;
margin:auto;
background-color:yellow;
text-align:right;
float: left;
width: 230px;
border-right: thick solid #006;
padding-right: 33px;
padding-top: 10px;
height: 90px;
}
I am using the standard theme this year- twentyfourteen. I want two boxes to work responsively when the screen is minimized, box B falls under A like has done in the mockup fiddle I made. I have tried nesting 2 classes inside of an ID. From this example you will notice I used three IDs instead.
I embedded the CSS within the Wordpress page and it only recognizes the first Div.
Basically I am making a contact page with the left div having an address, and the right to have contact information. When a person with a smartphone/iPhone views the page the boxes are stacked- my example works, but not in Wordpress. Anyone know why?
I finally figured this out. CSS can be embedded within a page (when loading static strings into the dashboard). It only works when there are no empty spaces between classes and IDs. This not important in other CSS files I have worked with, but this took me a while to figure out.
Enter like this:
<style type="text/css">
#contactContainer {
background-color: #999;
float: left;
font-weight:900;
text-align:center;
margin: 0 auto;
} <---------NO SPACE
.contactLeft {
width: 230px;
border-left: thick solid #006;
padding-left: 33px;
height: 100px;
} <---------NO SPACE
.contactRight {
text-align:right;
float: left;
width: 230px;
border-right: thick solid #006;
padding-right: 33px;
padding-top: 10px;
height: 90px;
}
</style>
I have tried multiple methods found on this website, and nothing seems to help.
I am trying to center 2 divs that are floating left and right in a container that has a 100% width.
CSS Snippet:
#body-container {
background: none;
height: 100%;
width: 100%;
margin: 0 auto;
}
#body-inner {
float: left;
width: 550px;
left: 325px;
margin: 0 auto;
background: none;
padding-top: 3%;
padding-left: 10px;
padding-right: 10px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
#bodybox {
margin: 0 auto;
width: 200px;
height: 100%;
right: 325px;
background: none;
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
}
You need to do some research about how floats work, because I think you have the wrong idea. Floating one div left and one right, there is no way to center them, because they are floated. The left and right properties don't work unless the element is positioned (absolute, fixed, or relative with some implications). Also, it looks like you're trying to get the right edge of #bodybox to line up with the left edge of #body-inner. This won't work, because the right property is calculated from the right edge of the screen, not the left edge. Also, you're mixing fixed box dimensions with a fluid container width. This is fine, if you account for what happens to them when they collide.
If you're just trying to align the two <div> beside each other, centered on the page. In this case, inline-block is probably your friend. There are numerous implications and workarounds regarding white space, font sizes, order of content, etc., but essentially you would do:
#body-container {
width: 100%;
text-align: center;
}
#body-inner {
width: 550px;
}
#bodybox {
width: 200px;
}
In the above, the two <div>s would sit next to each other as long as the container is wide enough, once the container is too small, they will display one before the other, each centered in the container.
Could this be what you're looking for? Click here...
If I understand your question, you're trying to center a <div> that has 2 more <div> parents...
Code Snippet:
#body-container {
background: none;
height: 100%;
width: 100%;
/*margin: 0 auto;*/
/* testing border and height, could be deleted */
border: solid;
height: 500px;
}
#body-inner {
width: 550px;
margin: 0 auto;
background: none;
padding-top: 3%;
padding-left: 10px;
padding-right: 10px;
/*border-left: 1px solid #000000;
border-right: 1px solid #000000;*/
/* testing border and height, could be deleted */
border: solid;
height: 400px;
}
#bodybox {
margin: 0 auto;
width: 200px;
height: 100%;
/*right: 325px;*/
background: none;
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
/* testing border and height, could be deleted */
border: solid;
height: 400px;
}
I've been doing a site for tafe and I've gone over different ways to do this and none of them have worked so far. I am trying to add a button image to a list menu using div id but it just seems not to be working. This demo page is a online version of my page, Image menu is suppose to be on the left hand side with the text over it.
I am trying to put a image in a unordered list as a background image and it doesn't appear to be working.
I am trying to put it in this part of the css at the very ened
#navcontainer ul {
padding: 0px;
margin-left: 0px;
list-style-type: none;
width: 200px;
display: block;
line-height: 34px;
background-image: url(images/pg_menu_bg.png);
}
Here is my html and my css:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation"><ul><li>HOME</li><li>NEWS</li>
<li>
CONTACT</li><li>ABOUT</li></ul></div>
<div id="leftcolumn">
<div id="navcontainer">
<ul>
<li>Upcoming Events</li>
<li>Members</li>
<li>Specials</li>
<li>Who is Snap Nature</li>
</ul>
</div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
CSS:
#charset "utf-8";
* {
background-color: #6FF;
margin: 0px;
padding: 0px;
}
#wrapper {
background-color: #F90;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header {
background-color: #6F0;
height: 124px;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#navigation {
background-color: #F3F;
float: left;
height: 25px;
width: 960px;
}
#leftcolumn {
background-color: #009;
float: left;
height: 350px;
width: 250px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#content {
background-color: #69F;
width: 710px;
float: left;
height: 350px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#footer {
background-color: #F00;
clear: both;
height: 25px;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#navigation ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 960px;
height: 0px;
}
#navigation li {
float: left;
background-color: #F3F;
}
#navigation a {
line-height: 25px;
text-decoration: none;
color: #000;
background-color: #F3F;
display: block;
text-align: center;
vertical-align: middle;
width: auto;
padding-right: 10px;
padding-left: 10px;
padding-top: 0px;
padding-bottom: 0px;
height: 25px;
}
#navigation a:hover {
color: #999;
text-decoration: none;
}
#navcontainer ul {
padding: 0px;
margin-left: 0px;
list-style-type: none;
width: 200px;
display: block;
line-height: 34px;
background-image: url(images/pg_menu_bg.png);
}
Please help TY
Jared
Edit:
Yes, this is exactly the problem. I just checked the link you posted, and the browser is looking for an image located at: http://www.156.onl.checit.info/CSS/images/pg_menu_bg.png - which doesn't exist.
See that "CSS" in there? I'm 99% sure that's unintentional. It's an absolute/relative path issue. Read on...
if your image is not appearing I'm gonna go out on a hunch and say it's because your image paths are messed up.
Solution:
This:
/* ABSOLUTE PATH solution */
background-image: url(/images/pg_menu_bg.png);
or maybe even this (depending on your file structure):
/* RELATIVE PATH solution. This is FROM YOUR CSS FILE.*/
background-image: url(../images/pg_menu_bg.png);
Explanation:
There is a big difference between:
background-image: url(images/pg_menu_bg.png);
and
background-image: url(/images/pg_menu_bg.png); /* note the leading slash */
The leading slash means an absolute path (ie. "path from your root domain url"), whereas no leading slash means a relative path (ie. "relative to the location of this file, in this case, your CSS file").
That means, presuming you have a file structure like this:
root
|
----images
| pg_menu_bg.png
|
----css
| mycss.css
from your css file, calling:
background-image: url(images/pg_menu_bg.png);
actually results in:
http://yourdomain.com/css/images/pg_menu_bg.png /* note the "css" */
whereas calling:
background-image: url(/images/pg_menu_bg.png);
results in:
http://yourdomain.com/images/pg_menu_bg.png
So I think you need to have a look at your directory structure, and work from there. My guess is you need to use absolute paths.
But if you wanted to use relative paths with the dummy file structure above, you can use:
background-image: url(../images/pg_menu_bg.png); /* ".." means "parent directory"
More info:Using relative URL in CSS file, what location is it relative to?
Second problem:
You have another issue, this style:
* {
background-color: #6FF;
margin: 0px;
padding: 0px;
}
This style applies a blue background TO EVERY ELEMENT. So even if your paths to that background image are ok, they're being hidden by foreground elements with blue backgrounds.
Try change * to body:
body {
background-color: #6FF;
margin: 0px;
padding: 0px;
}
Note: if you actually want a margin:0; and padding:0; on every element, leave the above style as you had it (but remove the background-color), and define a new body style and put the background-color in there instead. Like this:
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #6FF;
}
It's actually two part question regarding my simple page (that will be replaced some day with real content), HTML+CSS boilerplate used there for vertical centering and IE7.
http://engitize.net/
Can anyone provide detailed explanation why the page is displayed correctly in non-IE browsers (Chrome, Fx, Opera), almost all semi-recent to recent IEs (IE5.5, IE6, IE8, IE9), but not in IE7?
I am especially interested in: it works in IE6, yet it doesn't work in IE7, because... kind of explanation.
What should be changed to make div#c properly centered vertically in IE7?
I am using specific height for div#c, but used boilerplate is height-agnostic and fix should preserve this feature.
Spoiling other browsers is not an option, unless it's IE5.5 (ok, IE6 too, but only if it is really unavoidable).
Changing <!DOCTYPE html> and turning IEs into quirks mode is also not accepted (and it's a pretty bad practice for newly developed pages).
If you don't have IE7 (just as I), you can visit http://ipinfo.info/netrenderer/ or http://browserling.com/, paste URL there and choose IE7 to see the problem yourself.
Because the page will change after accepting some answer, I'm providing snapshot of relevant HTML and CSS parts from it (with logo URL changed to be absolute).
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
html, body { height: 100%; }
body { background-color: #fff; color: #000; margin: 0px; padding: 0px; }
div { margin: 0px; padding: 0px; }
#outer { position: relative; width: 100%; height: 100%; overflow: visible; }
#outer[id] { display: table; position: static; }
#middle { position: absolute; top: 50%; width: 100%; text-align: center; } /* for explorer only*/
#middle[id] { display: table-cell; vertical-align: middle; position: static; }
#c { position: relative; top: -50%; } /* for explorer only */
#c { width: 385px; height: 120px; margin-left: auto; margin-right: auto; }
#c { background-image: url(http://engitize.net/engitize.png); background-repeat: no-repeat; background-position: center top; }
#c div { position: relative; top: 100px; width: 100%; color: #666; font-weight: bold; font-family: serif; font-size: 12px; text-align: right; }
#footer { width: 100%; text-align: center; height: 15px; padding: 5px 0 0 0; margin: -20px auto 0 auto; border: 0; background-color: #def; }
#footer div { padding: 0px 5px 0px 5px; text-align: right; font-size: 10px; font-family: sans-serif; }
a { text-decoration: none; color: #006; }
a:hover { color: #00c; }
p { margin: 0px; padding: 0px; }
</style>
</head>
<body>
<div id="outer"><div id="middle"><div id="c"><div>
because history is important!
</div></div></div></div>
<div id="footer"><div>
<p style="float:left;"><strong>Przemysław Pawełczyk</strong>'s imprint | Coming in 2012!</p>
<p style="float:right;">Przemoc's network</p>
</div></div>
</body>
</html>
your Q#1 has been answered by #thirtydot, IE7 and below does not support the CSS table properties so another way has to be found for them. and his absolute positioning technique is usually the preferred way to do this as most times in a scenario like this (splash page?) the width and height of the centred content would be known.
addendum to above per comments:
In answer to why it was working in IE6 and not IE7 even though IE6 doesn't support the table properties either, IE7 was actually picking up the position: static rule from the #middle[id] {} rule - IE7 does understand this type of selector so this means the later absolute/relative positioning was not working the same as it was in IE6
Taking the above into account redoing the CSS to make sure IE7 and 6 got the same CSS and that it was placed later in cascade to override the "good" CSS it turns out the the positioning method is height agnostic too, in the comments there are various links to to test this, but here is the final working version:
Hybrid table cell/positioning method : here
That fiddle does include the image width and heights, but if you remove them and the positioning for the "sub text" it does (or should) show that whatever is in the middle does stay centered
HTML used is the same as the bottom of this answer.. minus the extra <i></i> element
CSS:
html, body { height: 100%; margin: 0; padding: 0;}
body { background-color: #fff; color: #000; }
#outer {
position: relative;
width: 100%;
height: 100%;
display: table;
}
#middle {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#c {
width: 385px;
height: 120px;
margin: 0 auto;
background: url(http://engitize.net/engitize.png) no-repeat 50% 50%;
}
/**** for IE7 and below ****/
/* hacks but there is another method below */
#middle {
*position: absolute;
*top: 50%;
*width: 100%;
*text-align: center;
}
#c {
*position: relative;
*top: -50%;
}
/**** end IE7 and below rules ****/
#c div {
position: relative;
top: 100px;
width: 100%;
color: #666;
font-weight: bold;
font-family: serif;
font-size: 12px;
text-align: right;
}
#footer {
width: 100%;
text-align: center;
height: 15px;
padding: 5px 0 0 0;
margin: -20px auto 0 auto;
border: 0;
background-color: #def;
}
#footer div {
padding: 0px 5px 0px 5px;
text-align: right; font-size: 10px;
font-family: sans-serif;
}
#footer p {margin: 0;}
As pointed out in comments using the technique that the HTML5 boilerplate uses to class the HTML element conditionally see:
Conditional stylesheets vs CSS hacks?
Answer: Neither!
means you could replace the IE7 hacks with:
.ie6 #middle, .ie7 #middle {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
}
.ie6 #c, .ie7 #c {
position: relative;
top: -50%;
}
Original alternative - "Matchstick Technique"
You could likely mix the following technique with the "table-cell" technique via conditional comments or hacks, but this (hacky!) technique works across browser as far as my tests have seen
As you've asked for a height agnostic version.. you might or might not like the "matchstick" technique, this involves using inline blocks and lining them up.. the "matchstick" is a 100% high empty, off page, inline-block element with its vertical-alignment set to "middle" once it's in place the next inline-block (your actual content div) sits beside it and aligns to the middle or it, then using text-align: center; on it you have the horizontal centering too
here's a link to a working example fiddle
Note: I've left your widths intact, but you can test without widths/heights by removing the height & width off #c and also remove the CSS for the #c div text div - in a plain text scenario entering text into either of these divs should 'auto' centre.
and especially note the insertion of the extra <i></i> HTML just inside the outer div (that's likely why this is not a preferred method!), this is the "matchstick" that props the whole page open.
Code used in fiddle:
html, body { height: 100%; margin: 0; padding: 0; }
body { background-color: #fff; color: #000; }
#outer { position: relative; width: 100%; height: 100%;}
/* a matchstick spacer */
#outer i {
display: inline-block;
height: 100%;
width: 1px;
margin-left: -1px; /* to hide off page */
margin-right: -4px; /* to remove spacing between this and #middle block */
vertical-align: middle; /* will make inline block next to it center vertically */
background: #f00; /* red, not required just to see or not see it */
}
#middle {
display: inline-block;
width: 100%;
text-align: center;
vertical-align: middle;
}
/* image 385 * 120 */
#c {
display: inline-block;
/* presuming image heights, but it wouldn't matter if there was width/height here or not */
width: 385px;
height: 120px;
background: url(http://engitize.net/engitize.png) no-repeat 50% 50%;
}
#middle, #c { /* IE hack for inline block on block level elements */
*display: inline;
}
#c div { position: relative; top: 100px; width: 100%; color: #666; font-weight: bold; font-family: serif; font-size: 12px; text-align: right; }
#footer { width: 100%; text-align: center; height: 15px; padding: 5px 0 0 0; margin: -20px auto 0 auto; border: 0; background-color: #def; }
#footer div { padding: 0px 5px 0px 5px; text-align: right; font-size: 10px; font-family: sans-serif; }
a { text-decoration: none; color: #006; }
a:hover { color: #00c; }
p { margin: 0px; padding: 0px; }
HTML:
<div id="outer">
<i></i>
<div id="middle">
<div id="c"><div>
because history is important!
</div></div>
</div>
</div>
<div id="footer">
<div>
<p style="float:left;"><strong>Przemys?aw Pawe?czyk</strong>'s imprint | Coming in 2012!</p>
<p style="float:right;">Przemoc's network</p>
</div>
</div>
IE7 does not support display: table-cell, which you're using as part of your vertical centering technique.
Your page was relatively simple, so I simplified the HTML/CSS a lot. The centering now works properly everywhere I've tested it.
Complete code: http://jsbin.com/azuhe4
The line that's causing this behavior is...
position: static
...on the "#middle" CSS spec.
If I disable that line IE7 seems to render (more or less) the logo in the middle of the page.
It's the <!DOCTYPE>.
IE6 & 7 were a little flaky with that (that's what I've read, anyway).
If you do the following, you'll see things come around - with your code (no edits, save for a couple borders to see what's happening).
Here's what I did:
Deleted your <!DOCTYPE>
Added to your DIV {} CSS line - border:1px dotted gray
At your "outer", "middle", and "c" divs, a threw an inline border-color just to see which was which.
Hit Refresh
Then pasted <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">, and hit Refresh again. Looked fine to me. Centered vertically, horizontally.
As of April 20, 2011 W3C states <!DOCTYPE HTML> as "Not a Standard". Certainly, IE6/7 have no idea what that tag means. http://www.w3.org/QA/2002/04/valid-dtd-list.html
I got new and easy solution for that:
<style>
.vam{vertical-align:middle;}
</style>
<div style="line-height:200px; border:1px solid #000000; height:200px;
text-align:center;color:#FFFFFF; font-size:1px;">
.<img src="her-banner.jpg" alt="" class="vam" />
</div>