I am newbie in Web-developing and possibly has a primary question.
I have installed Joomla 2.5 CMS on my site, downloaded, installed and turned on the SyntaxHighlighter plugin. Then enabled the bash syntax and added nothing more the following code to my page
<pre class="brush: bash">$ uname -a
Linux laptop 2.6.32-41-generic #89-Ubuntu SMP Fri Apr 27 22:22:09 UTC 2012 i686 GNU/Linux
$</pre>
I got this result
It is OK but I have no idea why the highlighted vertical scrollbar appears. It scrolls only for a one or two pixels. So, what I have tried is to add a following code to the beginning of my template's CSS file
.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody {
overflow-y: hidden;
}
It does not helped me and I think the problem is deeper. Do you have any ideas about how to remove this vertical scrollbar?
Update If I use the !important declaration in template's CSS the scrollbar dissappear but the block with highlighted code behaves very strange on page scaling.
You can add the following style to remove the vertical scroll bar and add horizontal one only when needed:
<style type="text/css">
.syntaxhighlighter {
overflow-y: hidden !important;
overflow-x: auto !important;
}
</style>
I looked at the example and found that there is a vertical scroll in that as well. When I inspected "syntaxhighlighter javascript" itself had an overflow. Check if you have included the code after or before you included the css
syntaxhighlighter has overflow: auto as default style (see following css snippet in shCoreDefault.css). That's why we have to set overflow-y:hidden !important when we don't like vertical scrollbar. But we don't need set overflow-x: auto anymore. It's already there.
.syntaxhighlighter {
font-size: 1em !important;
margin: 1em 0 !important;
overflow: auto !important;
position: relative !important;
width: 100% !important;
}
You can see syntaxhighlighter has already used '!important', that's why, you would find different browsers has different result. On my experience, in Firefox, I got the intended result: vertical scrollbar being hidden. But in Chrome, scrollbar is still over there.
In order have a higher priority of my defined class, I prefix some other scope selector, like the container's id or class.
ContainerId .syntaxhighlighter {
overflow-y: hidden !important;
}
To remove your vertical scrollbar for SyntaxHighlighter in your website you can use the below code snippet in your <head>...</head> section of your page.
<style type="text/css">
.syntaxhighlighter table td.code .container {
position: relative !important;
padding-bottom: 5px !important;
}
</style>
Hope this code snippet helps you! :)
Trying to remove a horizontal scroll bar, this was what finally worked for me, taking inspiration from John Yin's post above. No sub-set of the below worked in-and-of itself.
/* .post class is on high-level div */
.post .syntaxhighlighter {
position: relative !important;
width: 100% !important;
overflow-y: visible !important;
overflow-x: visible !important;
}
Related
I have the following site that is using a CSS sheet I inheritated from the last dev.
http://bit.ly/1m0LZjZ
Everything seems okay except for the menu. Originally in the #nav (Line 381 of the style sheet) CSS the width was a fixed 960px. I changed this to 100% by user request and now cannot get the text to center?
I used text-align:center and also commented out the ul elements use of float:left thinking that was the problem. What else can I try?
You need to center the wrapping div, which has width: 950px.
#menu-main
{
margin: 0 auto;
overflow: hidden; /* to clear floats */
}
EDIT: Think about clearing your floats in #menu-main.
For example you could add overflow: hidden on #menu-main, that would clear containing floats.
This should be simple, but I can't figure it out:
Here is the site:
I want the logo at the top to be brought down by 20px. I'm using chrome and trying to mod the CSS in the developer tool to figure out what is keeping it stuck to the top, but haven't figured it out yet. I thought the obvious answer would be to increase the padding-top, but nothing moves when I add that in.
Played around with your code. Padding-top works, but on the div that contains your image - class="head-wrap". Just add padding-top:20px; to that element. It worked in developer console for me. Better than adding a margin to the <header> element as you won't reveal the body color.
full css you should be able to use
.head-wrap{
padding-top: 20px;
}
in the site-header add margin-top:20px; The css would be:
.site-header {
background: url(http://www.therunexperience.com/blog/wp-content/uploads/2014/02/TRESimpleWhite_small4.png) no-repeat !important;
margin-top: 20px;
}
EDIT:
Or for padding add:
.head-wrap
{
padding-top: 20px;
}
I'm working on this website now and I've bumped into an annoying problem. On some pages the footer appears to be "dis-attached" from the body of the content, but on some pages it does not. I can't seem to figure out why, I start removing elements 1 by 1 until it fixes but it never does. Please have a look [LINK REMOVED]
I observed this bug in chrome, firefox and opera latest versions
it appears dis-attached on the Home page, and it appears attached, as should, on the FAQ page for example
Add display:block; margin: 0px auto; to #paper div.
EDIT: the H2 on the FAQ page is already set to display: block; but the .main div is set to display: inline-block; on the home page, hence the difference.
The problem is because your main div's are inline-block, why? if you have width, you can use margin:0 auto; to align in center:
This solved the problem at first:
.dbi, .imgHolder a, .optionsList:active .optionsHolder, .datePicker span {
display: block;
margin: 0 auto;
}
Still you need to fix this whole site to use block elements properly
I am trying to tweak a wordpress site but can't seem to get one of my parent div's backgrounds to be visible through the child divs on top. I've got the background image set for #main. The image I'm using fades to white at the bottom but, in the rendered page, I can only see about the top 23 pixels or so before the rest is blocked...I think by #primary.
The site uses a child theme based on Responsive and can currently be viewed here. I would copy/paste code for your convenience but I'm no longer certain what part of the code is responsible for what I'm (not) seeing. So I apologize in advance if this is not enough information to go on :-/
Looks to me like you have a float problem and the div#main is collapsing. Try one of the various clear-float techniques to prevent that.
For example, try #main { overflow: hidden } as a test - that will normally prevent the collapse.
Classic clear fix issue. Give #main an overflow:hidden or try the micro clear fix if any content is spilling out of the box.
#main {
background: url("http://wp.massosteopathic.org/wp-content/uploads/2013/02/headerhand-contd.jpg") no-repeat scroll 0 0 transparent;
clear: both;
overflow: hidden;
padding: 1.625em 0 0;
z-index: 1;
}
The #main div is only 24px high. This is because all child divs are floating.
add a
<div class='clear'>
with
.clear { clear: both}
just before the closing tag of your #main
I've noticed that if I view the page at wider resolution, the content of a section gets aligned to the right, instead of centered.
I use
margin: 0 auto;
width: 998px;
overflow: hidden;
It seems to have this bug, at least in Safari, Firefox and Chrome. I tried disabling overflow: hidden and it gets rid of the bug, but messes up my floats inside the content.
You can see an example at the page live here:
http://autouncle.dk/da/brugte-biler/Kia or http://autouncle.dk/da/brugte-biler/Ford (you have to view it at at least 1500px widescreen to see the bug).
Any ideas on what can cause this bug and what are possible solutions?
About the reason of the problem: this is due to the page-title element of your header:
#header-outer element contains some floated elements but you forgot a clearing, so the offset left of the main section of your site starts where the page-title ends. (you can verify this by hiding page-title element — when you set display: none the page is correctly centered)
So adding
body#basic_page #header-outer {
overflow: hidden;
}
you solve the problem
As a sidenote strongly avoid to put empty div only for clearing purposes: there're cleaner methods that don't require extra markup, like easyclearing
Your solution is removing overflow: hidden
To fix the float bug on the second example you gave try to use 100% of the width:
body#basic_page.brands_controller #content .text_info {
overflow: hidden;
font-size: 12px;
width: 100%; /* new rule */
}
Remove the
overflow:hidden
from div#content and put its contents in an extra <div> in it which has
width:100%;
overflow:hidden;
This resolves the problem for me.