the navigation bar in ** works fine in safari, however firefox is being a bit of a pain. I can see a small margin/padding difference between the two browsers, however can't quite work out why. any ideas?
EDIT: Don't worry figured it out.
font used was not rendered the same in both browsers!
You could use a mozilla hack (generally not advisable) and add Margin and Padding properties. It is recommended that you install Firebug in Mozilla. You can change your CSS on the fly and in your file accordingly.
Turns out it was a simple font rendering issue, due to -webkit-font-smoothing, note to self; check that out next time!
Related
A button in Chrome vs Firefox:
the baseline in Firefox seems slightly higher for the text. Is there way to lower the text? Just adjusting the margins based on browser?
Chrome CSS:
Firefox CSS:
The fonts were different. Though they are the same in CSS, they weren't being loaded properly so one of the browsers was using a fallback while the other wasn't. To help debug this document.fonts.check is very useful.
Thanks Temani Afif for the pointer in the right direction.
Use normalize.css. Most differents between browser will gone https://necolas.github.io/normalize.css/
Browsers have different base settings. Probably FF default line-height smallest then chrome. Anyway, Nobody find this different in normal using ;)
Okay, I have used reset CSS files for quite a while and they have usually worked, but since I have started using CodeIgniter (I don't think that has anything to do with it) there has been whitespace around div's that are unaccounted for and persistent across Firefox, Safari and Chrome. I took a screenshot of what I am talking about (the orange arrow is pointing to it):
Any help would be greatly appreciated. Like I said, CSS reset's don't appear to be working.
add display: block; to the img it will remove the extra white space check the result
and i also try the firebug and mozilla webdeveloper tool that they are great tool
My client is starting to get antsy....so any help would be greatly appreciated. I am having issues with my secondary page header images shifting. It is displaying correctly in Firefox, I haven't been able to check in IE yet w/out access to a PC. It was displaying correctly in Chrome, but shifting in Safari.
I added the "webkit hack" to write a specific css style for Safari, but once I did that....it started shifting in Chrome. What can I do to fix this issue??
http://airwavetelecom.net/beta/?page_id=2
There's some problem with the way you're using your .clearfix class that I'm not sure of. If you add a clear:both; to your .page_line class it will fix your problem.
You could parse the user agent and pass a different CSS file based on the result. However, it seems like a weird issue that shouldn't happen with proper CSS; can you post the specific bit that doesn't work?
By the way, you should read up on animation queue in jQuery! Hover many times on your menu and it'll keep flashing for a while.
The repositioning of .page_about is pretty odd. Why don't you just use .custom_title for the entire header? That wouldn't require such odd re-positioning.
I am pulling my hair trying to find a fix for this problem. If you go to this site you will see that (under IE) the slider and the menu on the top is broken. Works fine under all modern browsers.
Any idea how to fix this? Thanks.
Edit: Want to add that the original site design works fine under IE. I did a massive amount of editing under the hood and somewhere along the line this one was broken that I can't seem to find a fix for. Since I did a lot of customization, I think it seems unfair to ask the original author for a fix (and he is not very responsive either).
The document invalid. In particular, there is a <style> element before the Doctype. This triggers Quirks mode and causes browsers to become very inconsistent (e.g. IE emulates a log of bugs from IE 5.5).
Always work in standards mode and perform basic automated QA.
I can't check it for you, since I've not got access to IE right now, but I've often found that adding position:relative to misbehaving elements is something of an IE magic bullet.
No fix but a lead: the issue with the menu bar is one of IE's mysterious float positioning bugs, as can be demonstrated by putting <div style="clear: both">xxx</div> after the navbar ul. (Note that it won't work if the div has no content!)
stuff about box model deleted: as David Dorward mentions this is caused by quirks mode, and moving the style down past the doctype causes the slider to behave sensibly.
Could someone please work out what's happening here, and how I could fix it? I'm testing this page in IE6, IE7, FF and Chrome, and it works in everything but IE6. In that, there is a small gap between the edge of the chickens picture and the div it's in.
I hate IE6.
This may be the "three pixel jog" bug that shows in IE6 but not later versions of IE.
See http://www.positioniseverything.net/explorer/threepxtest.html for example.
Using a CSS Reset can help!
Lots of inconsistencies between browsers can be circumvented by using a CSS reset
I use the Meyer Reset method.
However, another option is the Yahoo YUI method.