I am fairly comfortable with css and html, but I can't get the width of a div to expand. I have tried using !important to over ride anything else, but it isn't working.
CSS
.LR-site-description{
color:#fff;
font-size:26px;
font-weight:bold;
text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.8);
width:900px !important;
text-align:center;
}
HTML
<div class="LR-site-description montserrat" style="width:600px">
<p>How would a friend describe what you are working on? Sometimes being vague.</p>
</div>
So I have the width in both of these because I was trying to get it to work in both the CSS and with the style. On the actual site, treerings.co ,the second paragraph won't expand past 300px. I am using a launchrock template, but it gives one full customization. Any help would be great I have been working on this for that few hours :-(
As far as I can see, on the website treerings you actually have a width of 360px, which comes from a line saying max-width: 360px; So just add max-width: none !important; to your style to override the property
Related
I have a couple things on my sight where it’s seen to normal sight users. But I have a hidden label that has css styling to hide it from sight users ie height 0 weight 0 line hight 0 etc. the issue is that when dragging a finger on iPhones neither options are accessible. I’m trying to find a way to make the visible content still say nothing but screen readers say something else. Thanks.
EDIT
I apologize I was very drunk when I wrote that.
I’m just going to ask a whole new question. Thanks for everyone who tried to help lol
Setting width/height to 0 isn't a correct way to hide something for sighted users while keeping it readable for screen reader users.
Entire questions and articles on the web are devoted to explain how exactly to do it the right way.
The basic technique is called visually hidden text.
If you are using a framework, you already have predefined CSS classes like .sr_only, .visually-hidden, etc.
Here's for example the one I use, taken from knacss with a minor change of my own:
.visually-hidden {
position: absolute !important;
border: 0 !important;
height: 1px !important;
/* width: 1px !important; /*Disabled because of JFW+firefox bug, all words are concatenated */
padding: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
left: -2px !important;
top: auto !important;
}
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
I am working on with 2 images styles and I'm having an annoying problem here, probably because I don't know much yet. What I'm trying to do is to get a second image on the first image to be like a sticker (if you see the jsFiddle on bottom you will understand more)
Problem is that from my default CSS I have on every image I upload on my blog to have a border:2px solid #fff (on the round). But I don't want this CSS to be applied on the second image i have in front of the first.
I am doing this by over-riding the default CSS with <style> tag on the post.
.post img {border: 0px solid #fff; //default : 2px solid;
-moz-box-shadow:none ; // default ....
-webkit-box-shadow:none ; // default ....
box-shadow:none } // default ....
body { background-color:black;
}
Also on the first image I add the style again like
style="clear: left; float: left; margin-bottom: 1em; border: 2px solid #fff!important;-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, .8); margin-right: 1em;
This way the CSS is overwritten so no border or shadow is applied on any image, but the first image has the borders and shadows applied via its style. The second image gets nothing from CSS.
Problem is when I do this, there is a small gap from the image to bottom-border
and I cant figure out why.
Here is the link click
Just give the image
display:block;
see updated fiddle
it should now looks like
I see that you used the div tag to contain and control image properties and position. Remember that by default the div tag creates a small margin around itself so divisions floating or fixed on the same page and z-index will not collide. To fix this problem and allow div wrapped objects to snuggle up to each other use negative margins, usually for the top and left positions. Just a few pixels will do.
{
margin-left:-3px;
margin-top:-3px;
}
Try this on the extra image(s) you add, not the original, unless to need to trim its position as well. The -3px was just a guess. It could be as high as -10px or more. This code will move the images, so adjust the negative margin to taste.
You should remove your 1em margins from the bottom and right side of the first div before trying negative margins to make them extra close.
Ok, this is an interesting one.
I have a <h1> header that appears in a box (I mean an on-screen visible box, like border:solid 3px white). The box itself as well as the text inside needs to have a shadow. The box can't be a fixed width, as the text inside the box changes from page to page.
Here's the issue: I have it working perfectly except in IE9, where the shadow only appears on the box, not the text.
If I remove display:inline from the CSS, then it works right in IE9, but then the box is the width of the entire container, instead of wrapping just around the text. So I think the key to the solution is just finding a better way to center the text and the box inside of the container, so display:inline; can be dropped.
The markup is very simple:
<style>
.container {
width:500px;height:200px;padding:50px;background:#eee;
text-align:center;
}
h1 {
font-size:34px;
color:white;
padding:25px;
border:solid 3px white;
letter-spacing:7px;
display:inline;
box-shadow: 0 0 6px #666;
text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
filter:glow(color=black, strength=1); /* IE9 stupid proprietary shadow */
}
</style>
<div class='container'>
<h1>Testing</h1>
</div>
And you can play with it here: http://jsfiddle.net/j434X/4/
Thank you.
I added a margin property in the h1. This makes it possible to get rid of display: inline; and still get the same result, but longer text skips to another line. Kind of like if you had a set width, which I know you didn't want. Here's the fiddle anyway, if it helps
I am trying to get a label to fill a table cell whilst having some sort of padding applied to the label.
I have tried a method I found through my searches but this does not seem to work... here is my CSS:
tr {
height: 1px;
}
td {
height:100%;
}
label {
background-color: #DCDCDC;
display: block;
font-weight:bold;
vertical-align:top;
text-align:right;
padding: 8px 5px 8px 8px;
margin: 1px 3px 1px 0px;
min-width: 120px;
min-height:100%;
height:auto !important;
height:100%;
}
Any help with this would be gratefully appreciated
From the given CSS it looks like there may be browser default padding on the table cells.
td {padding: 0;}
label {display: block; padding: 1em;}
seems to do the trick for me : http://jsfiddle.net/Fb7bS/
But a more complex table and/or inherited styles from elsewhere may add complications.
Hy,
I came over this problem long time ago. It seems that some sort of webbrowsers add a standard padding and margin to tables. How much they add, always depends on the webbrowser. But to overcome this problem you should consider the method of css reseting. What's that ? You simply add a .css file you include in your HTML Page which setts all margins/paddings and other formations done by default to zero. With this you avoid such problems.
There goes the link for CSS Reset: http://meyerweb.com/eric/tools/css/reset/
Well, in older browsers, a label cannot be set as a block level element. You could try placing a div within the label and transferring the label's styles to the div, and see if that fixes your issue.
Though also for height: 100% to work, the element must be absolutely positioned, and the parent element relatively positioned, but in some browsers table elements like td can't be relatively positioned, either. Also unless the td is meant to fill the entire length of the screen vertically, the height: 100% on both elements is unnecessary anyway.
I removed some of the "unnecessary" code and changed your format a bit here, though I'm not sure exactly what you wanted, so it might turn out to not be so unnecessary and that something else was just missing: http://jsfiddle.net/mGykJ/1/
Could you see if that's more like what you had in mind? Though if you could post your HTML, that would be helpful.
I'm looking for a way to do something which in my opinion should be super simple, but I couldn't figure it out...
I want a graphical element on my web page which is exactly 1 pixel high, 100% wide and has a certain color, let's say red. It should look exactly the same in all browser and should preferably not break the semantics too much.
I don't want to use any images for this and I don't want to use more than one HTML element. Of course, I will not use JavaScript.
I tried the old classic which probably many of you know:
<div class="hr"></div>
<style ...>
.hr {
height: 1px;
background: red;
width: 100%;
font-size: 1px; /* IE 6 */
}
</style>
The problem with the above solution is that IE6 will render this as two or three pixels high, to fit the non-existing contents of the div.
Any ideas?
just do
.hr {
height: 0px;
margin: 0px;
border-bottom: 1px solid #FF0000;
font-size: 1px;
}
I went through the same thing when I was new to CSS.
adding an overflow: hidden; style should fix it also.
I don't have IE6 handy to test, but an actual HR tag can work in modern browsers. Took me a couple of tries to realise you set the background color not the border color:
hr { width:75%; height:1px; background-color:#ebebeb; border:none; margin:1.5em auto; }
(adjust to suit)
I don't have IE6 to test this, but I remember it had to do something with the line height. Have you tried this?
line-height: 1px;