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.
Related
I have a dilemma that appreciates and tries any suggestion put forward. I have a localhost running wordpress using the theme The Fox. I have everything running perfectly except for the footer.
I have some pages that the content does not extend a page, while others extend more than a page and the issue I have is that the footer starts exactly where the text ends and I dont want to add white space because of view port dissimilarities. As you can see below, I have a screenshot of a sample page with small content.
I hope you noticed the extra white space after the footer, which is also on the screen taking the footer to the center of the page.
I want the footer to extend to the end of the page no matter the length of the content or the size of the screen.
Inside the CSS, there is a footer section and it is here on Pastebin but I think the most important one is as below;
footer
{
bottom:0px;
right:0;
left:0;
overflow:auto;
padding:0px;
min-height:70px!important;
height:auto;
position: relative;
z-index: 9000;}
In the footer, I am using just a single column and I think this code handles that... also in pastebin.
.footer_1_col .widget_wrap
{
width:100%!important;
float:none!important;
margin-left:auto!important;
margin-right:auto!important;
padding-right:10px!important;
}
And on the footer type, I use type 8, which uses the code;
/**************************************************
Footer Type 8
**************************************************/
.footer_type_8 .widget_wrap {
margin: 10px 0px 0px 0;
}
.footer_type_8 .widget {
margin:0px 0px 0px 0;
}
.footer_type_8 .widget h2 {
font-size:10px;
text-transform:uppercase;
font-weight:900;
letter-spacing:normal;
line-height:14px;
margin-bottom:0px;
padding-left:0px;
position: fixed;
}
.footer_type_8 .widget_line {
display:none;
}
Please what am I doing wrong and where do I need to make changes? If you need to see some other code, please let me know and I will post it on pastebin.
Thanks.
Special thanks to #Firasd for his comments that made this possible.
All I did was to look for the body element using the browser inspector, and then recalculate the size for that element using the already known static height of the header and footer.
This Was Added to the Page's CSS Section
html,body {height:100%;}#fw_c { min-height: calc(100vh - 162px);}
The theme uses Bakerly Visual Composer and I just had to add the above code to the page I want the changes.
Note that if you have a slider, you will need to put that in your calculation too except if your slider is in a row element.
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
The background of my css class footer does not go across the entire width of the browser depending on how wide I keep the browser. It is making the page look odd because the footer is ending before the main content ends. The site is up at avidest.com so you can see what I'm referring to. Here is the css:
.Footer { width: 100%; padding:10px 0; margin:0px 0 0 0; text-align:center; border-top:1px solid #b3b3b3; background:#d9d9d9; background-repeat: top-repeat-x;}
The css was originally:
.Footer { width: 100%; padding:10px 0; margin:0px 0 0 0; text-align:center; border-top:1px solid #b3b3b3; background:#d9d9d9;}
but that didn't work either.
How do I make the footer go all the way from the left to the right side of the browser?
Thank you.
Looking at your webpage with chrome inspector, this error seems to be related with floating all the columns and header.
When you float an element, that element gets 'out' of the document flow. What this means is that this element actual size wont' be taken into consideration when it's time to layout things.
I usually don't want to have this behaviour on floated elements, so one way to avoid this is to set overflow: auto in the parent container.
Also, your header layout looks really strange. I'll update this when I have a definitive solution.
First update:
I have added said overflow: auto to every parent with floated elements and now it works for me. Please add that rule to the following elements:
.Header
.Logo
.body
Please note that with these changes your page will look messy (specifically, there'll be many scrollbars around).
This is because you have been a little too much strict setting things' size. I would let things flow more naturally instead. For example:
Settings logo size shouldn't be neccessary.
Bullet points on Header have too few height. I would remove it too.
Another thing I would do is to split the background image in 3 (or 2 at least, header and content). That way, things are a little more decoupled and easier to change. Try to think of each 'logical' block (header, footer, sidebars, login form) as an independent module that shouldn't share things with the rest (images, classes, etc).
I'm sorry that all this can't be explained in a comment, but please don't hesitate to ask me anything.
Have you tried left and right pixels at 0 maybe?
.Footer { left:0px; right:0px; padding-bottom:10px 0; margin:0px 0 0 0; text-align:center; border-top:1px solid #b3b3b3; background:#d9d9d9; background-repeat: top-repeat-x;}
I think it may be the container it is within
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
I need the menu (home, portfolio, services, about) is aligned in the middle and left.
The div#header-login should be flush right
How can I accomplish these tasks?
To solve the first problem, I put the divs with display: inline; but for some reason the ul#header-menu is leaving a space at the top
To solve the second problem, I tried to put the div#header-login with 100% width and thus align the text to the right but failed.
Here is the complete code:
The easiest way to achieve this is to make sure you float everything in the header. With the current mix of some float and some non-float (plus some elements with display:inline), this will be tricky to manage and potentially problematic if you need this to work in older versions of Internet Explorer.
I've made a few small modifications to your jsFiddle. This now floats the 3 elements in the header and applies float clearing to the header div itself so that the content after the header clears properly (there are also commented examples of how you'd need to do this for the IEs with conditional stylesheets).
http://jsfiddle.net/y4Qyw/1/
I've not tweaked the spacing specifically, but it should be a formality now to position everything where you want with some padding and/or margin. Automatic vertical positioning in this situation isn't possible unless you're working with display:table-cell (which isn't entirely cross browser), so you'll just need to vertically offset your menu downward to get it centre-aligned.
Here is the deal:
div#header
{
clear:both;
overflow:hidden;
}
div#header-login
{
text-align: right;
overflow:hidden;
float:right;
margin-top:-30px;
}
img#header-logo
{
display: block;
float:left;
}
ul#header-menu
{
margin: 0 auto;
padding: 15px;
display: block;
list-style-type: none;
overflow:hidden;
}