Basic Layout not rendering correctly.

''locking as a duplicate of https://support.mozilla.org/en-US/questions/1035123''
Hello,
I've been trying to debug a problem I was noticing on my production websites, so I dumbed it down to a quick codepen to show off the issue. http://codepen.io/anon/pen/GgoBNJ
Basically, standard fonts (helvetica, arial, etc.) are not rendering correctly within a div. For some reason the text is pushing itself up ~2 pixels. Not to mention, fonts are looking very jagged within the browser for no apparent reason.
I am setting up a basic div with hardly any styles and yet this produces two different renderings within FF and Chrome
.box{
font-family: Helvetica, Arial, Sans-serif;
font-size: 14px;
border: 2px solid #FF5500;
display: inline-block;
width: 100px;
This is causing me all sorts of headaches with designers who are trying to make layouts pixel perfect as I have zero control over something like this. Any help would be greatly appreciated!
Thanks in advance.

You may have zoomed the page(s) by accident.
Reset the page zoom on pages that cause problems.
*<b>View > Zoom > Reset</b> (Ctrl/Command+0 (zero))
*http://kb.mozillazine.org/Zoom_text_of_web_pages
You can right-click on a web page and select "Inspect Element" to open the Inspector (Firefox/Tools > Web Developer).
You can check the font used for selected text in the Font tab in the right pane of the Inspector.
*https://developer.mozilla.org/Tools/Page_Inspector
You can do a font test to see if you can identify corrupted font(s).
*http://browserspy.dk/fonts-flash.php?detail=1
You can try different default fonts and temporarily disable website fonts to test the selected default font.
*Tools > Options > Content : Fonts & Colors > Advanced
*[ ] "Allow pages to choose their own fonts, instead of my selections above"

Similar Messages

CSS layout not rendering correctly in IE

Hello, I have two websites and both of them are having issues with rendering the layout properly in IE. FireFox and Safari are fine.
Both sites are built with CSS, DreamWeaver CS5.I was told that I might have to add some Java script for it to work. Is this true?
The sites: www.rifp-engineeredwood.com, and www.customizedhair.net/services.html
Thank you!

First off, you might like to check your page in a validator?
I saw this in your code:
<h1>Design Freedom – Universal Choice<h1/>
It's wrong and it might cause some layout anomolies. It should be:
<h1>Design Freedom – Universal Choice</h1>
I don't think it's the only place it's happening.
I only looked at the first site.
Martin

Why is my .psd file not rendering correctly in ae

Some layers of the .psd document are not rendered correctly. However they are imported.
The strange thing is that when I first move from Photoshop to Illustrator, save it as an .ai file it is rendered properly (in Ae).
I am kind of clueless as to what is causing this issue.
Kind regards,
Jelle

Okay if more information is needed, i'll provide. However you may disregard my initial comment about illustrator. It flattens the photoshop layers so I do not have any flexibility in After Effects. In other words, my main question remains: why is my psd file not rendering correctly in ae?
Further details:
-photoshop cc and after effects cc.
-macbook pro retina
If still not clear enough, please tell me what details you are looking for furthermore

[SOLVED] KDE4.3 is not rendering correctly the images in the desktop

I've posted a bug in KDE because the KDE images are not rendered correctly:
https://bugs.kde.org/show_bug.cgi?id=202829
You can see an image of my desktop at:
https://bugs.kde.org/attachment.cgi?id=35921
As someone suggests, and I also agree with him, it would be a driver problem. My graphic card is "ATI Radeon X1950 Pro" and I'm using the "xf86-video-ati 6.12.2-2" driver. I know that there are other possibilities according to this wiki:
http://wiki.archlinux.org/index.php/ATI
I already tested them with KDE4.2 and xf86-video-ati provided the best result for me.
Someone with an ATI card has the same problem? Which driver would you suggest to me?
Thank you
Last edited by jjjaime (2009-08-06 19:04:12)

Thank flamelab for your help.
The xf86-video-ati-git:
http://aur.archlinux.org/packages.php?ID=15374
fixed all my problems. Probably you've heard about it Now, I don't have any rendering problem and I have enabled the Desktop effects. I tested it with and without the xorg.conf file. Both of them worked, but without the file I don't have my keyboard in Spanish.
I read that it was possible the KMS support. I tested it by changing from graphical to text mode but it takes some time so I guess that it's not enabled. Is there any way to test KMS?
Is it possible to upgrade the AUR driver to the official repository? Meanwhile, I will comment my problem in the KDE site.
Best regards,
Jaime

PDF not rendering correctly

Hi
Can anyone help? I am using an iMac and have had a pdf emailed to me. When I login on to the site and select the PDF to view, it is not rendering correctly.
I am not a technical person but to me it appears to open as a series of code, letters, numbers and symbols.
Any ideas how to rectify this?
Is it Adobe related or can I update the settings for the browser? I am using Safari.
Thanks

what OS & Safari version ?
Often, removing any 'pdf' plugins in
/Library/Internet Plug-Ins/
and
~/Library/Internet Plug-Ins/
then restarting the browser will solve pdf display issues, although in this case, it sounds as if the site is telling Safari that these are text type files & it's attempting to display them accordingly.
Disabling plug-ins via Safari - Preferences - Security should also eliminate pdf plug-ins as a cause.

Rollover text not rendering correctly in Safari 7.x

Safari 7.x and my blog (NotNecessarilyPretty.com) are not getting along.
Specifically, the rollover text in the post titles (see attached or visit site) is not rendering correctly. The right edge of the text does not change to the correct color. Have been in contact with Apple as well as the theme's developer, but have yet to be offered of a fix.
This blog displays correctly when accessed via Chrome or Firefox, and prior to Mavericks, Safari evidenced no problem.
Thoughts on how to correct this?
Thanks!

The original screenshot didn't show here, so for anyone else reading, who may well know much more about CSS & Safari than I :
changes to this - note the right edge
But with word-spacing un-checked in Inspector...

RequestCenter emails not rendering correctly in Outlook 2007

RequestCenter emails not rendering correctly in Outlook 2007
I'm having an problem where the RequestCenter automated emails are losing most of their HTML formatting when viewed in Outlook 2007. When I look at the same email in Outlook 2003, the HTML formatting is fine. Here's a picture of the same email displayed in Outlook 2003 and 2007:
When I view the source HTML of the email, I noticed that there are duplicate HTML, HEAD, and BODY tags that have been automatically added by RequestCenter. Apparently these extra tags are ignored by Outlook 2003, but cause problems with Outlook 2007.
This picture shows the HTML source in RequestCenter's HTML editor compared to the HTML source from within Outlook with the extra tags.
I tried removing the HTML, HEAD, and BODY tags in the HTML editor, but the editor puts the tags back in when you save it.
Does anyone know how to fix this?
Thanks,
Scott

We've actually had the same problem and had opened a ticket with customer care - it's the editor that's in the version we have (or had, since we are going through the upgrade). What we've had to do is embed xml tags in the body of the email too, and then the team that processes the email has a little application that will process the data in the tags and strip the HTML that the editor applies. Not much help, I know.
I've heard a rumor that the issue is fixed in 2007 with the new text editor - I'

Adf application not rendered correctly with url ip and url localhost.

Hi all.
I have a strange problem. When I enter to my adf application deployed in a local stand alone weblogic server with the ip:
http://localhost:7001/Application/faces/index
it renders fine. But when I load it with the url:
http://10.5.14.15:7001/Application/faces/index (private ip), it doesn´t render fine. Tables haven´t the same style, and some elements appear selected like if I have selected them with the mouse.
This problem only happens with internet explorer, not with Chrome.
Also when I see a table inside a region in a jspx, the with of the header of the columns is not rendered correctly, causing the width of the header row not be the same than the other rows.
This problem also happens only with internet explorer.
Any help please?
Internet Explorer 8. JDeveloper 11g.2. Weblogic 10.3.5.0
Also happens with Internet Explorer.
Maybe encoding? doctype?
Thanks

What would the DOCTYPE have to do with the IP address?
Have you looked at the HTML source in the different browsers and tried to debug what's wrong? Sounds like there may be some images/css files that aren't being downloaded in IE when you use that IP address. Are you sure IE isn't configured with a proxy?
John

'Sorry, Too Many Cards' message NOT rendering correctly

I'm seeing the 'Sorry, Too Many Cards' message not render properly for me on Palm Pre 1.3.1. I rebooted the phone and was able to reproduce the problem by opening up many cards. I have uploded a screenshot: http://img188.imageshack.us/img188/6525/browser20091511171212.png
As you can see, the 'OK' button is not rendered correctly. If I remember correctly it supposed to be a green button? Also, the right side box is supposed to have an icon or something. I've never seen this error message NOT rendered properly before 1.3.1.
BTW, like others have posted - once I get to a memory threshold I can't even open up core apps - like 'Device Info' (in case I needed to reboot the phone). I would have expected some high availability on these apps w/r/t memory management.
I would upload more debugging information if I knew how on the Pre. But like I said I was able to reproduce on 1.3.1 before and after a reboot.
Thanks,
Post relates to: Pre p100eww (Sprint)

lblumen wrote:
Am getting same message. Since new update was downloaded. Also, I am getting the too many cards open message daily, even when no other cards are open
I'm having the same problem. Usually I will have Tweed open along with the Camera app. I try to send a photo by email and I get the "too many cards open message". Sometimes when I turn the screen off and turn it back on it fixes it. But today I only had the Photo app open and was trying to send a photo by email and i got the "too many cards open message". The same happens when I only have one program like the emailapp then click on a link. Right now I have NO apps open. I'm trying to open the camera app and it keeps giving me the warning. It's very annoying, especailly when you are trying to do some quick. Oh don't get me started on the the slowness of the system ...

Tables not rendering correctly in Firefox

I recently switched from Dreamweaver 8 to CS4. I also
recently updated my Firefox to 3.06. I have had this website for
years, and it just started not rendering tables correctly in
Firefox. This is happening on multiple pages It works fine in IE.
http://www.wiw.uscourts.gov/bankruptcy/
Let me say up front, I know the page is antiquated (created
in Front Page) It uses tables for the layout instead of CSS. I hope
to be updating it soon, but for now I need a fix to get the pages
to work correctly.
Any help would be greatly appreciated!
Thanks,
Becky

Hello,
In the USBC CSS , delete this:
TD {
font-family : Arial, sans-serif;
float: right;
Take care,
Tim
"bhanson" <[email protected]> wrote in
message
news:gp3ups$l6j$[email protected]..
>I recently switched from Dreamweaver 8 to CS4. I also
recently updated my
> Firefox to 3.06. I have had this website for years, and
it just started
> not
> rendering tables correctly in Firefox. This is happening
on multiple pages
> It
> works fine in IE.
http://www.wiw.uscourts.gov/bankruptcy/
>
> Let me say up front, I know the page is antiquated
(created in Front Page)
> It
> uses tables for the layout instead of CSS. I hope to be
updating it soon,
> but
> for now I need a fix to get the pages to work correctly.
>
> Any help would be greatly appreciated!
>
> Thanks,
> Becky
>
>

Excel attachment not rendering correctly in Mail but fine on iPod touch

Some attachments (most notably Excel files) that I've been receiving lately (last month or so) have not showed up correctly as attachments in Mail (currently using v. 4.4). In the list view it shows the paperclip icon but when I click on the message the preview pane shows what I assume is mime code or something. If I check the same message on my iPod touch, the attachment shows up at the bottom of the message as an attached file icon (correctly identified as an Excel spreadsheet). Suggestions?

Hello,
In the USBC CSS , delete this:
TD {
font-family : Arial, sans-serif;
float: right;
Take care,
Tim
"bhanson" <[email protected]> wrote in
message
news:gp3ups$l6j$[email protected]..
>I recently switched from Dreamweaver 8 to CS4. I also
recently updated my
> Firefox to 3.06. I have had this website for years, and
it just started
> not
> rendering tables correctly in Firefox. This is happening
on multiple pages
> It
> works fine in IE.
http://www.wiw.uscourts.gov/bankruptcy/
>
> Let me say up front, I know the page is antiquated
(created in Front Page)
> It
> uses tables for the layout instead of CSS. I hope to be
updating it soon,
> but
> for now I need a fix to get the pages to work correctly.
>
> Any help would be greatly appreciated!
>
> Thanks,
> Becky
>
>

Colours not rendering correctly in terminal

Hi,
I have just installed Arch on my laptop, and I am getting everything setup. When I run alsamixer something goes wrong, the screenshot below speaks a thousand words.
When I use the arrow keys to change widget focus the previous widget tends to disappear all together. When I exit alsamixer the terminal is useless, typically no text is shown. The terminal does accept input however.
The problem is reproducable in both XFCE4 Terminal and xterm. My .bashrc looks like
alias ls='ls --color=auto --group-directories-first'
alias grep='grep --color'
alias ll='ls -lh'
export PAGER='/bin/less'
export EDITOR='/usr/bin/vim'
export PATH=~/bin:/sbin:/usr/sbin:$PATH
export PS1='\[\e[32m\]\h \[\e[0m\]\$ '
export MPD_HOST=127.0.0.1 MPD_PORT=6600
complete -cf sudo man which
Another thing to note is that the problem affects all open terminals, not just the one alsamixer was run on. Also, once in a rare while 'grep --color' can produce the same effect.
Phil

Hello,
In the USBC CSS , delete this:
TD {
font-family : Arial, sans-serif;
float: right;
Take care,
Tim
"bhanson" <[email protected]> wrote in
message
news:gp3ups$l6j$[email protected]..
>I recently switched from Dreamweaver 8 to CS4. I also
recently updated my
> Firefox to 3.06. I have had this website for years, and
it just started
> not
> rendering tables correctly in Firefox. This is happening
on multiple pages
> It
> works fine in IE.
http://www.wiw.uscourts.gov/bankruptcy/
>
> Let me say up front, I know the page is antiquated
(created in Front Page)
> It
> uses tables for the layout instead of CSS. I hope to be
updating it soon,
> but
> for now I need a fix to get the pages to work correctly.
>
> Any help would be greatly appreciated!
>
> Thanks,
> Becky
>
>

Non-English fonts not rendering correctly in iMovie 10.0.3?

I use xenotype Tibetan font in iMovie and it has always rendered correctly until I updated from 10.0.2 to 10.0.3. Now many of the stacked characters do not render correctly in any of the titles. Even projects that I made three months ago with 10.0.2 when opened in the new version render the font incorrectly. Is there a reason for this change? Is there any adjustment I can do? Line-height adjustment? iMovie 10.0.3 seems to be the only Mac software currently made by apple that doesn't render the font correctly.

Hello,
Welcome to the discussions. There have been some transition problems reported, although maybe not so many problems as you are experiencing.
I had the black/flash with the transition cross-dissolve in one of my movies recently. I found the suggestions in this thread to resolve that: http://discussions.apple.com/message.jspa?messageID=3842119#3842119
Have a look and see if it can help you.

JSP page not rendering correctly for remote system

I have a jsp page that has an HtmlGraphicImage component that gets set by a method in a java bean using
image2.setUrl( imageFilename );
When I run the application on my local system (my development system running Studio Creator) the page comes up on my web browser with the proper image.
However, when I try to access the page from a remote PC, the page comes up okay with all the static components, but the image is blank. When I look at the page source on that browser, the image url is set to blank (i.e. nothing inside quotes).
Any ideas why this image is rendered correctly on my local system and not remotely?

<title>Home</home>Find the mistake!

Panel Page in ADF Faces using Facelets not rendering correctly

Hi, I am attempting to integrate facelets into a web app built using adf faces and am running into a problem with the panel page component. I have integrated facelets and adf faces without any problems by adding relevant jars (jsf-facelets and adf-facelets) to the project and specifying alternate facelets view handler in web.xml.
However, when I try to render any component inside <af:document> or <af:html> tags, all the font style in components seems to be lost ( all the text and input fields turn large and ugly!).
I tried to leave out the <af:document> tag and put the <f:view> inside some vanilla html instead, but then panelPage component dosen't render properly and I get following message on top of page :
"Skip navigation elements to page contents"
So seem to be in a bit of a catch 22. By the way, this all works fine if I don't use facelets (remove the facelets view handler from web.xml and page renders correctly).
Does anyone have any ideas or examples of panelPage rendering correctly with facelets or an alternative to using adf faces html tags that will allow panelpage to be displayed?
The following is the code from a simple test jspx page :
<?xml version='1.0' encoding='windows-1252'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:afh="http://xmlns.oracle.com/adf/faces/html"
xmlns:af="http://xmlns.oracle.com/adf/faces"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<f:view>
<af:document>
<af:form>
<af:panelPage title="Title 1">
<af:panelHorizontal>
<af:panelGroup layout="vertical">
<af:outputLabel value="Username"/>
<af:inputText id="lo_username" value="" columns="20"/>
<af:objectSpacer width="1" height="10"/>
<af:outputLabel value="Password"/>
<af:inputText id="lo_password" secret="true" value="" columns="20"/>
<af:objectSpacer width="1" height="15" />
<af:panelHorizontal>
<af:objectSpacer width="50" height="1"/>
<af:commandButton id="lo_loginButton" text="Login"/>
</af:panelHorizontal>
</af:panelGroup>
<af:objectSpacer width="50" height="1"/>
<af:panelGroup layout="vertical">
<af:outputLabel value="Please use your windows account username"/>
<af:outputLabel value="and password to logon to the system"/>
<af:objectSpacer width="1" height="50"/>
</af:panelGroup>
</af:panelHorizontal>
</af:panelPage>
</af:form>
</af:document>
</f:view>
</jsp:root>

The problem was the <jsp:root> tag. Removed this tag and modified <af:document> to the following so that namespaces are declared :
<af:document xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:af="http://xmlns.oracle.com/adf/faces"
xmlns:afh="http://xmlns.oracle.com/adf/faces/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
Page now renders properly using facelets.
Message was edited by:
mjc

Basic Layout not rendering correctly.

Similar Messages

Maybe you are looking for