This image is a screenshot of the address http://www.rothemcollection.com/engagement-rings/.
The 's' of 'Recommendations' cut by Google Chrome browser. I tried to change the z-index, move it down with the top or margin-top and it still cuts me to the end.
Does anyone have an idea? It could be related to poor I use a special font? If so, what should I do?
Try this css :
#mainSlider h1 span.big {
font-size: 60px;
line-height: 63px;
display: inline-block;
width: 484px;
position: relative;
}
Define your mainSlider Heading position:relative; or define z-index:1;
As like this
#mainSlider h1{
position:relative;
z-index:1;
}
Result is
There is issue, most likely it is related to opacity and css engine rendering, supposely because of some optimization. I would suggest more the header to left by 6 pixels to avoid overlapping of images to it, something like this.
#mainSlider h1 {
left: -6px;
position: relative;
...
There's a few ways to do this - I'll add my view to the mix. Try adding z-index:-1; to the .ring class. This will produce problems if you want to make the images links at some point, but should work in your current setup.
#mainSlider .ring{
position: absolute;
right: 0;
z-index:-1;
}
I reduced the text size by one pixel and problem solved.
Not a suboptimal solution but still works. Unfortunately, the solutions did not help.
Thank you all.
Related
I need a textarea control with mask able property, if the textarea is mask able then the text should appear as stars instead of actual text.
I can have any no of textareas in my form, So i can't save actual text in other variable and save the stars or dots for actual textarea.
Can somebody help me to solve this issue?
As others have already pointed out, it's not possible and should not be done. But here is something which you should give a try. If you really want to achieve it, you'll have to compromise on something. Use contenteditable div instead of input and use following CSS:
Demo: http://jsfiddle.net/GCu2D/793/
CSS:
.checked {
font-size:20px;
position:relative;
display:inline-block;
border:1px solid red;
}
.checked:before {
font-size: inherit;
content:" ";
position: absolute;
top: 0;
bottom: 0;
left: 0;
background-color: #FFF;
width: 100%;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Asterisk.svg/32px-Asterisk.svg.png");
background-repeat: repeat-x;
z-index: 1;
background-size: 12px;
background-position: left center;
}
HTML:
<div contenteditable class="checked">Sample Text</div>
Obviously, this is not a perfect solution, but you can start from here.
Note: You will need to adjust the font-size and the image used. Both dimensions needs to be in sync. Ofcourse you can change the size of image using background-size . Border here is just for visual feedback. If you need to adjust the width of the stars, then you may use calc() and play around with the exact dimension.
Im trying to do something, but I dont know if its possible.
I have a html structure for desktop and tablet devices and its working fine, but now for mobile, I want to change a little bit the structure of my news.
In mobile version I want to put my <h1>Title of the news</h1> above the image, but its appearing below the image, because in my html I have the title image first, but I dont want to change my html structure, its not possible to put my title above my image with only CSS?
Im trying some tests but nothing is working!
I put my example in this fiddle:
http://jsfiddle.net/Zkpj7/
For a better understanding, I have this images to show what I Want:
Try changing CSS like this:
#news
{
height:140px;
margin-bottom:5px;
border-bottom:1px solid #f3f3f3;
padding-bottom:43px;
position:relative;
padding-top: 45px; /*CHANGE VALUE ACCORDING TO YOUR NEEDS*/
}
#news h2 {
position: absolute; top: 0px; left: 0px; /*ABSOLUTE POSITIONING*/
margin: 0px;
}
#news span
{
color:#7a7a7a;
position: absolute; top: 25px; left: 0px; /*ABSOLUTE POSITIONING*/
}
I can't think of a good solution that would not use absolute positioning...
I really would suggest changing the markup though :p
http://jsfiddle.net/Zkpj7/9/
The CSS answers will all be less than ideal since CSS is for changing style not structure. I would recommend using jquery. Call this on the id's for the title and picture to reorder them.
$("#title").insertBefore("#pic");
If you want, add something like this to fire when the screen size gets too small (set whatever threshold you want).
$( window ).resize(function() {
if($(window).width() < 400){
$("#title").insertBefore("#pic");
}
});
I have a control that I am trying to highlight when it is selected. I'm achieving this using padding on a div and some positioning so that it surrounds the control. The problem I'm encountering is that the padding on the highlighter div renders differently in chrome and in firefox. Everything I've read says that they render the same so this shouldn't be a problem.
Chrome:
Firefox:
Here's a fiddle that has the problem on it:
http://jsfiddle.net/5fuGB/1/
.control{
position: absolute;
width: 100px;
height: 20px;
top: 30px;
left: 300px;
z-index: 1;
}
.highlighter{
background-color: orange;
position: absolute;
width: 100%;
height:100%;
left: -2px;
top: -2px;
padding-right: 8px;
padding-bottom: 10px;
z-index: -1;
}
input{
width: 100%;
height: 100%;
}
My Chrome Version:
Version 31.0.1650.63 m on Windows 7
My Firefox Version:
25.0 on Windows 7
Thanks for any help you guys can offer.
I believe the difference you are seeing is a difference which comes from the user agent stylesheet, browsers have their own default stylesheets which they use to render things like input elements. In your case it is probably a difference in the padding applied to the input element. You should specifically set eg: padding: 0px; or padding: 1px; on the input element, and then work out how to get it to look right for an input with the specified fixed padding. This will then override the styles set by the user agent style sheet.
Update
I moved to my Windows PC to have a go at fixing it. One way to fix this using one of the vendor specific prefixes from the answer linked in the comments is to add -moz-padding-end: 6px; to .highlighter to compensate for the differences in padding between browsers.
Here's a jsFiddle which fixes your issue, a footnote tho, I can already tell you that this probably won't fix it on Chrome for OSX, which was also rendering things the Firefox way.
Another way to fix this is by adding -moz-padding-start: 1px; -moz-padding-end: 1px; to input, but doing so somehow changes the bottom padding as well, which makes things look not as pretty in Firefox as with the other fix.
I'd go about it differently. Instead of using an extra div, I'd recommend using a combination of border-color and box-shadow on the input's :focus state to achieve the effect you're going for.
Check out this modified fiddle: http://jsfiddle.net/5fuGB/2/
Just experienced the same issue with my code, and fixed it too. The trick is if you use display: inline-block then line-height makes sense. Try it when debugging your code.
You're doing a little more than what's necessary. To get a highlight around that input you can use :focus
So it would be something like this:
CSS
input {
border: 1px solid white;
}
input:focus {
border: 1px solid orange;
}
That will give the input a white "invisible" border so it doesn't move the input when you click into it. It will simply change the border color to orange to get that highlight effect you're looking for.
EDIT
Just saw your comment. I dont have the rep to comment so I'll just add on to this.
If you aren't using the inputs as actual inputs, then I would just make them divs. Inputs render differently by default so that would mess with consistency across browsers.
I'd also recommend experimenting with those divs within one another and making the most outside div relative.
Outside Div <------ position:relative;
Middle Div <------- position: absolute;
Inner div <-------- position: absolute;
Also, if you need a selected state but don't want or are hindered by inputs then I'd recommend jQuery for modifying the css based on user interaction.
Here is my site: http://mylifeiscode.com/studentprintz/
In Chrome the logo loads centered, but in Firefox and IE it's off to the right. I've fiddled with the CSS in it for an hour, and I can't understand why it's being pushed to the right in the other two browsers.
Does anybody know what CSS property is doing this?
You are absolutely positioning, but not telling where to position. Change the margins to positions. So, instead of:
a#logo, #logo-text { position: absolute; margin-top: 25px; margin-left: 5px; }
try
a#logo, #logo-text { position: absolute; top: 25px; left: 5px; }
In the template.css on line 40, change this:
margin-left: 5px;
to this:
left: 5px;
Just as a side note, if you use Firefox, I would recommend downloading Firebug to you can mess around with the CSS in case something like this occurs.
I am developing for an existing web application on an internal server, I can't really post all the code here as it's very very messy but I can show you guys a screenshot of the problem and the relevant css code:
The languages menu should be on top of the blue bordered box, but instead it's beneath.
It works great in FF, this is a IE7 screenshot
blue bordered box css:
.categoryBox {
width:100px;
background-color:#000;
border-style:solid;
border-width:1px;
border-color:#007CF7;
padding:5px;
float:left;
height:260px;
margin-right:25px;
margin-bottom:20px;
text-align:center;
width:200px;
position:relative;
}
language menu css:
#ChooseLanguageDlg
{
display: none;
position: absolute;
width: 87px;
height: 180px;
padding-left: 10px;
padding-right: 10px;
padding-top:0;
margin-top: -9px;
border: none 1px White;
left: 751px;
top: 10px;
font-size:11px;
overflow:hidden;
text-align:center;
}
Note: the languages menu is using a javascript toggle to show/hide.
EDIT:
Adding z-index to the language box does not change the visibility in IE
IE7 has known problems with z-index. Without seeing your page, the best I can do is point you to some useful links which explain the problem:
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
IE7 Z-Index Layering Issues
http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/
The general idea is to poke position: relative (usually remove it) and z-index on parent elements of your drop down until it's fixed.
Good luck!
Setting the z-index of the language box manually may help. Of course, if you don't want to do this, putting the language box after the blue box in the markup will do the trick too.
You could try adding a z-index. This'll define which element is on top of which element:
z-index
add a z-index to the style for the language box?
IE has some problem with z-index (see Google). As I had to fix a similar problem I was forced to use javascript to hide the background elements, which isn't really suitable for you.
You could try to change the order of creation in the html code, if possible.