Im trying to get rid of the horizontal scroll line in my website can anyone help me.
website name is www.realcombatmedia.com
thanks
It is caused by the line of underscores in the following text;
THOMAS OOSTHUIZEN-MARCUS JOHNSON
SHOBOX TRIPLE HEADER COMPLETE UNDERCARD
This line can't be wrapped, so is sticking out the right side of the page
And without the line
The line of underscores is causing your page to extend to the right. Either shorten your underscores or place some kind of space to make it wrap.
If you want to hide what is going past the div parent of your text add this to your css.
div { overflow-x: hidden; }
Related
I've embedded a gist file on my webpage, and it contains some long lines of code which require quite a bit of horizontal scrolling to fully view.
Is there some way to enable word wrap for embedded gist files, so that no horizontal scroll-bar will be present?
You could force word wrapping with CSS.
.gist .blob-code-inner {
white-space: pre-wrap;
}
I made this fiddle to show my problem. I have a list and I need to set a negative margin to overlap the list items.
The issue comes when the text is so long that it wraps itself and I can't see how to change the margin of that particular line to make it the same as the rest of the items. Line-height does not seem to do the trick. Do you have any idea?
Thanks in advance.
Not an option to put line-height to the li instead of using negative margin?
http://jsfiddle.net/wNf9R/6/
Or you could set your a's to display:block, apparently the line-height is ignored for a-elements? (i'll leave the explanation to someone else :-)
http://jsfiddle.net/wNf9R/9/
Wrapped it around with div and gave smaller line-height
See http://jsfiddle.net/wNf9R/8/
If all you're trying to do is make the spacing between the lines consistent (i.e., you are okay with the wrapping), then line-height should indeed work.
See this fiddle.
Use the line-height property in conjunction with specialized margin-top and margin-bottom properties to even out the intra and inter-element spacing: http://jsfiddle.net/T3NM8/
I am using dijit's FilteringSelect box and trying to create a custom rich text HTML label, as per the documentation on dojocampus. I want my label to have the name of the object aligned to the left and a count aligned to the right. The way I am doing this is setting my label like so:
label: "left3 <span style=\"float:right;margin-top:-18px;\">right3</span>"
The problem is that when I hit the drop down menu, the right floated text appears about 20px below its associated left text. You can see an example of this here: http://jsfiddle.net/j9c3n/ The first FilteringSelect box contains the "buggy" behavior, the second box is my current workaround (adding margin-top:-18px) to the label.
Is this the correct behavior for the FilteringSelect label? Am I doing something wrong with the HTML? I tried including a <br style="clear:all;"> but that didn't help. I also tried setting all margins and padding to zero, as well as including a wrapper div around both the left and right text. All I can think of is that maybe the problem is the line height?
I guess my question is, Is this a bug in dijit.FilteringSelect, or am I just wrong thinking that the labels should all be vertically aligned?
Try this:
label: "<span style=\"float:right;margin-top:-18px;\">right3</span>left3 "
this happens when i set my background-position to right in IE8 Only...
you can see that in the following URL : http://www.scrapingweb.com/quote.html (Contact Us tab)
I tried to reduce the width of the HTML or the body like this
body{width:99.6%}
or
html{width:99.6%} - preferred
And worked fine
you can also reduce the width of the
parent container for example DIV to
width:99.9% and this works too.
I prefer to make it with css hack to be read only on IE8.
Try to specify both positions e.g.:
background-position: right top
If you only specify one keyword, the second value will be "center"
On this page (http://www.bonniesphere.com/blog/elsewhere/) the "li" items have an image instead of a bullet. But the image is centered vertically, and in multi-line entries it doesn't look good. Can anyone tell me if there is something in the CSS that should be changed?
Here's the relative code:
.entry ul {list-style-type:none;}
.entry ul li{padding: 0 0 0 15px;background: url(img/ol.gif) no-repeat left center;margin-left:10px;}
Many thanks for your help...
replace center with top:
background: transparent url(img/ol.gif) no-repeat scroll left top;
.entry ul {list-style-type:none;}
.entry ul li{padding: 0 0 0 15px;
background: url(img/ol.gif) no-repeat left top center;
margin-left:10px;}
Just typed that out of the top of my head, but the "top" attribute might do it.
You could try and replace the left or center with the top tag, can't check for you as my webdeveloper addon is playing tricks on me. :(
I checked locally, it's the center tag. But there's still an extra bit of whitespace needed.
.entry ul li{padding: 0 0 0 15px;background: url(img/ol.gif) no-repeat left 4pt;margin-left:10px;}
Basically you need to specify the offset from the top. You had center which obviously centered the image vertically.
As a rough guess, I used 4pt but it depends on exactly where you want to position the image. With 4pt it roughly aligns it to the first line, but any change in font-size will screw up the positioning.
Personally, using top for the vertical position is a little too high for my likings.
This is very odd... I tried all three suggestions above, and none of them changed anything. A little more info, if it helps: it's a Wordpress blog (on my server) and I'm editing style.css through the theme editor. (That shouldn't make any difference...)
Do you suppose there's something elsewhere in the CSS that's making the image stay aligned at the center, over-riding this code??
Thanks for your suggestions... I had Firebug but had never used it - so with a combination of Firebug and the "compare" feature of BBEdit, I was finally able to figure it out! The template author had supplied a fix for the bullet points, but when I uploaded the most recent version of the theme, the problem occurred again. I found it, and voilà...
Thanks to the two programs, I was also able to find a fix for something else that wasn't working.
I'm a happy camper! At least... until the next time I run into something I can't fix...
:-)