Rendering of css different in Firefox vs IE8

I created an external style sheet to define a:link (color light grey), a:visited (light purple), a:hover (light red) and a:active (also light red) to apply to a text and an associated image's border. Firefox renders it correctly but IE8 does not associated the image link with the style sheet; instead it just shows the borders using old blue link color and the purple visited link color, no a:hover or a:active.. What am I doing wrong?

Difficult to see what's wrong, because you only supplied the html, no CSS.
Is there a way for you to upload the pages and provide a link - it's always better to see the page live.
One suggestion is to make sure the links are in this order:
Link; Visited, Hover; Active
LoVeHA (easy way to remember it )
If the image is a link, it will give you a blue box around the image, unless you write a specific style for images that are links.
a img {border: none;} will display no border around a linked image

Similar Messages

Rendering issue in Safari and Firefox OSX

Hello everyone,
http://qa.ocean-florida.co.uk/villas/BlankVillaPageNew.htm
I have a small issue with this page not rendering properly in Safari and Firefox on my Mac.
The top-right image of the group of four is missing and i cant quite figure out why.
Any tips/advice gratefully recieved.
Thank you!
Damien

The rogue bracket may only be part of the problem. What's this below - 0px; top: 2px; ???? Seems as though you declared the position further up the css cascade top: 8px; left: 0px; ?????
#box-link2 {
    position: absolute;
    top: 8px;
    left: 0px;
    width: 83px;
    height: 83px;
    background-color: transparent;
    0px; top: 2px; width: 282px; height: 243px;
and on box 3 -2px; top: 38px; ??????
#box-link3 {
    position: absolute;
    top: 8px;
    left: 0px;
    width: 83px;
    height: 83px;
    background-color: transparent;
    -2px; top: 38px; width: 280px; height: 240px;

Quicktime video looks different in Firefox and Safari, is there a fix?

My full problem is described in this thread:
http://discussions.apple.com/thread.jspa?messageID=4451761
but to keep it simple, my immediate issue is that Safari and Firefox are displaying my video differently. Firefox appears darker and Safari appears brighter. With my monitor set to a gamma of 1.8 (default for OS X) Firefox looks perfect and Safari looks washed out, and with my monitor set to 2.2 (Windows default and all-together better looking) Firefox is too dark and Safari is perfect.
All I want to know is WHY they look different and how to fix this.

Thanks for your response. While this may work with audio and video originating from your own computer it doesn't seem to effect audio and video viewed from the Firefox 5.01 browser which uses a QuickTime plugin. Audio and Video viewed from Safari and Firefox 3.6.19 work fine which leads me to believe the QT plugin and Firefox 5 browser are not working correctly.

Fonts rendering incorrectly since update to Firefox 13.0.1

Since I updated to Firefox 13.0.1, any website using the Helvetica Neue font is rendering an outline font instead. I do have this font installed on my computer, and cannot uninstall it as I am a graphic designer and I use it all the time. Any change we can get a fix on this?
I just pasted one example, but even this page is doing it: https://support.mozilla.org/en-US/questions/new/desktop/d1/form?search=Fonts+rendering+incorrectly+since+update+to+Firefox+13.0.1. I also know Pinterest does it.

There may be a problem with the Helvetica Neue font if Firefox is using another font instead.
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 use this extension to see which fonts are used for selected text.
*fontinfo: https://addons.mozilla.org/firefox/addon/fontinfo/

Bookmarks.html Renders Very Differently in FireFox 4

For years, I have been using and loving Firefox (including 4.0).
For years, I have also exported my bookmarks out of Firefox and use the resulting bookmarks.html file as my home page.
Now Firefox 4 renders the bookmarks.html file very differently from previous versions of Firefox and also differently from other browsers (eg, IE).
The indentations have disappeared when viewing bookmarks.html in Firefox 4. Unfortunately, it's not really easy to show you this inside this forum text box, but I will try.
Firefox 4 shows something like this:
'''Bookmarks Menu'''
'''General Interest'''
Markham Weather Forecast - Environment Canada
The Weather Network - Markham
The Weather Channel - Markham
AccuWeather.com - Canadian Forecast Center
... etc
Firefox 3.6, IE, and other browsers show something like this (note the indentations which greatly improve readability):
'''Bookmarks Menu'''
'''General Interest'''
Markham Weather Forecast - Environment Canada
The Weather Network - Markham
The Weather Channel - Markham
AccuWeather.com - Canadian Forecast Center
... etc
Is this a bug in Firefox 4?? I would really like to see bookmarks.html rendered with the indentations.
Am I missing something?
Thanks.

'''Cor-el''' - is there a way that can be added to the bookmarks.html file, instead of having to click on a bookmarklet each time the page is opened?

Why is my Bing homepage displaying totally different in Firefox than in IE8?

My Bing Home page is displaying black with add-ons in Firefox today but normally in IE8. Why?

To help other users find solutions, please return to this Thread and '''Sign-in''' to the
forum with your Username and Password:
click on '''"Solved It"''' next to the reply ABOVE that '''BEST''' solved your question
'''DO NOT click "Solved It" next to this reply

CSS : Website not displaying correctly in IE 7 , ok in Firefox and IE8

Hello all,
I am a newbie designing my new site with CS4. This is my first post to forum, although I have read many helpful hints while proceeding.
I will be grateful for resolving a quirky issue.
My website http://www.chezshuchi.com is not displaying correctly in IE7. IT is displaying correctly in most other browsers. The HTML validation is fine. I think there is some issue with CSS, but I am not able to find it despite spending much time. Will appreciate input.
Two images are attached. The first is the screenshot in IE 7 . The second in Firefox (IE 8 is same).

Change the embedded CSS at the head of the page in Code View as follows:
from

to

Preview in Safari is Very Different from Firefox

Hi, Im pretty new to this web design stuff but I have done a few websites already, but this is very frustrating.
I made a site layout in Illustrator, exported it as a tiff to Photoshop where i sliced and optimized it, and saved it for web and devices, with html and everything. Then, when I open it up in Dreamweaver, it looks fine. The problem is when i preview it in safari. All of the tables blocks are in the wrong place, and stretched and distorted. But, when i preview it in FireFox, it looks fine!
I have no idea whats going on here and its driving me crazy, so any help you have is greatly aprecieated!

Tom and Andrew,
What's frustrating is not being able to see your code.
To get help here, we must see the code (not screenshots). Ideally, put your files in a test folder, upload the folder to your server and give us the URL. You can always remove it later. That way we can use our web developer toolbars to examine your code and test the page in different browsers. That's the BEST way to get help here.
If you are unwilling to do that, you can simply copy and paste your CSS and HTML code into a reply. Use the double blue arrows >> Syntax Highlighting > Plain.
Code will look like this.
In the meantime, use the code validation tools below and fix any reported errors. 90% of browser rendering problems are caused by coding errors.
HTML Validator - http://validator.w3.org
CSS Validator - http://jigsaw.w3.org/css-validator/
HTML & CSS Tutorials - http://w3schools.com/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Page Displays Different in Firefox

I am new to web site development and new to Dreamweaver. When I display the webpage in FireFox 3.6.3, the header picture shows below the logo on the left. It displays fine in IE. BTW, the font choice is not mine I tried to talk the person out of it.
http://www.mulberrylanehillsdale.com/sample3.html

You answered to the most little part of my comment (there was a suggestion for paged medias or for rendering on smaller displays, but this was not so critical, you should have seen it).
The main point was about font smooting, that you have enabled in ALL browsers, EXCEPT Firefox on Windows.
And this gives really a bad/unfair view of what is really Firefox on Windows.
If one wanted to test a page for Firefox on Windows, he would certainly expect to see what he really sees on its PC, now most often with a flat panel display with pixel precision, but certainly not the non-smoothed rendering which is only for those users that have CRT displays.
That's why I was not suggesting really an expansion of the number of browsers. But:
- if you have renderings for some browsers WITHOUT font smoothing, offer it on ALL browsers, to be fair
- if you also have renderings for some browsers WITH font smoothing, offer it on ALL browsers, to be fair
In other words, it should be a generic display option, that is independant of the browsers tested, and that should be selected by your users in their preferences, according to their own preferences: if a browser only supports one option (with or without font smooting), just display this version, otherwise, use the selected option on all compared browsers.
And you will then see that most of your users are already preferring the pages rendered on any browser with the font smoothing enabled.
Don't use the Microsoft's ClearType option, which uses subpixel precision, as it would require you to manage at least two versions: for display on your site with a RGB panel, or with a BGR panel : subpixel order would then have to be selected, adding two other versions of the same page for the same browser on the same OS... Instead just offer the pixel-level only smoothing, where smoothing applied equally to all R/G/B subpixel color planes, so that a black font on white background will be smoothed only using only "white-gray-black" full pixels without position-dependant colors).
Side notes:
For the long term, note that subpixel precision will be deprecated/obsoleted sooner or later (including on small display panels such as mobile phones, that will be the first to offer the highest pixel densities):
It should be up to the display panel technology to map internally the standard sRGB colors (computed by softwares or in digital image formats or in web browsers and other computer GUI interfaces) to actual subpixels in a pixel (which may have different patterns, different coverage, different relative positions, possibly also 4 subpixels or more, just like with new Yamaha HDTV sets that use a non rectangular grid for the arrangement of subpixels, and that also use an additional yellow or white subpixel). Subpixel rendering technologies in software will also be deprecated because the display panel technologies will continue to improve to offer higher pixel densities, up to a level where the position of subpixels will not be noticeable : only the full-pixel smoothing will remain as it will reduce a lot the CPU/GPU cost of rendering and will be much faster to compute, using also less memory for finally the same resolution.
Subpixel smoothing anyway is patented, and only a temporary "cheap" solution that can be implemented in CPU/GPU software, as long as flat panels don't have a higher pixel density (i.e. measured in full pixels per inch, not in colored subpixels per inch). These subpixel software technologies are in fact a nocive brake to allow the technical evolution of hardware display panels (the existing panels using rectangular R/G/B girds arranged in parallel vertical stripes have a poor color gamut, and display noisy color artefacts, as demonstrated by ClearType). The true evolution will not be in software but in hardware display panels, that will still benefit a lot from full-pixel font-smoothing only:
- for example, the existing software subpixel artificially smoothing triples the horizontal resolution (but effectively only doubles the apparent horizontal resolution, due to correction of color artefacts), but do not increase the vertical resolution which remains poor. This gives an anisotropic result, which is desastrous for natural photographs or videos).
- newer hardware subpixels arrangements (such as Yamaha's) can effectively double BOTH the horizontal and vertical resolution (and not just for text, but also for photos), using exactly the SAME subpixel density, and will produce a much better isotropic result without color artefacts (fair for high-fidelity colors and smooting of photos and video): this means similar costs of production of these panels, that should already be available in shops today and on notebooks, if this was only compatible with subpixel rendering softwares such as Microsoft's ClearType. and for now, we can't still have them on cheap PCs and notebooks, but only on the most expensive HDTV sets (notably the largest 1080p screens, whose size is more than 35 inches): note that these HDTV sets are also used for computer display (notably as a secondary "theater" screen for playing digital videos on online VOD contents) and for them the subpixel font-smoothing softwares have absolutely no use, only full-pixel smoothing will work correctly.

Different output observed in IE8 and IE11 for same HTML file

when I open the below html code in ie8 and ie11 the output is different.
<div style=" color: EAE6F1; " id="Screen147">
<img style=" width: 1280; height: 1020; " id="item1" src="Desert.jpg" border="0"/>
<div style=" background-color: FFFFFF; color: 000000; font-family: 'Arial'; font-size: 31px; layout-grid: both fixed 51px 32px; white-space: nowrap; " id="item2">
                     
</div>
<div style=" background-color: FFFFFF; color: 000000; font-family: 'Arial'; font-size: 31px; layout-grid: both fixed 51px 32px; white-space: nowrap; " id="item3">
                     
</div>
<div style=" background-color: FFFFFF; color: 000000; font-family: 'Arial'; font-size: 31px; layout-grid: both fixed 51px 32px; white-space: nowrap; " id="item4">
                     
</div>
I want to display a white block in the image. but when run in IE8 the white block appears bigger as compared to when displayed in IE11.
I wanted to know why is this behaviour and if the code is same then the output should also be the same. can anyone help me to understand this behaviour?
thank you very much in advance for your replies.

Hi yashajmera,
Same script gets different results ,just as Greg said this may be related to the different rendering pages methods between different Internet Explorer versions.
Here is a link for reference :
Specifying legacy document modes
https://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx
We also can try to choose different view mode by F12 tool to have a check .
To get more detailed information ,it is recommended to look for help from our MSDN forum for help.
https://social.msdn.microsoft.com/Forums/ie/en-US/home?forum=iewebdevelopment
Best regards
Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact [email protected]

Rendering issue with Netbeans and Firefox

Very new at using JSF, in fact I am using it from Nebeans 6.1. Once I create the pages using the visual designer, in IE, for the most part they look as they were designed, however when I view them in Firefox, listbox seems to be the original size and spacing between components is larger than IE. Not sure how to fix this, any help appreciated.
Edited by: robucf3 on Jun 4, 2008 8:35 AM

I have read up on the two subjects and I have looked at the generated code, in fact I had to tweak some of it to get the CSS to work. In any case, is there anything specific for me to look at, some attribute that maybe needs setting, etc?
Found this:
# Issue #95022: Resizing of textfield and other components does not work.
Description: Due to a change in Woodstock components, resize handles have been removed from the following Woodstock components: TextField, TextArea,PasswordField, DropDown and ListBox. This issue impacts especially projects imported from Java Studio Creator and NetBeans Visual Web Pack 5.5/5.5.1. Resized components may look different from how they looked in previous releases.
Workaround: For TextField and TextArea components, use the columns and rows attributes, respectively. DropDown and ListBox components are automatically resized to the size of the longest item by the browser.
Edited by: robucf3 on Jun 4, 2008 9:11 AM

Why are my styles not rendering correctly within differing browsers ?

Hi - I'm building a site with WordPress and for some crazy reason the css styles I apply to the secondary Nav in the footer do not want to render across browsers. BUT they do render *perfectly* inside DW. I have tested in chrome, IE8, Safari and Firefox 4.0. They refuse to pick up the link a:link => #FFF instead they default to the a:link color given inthe primary Nav. The hover color works fine. I repreat, inside DW everything is fine.
I have tried making the footer-nav and the primary-nav highly specific to no avail. My HTML looks fine, however, obviously WordPress generates additional HTML in building the unorder list for the navigation menu.
I have spent hours on this with no results - ANY ideas are really welcome !   I privide th relavent HTML and CSS below: Thanks Vincej
HTML:
<div id="footer">
        <div id="footer_nav">
        <?php wp_nav_menu(array ('menu' => 'Footer Nav'));?>
        </div>

CSS:
#footer{
     width:960px;
     height:auto;
     margin: -20px auto 15px auto;
     background-color:#333;
#footer_nav {
     padding-top: 10px;
     margin-left:80px;
     font-size:1.4em;
     font-family:Tahoma, Geneva, sans-serif;
#footer_nav li a:link{
     color:#fff;
#footer_nav li a:hover{
     color:#D72100;
#menu-footer-nav li{
     list-style-type: none;
     display: inline;
     padding-right: 50px;

I have just answered the question myself - it has only taken 4 hours !!
when you are developing with Worpress and testing yor site in a real browser you MUST CLEAR THE CACHE between each visit to the site. DW does not keep cached data, therefore DW looks correct and real browsers look 'wrong'.
sorry to waste everyone;s time
the obvious sometiimes defets us !!

Renders fine in everything but firefox

When I go to preview my page in Firefox the table cells that
are supposed to contain content appear white, rather than the
bgcolor a6d989 that I have them set to. Everything renders the way
it ought to in the other browsers. I built my site using fireworks
and sliced it accordingly to create a tiling page. When imported
into dreamweaver I select the tables containing the cells I wish to
use for content, and I converted the widths to pixels, deleted the
image in the cell and changed the bgcolor accordingly. The tiling
set up using CSS I did after that. Any help would be great, I could
post up the code if that would help. In fact I'll probably post it
up here in a minute.

here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0"
width="1037">

<tr>
<td><img name="header"
src="assets/images/services_header.gif" width="1037" height="141"
border="0" alt=""></td>
</tr>
<tr>
<td><table align="left" border="0" cellpadding="0"
cellspacing="0" width="1037">
<tr>
<td width="390"><img name="leftofnav"
src="assets/images/services_leftofnav.gif" width="390" height="18"
border="0" alt=""></td>
<td width="602" bgcolor="a6d989"><span
class="style1"><span class="style2">
</span></span></td>
<td width="45"><img name="rightofnav"
src="assets/images/services_rightofnav.gif" width="45" height="18"
border="0" alt=""></td>
</tr>
</table></td>
</tr>
<tr>
<td><img name="divider"
src="assets/images/services_divider.gif" width="1037" height="38"
border="0" alt=""></td>
</tr>
<tr>
<td><table align="left" border="0" cellpadding="0"
cellspacing="0" width="1037">
<tr>
<td width="49" valign="top"
class="lefttile"> </td>
<td width="341"
bgcolor="a6d989"><p> </p>
<p> </p></td>
<td width="43" valign="top"
class="middletile"> </td>
<td width="559" bgcolor="A6D989"> </td>
<td width="45" valign="top"
class="righttile"> </td>
</tr>
</table></td>
</tr>
<tr>
<td><img name="services_footer"
src="assets/images/services_footer.gif" width="1037" height="50"
border="0" alt=""></td>
</tr>
</table>
</body>
</html>

Why does my lists look different in Firefox

Please take a look at the following pages in both browsers. pay attention to the right column and see the lists. In firefox they are ok but explorer does not show the same thing. any suggestions?
http://greenpwwhh.com/wisdom.html
http://www.greenpwwhh.com/wealth.html
http://www.greenpwwhh.com/health.html
codes for health page: note that style in blue was used to take care of margin space for bullets.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>GreenP - Wealth, Wisdom, Health & Happiness</title>
<style type="text/css">
ul {padding-left:16px}
</style>
<style type="text/css">

</style>

<link href="main_page.css" rel="stylesheet" type="text/css" />


<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

</script>
<script type="text/javascript" src="diva/divaCommon.js"></script>
<script type="text/javascript" src="diva/divaGPSfree/divaGPSfree.js"></script>


</head>
<body class="thrColFixHdr">
<div id="container">
<div id="header">
    <div id="headerLogo"><img src="greenP_logo.gif" width="293" height="90" alt="logo" /></div>
    
    <div id="headerAd"><a href="http://www.patrickgreen.cruiseshipcenters.com/Home.aspx#"><img src="cruiseshipcenter_728x90.gif" width="728" height="90" alt="cruise" /></a></div>
    
    <h1> </h1>
    
</div>
<div id="nav">
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="index.html" class="thrColFixHdr">Home</a></li>
      <li><a href="wisdom.html" target="_top" class="thrColFixHdr">Wisdom</a></li>
      <li><a href="wealth.html" class="thrColFixHdr">Wealth</a></li>
      <li><a href="health.html" class="thrColFixHdr">Health</a></li>
      <li><a href="happiness.html" class="thrColFixHdr">Happiness</a></li>
      <li><a href="#" class="thrColFixHdr">Opportunities</a></li>
      <li><a href="#" class="thrColFixHdr">Seminars</a></li>
      <li><a href="#" target="_top" class="MenuBarItemSubmenu">Store</a>
        <ul>
          <li><a href="Books.html" target="_top">Books</a></li>
          <li><a href="posters.html" target="_top">Posters</a></li>
        </ul>
      </li>
      <li><a href="#" class="thrColFixHdr MenuBarItemSubmenu">Stress Release</a>
        <ul>
          <li><a href="crossword_main_page.html">Crossword</a></li>
          <li><a href="jigsaw_things.html">Jigsaw</a></li>
        </ul>
      </li>
<li><a href="advertising.html" class="thrColFixHdr">Advertise</a></li>
<li><a href="membership.html" class="thrColFixHdr">Members</a></li>
      <li><a href="about_us.html" class="thrColFixHdr">About us</a></li>
    </ul>
</div>
<div id="search">
<form name="fbsearch" method="get" action="http://ss662.fusionbot.com/b/q" style="margin:0;">
<div align="left"><font size="2" face="arial"><a href="http://www.fusionbot.com" target="_blank">Site Search</a>:</font>
    <input type="text" name="keys" size="15">
    <input type="submit" value="GO">
    </div>
    <input type="hidden" name="sn" value="160516902">
</form>
</div>
<div id="nav2"><a href="http://pub27.bravenet.com/chat/show.php?usernum=2253679465&cpv=2"><img src="_image/Chat-with-friends-&-network.gif" width="173" height="25" alt="chat" /></a><a href="http://pub27.bravenet.com/calendar/show.php?usernum=2253679465"><img src="_image/calendar_button.gif" width="173" height="25" alt="calendar" /></a><a href="http://pub27.bravenet.com/postcard/post.php?usernum=2253679465"><img src="_image/Send-Some-Love-Today.gif" width="173" height="25" alt="send some love" /></a><a href="comments.html"><img src="_image/Your-comments-please.gif" width="173" height="25" alt="your comments" /></a></div>
<div id="chat">
    
    <div align="center"></div>
    
</div>

<p> </p>
<div id="healthLeft">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab" id="Player_259055d2-c397-4de3-a156-df6e49cfcab4" WIDTH="300px" HEIGHT="250px"> <PARAM NAME="movie" VALUE="http://ws.amazon.com/widgets/q?ServiceVersion=20070822&MarketPlace=US&ID=V200708 22%2FUS%2Fgreenpwwhh-20%2F8003%2F259055d2-c397-4de3-a156-df6e49cfcab4&Operation= GetDisplayTemplate"><PARAM NAME="quality" VALUE="high"><PARAM NAME="bgcolor" VALUE="#FFFFFF"><PARAM NAME="allowscriptaccess" VALUE="always"><embed src="http://ws.amazon.com/widgets/q?ServiceVersion=20070822&MarketPlace=US&ID=V200708 22%2FUS%2Fgreenpwwhh-20%2F8003%2F259055d2-c397-4de3-a156-df6e49cfcab4&Operation= GetDisplayTemplate" id="Player_259055d2-c397-4de3-a156-df6e49cfcab4" quality="high" bgcolor="#ffffff" name="Player_259055d2-c397-4de3-a156-df6e49cfcab4" allowscriptaccess="always" type="application/x-shockwave-flash" align="middle" height="250px" width="300px"></embed></OBJECT> <NOSCRIPT><A HREF="http://ws.amazon.com/widgets/q?ServiceVersion=20070822&MarketPlace=US&ID=V200708 22%2FUS%2Fgreenpwwhh-20%2F8003%2F259055d2-c397-4de3-a156-df6e49cfcab4&Operation= NoScript">Amazon.com Widgets</A></NOSCRIPT>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
</div>

<div id="healthMid">
    <p>health articles go here</p>
<p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
</div>

<div id="healthRight">
    <div id="healthVideos">
      <div id="healthVideoHead">Videos</div>
      <div id="healthvideoContent">
        <ul>
          <li><a href="ten best foods to eat.html" target="_top">10 best foods to eat</a></li>
          <li><a href="ten worst foods to eat.html" target="_top">10 worst food to eat</a></li>
          <li><a href="ten worst drinks.html" target="_top">10 worst drinks</a></li>
          <li><a href="whole foods and weight loss.html" target="_top">Whole foods & weightloss</a></li>
          <li><a href="super foods.html" target="_top">Super foods</a></li>
          <li><a href="sugar effects 1.html">Sugar is very bad 1</a></li>
          <li><a href="sugar effects 2.html">Sugar is very bad 2</a></li>
          <li><a href="mother of all illness.html" target="_top">Mother of your illness</a></li>
          <li><a href="meat or vegetables.html" target="_top">Meat or vegetables</a></li>
          <li><a href="healthy ways to lose weight.html" target="_top">Healthy weightloss</a></li>
          <li><a href="food for the mind.html" target="_top">Food for the mind</a></li>
          <li><a href="fiber facts.html" target="_top">Fiber facts</a></li>
          <li><a href="fiber fakes.html" target="_top">Fiber fakes</a></li>
          <li><a href="life saving food tips.html">Life-saving food tip</a></li>
        </ul>
        <p> </p>
        <p> </p>
      </div>
      <div id="healthArticles">
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
      </div>
      <div id="healthResources">
        <div id="healthResourceHead">Resources</div>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
      </div>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
      <p> </p>
    </div>
    <p><a href="ten worst foods to eat.html" target="_top"></a></p>
    <p> </p>
    <p> </p>
</div>
<div id="healthFooterAd">Content for id "healthFooterAd" Goes Here</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<br class="clearfloat" />
<div id="footer">
    <p>Copyright © GreenP. All rights reserved. Site designed by Patrick L Green</p>
    
</div>

</div>
<script type="text/javascript">

</script>
</body>
</html>

Hi
They are different because of the way IE/Opera and FF/Safari handle list indents, you will have to change the default margin and padding values to achieve a consistent list positioning, (do not forget negative values are allowed).
See the section on positioning in this article for more info - http://www.alistapart.com/articles/taminglists/.
PZ

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.html

This 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

Rendering of css different in Firefox vs IE8

Similar Messages

Maybe you are looking for