I am adding an image that acts like a bullet for a li:
.top_right li {
float: left;
width: 7em;
line-height: 100%;
background: url(images/thumbs.png) no-repeat top 4px left;
border-bottom: solid 1px #222;
margin-right: 1em;
padding: 5px 0 5px 1.3em
}
Any ideas why thumbs.png does not show in IE 8 and 7?
Here's a working demo. I had to remove the top 4px left in the bakcground property for the image to show.
You have to either specify top left or Xpx Ypx, can't mix them up :).
Related
Morning,
I have the following code that works in all browsers other than IE. I want a blue border to appear when clicking on input boxes, however did not want to see the elements resizing and positioning. I fixed this by putting a border colour to match the background colour, thus removing the resizing effect. However, on IE, you get ghost borders which seem to be a combination of both the border radius and border colour (background colour). Any ideas of how to fix this without using box shadow?
Screen Shot showing ghost borders:
input,
textarea,
select {
position: relative;
display: block;
border: 3px solid #4f4f4f;
border-radius: 10px;
margin: 6px auto 22px auto;
width: 260px;
font-size: 13px;
text-align: center;
&:focus {
outline: none;
border: 3px solid #4cc7fa;
}
}
Many thanks!
You can do like this to overcome the ghost/resize/re-positioning effect, where you change border-width on focus and compensate its re-positioning with a negative top
body {
background: gray;
}
input,
textarea,
select {
position: relative;
display: block;
border: 0px solid gray;
border-radius: 10px;
margin: 6px auto 22px auto;
width: 260px;
font-size: 13px;
text-align: center;
}
input:focus {
top: -3px;
outline: none;
border: 3px solid #4cc7fa;
}
<input type="text">
I would use the following javascript:
Your-function() {
document.getElementsByTagName('input','textarea','select').classlist.toggle('show')
}
add display:none to input:focus
add the following css
.show
{
display:block;
}
Note: Add onclick="Yourfunction()" to your markup to load the js.
I have chat message div which floats left and right but I when the reply is more than one lines then div falls down.
Please check my codepen div falling down
I want this output:
Don't let your bubble float, instead use a left margin.
http://codepen.io/anon/pen/grddmW
edit: I updated the code. The same goes for the right floating bubbles, of course.
.message .bubble {
background: #f0f4f7;
font-size: 16px;
padding: 12px 13px;
border-radius: 5px 5px 5px 0px;
color: #717070;
position: relative;
margin-left: 160px;
}
#chat-messages div.message.right .bubble {
border-radius: 5px 5px 0px 5px;
margin-right: 160px;
max-width: 79%;
text-align: right;
}
In both cases, no floating, but a margin to the left / to the right.
I am scratching my head as to what I've done here in my H1 Logo
The first image shows what is messed up and the second image shows how it should be on the same plane. I have to give link to image as I don't have enough reps yet. Link to image
Here is the website, as as I am not sure what code would fix this: afirewithin.me
Your CSS:
#logo h1 {
font-size: 48px;
float: left;
margin: -7px 0px 0px;
color: #262728;
background: url('images/h1_border.png') no-repeat scroll right 25px transparent;
padding-right: 10px;
}
Change it to:
#logo h1 {
font-size: 48px;
float: left;
margin: 16px 0px 0px;
color: #262728;
background: url('images/h1_border.png') no-repeat scroll right 4px transparent;
padding-right: 10px;
}
Adjust the margins and the background 4px for exact spacing etc.
Screenshot:
You have a margin of 32px 0 0 on your h2
try installing firebug for debugging
I'm try to display two rows of six columns and have them shrink when the browser window shrinks. The original css displays number of columns depending on the image size, each image floating left, so for different screen sizes I end up with large spaces.
.ngg-albumoverview {
overflow: hidden;
margin-top: 1px;
margin-left: 0px;
width: 100%;
clear:both;
display:block !important;
}
.ngg-album {
float:left;
height: 100%;
padding: 0px;
margin-bottom: 0px;
border: 0px solid #fff;
}
/* IE6 will ignore this , again I hate IE6 */
/* See also http://www.sitepoint.com/article/browser-specific-css-hacks */
html>body .ngg-album {
overflow:hidden;
padding: 0px;
margin-bottom: 0px;
border: 0px solid #cccccc;
}
.ngg-album {
overflow: hidden;
padding: 0px;
margin-bottom: 0px;
border: 0px solid #cccccc;
}
.ngg-albumtitle {
text-align: left;
font-weight: bold;
margin:0px;
padding:0px;
font-size: 1.4em;
margin-bottom: 0px;
}
.ngg-thumbnail {
float: left;
margin-bottom: 10px;
margin-right: 2px;
text-align: center;
font-weight:bold;
background-color:#0F0F0F;
-webkit-border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px;
border-radius: 0px 0px 8px 8px
}
.ngg-thumbnail img {
background-color:#A9A9A9;
border:0px solid #1D1D1D;
display:block;
margin:4px 0px 4px 5px;
padding:4px;
position:relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width:200px;
}
.more {
width: 100%;
background-color:#0F0F0F;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px
}
.ngg-thumbnail:hover {
background-color: #333333;
}
.ngg-thumbnail img:hover {
background-color: #FFFFFF;
}
.more:hover {
background-color: #333333;
}
.ngg-description {
text-align: center;
}
When I add this css to .ngg-albumoverview it displays six columns ok and shrinks them, but the second image is placed under the first, instead of alongside, with the third image alongside the first.
columns:100px 6;
-webkit-columns:100px 6; /* Safari and Chrome */
-moz-columns:100px 6; /* Firefox */
CSS columns are just segregations of the page and flow the same as the rest of the page. Your images are laid out like this:
[1][3][5]
[2][4][6]
because the flow of a page goes top to bottom and expands as necessary depending on element widths.
Your images will not be in the order you want unless you remove the columns and replace it with a responsive grid. If you want the images to appear like:
[1][2][3]
[4][5][6]
you need to adjust your .ngg-thumbnail widths to be a percentage (that incorporates the margin, border and padding spacing in between and adds up close to 100% between 3 of them), float them to the left and give your .ngg-thumbnail img a max-width: 100%; and height: auto;. Be sure to float the .ngg-thumbnail parent element and not the img or they will be removed from the document flow and not line up with the grid unless you perfectly size everything (and you don't want that).
Almost forgot - make sure you add a clear: left; on the 4th image if your widths don't add up to 100% so it starts on a new line by default. You can select the 4th image with:
.ngg-thumbnail img:nth-of-type(4);
Here is a good resource for you if you'd like an enjoyable way to learn more about this.
Here is my page: http://inventikasolutions.com/demo/tatasky
The blue button appears centered in Google Chrome but in Safari and Firefox it floats to the left.
I'm using the latest version of the browsers.
My css code is:
.messi .btn {
background-image: url(submit.png);
background-repeat: no-repeat;
background-size: auto;
background-position: -1px -490px;
background-color: #5B74A8;
border-color: #29447E #29447E #1A356E;
color: white;
font-size: 15px;
padding: 10px;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
border: 1px solid #999;
vertical-align: middle;
line-height: 20px;
margin: 0 auto;
display: block;
}
.messi-actions .btnbox .btn {
min-width: 75px;
}
Thanks
Firefox is rendering the div tags around the btn differently. So it is aligning it to the center of it's wrapping div tag, but that tag is only the width of the button and is left aligned. Add this to get it working:
.mesi-footbox {
text-align: center;
}
This will center the div if it doesn't render full width, or leave things the same in chrome.
#Pritesh Desai
try to put in safari
text-align:center; to the container div which contains the div you want to be centered