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
Related
Im using wordpress, and my own version of a twenty eleven theme.
I have a site where the main header has a z-index:9999, then completely independent of that I have a slider, that has z-index:1. The slider is completely independent of the header and main content page. Yet for some reason in IE7 when I use the dropdown menu, the submenu hides behind the slider. This has nothing to do with the sub-menu though, it is the entire header (its just the sub-menu is where the user sees that its being hidden)
Here is the header..
#access {
background:transparent;
clear: both;
display: block;
float: left;
margin: 0 0;
width: 980px;
height:70px;
position:relative;
z-index:99999;
}
Here is the slider,
#top-slider {
width:1920px;
position:absolute;
margin-top:70px;
height:300px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
left:0px;
background: #000;
z-index:1;
}
Im confident that these are the only two elements that are causing the issue, because when I remove the z-index:1 from top-slider, the header can be seen fine, the only reason I cant do that though is because then the slider starts hiding behind the main page.
Thank you for any help.
Take a look at this writeup (https://stackoverflow.com/a/3998006/859324) and see if it helps. It mentions specific problems in older versions of IE and how siblings compared z-index values. So maybe the #top-slider div is comparing its z-index to the #page div, instead of #access.
Another similar issue I found mentioned changing the z-index of #top-slider to -1 instead of 1, though I can't say I sufficiently know all the ramifications of doing so.
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;
}
I have a really strange quirk happening on a site that I am building. Its a theme for concrete5 but the html is pretty site is here http://wtms.onbutton.co.uk/mm.
If you look the body has dropped by about 100px as if there is a margin. If I remove the section element, nothing is affected and the header renders fine.
Can anyone explain what's going on and how to fix it?
This can be solved by specifying display: inline-block for your section element.
i.e.
section {
display: inline-block; /* new */
position: relative;
}
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.
So I'm trying to code out my design for my new portfolio website, but I'm having a few issues there that research and hours of smashing my face against the computer screen have not yet solved. There are two big issues right now that I'm stuck on, though there is yet another that I'm currently considering if I even want to deal with at all.
The first issue is the menu. I want the typeface to go from regular to bold when you hover over it, or when you're on that page. Which works. Problem is when you hover over it, the other two items in the menu adjust slightly because the change in type weight pushes them out. My attempts thus far have all ended with failure.
The second issue is the footer. I want it to stay on the bottom of the page. My research has gotten me this far, but instead of what I wanted, now it actually stays at the bottom of the browser, not at the bottom of the content. Thank you for any help you can give!
The page in question can be found at: http://personal.justgooddesign.net/draft/
Your footer is getting jumbled up because you float left and clear right. My personal preference for footers always starts with this very clean method and builds from there. If you're getting confused, separate your inner content from the rest of the page and test away.
With fonts, you have to think more like a UI developer than a graphic designer. Unlike Indesign, Illustrator, etc, fonts and spacing aren't 100% pixel perfect. What will render one way in one browser will render a very different way in another. Bolding a font on the web will make it larger, and it will push spacing. To compensate for that, setup your menu elements to be a bit wider to compensate, then test like crazy. If you solely rely on margins and padding, then a bolded hover element is going to push the menu around every time.
Just a suggestion, setup your css in a separate file and load it in. The code will be cached, which will result in a performance improvement on subsequent loads. Further, you could save yourself a lot of code by doing one class to attach styling to your elements and being mindful positioning relative to other elements. There's no need to individually style every element in your portfolio for positioning.
You can fix the jump in the menu by setting a fixed width on the #menu li, so
#menu li {
display: block;
float: right;
width: 40px; //something like this.
padding: 0px;
list-style-type: none;
position: relative;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
}
EDIT:
To fix the footer issue
remove height: 600px; from the #right rule
add a clearing br in between the #container div and the #footer div
</div>
<br style="clear:both;">
<div id="footer">
You have floating problems as you are not clearing your floats.
Your div#wrapper is always going to be equal to the height of the viewport.
Your div#container is collapsed beacuse you have floated div#left to "left", div#right to "right" and also have absolutely positioned div#footer. What this does is that, it takes these divs from the normal flow of the document and subsequently the div#contaiver is not "wrapped" around these three divs (div#left, div#right and div#fotter")
The same is the case with div#right. The div#intro and div#portfolio have been floated inside the div#right and it is not wrapping it's child divs.
Ther are many ways around these problems. I suggest this.
Include the following code after the last floated element.
<div class="float_clear"></div>
div.float_clear
{
clear: both;
}
For the menu, there is not enough space, Just add.
div#menu>ul>li
{
width: 50px;
}
Try this to fix your footer issue?
<p style = "clear:both">
<div id="footer">
Also
#right {
clear: right;
float: right;
height: 600px; //Remove this line
width: 490px;
padding: 0px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 0px;
}
add overflow:hidden to the container...
Whenever you have stuff that is floating, put a div around the floating content and give it
overflow:hidden;
display:block;
width: (some width);
That will fix most floating issues