I am just about to wrap up my first ever major web development project after teaching myself to code over the past couple of months. However, I am still struggling with a couple of the basics it would seem.
I have a instance of the page loading completely differently on Firefox than it does in either Safari or Chrome.
You can see an example of the page I am referring to here: http://fmhgifts.com/home-office/ but I have included some screenshots as well to demonstrate what I mean. First off here is it displaying correctly in Chrome:
and then here is the exact same page as it renders in Firefox:
I have spent some time trying to play around with the web development toolbar in order to diagnose the problem but so far have been unable to do so. If someone with more experience would be able to help me with this I would be insanely grateful.
The problem is that you're using -webkit-transform, which is specifically intended for webkit-based browsers (Firefox does not use webkit, and neither does Internet Explorer). There are a number of ways to achieve a grid without -webkit-transform. You seem to be using one such way already: the top and left CSS properties (there are also bottom and right properties). Play around with those.
Just try remove float:left from
#filter-bar {
float: left;
margin-bottom: 35px;
}
rest i think it will take care on its own . Try and let me know . since its a floating elemnt the other divs are getting pushed up rather than being dow . Firefox is actually right in that sense . u will need to re adjust chrome styling making it uniform for all .
Related
So I developed a profile on a website of mine in Firefox (the website accepts HTML in profiles). I then opened it in Chrome and, while there's differences and Pros and Cons I notice to each, I'm not really bothered by anything except the fact that my audio player at the top is properly styled in Firefox, but not in Chrome.
It seems to me that the "height" CSS didn't take in Chrome for some reason, meanwhile it takes just fine in Firefox.
Any idea how to fix this issue? If not, at least help me to make it so that it'll display normally in Chrome, even if it has to be fat instead of the slim bar I wanted. At the very least I want it to be functioning and not obscured by the page, even if it's not exactly what I had envisioned.
I've tried several #media "hacks" to target only Chrome / webkit but they don't take either.
Profile in question located here (flash required). Sources are freely available in the sources tab. The CSS classname is .BGM.
Thanks.
Edit: Images of the difference: https://imgur.com/a/EQyqD
You can see the problem - I want it to display correctly like it is in Firefox, not be crushed like it is in Chrome. I'd actually like to be able to style it further for Chrome - make it styled the same in Chrome as it is in Firefox - though I'm guessing that Chrome may just not be as flexible about this as Firefox is.
PS: Yes, insane that a site still runs on Flash over HTTP in 2018, and yes the profile designs on the site are all juvenile and edgy. It's a guilty pleasure of mine - and it's a nice little coding playground.
Change the height attribute within the .bgm class to something bigger, like 30.
If you're really attached to how the player looks on Firefox, you can also introduce some Chrome only margin to .bgm:
-webkit-margin-before: 12px;
If you want to make the Chrome player slimmer you will need to look into webkit masks, which requires an additional image file.
I have come across a few issues on a Joomla site that I have built using Joomla 3.5.1. I have written CSS to ensure that the site is responsive and this all works fine.
The problem I have is that the site's header shows up different in the following browsers and versions:
Firefox 48.0.2 (this shows up fine)
Chrome 52.0 (telephone number out of place)
Internet Explorer 10 (telephone number and search bar out of place)
I am not sure how I can target for the site to work correctly in Chrome so therefore not sure how I fix this in my css. I was under the impression the site would show up the same in all browsers like Chrome, Firefox and it would only be Internet Explorer where I can target different styles, but there is something thats not quite right.
The site's URL is: http://www.leicesterbakery.co.uk
I would appreciate it if somebody could give me some advice on how i can fix this, as I have tried the inspect element in Chrome but can't pinpoint how to fix it.
Thanks in advance.
FF and Chrome render fonts in different way, there is always 1-2px different. You can try to use a bit smaller font, or make parent object a bit wider - try to reduce padding for phone icon - you will see this will also help in Chrome.
About IE - think it is issue with floats. i'm not sure how to fix it,
Maybe try not to use so big padding-left for Phone icon. think better solution for icon can be position: absolute;
I am trying to make a website for my family's B&B and I don't have much experience with web coding.
This is a website template I bought from the internet, and I didn't have that many difficulties with it until now where I find myself completely stuck to a point where the contents of a specific webpage of the website are not displayed correctly across Chrome Firefox and Internet Explorer, mostly the problem is with IE since the viewing issues between Firefox and Chrome are close to none.
I was told on IRC that this is caused by the CSS not being read correctly from the browsers and that every browsers tend to view pages differently, and therefore I should create a specific css style for IE in order to address this compatibility issue.
Unfortunately though I haven't been able to find out what is causing the issue.
The "container" where those contents (just pictures and texts) are located in the page is called grid_11 and belongs to the grid.css file located in the css folder.
I tried to play with margin, something like
.container_24 .grid_11 {
width:430px;
margin-left: 40px
}
but the result is that the box containing all the contents moves throughout the page along with them.
Here I am at attaching the screenshots of how the page is displayed across the three browsers.
http://imgur.com/mgDYbD3,bZC3wHI,yd6BX8t
And here's the html code alongside with the css http://jsfiddle.net/r5QHW/
This is really getting above my pay grade now. I'd truly appreciate if someone could help me out with it.
Thanks,
Pietro
The question you want answered is one of the below... good luck!
Where is there a list of css property support by browser?
W3schools has lots of ads but is a good resource.
The CSS property support table: http://www.w3schools.com/cssref/css3_browsersupport.asp
The list of all references on their site: http://www.w3schools.com/sitemap/sitemap_references.asp
How do I debug code in a specific browser?
What you want is the Developer Tools. You actually open the page in the browser you're evaluating and then follow the instructions for each browser's developer tools to figure out what broke.
Chrome: https://developer.chrome.com/devtools/index
Firefox: https://developer.mozilla.org/en-US/docs/Tools
IE: http://msdn.microsoft.com/en-us/library/dd565628%28VS.85%29.aspx
Im facing an strange issue with IE9. I see lots of random black borders in my page even thought they are either box-shadow or simple border: none. Im using windows in Parallel Desktop in my iMac. Is it just my computer or its a common bug?
It's not giving me any issues in IE9 or Google Chrome; it must be your computer.
It is an issue that we recently experienced with IE9, and if you are seeing it, there could be a good possibility that many others are too.
If I remember right, I think we resolved just by applying
img.class {
border-style: none;
}
for the appropriate classes/id's in CSS - it's probably worth playing around with this just to see if you notice anything change in your browser before ignoring the issue.
Try testing by applying the above to every image on the entire site, then you will see if it is resolvable from this method.
I seem to have a glitch on in Internet Explorer and wondered if anyone could shed some light
Taking the following page as an example
http://www.flipfilter.com/websites-for-sale
When running in IE not under compatibility mode, all the Cufon (js font replacement) headings disappear. When I click the icon to enable compatibility mode, the pagination seems to go crazy and extends down the page.
Can anyone point me in the right direction, specifically as to what causes either of these problems?
If the problem is a validation issue could you point me to which one specifically causes the two errors?
Just have the pagination issue to
resolve now!
Compatibility mode emulates IE7, so fixing your site to work with it ensures that your site will look acceptable to genuine IE7 users.
You can fix the pagination problem by adding float: left to #pagination-flipfilter li.
You might also want to adjust the margin slightly.