I've been trying very hard to get a sticky footer to work in all browsers, for a Wordpress Theme, and I thought I had succeeded... until I realise that a middle table is being pushed to the absolute left of the browser window. The class is still:
position:center;
So I've guessed that it might be some footer CSS overriding it, but I can't find it! Can I be saved?
Here's a link to my temporary site. As you can see, not only are the test posts all to the left, the footer is now also not working as it should! So I've actually made it worse now.
Sorry for all that, I'm not sure what's causing the issue!
Hope you can help.
If you put text-align:center; in your #uptop?
The thing is that I would not suggest to embed table in divs since you broke the strict markup rules on the page. And after it is more difficult to find what causes this problems.
Related
I am trying to make a responsive website, but I am stumbling upon a weird problem. When I am looking on the desktop page, everything is in the right position. There are no pixels left.
However, when I am loading the responsive version on my mobile, I see some pixels left (just scroll to the left or the right and you will see what I mean). The problem gets bigger when there is content like a single post or page.
The website is here: http://FavoriteFM.com.
I can provider the CSS code, but it will be a lot of lines. I am suspecting something in the content is 'sticking out'. But I am not sure of a tool that can see such problems.
Thanks,
Dennis
Today I have disabled every div by div. I figured out the problem is with the sidebar. I still had: 'left: 8px;' on. Removing it did the trick for me. So if you have this problem, check if something of your content is 'sticking' outside your wrapper. Even if you can't see it, it still can be there.
I recently imported CSS Bootstrap into my website, so that I could add a toolbar to it. All went well, except that the text of my website now cuts off at the bottom. I set the overflow of the body to scroll, to no avail. The website scrolls a little bit, but then the scroll bar stops before the end of the content. If you zoom out on the browser, you can see all of the content.
The home page is a fairly long chunk of code, especially if I include the bootstrap, so I am not inclined to copy it here. Have any of you encountered this, and do you remember / can you suggest how to rectify it?
Some of you suggested a link, and you're right. Here is the page in question: http://www.zipcodeconquest.com/home.php
In your CSS, try changing your body height to "auto". Just a guess without seeing your code or a screenshot...
look for a white-space:nowrap or white-space:pre property. Your container might have one of these styles and forces your text content to be displayed in a way that overlap it.
I have gone thru the site and searched for the last two hours and am trying to get a wordpress site to work correctly. Everything is working except the white box that holds the content will not go to the bottom no matter what I try. I have tried all the options here but I think it may be that I do not understand enough about css or the divs are all messed up from the template. Can someone please help out with what I have crossed. My page is located at http://craftedimages.com/AA/aae-events/ and you will see the white box on the right that does not extend down. I got this template and have been modifying it of which there were already lots of problems. Thanks for your time ahead of time.
Try adding
#page{
height:1035px;
}
..to the css - the sidebar is this height and although it is auto that is the given height
Hope this helps
Using chrome inspect element. I can see that your <div id="wrapper"></div> has the style
height:auto;
set it to
height:100%;
That should fix it. Only do that for this page. The other pages are set to auto because it forms to their content. This page doesn't have enough content to reach the bottom like the rest of the pages.
So, CSS is not my strength. I need some help. I'm developing a Wordpress Plugin, and while I have the PHP down, I need help with getting the CSS to work with me. The page can be seen at http://www.airupt.com/?page_id=386. The issue is that I have called a shortcode for the search box below the call for the search results. This is for demo purposes only and the link will die soon after this is fixed.
Please type something in and search, you will see what I mean. The Search box background will appear at the top of the results, over the first one. The search box itself will appear after the results, as expected.
Can anyone tell me where the code went wrong and how it can be fixed? :D
Are you testing this in more than one browser? It doesn't seem like it. To answer your question:
give it a float:left;, like the rest of the elements in the <div class="entry">
.search-custom {
float:left;
/* all the other styles for search-custom that it normally has*/
}
I'd say rather set clear:both on .search-custom.
overflow:hidden will get you into more/different trouble because your sizes are a bit out
Set overflow:hidden; on your .search-custom div, then go get yourself a copy of Firebug. It'll get you out of 80% of these jams.
I have created a Wordpress child theme based on Thematic and I'm currently trying to debug the site in IE 6/7. My suspicion is that the problem is hasLayout, as that seems to be very common and the symptoms are congruent, however I have checked many of the broken elements and added hasLayout properties to those that did not already have them with no advancement.
I did have z-index set in several of the CSS classes, which I have now removed, and I'm wondering if any of you have some other suggestion about other debugging approaches.
The site is: http://032b4a6.netsolhost.com/WordPress/
I have posted here instead of the Wordpress forum as I believe my problem is more related to a standard CSS issue than anything specific to WP.
EDIT:
To detail the kind of errors I experience in IE6/7:
The header, which is an anchor with a css background property, pushes down on the search box, causing large gaps.
The nav displays as if it has an extra 75px of margin under it, causing another large gap.
The right sidebar is missing. It can be found just barely peeking from the left side of the container below the left sidebar.
The left sidebar appears to have an extra 15px of left margin, pushing it onto the main content div.
To check if a layout problem in IE6 / IE7 is hasLayout-related problems, I sometimes find it useful to use a rule like this for debugging - it's propably not something you want to use in your final stylesheet (as it will probably introduce new problems), but often it can reveal what elements needs to be given layout:
* {
zoom: 1 !important;
}
Welcome to the world of conditional comments and IE stylesheets: http://codex.wordpress.org/Conditional_Comment_CSS You need to tweak the CSS for IE and test with native IE, not browser shots.
Try taking the slider out for a minute to see if there is a CSS conflict.
And you have a few minor html errors, one having to do with an inline style sheet:
[Invalid] Markup Validation of 032b4a6.netsolhost.com WordPress - W3C Markup Validator. Scroll down in the validation report to see line numbers and source code.