I'm almost finished a site , but for some reason it's not appearing as wanted in IE. The div "content" (with top border) is showing up twice - once with the content in it, centered, and again below the navigation, but aligned to the left and with no content in it. It is showing up fine in Safari and Firefox.
Here is the CSS code:
#content {
#content {
position:relative;
top: 50px;
width:900px;
height:580px;
border-top-color:#000000;
border-top-style: solid;
border-top-width:1px;
}
And here is a link to the site: http://www.thomas-collection.eu/home.html
Thank you!
Validating your HTML will fix the problem (you have an open DIV among other things.)
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.thomas-collection.eu%2Fhome.html
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.
for some reason my Blogger page won't let me create transparent space between my footer and the bottom of the page. I would like the footer to moved up (tried both margin and padding, but nothing) so that the background is seen for about 10px but need help with what code to use! Please help, thanks!
Link to blog: http://thewordswecarve.blogspot.ie/
Just add this to your css.
.content-cap-bottom.cap-bottom {
height: 10px;
}
This will make sure this div stays 'open' so you can see the background below it.
In you css sheet add this:
body { margin-bottom: 10px; }
I inspected your page and added this to .content-inner
.content-inner {
margin-bottom:10px;
}
And it seemed to work fine.
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;
}
The site is appearing fine in Mozilla, Chrome, and IE6. But IE7 onwards, the menu background image was not appearing at all.
In the file moo.menu.css, I made the following changes in li:
.ry-cssmnu ul li {
margin: 0; /* all list items */
padding: 0;
float: left;
display: block;
background: url(../images/mainnav-bg.gif) repeat-x center top blue;/*added this line*/
cursor: pointer;}
After this, the background repeat is appearing only where the menu text is present.
http://bit.ly/ie8issue
The site is at: www.agmrcet.com/cons
Thanks in advance.
You have to declare a height to that container. Your floating list items are not giving their parent container height because float removes them from the document flow. Your <ul> has a current height of nothing, and the background image won't remedy that.
#mainnav { height:44px; ... }
First of all, I would change the CSS background property according to the CSS syntax:
background: blue url(../images/mainnav-bg.gif) repeat-x center top;
Looks like the problem is with your
<div class="clearfix" id="mainnav">
tag. Have you tried adding a pink border or something (to debug it) to the mainnav element and then setting a fixed width on it to make sure it goes the full width?
yes another problem with this scroll bar
alright so I started the website over again that was mentioned here
and I am having problems with this scroll bar again
alright so all I have is a single image in a div tag
<div align="center" id="SuggestionBox">
<img src="images/SuggestionBox.jpg"/>
</div>
this code displays right but
when I make the browser window small enough that the full image can not be seen it doesn't give me a scroll bar to see the whole image
hopefully this makes sense
I am using firefox
EDIT:
I tried overflow:scroll and it did not work
this was the outcome
and this happened in the middle of the page
I also tried 'overflow:scroll' on the body of the page through css and all it did was show disabled scroll bars that did not change no matter the size of the browser
also some people are a bit confused
so
this picture might help
notice how the image is not fully shown
well, I want there to be scroll bars in case the user wants to see the whole image
but they're not appearing
also here is all my css code:
body
{
background-image:url("images/background.jpg");
}
a:hover
{
color:#FF0000;
}
table
{
background-color:#FFFFFF;
}
#SuggestionBox
{
position:relative;
right:375px;
}
thanks
Good Luck
get it?
I may not be understanding your question, but it looks like your problem is that you've disabled scrolling in the body but would like the div to scroll. #lukiffer's answer is right. When you resize your browser, however, the scrolling div, which is a fixed size, isn't overflowing because its content still fits.
Are you wanting your "SuggestionBox" div to anchor to the page so that it resizes along with the page? That would enable it to change sizes as the browser does and thus add scroll bars when its content doesn't fit:
#SuggestionBox
{
position: absolute;
/* Change these to establish where to place the div. All zeroes
means it fills its whole container */
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: scroll;
}
Update:
I don't get what #SuggestionBox is supposed to be. If you're just wanting a centered image link, you could get rid of the div and just have this as your markup:
<a id="SuggestionBox"></a>
And for that <a/>, you could have the following CSS:
#SuggestionBox {
display: block;
width: 100px; /* Or whatever the width is */
height: 100px; /* Or whatever the height is */
background-image: url(images/SuggestionBox.jpg);
margin: 0 auto;
}
If your reason for having the div was to give your link a right margin of 375px, your CSS could have the margin set to 0 375px 0 auto instead.
If you use this simple HTML/CSS, your body should be able to scroll normally (unless you have other CSS or HTML that you haven't posted that's breaking it).
div#SuggestionBox { overflow:scroll; }