Safari - IE - Firefox - CSS Displays different in each
Im hoping to get some help/direction for this site I am
working on right now. I am fairly new to CSS and it shows I am
sure. I have created 4 or 5 sites now using it and I am gradually
getting better but still having trouble getting my CSS to display
correctly in all browsers.
Here's the deal, the site looks wonderful in firefox on both
mac and pc platforms. IE and Safari on both platforms does some
weird things to the design. I am aware that there are 10 ways to do
things in CSS and had a feeling I was not using the correct method.
Here is the
Link
Issues of concern:
- Main navigation links word spacing is not consistent in all
browsers.
- The spacing between each cell seems larger in IE and
Safari.
- The damn scroll bar moves position in safari.
Thanks in advance to anyone that has any advice, it is much
appreciated.
Trevor
You have set a width=100% for the TABLE #content-container, but you didn't specify a width for the enveloping parent TABLE.
If you also set a width=100% of that TABLE then it works for me in Firefox 5.
Similar Messages
-
Since yesterday neither Safari 5.0.5 nor Firefox (latest vs.) will display PDFs in their windows. Black window for Safari, white window for Firefox. Anyone know how to solve this? Thanks
Quit Safari.
Go to /Library/Internet Plug-Ins/
Move these filess to the Trash.
PDF Browser Plug-in
AdobePDFVieweer.plugin
Relaunch Safari. See if that helped. -
can a macbook process using safari and firefox (or chrome) at the same time? Does each compete for IP addresses?
Thanks for insightHI and welcome to Apple Discussions...
Your ISP assigns a new IP every time you access your browser not matter which browser it is. You can have as many different browsers open at the same time as you want. Safari/Chrome/Firefox ...
Does each compete for IP addresses?
No.
http://ask-leo.com/howis_my_ip_addressassigned.html
Carolyn -
Images displayed differently in Firefox
I have a Dreamweaver page that displays normally in IE. But when I open it in firefox, one of the elements is displayed differently. Specifically, I have some social media icons that are supposed to be displayed horizontally, and they are in IE. But when I open the same page in Firefox, it displays those same icons vertically. How can I correct that? Thanks.
http://www.blackexpotourweb.com/hampton.htmlThis is what I see
<style type="text/css">
html {
background-color: #000;
height: 100%
body {
width: 1000px;
margin: auto;
background: url(http://www.keystonemkg.com/Hampton.gif) no-repeat;
height: 800px;
position:relative;
background-image: url(Hampton.gif);
.maintext {
font-family: "Courier New", Courier, monospace;
#apDiv1 {
position:absolute;
width:174px;
height:305px;
z-index:1;
left: 289px;
top: 329px;
#apDiv2 {
position:absolute;
width:328px;
height:449px;
z-index:2;
left: 138px;
top: -49px;
#apDiv3 {
position:absolute;
width:137px;
height:126px;
z-index:2;
left: 448px;
top: 417px;
.infotext {
font-family: Georgia, "Times New Roman", Times, serif;
color: #FFF;
siteinfo {
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
color: #000;
.siteinfo {
font-family: Georgia, "Times New Roman", Times, serif;
color: #000;
#apDiv4 {
position:absolute;
width:715px;
height:22px;
z-index:3;
left: 253px;
top: 804px;
#apDiv5 {
position:absolute;
width:170px;
height:242px;
z-index:4;
left: 46px;
top: 408px;
text-align: center;
dropsha {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
#apDiv6 {
position:absolute;
width:883px;
height:62px;
z-index:5;
left: 71px;
top: 141px;
vertical-align: middle;
text-align: center;
#apDiv7 {
position:absolute;
width:170px;
height:69px;
z-index:4;
left: 51px;
top: 710px;
text-align: center;
#apDiv4 .infotext .siteinfo {
eventtext {
font-family: Georgia, "Times New Roman", Times, serif;
#apDiv8 {
position:absolute;
width:181px;
height:27px;
z-index:6;
left: 281px;
top: 327px;
font-weight: bold;
a:link {
color: #FFF;
a:hover {
color: #F00;
#apDiv9 {
position:absolute;
width:200px;
height:115px;
z-index:6;
left: 16px;
top: 764px;
.maintext1 { color: #FFF;
font-family: Georgia, "Times New Roman", Times, serif;
#apDiv10 {
position:absolute;
width:115px;
height:36px;
z-index:6;
left: 831px;
top: 716px;
float: left;
#rightjust {
text-align: right;
#apDiv11 {
position:absolute;
width:868px;
height:53px;
z-index:7;
left: 77px;
top: 214px;
text-align: center;
</style>
What you need to do is add the bold part into this as per
<style type="text/css">
html {
background-color: #000;
height: 100%
body {
width: 1000px;
margin: auto;
background: url(http://www.keystonemkg.com/Hampton.gif) no-repeat;
height: 800px;
position:relative;
background-image: url(Hampton.gif);
.maintext {
font-family: "Courier New", Courier, monospace;
#apDiv1 {
position:absolute;
width:174px;
height:305px;
z-index:1;
left: 289px;
top: 329px;
#apDiv2 {
position:absolute;
width:328px;
height:449px;
z-index:2;
left: 138px;
top: -49px;
#apDiv3 {
position:absolute;
width:137px;
height:126px;
z-index:2;
left: 448px;
top: 417px;
.infotext {
font-family: Georgia, "Times New Roman", Times, serif;
color: #FFF;
siteinfo {
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
color: #000;
.siteinfo {
font-family: Georgia, "Times New Roman", Times, serif;
color: #000;
#apDiv4 {
position:absolute;
width:715px;
height:22px;
z-index:3;
left: 253px;
top: 804px;
#apDiv5 {
position:absolute;
width:170px;
height:242px;
z-index:4;
left: 46px;
top: 408px;
text-align: center;
dropsha {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
#apDiv6 {
position:absolute;
width:883px;
height:62px;
z-index:5;
left: 71px;
top: 141px;
vertical-align: middle;
text-align: center;
#apDiv7 {
position:absolute;
width:170px;
height:69px;
z-index:4;
left: 51px;
top: 710px;
text-align: center;
#apDiv4 .infotext .siteinfo {
eventtext {
font-family: Georgia, "Times New Roman", Times, serif;
#apDiv8 {
position:absolute;
width:181px;
height:27px;
z-index:6;
left: 281px;
top: 327px;
font-weight: bold;
a:link {
color: #FFF;
a:hover {
color: #F00;
#apDiv9 {
position:absolute;
width:200px;
height:115px;
z-index:6;
left: 16px;
top: 764px;
.maintext1 { color: #FFF;
font-family: Georgia, "Times New Roman", Times, serif;
#apDiv10 {
position:absolute;
width:115px;
height:36px;
z-index:6;
left: 831px;
top: 716px;
float: left;
#apDiv10 img {
float: left;
#rightjust {
text-align: right;
#apDiv11 {
position:absolute;
width:868px;
height:53px;
z-index:7;
left: 77px;
top: 214px;
text-align: center;
</style>
and remove the float: left that you placed in the meantime under #apDiv10
Gramps -
Fonts Do Not Display Correctly in Safari and Firefox
Certain fonts do not display smoothly in Safari and Firefox. They appear to have little pieces of the letters missing. I'm sure others have experienced this problem before but I could not find how to fix this. On the Apple Discussions the fonts look fine... on Google for example, they look messed up. I do not know specifically which font(s) are displayed weird but it happens frequently. This happens in Safari and Firefox on my MacPro and MacBookPro. Is there a setting to fix this?
Thanks,
-flashHello Flash, welcome to Apple discussions; )
Look for Helvetica Fractions and Times Phonetic Fonts, if you have them,
they can be the usual suspects.
Check the Text encoding in both Safari & FF, under the "View" menu.
In System preferences-> Personal (top section) in Appearance tab->
on the last portion of the panel Font smoothing Style: set that to Automatic
If those don't help, see this users tip excellent article Kurt Lang's ~ Font Management in Mac OS X
Look into this application to find any corrupt font[s]Font Finagler
Good luck, let us know how you fare.
Eme'~{)
edited by: Eme -
PDFs display differently in Internet Explorer 9 versus FireFox
We use Adobe Reader X in all cases (10.4.1)
On old computer, we have a website we go to using Internet Explorer (version 8.x on XP) where we ope/save & print to a PDF file. The information on the PDF prints vaules in a certain order - for example: A,B, C --works great--this is what we want it to do.
We buy a new computer, Windows 7 with IE9, and the PDF displays with the same values in this order: C,B, A - not good, do not want that.
We try FireFox on the new computer -- works great --just like it did on the old computer.
What setting in IE9 is causing this PDF to display differently than in FireFox (or IE8)?
UPDATE: We did load IE8 on Windows 7 (by uninstalling IE9) and the PDF works fine --so it's not just something unique to FireFox. IE9 is displaying information in this PDF differently--why?Add/update these params in your web.xml and redeploy so the style class names are not optimized and client debugging is easier.
<context-param>
<param-name>org.apache.myfaces.trinidad.DEBUG_JAVASCRIPT</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION</param-name>
<param-value>true</param-value>
</context-param> -
Lion text problem: Some text does not display properly in Safari and Firefox
Hello
Some text in Safari and Firefox is seriously degraded, making it useless. I changed to Firefox because Safari was displaying wrongly, but Firefox displays the same way, so it seems to be an OS problem. See image as an example:
I cannot see subtitles on BBC streamed movies, and the timing of the movies on the bottom ribbon do not display correctly.
I am using Lion 10.7.5
Is there a solution for this problem?
Thanks for any help.Unbelievable (and I still cannot believe that) - is wmode="transparent/opaque/etc" - not supported by safari ? then how do you suggest we go about transparent flash elements on web pages? why isn't it working on safari while on every other browser on earth it does?
-
Image layouts display differently in Safari than in Explorer
I have noticed that web page images display differently in Safari than in Explorer on a PC. On a PC, the web page may display three images side by side. In Safari, I might get two images side by side and the theid image below. Is there any correction for this? Thanks.
Norb#sidebar_1 a:vistied {
color:#000;
is stating that all visited links in the #sidebar_1 div to be black. Are you saying that all visited links are black, outside the sidebar_1 div?
Jim -
Chinese display improperly in Safari and Firefox after OSX 10.6.7 update
After updating to 10.6.7 some Chinese websites don't display properly in both Safari and Firefox on my '08 book pro, while the '09 iMac has no such problem. On the book pro Chinese characters appear as unreadable squiggles. Other apps (word, mail, photoshop) seem to do fine post-update.
Anyone encountered this? solution?Puzzling. Why should it happen after the 10.6.7 update?
There is a long history of duplicate fonts causing problems in OS X. Do you know for sure whether you had duplicates of that one in 10.6.6?
Is this related to other more serious font problem reported by other users after the update?
I don't think the other one can be fixed by getting rid of duplicates. -
I just updated to 10.8.4 and my mail program is showing a series of boxes with AAAAs inside them instead of the email addresses. Also when on Safari web pages are displaying the same AAAAAs instead of type. Firefox displays fine. Can someone help me?
Restart your Mac and immediately hold down the Shift key when you hear the startup chime to boot into Safe Mode. Keep holding the Shift key until you see a progress bar towards the bottom of the screen. You can let go of the Shift key at that point.
OS X asks you to log in (you will get this screen on a Safe Mode boot even if your Mac is set to automatically log in). Let the Mac finish booting to the desktop and then restart normally. This will clear Font Book's database and the cache files of the user account you logged into in Safe Mode.
Next, close all running applications. From an administrator account, open the Terminal app and enter the following command. You can also copy/paste it from here into the Terminal window:
sudo atsutil databases -remove
Terminal will then ask for your admin password. As you type, it will not show anything, so be sure to enter it correctly.
This removes all font cache files. Both for the system and the current user font cache files. After running the command, close Terminal and immediately restart your Mac. -
Why is firefox displaying differently than IE?
I'm trying to display the slideshow on my homepage without any border. The correct view is found with firefox. The main content in my css currently has a 1pt solid border because two things happen when i remove it.
1. Firefox will display the slideshow off to the side.
2. Firefox shows a space between the main content and the logo section
I'd like to remove the border so that IE can display it correctly but i haven't found a way to do this without affecting the look in firefox. I'm thinking it has something to do with margins and so forth but i can't pin it down. Any help is much appreciated!
site is found at http://moss1.moranshipping.com and I've attached my cssIn case anyone was wondering the below seems to have solved my problem:
mainContent{
border-top:inset solid #FFF;
border-top:inset;
With this I still have the border in firefox that I need so there are no spaces in between sections and IE will not display a thick border around my slideshow. -
Is there a change in the way Firefox 4 displays fonts from CSS?
This site is coded using standard CSS and had Arial Narrow as first font choice for certain elements. In Firefox 4 / Windows 7 those instances are now defaulting to secondary font - Arial or to the default font Times Roman. EVERY other browser including past Firefox have displayed Arial Narrow properly - assuming the user has it in their system fonts - which is the vast majority of visitors. NEED a fix for this!
This worked for me:
font-family: Arial;
font-stretch: condensed; -
Why are websites such as Amazon, Lowes displaying different on a MacBook Pro OS X Yosemite and Safari or Chrome as browsers?
Even the http://www.apple.com/support/ website. See this screen shot from the bottom top and bottom of http://www.apple.com/support/
-
How can I disable the blue highlight on textfields in Safari and Firefox, using CSS?
Hi, I'm trying to disable the default blue highlight on textfields in Safari and Firefox. I can get it to work in Safari by using the following CSS code:
input {outline-style: none;}
This doesn't work for Firefox, though.
Can anyone help me to get it to work in Firefox?
Thanks in advance!Are you referring the the border color or the actual field color?
For field colour see the section on the input tag.
However if it is the border color, this is set by the browser o/s, and cannot be changed with any 'cross-browser' technique, it can be changed in IE and other browsers using custom behaviors (IE), or by using custom skins (others).
But the skins are only enabled by the user, and changing the chrome of the browser for form fields using JavaScript would probably affect the entire browser anyway.
PZ -
After pinning a particular web site in each tab that I want to use in Firefox 4, the tabs work as expected for the initial session. However, after ending and later restarting Firefox 4, each tab starts with whatever page was displayed upon the previous close of Firefox. Upon restarting, I would like for Firefox to display the original pinned web page. Any suggestions?
You can set the prefs dom.ipc.plugins.enabled.* to false on the about:config page to disable the plugin-container process.
dom.ipc.plugins.enabled.npctrl.dll (Silverlight)
dom.ipc.plugins.enabled.npqtplugin.dll (QuickTime)
dom.ipc.plugins.enabled.npswf32.dll (Flash)
Maybe you are looking for
-
How can I find out the web interface a module function is executed from?
Hello all, I was wondering if anybody knows how would be possible de determine the web interface a function is being launched from, within the function. I've got this function that is used for a exit variable that updates the variable value depending
-
Hiding a input field in the F4 help...?
hi, How can we hide a input field(selection criteria) in the F4 help. Eg- if we use standard serch help KRED_C for the field lifnr. i want to hide 'Name' from the filter criteria?? Thanks
-
Why is the preview taking elements away and stretching the page?
I am running Mac Mountain Lion with Muse. I have a footer bar with an image in the middle. It shows up fine with my other pages but on the newest pages I make, it disappears and stretches the page out beyond my minimum page size.This only happens whe
-
Hi. i bought an iphone 4 from china in a local store, before its software version was 4.3.5 now i updated it into ios 6 but my phone in locked now... so how can i unlock this phone? someone told me its a locked phone from at&t.
-
Hi , I wanted replace Database adapter in BPEL flow with WSIf implementation.For this i have came up with a class having data base operatins like insert update delete..etc. i have made the changes to the database adapter WSDL file to have the binding