Different layout display on website over multiple loads - html

I am having an extremely odd issue creating a template for my zencart ecommerce website.
I find that many times I load the website my menu will break up and split over two lines as shown below.
The reason I find this behavior odd is that if I refresh the page it correctly displays.
Now I could understand how to fix this if it was consistently one way or the other but it seems to vary between the two with no obvious difference in the code... I am not sure if this is some sort of technical bug with chrome as I haven't been able to replicate it in other browsers however even if it is I really need a way of working around it. So I am curious as to whether anyone has had this issue before and if so how they got around it.
Link to live site: http://digitalmatrixonline.com.au/
Thanks Jason

If you add
white-space:nowrap;
To the div that contains the list it should prevent this, not sure why it's happening though.
Edit: here is a jsfiddle showing the technique http://jsfiddle.net/RM4S2/
Edit: No floats http://jsfiddle.net/BsGfu/2/

This is a really strange problem, and I was able to recreate the quirkiness in Chrome. While I don't know the direct cause of the issue, I think I found one way that works.
If you set the width of the second div within 'navEZpagesTop' that you are floating right that is wrapping,to 'width:485px;'. This seems to give the section room and does not wrap. If you want to leave more room for this expand without modifying the css you could set it to a much larger size, and float all the links inside of this to the right(instead of the left).

Related

SSRS Page Breaks. Past the end of my rope

(This is for SSRS 2012)
Hey guys. I know this really isn't the way to do things, but I am just completely done struggling with this.
Here is a zipped-up .rdl file for a report I'm working on: http://www.flowdex.net/files/amalgam_rdl.zip. Included in the .zip file is a .pdf with a typical output of that report.
I am getting several phantom page breaks that I simply cannot understand. I have scoured the internet, including stack overflow, and none of the regular suggestions have worked. I have made sure everything fits within the dimensions of a page, margins included, and have looked at the properties of every element in the report. Nothing gives ANY CLUE WHATSOEVER why a blank page must be inserted within a tablix that goes past one page, or why there is a page break in-between the two tablixes.
I don't know how viewing my .rdl will work... obviously you're not getting a database, so you won't have any way to test it. All I'm asking is for someone to take a quick glance at how everything is formatted and let me know if anything major stands out.
Sorry for the terseness, and I guess I'd understand if this question gets ignored / rejected. I just do not understand why this is so difficult. Teaching myself PHP was a million times easier than finding a stupid page break in SSRS.
Thanks in advance, and apologies again for being rude. This is crazy frustrating.
It looks to me like what you should do is take the DIV6 image and [Seiten] move them over to the left a little, then take the report body and collapse it to be right up against them. Right now, with your margins I think you are going over and it creates that phantom page thing.
Put visible borders onto everything. Start with the obvious: tablix's,text boxes, lists, images but also add to Report, Header, Footer, Body etc.
Make them all a different colour. You should then see which object is spilling onto the other page.
Note: adding a border adds a pixel (or point) to the width and height, so make sure you adjust for that when removing them or identifying the culprit.
Plan B:
From the screenshot, your empty page does not have a Batch:[Name] which indicates it could the way you are calculating your group maybe causing the problem (if it was due to pushing an element too wide, the header should have the same [Name] as the previous page.

HTML adjustments

I made the following website (http://abrradesignstudio.com/) using a HTML builder template.
Looking at the categories (All, Brochures, Resumes.... etc.) I see that they are somehow aligned to the left. Maybe they are centered, but if the row is not sufficient, it makes a new one, leaving the first one with too much space to the right (making it look left aligned).
How can I avoid that and make them really centered?
Is there a fast way to make all other images disappear (instead of dim/gray-out in the background) when selecting a certain category?
Another question: My contact form is not working. I saw on a similar website that they use https://formspree.io/.
I did the same, but I still get an error submitting. My code is 1:1 with the other one (that works), just the e-mail is different.
If you know very little about HTML or CSS it may be best to read up some blogs and tutorials on CSS (there are many, many out on the net) .
The Solution
In .filters li (line 4542 in theme-nearblack.css) turn off float:left; and your display will show as you want.
floats do just that, they float outside of the flow of the document so it's much more tedious to try and centre them. As the parent element to this li is already floated there isn't much point floating the contents as well.
Stack Overflow Questions
Please when asking questions can you paste a minimum working version of your code which displays your problem, rather than links to external websites which will change. Posting code blocks into your question means whenever someone in the future reads your question they can see exactly the issues you are having (and how they are solved).
Please Take the Tour.
If my solution works for you can you mark up and tick, thanks.

Chrome issues with borders, moving elements etc

I've been having small issues with Chrome for quite some time now, and although I have discovered several Stackoverflow threads with similar issues I simply cannot find a fix.
The issues are as follows:
Certain elements borders appear as 1px (when in reality they should be 2px) and only fix themselves if I zoom in and out of the page, or Ctrl+A highlighting everything.
Other elements move slightly (either the element as a whole, or the text within them) when I hover over it.
Text also fails to appear sometimes and only reappears if I hover over a nearby element.
The issues are specific to Chrome, and I understand opacity (something used widely throughout my project) can be an issue with the browser. I found several threads that cited transforming, positioning relatively etc as solutions but I have had absolutely no luck. Sometimes when I load the page these issues don't exist and the elements appear normal (minus the text disappearing, that's pretty much a constant).
I've attached a video so you can see the issues first hand, but I am unsure what code I should attach. If there's a specific elements code you would find helpful to see I will happily upload it here. I can also send page files if that helps, but I'm not sure if it fits within the rules here.
Anyway, here's the video: http://sendvid.com/uvq3gpzo
Apologies for being so vague, as I know that's not particularly appreciated around here. I just have no idea where the issue lies and thought someone may have had something previous beforehand.
Thanks for taking the time to look into my problem and any help would be much appreciated.

Tables Rendering Incorrectly in IE

I am having a real problem with a tables being rendered incorrectly in IE in an e-commerce store I'm setting up for a client. Here's the link:
http://jpgrv.zjbzq.servertrust.com/products-s/1819.htm
The tables are the areas the actually products are contained in. If you look in IE, you'll see that the height of the rows are too high. I've tried to apply CSS directly to the rows and to the columns (inline, external stylesheet and internal stylesheet).
I had a thought that maybe the images were too tall so I resized them and tried it, but to no avail.
I've done a Google search knowing that there are quite a few bugs in regards to tables and IE but none of the known issues that I've found have helped me find a solution.
BTW, as you look at the source code and inspect the site, it may look like a crazy mess of tables, etc. which is because this site is built within the Volusion framework so there's a lot of dynamically generated content.
If anybody has any suggestions or can point me in the right direction, I would greatly appreciate it.
The extra height is there because of a div "add_button" inside a div "container".
You can see it is this screenshot:

Chrome shifting divs downwards?

I'm having some CSS issues that seem to only occur in chrome. The site in question is liveinthelead.com, and it's still being worked on so if you notice any other strange problems feel free to let me know, I won't be offended. My main problem is this though:
In all of the browsers I've tested except for chrome the site looks fine. However, in chrome, on the main page, the middle post in the three-post divs are shifted down about 20px. But when I open up the developer interface, they shift back to where they're supposed to be! Maybe it's just a local problem, but here are some pictures of what I'm talking about. If you don't experience the same issue then maybe it's just something weird going on with my computer. Cheers.
When I initially load the page
After I open the developer console
One thing that I noticed is that in your div#three-post you set float:left to div.member1 but not to the remaining div.member2 or div.member3.
That's where I would start investigating the problem. Maybe you should set the remaining two divs to also float left. You may need to clear them afterwards too.
For the sake of convention — and so that you don't encounter this confusions again — use IDs for selecting specific elements, e.g., member1, member2, member3, and use classes for selecting multiple elements that should share the same attributes.
I'm unable to replicate on Chrome 15.
=\ could be a good thing! Try another computer!