I've been playing around with wordpress plugins for a couple of hours and have managed to get most things working apart from a css-related problem that just occured.
I believe I've missed closing a div or possibly have some undeclared element present that I'm missing.
This is the site in question.
As you can see, it's displaying the content correctly. This one, on the other hand is definitely missing something.
I've been going through the positioning of my different elements but I just can't seem to get it all worked out correctly.
I'm guessing it's something obvious but I've got somewhat of a tunnel vision right now. Any pointers would be highly appreciated! I'm happy to share whatever code may be needed.
Just from a brief scan of the html the first red flag that I saw was two elements with the same id. I would start investigations there because even if it is not causing the issue you are describing, it is still something that needs some attention.
<div id="primary"></div>
<aside id="primary" role="complementary"></aside>
Edit:
As the comment below mentions, just switch the id of the div to content and it fixes it.
Related
I've been working on a website for our family business and we have a product page which outlines our four key products. It's a bootstrap template that we purchased from wrapboostrap.com (I'm no graphic designer!) and all has been going well. This page however (http://ashfieldclutch.azurewebsites.net/Products) has been giving me a headache.
Occasionally on either mobile or desktop devices the layout plays up (see attached images).
If you reload the page on either platform, it loads perfectly afterwards. I seem to be able to stop this behavior by removing this div:
<div class="row portfolio-wrapper">
However, on mobile devices, this removes the spacing I require between the product types so ideally it needs to stay.
Can anyone see what may be causing this issue?
Thanks in advance,
Paul.
I've refreshed more than 20 times, but I've seen it.
It's not about the classes in <div class="row portfolio-wrapper">, but about the inline styling that's added to this div by your templates Javascript. It happens to miscalculate the height of the div container class .portfolio-wrapper once in a while, which causes the lower content to move up. Since I can't inspect the Javascript, I can't help you much further.
I think you're best of by contacting the template author, he can and will probably find you the cause.
I was able to simulate it on my side and found the fix. It happens in Chrome and Firefox, so I don't think it's a browser-specific issue.
There is inline style being added to that <div> that seems to be calculating the height incorrectly. I changed the height from 1402.234375px to 1602.234375px and that seems to resolve it.
See before and after screenshots below.
I think there might be some Javascript code that might be calculating the heights and adding them to the <div> on the fly.
For the permanent fix, you will have to fix the code that is generating these heights. I will continue to look on my side also for that code.
Before Fix:
After Fix.
I am seeing an error which I think is because of z-index, the error is really strange. See these two posts in two different sites (while keeping in mind that the data is same only the sites are having different css)
1st site (buggy one) : http://bloghutsbeta.blogspot.com/2012/03/testing-3.html
2nd site (the okay one) : http://www.bloghuts.com/2011/08/wizard-fashion.html
To see the error please go to first site then click on PLAY and while keeping it open, kindly go to the 2nd on and then click on PLAY you will see the error that I am talking about, I am not able to understand what's going on?
Well I think I found out the issue I am not sure as I used firebug, my friend the problem is because of the values of z-index that you gave to #postarea #sidebar #sidebar1 #sidebar2 etc they have z-index:1 if you turn off them using firebug, it completely resolves the issue you are facing. I think z-index:1 is being considered bigger than z-index:99999999 that's why your content appear above the game and creates issues for you.
I think the issue is not because of z-index as they both are same for both sites, it must be something else that is effecting it. My guess is that the buggy site's design is maybe messing with it as I see contents appearing inside the game and when you click on borders the game disappears.
Ok, I've been dealing with IE bugs for a long time now, but this one is beyond me. IE 7 and even 8 does it for sure, I've not seen it on FF or Chrome.
So here's a live URL which produces it: http://mog.com/music/America/Holiday
Reproducing isn't easy, it can take a few times to make it happen. Watch your scrollbar to see it change size so you know the page length was suddenly dropped quite a bit.
Here's how you do it:
Hover over any sub-nav link (Main, Albums, Songs, Photos, News, etc.)
Try them until you see the scrollbar change size. Once it does, scroll all the way down and notice the footer has jumped up on top of much of the page content.
Be careful scrolling down that you don't roll over a few other page elements that will suddenly fix this. So far I can see that any of the Play buttons will somehow fix this.
It's just beyond weird. How could a rollover state cause this kind of behavior?
I've tried:
Removing the a:hover style - THIS FIXES IT... WTF? Of course we ideally would keep some hover state, so hoping to avoid this fix.
Reproducing the hover functionality using jQuery hover(). - THIS DOESN'T FIX IT.
I figure the clues are in the elements that somehow magically fix it...and possibly in where the page jumps to, what elements suddenly get obscured by the footer.
Lastly, I didn't produce this site from scratch and it uses a lot of absolute and relative positioning for certain things and I know that is partly what causes these weird bugs. I rarely, rarely use esp absolute positioning to avoid these kinds of bugs, but it's a bit too late now.
Thanks for anyone willing to check it out!!
Well, I figured it out. It was an odd case of the "Guillotine" bug. One I luckily haven't come across before. Turns out the "special" CSS rules on those nav links' hover state (particularly it seemed the border and bg image) were enough to trip this bug. One way around was to drop those styles, but not ideal. The real fix, however, was an unsemantic clearing div placed in just the right spot. More info found here:
http://www.positioniseverything.net/explorer/guillotine.html
Hi just a short note: When did you validate your html the last time?
As you probably know, but might have forgotten, fixing your html can sometimes solve a lot of problems. There are 72 errors seen by http://validator.w3.org
Okay, this is REALLY starting to bug me...
This page works fine in both Chrome and Firefox. www.bloggan.tk
But if it's opened in internet-explorer it always expands beyond the page and introduces the scrollbar no matter what the resolution of the browser is.
I have NO idea what change in the html it was that cause this...
Here's the blogger-template-html-source
I'd REALLY appreciate if someone could help me with this.
Thanks in advance!
Edit:
I've "solved" it for IE using javascript, but that's only temporary (i hope). The version without javascript can be seen here, so that you still will be able to know what I'm talking about. Still trying to solve it, and still hoping for someone to help me.
Before you ask a question here, you'll need to do some basic research yourself.
Strip out everything from that HTML file you reference until you have the simplest possible document that reproduces the error. Don't expect people to dig through a 40k HTML file to find the thing that's causing you grief.
Isolate it before you ask about it.
Incidentally, however, there is no CSS width or height specifier for "the rest of the page". You need to meticulously keep track of your percentage widths to make them add up to 100%, or use tables. If your sample is using percentages, then I'd look for borders and padding, since those are the things that cause discrepancies in box size between old IE versions and modern browsers.
Here
is a (big) example of the massive problem I am having, when this page is live at euroworker.no/order, it is dynamically generated, I have supplied a static version for people to mess with. All I need is where it says "Endre Valg" to push the div wrapper under it down.. Sounds easy huh? I have tried many many things, I hope that some discussion and even trial and error can help us here.
Sorry for the huge amount of code and stuff but this has taken me all day and I am out of ideas.
Thanks.
Edit: Decided to go back to tables, thanks all for the suggestions. :)
Sorry I'm not going to give you the answer here, I have had a look and can not find it quickly. I will however give you two methods to get this problem sorted.
The first is this is a table of data what is the best html element for displaying tabular data? The table. I know there is a great, justified back-lash about using tables to format the page but when you have a table of data they are the correct element to use. This will simplifiy your markup and your css.
If you choose not to use a table what you will need to do is remove all the css effecting this page. look at the page check there are no over laps. Add back a few of the css classes and check there are no overlaps ... repeat. Start very simple and build up until the error occurs again, now you know what peice of css caused this.
If I was to have a guess it would be that the error was in elements marked either float or position:relative/absolute, but one of the above methods will get you there in an hour.
Sorry for not directly addressing the problem.
I support the idea of the previous answer to stick to the standards and use a standard html table for data and html blocks <div> for layout.
If your want to keep your box-structure, you should have a look at the css display-property instead of using position:absolute for positioning your table cells. This resource http://www.quirksmode.org/css/display.html#table might be interesting for you.
I'd echo the comments about using a table. It's never wrong to use a table when you're displaying tabular data, which is what you're doing here.
Either way, adding clear: left onto the class declaration for the anchor tag will help solve your problem:
#cart2Produkt a {
color:#0a5692;
text-decoration:none;
line-height:15px;
clear: left;
}
But the way this page is constructed is just a nightmare waiting to happen. Use a table.