I have a problem showing my page visually the same on FireFox and Chrome.
Page renders correctly with Chrome (showing icons in two lines), but in Firefox icons break visually and create a third row. I think that the problem is with Bootstrap, but I don't understand why. I have tried different solutions, but nothing.
The page with this problem:
Link of the page: http://www.unishare.it/sedi/1
You have a lot of things going on in your HTML. Firstly, you shouldn't write any code outside of the scope. You should place your custom style elements always inside of the tag. Secondly, move bootstrap.css to the top. That is your css boilerplate (That is the css code that resets your visual settings across all browsers). All the other css files (font-awesome.css, slider.css, etc...) should be placed after the boilerplate css code/file.
After placing all library css files, your custom css files should be the last ones in the tag (I mean all the style codes at the top of your html page).
Try these suggestions and come back with the result. I believe you'll be good to go then.
EDIT: After taking a second look and playing your HTML with FireFox's dev tools, I created a solution for you. Just surround your "portfolio-boxes" divs with a row. They are not actually recognized as a seperate row in your DOM, that's why they don't appear in two seperate lines.
In short, you should create a div with a class of "row" for every "portfolio-boxes" div, seperately.
Does that solve your problem? If yes, you can vote up and select the answer ;)
Related
I'm asking for help for those who have experience in changing an html file to a php file. I've tried everything I know (and I'm not the smartest I admit) but I don't understand why the following is happening.
Currently: When viewing on mobile, the mobile menu button has gone, the toggle switch which changed prices from monthly to annually, tabs which displayed different content has gone. As a result:
If there was a toggle, both the toggle results are displayed one above the other
If there was a tab, each tab element is displayed underneath the other
The mobile menu button has gone completely
Background:
I purchased an HTML template but it turns out the seller didn't want to help. I wanted to split and convert the page into a php page as I wanted a single header/footer file which I could import. As you will see (if you check the repo) the header.php and footer.php file is getting imported into the page php file.
I created the pages by first:
Renaming the original html file to a php file
Cut the header and footer and import them back into the page php file
That's all I have done. It seemed to work, however another check (after cache cleared) I noticed the issues.
The link to the site page im referring to is:
https://blueboxhosting.co.uk/products-cloud-hosting
But if you look at any of the pages, you'll see errors on all of them now where they're should have been controls (eg toggles, mobile menu, tabs etc)
I've created a snipped so you can view the code and HOPEFULLY spot where I've been a moron:
https://bitbucket.org/snippets/bbhostinguk/7e5qxp
Any help with this would be amazing as I just can't figure it out.
Start by running the HTML generated by PHP through a validator, e.g. https://validator.w3.org/
Your code has numerous stray tags which may or may not affect the rendering.
Another tip is to comment off everything and then uncomment section by section and check when things start to break.
I sort of feel like a moron for asking this but I've been stumped on this question for about 2 days. On a website I'm trying to put together, http://gravenimage.us/awf/ , the sidebar, which I want to be on the right in the main content area, is showing up at that bottom. I've tried adjusting the max-width, css align, css display, and a bunch of other things. I've gotten the sidebar to move around a little bit but that's it. I'm pretty sure the issue is that the main content is fixed to a certain width, and it's supposed to be flexible for when the sidebar is called, but that's just not happening. Any ideas? I'd really appreciate some assistance.
http://www.gravenimage.us/awf/screenshot.png
Check your page / post copy... make sure to view HTML mode and not the visual mode,
check for any rouge opening or closing div tags that may be there,
when you copy paste content into the visual editor, most of the time any html content will be pasted in there also..
or check the theme /page.php file, looks like the sidebar is being pulled in the content div, messing up the rest of the layout!
check for any instance of...
<?php the_content();?>
<?php get_sidebar();?>
good luck..
In reference to my testing site's page:
http://thepfjstudios.com.au/testing/content/NewAbout.php
I have a Spry menu on the left side, that when is being used, seems to kill the <p> tags in the content section on the right side.
The .css file used is:
http://thepfjstudios.com.au/testing/SpryAssets/SpryMenuBarVertical.css
and the .js file is in the same folder but is SpryMenuBar.js
I've been playing with this for 2 days now and can't figure out why there is no longer a space between paragraphs in the content section on the right side. If I don't use the Spry menu, the content section shows just fine.
I would post code here but all 3 pages are relevant to this question and would take up a very large space.
SpryMenuBarVertical.css on 12 line defines:
* { margin:0; padding:0}
margin:0 is affecting your paragraphs. I suggest that you delete that line and adjust the menu's styles to suit your needs.
Edit: I think I should tell you how I figured it out in case you encounter a similar problem in the future. Here are steps for Google Chrome, and it should be similar in other browsers.
Right click on the affected element (in this case, any of the paragraphs).
Select Inspect Element.
Under the Styles tab, you can see all styles that do or would apply to the element. Try unchecking some of them to see what they do.
Under the Computed tab, you can see what styles the element is using.
If you go to "Game rules" section and click around the sections "Backgammon, Narde, Nackgammon, Tavla, Old English" you will see that some sections load normally and the scrollbar works fine. Bigger sections like Backgammon and Narde do not load fully. The content in backgammon section is going out of the margin and the Narde section simply won't load fully.
What could be the issue here? All of the sections with scrollbar have the same identical settings. The only difference is that Backgammon and Narde sections have more text and more images. Could this be a reason for the glitch? Maybe the plugin somehow doesn't get to load all the content and already locks itself in place? What could be the possible solutions?
EDIT: I'm pretty sure it has something to do with tinyscrollbar plugin loading a bit too fast (before the inside content has loaded). What method could I use to put a timer on the plugin so it doesn't load as quickly or refreshes?
first it seems that your "p" elements styles do not have width set to it and when rendered they hide behind the scroll bar making some of the text not visible.
This may not answer you question directly but it may have something to do with portions of text being hidden by overflow:hidden / overflow:scroll that is being used for the scroll bar.
You could also try using the jScrollPage plug in as it simplifies the scroll bar coding.
I need to include the content, scripts, forms and dynamic abilities of one page in another onClick.
Take a look at http://www.divethegap.com/scuba-diving-programmes-dive-the-gap/dahab-master-scuba-diver.html
Then follow one of the links that says 'Beginner' 'Open Water Diver' etc....
You will find a PHP page with a series of options. It is an adaption of the wordpress blog system to produce only specific options for specific programmes by considering each type of each diving programme a category and then displaying only results from that category.
You will see that each option is also a collapsible panel and there are also several javascripts that calculate durations, quantities and prices. There is also a validating webform at the end.
Now go back to the first page. What I would like to do is include all the content from the second page after the main header inside tabbed panels on the first page so that the customers can immidietly see everything that is included. Essentially the options on the first page would become a series of tabs.
The only way I can see to do this is with an iFrame as each option would need a unique URL ending (that is .php?cat=26 or .php?cat=27). THe problem is that the collapsible panels will not work with an iFrame as the iFrame will not resize when the panels open. There were also some calculation problems, but I think that was more down to me staring at the screen for the last 3 hours not remembering to include everything.
I have tried it with resizing iframe SSI scripts and have got nowhere.
I tried actually embedding it in the page better with a ajax script, but that left behind all the scripts that make it work. I checked with full URL's on everything and it would not take work with any scripts.
I know that you could just make the whole page reload but then the user would be at the top of the page again, and even if another script was applied to slowly bring them down again it would not be anything near as easy to use as if it was like tabbed panels.
Any ideas.
Kind Regards,
Definitely no need for iframes. AJAX will do the trick here.
Here's a link with a demo + code:
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm