so our site is built on a CMS and is using CMS driven background images on our banners, as such the banners has inline styles on the html element dictating what the background-image was. This all worked fine.
I made a change so that the css is in a style tag just before the element so there is no 'inline styles' on the pages.
This works fine on desktop, when resizing and using mobile browser simulators, but on 2 Android phones I've tested on some pages the banner image shows for a split second and then vanishes. The confusing thing is all the banners on the site use the same css and html, but only certain ones break.
The ones I know that break are on the 'Web Development' and 'Contact Us' pages.
This is not something I have seen happen before, and there is no difference between code on each page, no javascript touching these, and they worked before I made recent changes (of which the only bit effecting these was moving the style from inline into a style tag).
Working page:
https://www.pixelhero.co.uk/web-design-bristol/
Not working:
https://www.pixelhero.co.uk/about-us/
Does anyone have any ideas why this is happening? Or able to check if they see the same problem?
Image file sizes and dimensions don't seem to have any impact either (as often used to be the case)
I'm lost on this one, and can't seem to find an explanation for this use case.
Thanks all
Related
So my problem is that for some reason on one page of a website I've been fiddling with, the two navigation bars that I have (Top and Sidebar Navigation) are for no apparent reason scaled down in the Google Chrome browser, their behavior is entirely normal in both iE and Firefox. The bar's remain completely functional, but are simply scaled down perhaps to 66% of the intended size.
Here is the code for the page in question: http://pastebin.com/uvrPR1JW
Here is the code for a similar, but functioning page for reference: http://pastebin.com/5dAMREfC
They're running off the same style sheet so the issue is likely in the HTML, however the style sheet is linked in the comment section for reference. If anyone spots any reason why it would be doing anything like this it'd be great to know. And I apologize for the messy code, as I said I'm just playing around with it.
Update:
You may notice that my code includes at least one flexbox, here is question posted by another user that may be related but I can't make heads or tails of it: Chrome shrinks figure elements as they are added to a flexbox
Update: Doesn't seem to be a problem with the flexbox, the issue still exists even when I remove all content except the top header.
I'd say it's the setup of your navbar, how you have an image and you just change the position of it on hover. Chrome has a weird feature where it moves things around when there is images so I would suggest looking up how to make a proper navigation bar (It's pretty easy).
Check out my site here to see the issue across different size screens and on mobile.
I originally used the Luna theme in Bigcartel, having modified parts to make it bespoke to our brand. Whilst doing so the Luna responsive theme no longer worked... having not changed it one bit (Something in my actual code must have caused it to stop working)...;it would just show a blank white screen (mobile).
I then copied and used the responsive style of a separate theme, which causes my site to act like the normal site on a mobile etc... however the headers/footers are all out of place and mis-sized. I have tried changing all widths to %, but have failed to notice any differences. I had managed to change the size of the flexslider.. so that now it works but I am struggling to change the size of the other major components on the page (including navigation bar).
I am reluctant to post any code in here as of yet... as I'm not sure what to include (I dont want to include all the responsive styles), but perhaps someone could point me in the right direction?
Thanks,
I have a problem with a site displaying correctly in IE11. Everything is fine in Firefox and Chrome.
It is built using zen cart and the index page is made up of a series of html banners. One of these banners contains the code to display a twitter feed. In IE11 this is being output outside of the div it is supposed to be in.
I'm looking for suggestions on how to fix this issue. I tried adding an IE specific line in the stylesheet to move it up but it goes so far, until the top of the feed is roughly aligned to the bottom of the coloured heading next to it, and then one pixel more and it jumps up dramatically.
I resolved this by removing the height and margin-top that i had set on the original div and then added new positioning to the stylesheet using the class in the embedded code provided by twitter. The additional css i added is just loaded up along with the embedded css.
I have a site with a header div and an iframe used to display a map in the rest of the page, resizing to the maximum space it can under the header div.
I can get the method working on Firefox and Chome, but the iframe won't fill the div on IE9. Anyone know what the issue is? Rather than post html, here's a few links to the problem page and the old page I'm re-designing that does work in the same way in IE9.
New problem page (doesn't resize div in IE9):
http://permitmap.paydirt.co.nz/devtest/permitmap.html
Old page using the same technique that does work in IE9:
http://permitmap.paydirt.co.nz/
It might be my abuse of Twitter's Bootstrap? I use bootstrap it as it's meant to be used on normal content pages, but this page is a one-off that needs to display a map in as much of the page as possible while still following the styling for the header as the rest of the site.
And my use of tables for layout is also bad practice I know, but it's the only method I've found to achieve the desired effect with the iframe (believe me, I've tried a lot of ideas out that don't use tables!).
Thanks in advance any CSS / HTML gurus out there that can help!
How much time is lost making IE behave like other browsers!? Microsoft must cost the planet an incredible amount in lost man hours and extra expense supporting IE.
Ah, just noticed I had to solve this issue with the original page.
Removing the DOCTYPE element from the top of the page resolves the issue in IE9!
I recently made a new WordPress theme for a local travel company and they are now getting reports that two elements in my design are not in the correct positions in Firefox (seems specific to version 3.6) and Chrome for Mac.
A page where both issues are visible: http://www.totemtravel.com/blog
Issues:
The white flag with the logo on it at the top of every page jumps
several inches to the right to cover the area code of the first
phone number.
The search button at the bottom of the blog categories widget in the sidebar jumps to the right, out of the widget, and off the page content wrapper.
I think the issue has to do with where those browser assume the item should be before the relative positioning, but I need a way to make these all look the same across all modern-ish browsers.
I wont paste the pages of source code behind the theme since it can be easily viewed with Firebug or the Chrome inspector, but please let me know if any additional info would help.
1: The img for the white flag must have left:0. Not all browsers default to left 0. Firefox for example, is defaulted to left:50%. Another problem is your trying to relatively position a td element for the title "Totem Travel", this is invalid and I would recommend using divs here instead of tables.
2: This is due to the native CSS styling differences of the browsers. That is why people use CSS Reset style sheets, to zero everything out so you know for sure the "default" css is the same. Here's an example: http://meyerweb.com/eric/tools/css/reset/. The effect this is having on your css now is that, the submit button is falling down to under the input as it doesn't have enough space - so when you are relatively positioning it it is off in the browsers.
3: Relatively/absolutely positioning everything isn't quite the best way to go about styling a website. You will find many inconsistencies like you are experiencing and there are better ways. I would recommend visiting some example themes on sites such as themeforest.com or elegantthemes.com and seeing how they do their CSS and HTML