CSS and Firefox

The Firefox guys have done an update recently and since then,
pages that previously displayed OK in Firefox (not exactly the same
as IE but acceptable) now look very different.
www.geckoheadgear.co.uk has dropped much of the CSS instruction,
other sites have minor changes in text colour etc. Are there
specific changes that I should be making to the CSS code to ensure
parity in Firefox/IE please?
IanF

They look primarily the the same to be in both IE and FF,
however, there is
a fraction of a difference in that the jumpt menus at the top
of the page,
are a bit higher in IE than in FFox.
I don't have time to check your css or html, but it's
probably an IE issue
with margin or padding.. maybe something to look at anyway.
Nadia
Adobe� Community Expert : Dreamweaver
http://www.csstemplates.com.au
- CSS Templates | Free Templates
http://www.DreamweaverResources.com
- Dropdown Menu Templates|Tutorials
http://www.macromedia.com/devnet/dreamweaver/css.html
- CSS Tutorials
"bindlestiff7" <[email protected]> wrote in
message
news:e3qobf$saj$[email protected]..
> The Firefox guys have done an update recently and since
then, pages that
> previously displayed OK in Firefox (not exactly the same
as IE but
> acceptable)
> now look very different. www.geckoheadgear.co.uk has
dropped much of the
> CSS
> instruction, other sites have minor changes in text
colour etc. Are there
> specific changes that I should be making to the CSS code
to ensure parity
> in
> Firefox/IE please?
>
> IanF
>

Similar Messages

CSS and Firefox V IE6

I've just put together a very simple website for a friend who
is starting up in business. Unfortunately, I've screwed up the CSS
and the background image of three locks that I've produced shows
fine in Internet Explorer but does not show at all in Firefox.
From my reading it seems that Firefox is more accurate in the
way that it handles CSS but that IE is more forgiving - so Firefox
is telling me that I've got it wrong!
Any ideas on where I've gone wrong please?
The link is
Link to
site

wetwipe wrote:
> I've just put together a very simple website for a
friend who is starting up in
> business. Unfortunately, I've screwed up the CSS and the
background image of
> three locks that I've produced shows fine in Internet
Explorer but does not
> show at all in Firefox.
>
> From my reading it seems that Firefox is more accurate
in the way that it
> handles CSS but that IE is more forgiving - so Firefox
is telling me that I've
> got it wrong!
>
> Any ideas on where I've gone wrong please?
> The link is
http://www.webpedlar.co.uk/test_locks/
>
Change 'background-attachment: fixed;' on your '.tableback'
class.
to
background-position: fixed;
The image will appear in the correct position BUT Firefox
doesnt fix a
background image on anything other than the <body> tag
I think.

Flash, CSS, and Firefox problem

Hello.
I have an html document that is built using CSS (div tags,
etc). This CSS calls out to swfs (defined by DIVs) to build the
page.
The layout is very simple, starting with a top navigation bar
swf. There are buttons in this navigation bar that, when rollover,
cause a graphic to unmask and pull down. The graphic is rather
large and forces the top nav bar height to 800. Naturally, this
will eclipse other elements on the page when the graphic crashes
down.
By using a combination of "wmode=transparent" and z-indexing
in the Flash code, I can get the crashdown graphic to appear above
the other elements in the html.
However, and here is the issue, in Firefox the sheer,
necessary height of the top nav bar prevents clicking on any other
buttons in the elements that appear below the top nav bar. It's as
if there is an alpha mask over everything which prevents RollOvers
and general mouse clicking action. Oddly, it works perfectly in
I.E.
Any insight would be vastly appreciated. I've researched what
I could of this topic, but nothing I can find replicates my exact
issue. Thank you.
-dE

Hey Deggz, I'm experiencing the same problems that you're
having and have been research for an answer for weeks. Have you
found a solution yet?

My site previews fine in live, explorer and firefox, but the fonts are extra large and bold on chrome, this is my first site, please assist. I will be happy to provide screenshots and code or css sheets.

Working on my first site, Am getting different previews. Chrome tends to make the font big and bold while all other browsers work fine. Here is what the preview looks like in chrome followed by the firefox preview. I have my CSS and HTML code sheets below. Am also having a hard time centering the navigation links, they are a little closer to top of the navigation div than the bottom. Any assistance will be appreciated. Please feel free to point any other errors, am sure there is some in there.
@charset "utf-8";
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
color: 151515;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
background-color: EFF5F8;
#banner {
#wrapper {
background-color: rgba(255,255,255,1.00);
width: 100%;
min-width: 740px;
max-width: 1024px;
margin-left: auto;
margin-right: auto;
#sidebar img {
max-width: 100%;
#wrapper #banner img {
max-width: 100%;
h1, h2 {
color: #3399CC;
font-family: source-sans-pro;
font-style: normal;
font-weight: 600;
h1 {
font-size: 40px;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
#hero {
float: left;
width: 58%;
margin-left: 2%;
#sidebar {
width: 34%;
margin-left: 4%;
float: left;
#footer {
float: left;
clear: left;
padding-left: 2%;
background-color: #43A6CB;
color: #FFFFFF;
text-align: center;
width: 100%;
a {
text-decoration: none;
font-weight: bold;
a:link {
color: #FF6600;
a:visited {
color: #FF6600;
a:hover, a:active, a:active {
color: #7F3300;
text-decoration: underline;
#navigation ul {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 10pm;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
text-align: center;
color: rgba(51,153,204,1.00);
#navigation {
background-color: #4D4D4D;
color: #FFFFFF;
text-transform: uppercase;
#navigation li {
display: inline;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
margin-top: 10pm;
margin-right: 10pm;
margin-bottom: 10pm;
margin-left: 10pm;
clear: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
color: rgba(194,209,221,1.00);
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
Here is the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>4gals Computer Service Home</title>
<link href="main.css" rel="stylesheet" type="text/css">
<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/source-sans-pro:n2,n6:default.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="banner"><img src="Images/banners/4gals banner.jpg" alt=""/></div>
<div id="navigation">
    <ul>
      <li><a href="index.html" title="4gals Computer Services Main Page" target="_self">Main</a></li>
      <li><a href="contact.html" title="4gals Computer Services Contact Page" target="_self">Contact</a></li>
      <li><a href="appointments.html" title="4gals Computer Services, Service Request Form" target="_self">Service</a></li>
      <li><a href="helpful-tips.html" title="4gals Computer Services Helpful tips" target="_self">Tips</a></li>
      <li><a href="meet-the-gals.html" title="Meet Our Daughters; The 4gals" target="_self">4gals</a></li>
    </ul>
</div>
<div id="hero">
    <h1>Computer Service For Families and Small Businesses</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <h2> </h2>
</div>
<div id="sidebar">
    <h2>Call us for today for same-day service!</h2>
    <p><img src="Images/iphone-5_03.jpg" alt=""/></p>
    <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
</div>
<div id="footer">Copyright 2014 © Web design by a-loum</div>
</div>
</div>
<p> </p>
<h1> </h1>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>

Starting with this, you have errors in your CSS code.
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
color: 151515;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
background-color: EFF5F8;
body {
margin:0;
color: #151515;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
background-color: #EFF5F8;
font-size: 100%;
Related links:
Windows Chrome, why do my fonts look so bad? - Lee Green
css3 - Bad font rendering Chrome - Stack Overflow
Nancy O.

After deleteing Custom CSS and Custom Functions, cannot get FireFox to recognize audio player. Works in IE and Safari. Site is https and using bluehost.

Using the Genesis Framework on my WordPress site. I can use Safari and IE. However, when I try to use Fire Fox, it will not appear. I deleted all of my Custom CSS and Functions. Still, nothing is working. Contacted bluehost, the representative there was not able to help me out and also emailed CD Baby to see what might work. I am not sure if it is something with my site using HTTPS instead of HTTP of why this is not working? I am told the plugin works on Fire Fox but I cannot for the life of me figure out what's going on. Also changed themes and used Twenty Thirteen among others. Still the same thing. Fire Fox will not work. Tried in Text widget, and pasting on a page, and still not working. IE and Safari it is fine. Do I need to add something else within my site? Thanks ahead of time for any way to solve this situation.

There is mixed active content loaded in an iframe that Firefox is blocking as you can see by the shield icon at the left end of the location/address bar.
*https://developer.mozilla.org/Security/MixedContent
*https://developer.mozilla.org/Tools/Web_Console

Separate CSS for IE and Firefox

Hi all,
older versions of Robohelp generated to separate CSS files in the Wephelp for IE and Firefox. Evidently this feature was dropped somewhen. However I need it now to resolve some specific Firefox problems in a project.
I thought I could add the corrsponding script in the master page that checks for the browser and selects the CSS, but thought I should ask the forum first.. are any solutions for this already known?
Robert

If you are sure there is no way around OK but sometimes someone knows a solution. I'm not saying I do, just that sometimes someone will pop their head over the parapet with the answer.
It used to be the case that bullets were a pain for me until I found out that Firefox's own CSS had an indent that you could negate without affecting IE. Result, almost the same appearance in both browsers.
I haven't tried it but RoboHelp 10 allows you to write media queries and you can define the browswer. In theory you can have a default style for IE and other browsers but specify a rule that if the browser is Mozilla, the CSS is to be modified.
That's the cheery theory and I don't know the ins and outs of how well it would work in reality. Do let us know if you decide to take the plunge.
See www.grainge.org for RoboHelp and Authoring tips
@petergrainge

Firefox OS is not displaying correctly. it appears that the CSS and JS are not rendering! Any help would be most appreciated!

I would have preferred to show anyone a screenshot of the web pages, but there is not an attach file on this forum. Anyway, with only Firefox OS , not my other browsers, the web pages are not rendering correctly. For example on Facebook there is no header or footer. JS is active in the browser and as I said Chrome and Safari are NOT having any problems. I am surmising that the CSS and JS files are somehow not being displayed. I may be very wrong, but I would gratefully accept any help someone has to offer. Thank you and have a great day!
Theresa

Hi Lufte,
I'm sorry to hear you are having issues with the rendering of some pages on your Firefox OS device.
Please create a new question in the thread so that we can track your issue separately:
* [https://support.mozilla.org/en-US/questions/new Ask a new question]
Please also provide the device model and version that you're currently using, and whether this issue started recently. Please let us know if you also notice any issue with the time and date displayed in your device.
Thanks,
- Ralph

Underbars in CSS Files and Firefox vs. IE 7 Compatibility

Hi folks.
This may have already been covered somewhere, but I've spent the last two days trying to solve this problem and didn't see anything referring to it. So, in order to save anyone else the hassle, I'll describe the problem and its fix.
I just started using Apex 3.1.1 yesterday, and I wanted to see how hard it would be to link a CSS file to a site.
I read http://download-west.oracle.com/docs/cd/B32472_01/doc/appdev.300/b32471/ui.htm#BABHJCJI but that still didn't help me. Nothing I tried would make Firefox see the linked stylesheet even though IE 7 was having no trouble at all. That was ironic since I discovered people having problems with IE 7 not showing styles as opposed to Firefox having no problems.
When I put the style code directly into the header of the page, it would work in both Firefox 2 and IE 7, but when I tried to link the CSS file, only IE 7 would show the altered styles. I was about to give up, when it suddenly occured to me that when I chose "Icons" for the "View" option inside the Cascading Style Sheets Repository Page instead of "Details" that the underbar or underline in my file name would not render correctly. Instead of showing up as "cfdb_styles.css" it was showing up as "cfdb styles.css" in both IE 7 and Firefox.
So, after I changed the file name to "cfdbstyles.css", everything suddenly worked in both browsers! I suppose this could be logged as another one of those improbable Apex bugs.
The moral of the story: don't use the "_" (underbar/line) in your CSS file names.
And once again, I apologize if this is common knowledge. I certainly hadn't found it anywhere I looked online.
Thanks for your time, and I hope that helps someone out there struggling as I did,
Anton

Anton,
I don't think you are right. Have a look at the themes directory. There you will see that all
the css files are named like
theme_V3.css
and those contain an underline. If you look at the page template, you will see there how
those files are referenced. So, this is definitelly not an apex bug.
Denes Kubicek
http://deneskubicek.blogspot.com/
http://www.opal-consulting.de/training
http://apex.oracle.com/pls/otn/f?p=31517:1
-------------------------------------------------------------------

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

CSS Problem Firefox and IE

Hey Guys
I have just converted my site layout to CSS and only have 2
problems.
Click here for website
1) In IE there is a border at the bottom of the page and in
Firefox there isn't even though I've set the page margin and border
to 0. Then I tried to override the standard padding set by
Firefox/IE by using * {margin : 0;padding : 0;}. This solved the
problem but removed all padding from CSS document which i don't
want.
2) The subheading 'Photography' needs to be padded down. In
IE it is but in Firefox it isn't and I can't get it to move.
Any help would be much appreciated!
body {
margin: 0;
padding: 0;
border: 0;
background-color: #CCCCCC;
.title {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 36px;
line-height: 40px;
color: #FF0000;
.subheading_red {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 20px;
color: #FF0000;
.subheading_white {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 20px;
color: #FFFFFF;
.main_black {
font-family: Arial;
font-size: 12px;
line-height: 20px;
color: #333333;
.main_white {
font-family: Arial;
font-size: 12px;
line-height: 20px;
color: #FFFFFF;
.main_red {
font-family: Arial;
font-size: 12px;
line-height: 20px;
color: #FF0000;
.form {
font-family: Arial;
font-size: 12px;
color: #333333;
min-height: 15px;
.blurb {
font-family: Arial;
font-size: 12px;
line-height: 20px;
color: #999999;
.footer_1 {
font-family: Arial;
font-size: 12px;
line-height: 20px;
color: #FFFFFF;
font-weight: bold;
.footer_2 {
font-family: verdana;
font-size: 10px;
line-height: 20px;
color: #CCCCCC;
/* Links */
a:link {
text-decoration:none;
a:visited {
text-decoration: none;
a:hover {
text-decoration: underline;
color: #FF0000;
a:active {
text-decoration: none;
/* Layout - Homepage*/
#main_image {width:990px; height:211px; margin-left:auto;
margin-right:auto;}
#menu {width:970px; height:97px; padding:10px;
background-color:#000000; margin-left:auto; margin-right:auto;}
#container {width:990px; margin-left:auto; margin-right:auto;
background-color:#FFFFFF}
#module_1 {width:770px; height:430px; float:left;
background-color:#FFFFFF; padding-top:10px;}
#title {width:430px; height:40px; padding-left:20px; float:
left; background-color:#FFFFFF;}
#upload {width:320px; height:50px; padding-top:5px;
padding-bottom:5px; float: right; background-color:#FFFFFF;}
#blurb {width:430px; height:20px; padding-left:20px;
background-color:#FFFFFF;}
#description {width:730px; float:left; padding-left:20px;
padding-right:20px; background-color:#FFFFFF;}
#module_1a {width:770px; height:240px;
background-color:#FFFFFF;}
#module_1b {width:450px; height:250px; float:left;
padding-top:20px; padding-left:20px; background-color:#FFFFFF;}
#module_1c {width:300px; height:250px; float:right;
padding-top:20px; background-color:#FFFFFF;}
#module_2 {width:220px; height:430px; float:right;
background-color:#FF0000; padding-top:10px;}
#module_3 {width:950px; padding-left:20px;
padding-right:20px; padding-bottom:20px; padding-top:20px;
background-color:#333333;}
#footer {width:950px; height:40px; margin-left:auto;
margin-right:auto; padding-right:20px; padding-left:20px;
padding-top:10px; padding-bottom:10px; background-color:#333333;}
#module_4 {width:500px; float:left;}
#module_5 {width:450px; float:right;}
#module_6 {width:500px; float:left;}
#module_7 {width:450px; float:right;}
/* Menu Buttons */
.menu_alignment{
display:block;
float:left;
width: 97px;
height: 97px;
}

ForensicBop wrote:
> Hey Guys
>
> I have just converted my site layout to CSS and only
have 2 problems.
>
>
http://skytemedia.com
>
> 1) In IE there is a border at the bottom of the page and
in Firefox there
> isn't even though I've set the page margin and border to
0. Then I tried to
> override the standard padding set by Firefox/IE by using
* {margin : 0;padding
> : 0;}. This solved the problem but removed all padding
from CSS document which
> i don't want.
>
> 2) The subheading 'Photography' needs to be padded down.
In IE it is but in
> Firefox it isn't and I can't get it to move.
>
I don't see the border but for the other issue - put both
"Photography"
and the "Visit gallery" in the same div and float them left
and right'
HTH
chin chin
Sinclair

Urgent Help Required - Video Not playing on IE11 and Firefox

Hi,
I need Urgent Help , I am trying to Play this Presentation on IE 11 and Firefox and it doesn't play the Video part which is FLV and f4v formats.
I have been googeling it but couldn't find a solution so far ,Can anyone please help , its really urgent as I am done with the Project ,and this is the last bit which I have been struggling with for a while now.
Here is the HTML Code I am using :
<----------------------------------------------------------------------------------------- ----------------------------------------------------------------->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body { height:100%; background-color: #ffffff;}
body { margin:0; padding:0; overflow:hidden; }
#flashContent { width:100%; height:100%; }
</style>
</head>
<body>
<div id="flashContent">
   <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="800" height="600" id="index" align="middle">
    <param name="movie" value="index.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
    <param name="play" value="true" />
    <param name="loop" value="true" />
    <param name="wmode" value="window" />
    <param name="scale" value="showall" />
    <param name="menu" value="true" />
    <param name="devicefont" value="false" />
    <param name="salign" value="" />
    <param name="allowScriptAccess" value="sameDomain" />
    
    <object type="application/x-shockwave-flash" data="index.swf" width="800" height="600">
     <param name="movie" value="index.swf" />
     <param name="quality" value="high" />
     <param name="bgcolor" value="#ffffff" />
     <param name="play" value="true" />
     <param name="loop" value="true" />
     <param name="wmode" value="window" />
     <param name="scale" value="showall" />
     <param name="menu" value="true" />
     <param name="devicefont" value="false" />
     <param name="salign" value="" />
     <param name="allowScriptAccess" value="sameDomain" />
    
     <a href="http://www.adobe.com/go/getflash">
      <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
     </a>
    
    </object>
    
   </object>
</div>
</body>
</html>
<----------------------------------------------------------------------------------------- ----------------------------------------------------------------->

Any Help in this Regards will be highly appreciated

On Windows 8.1 and Firefox 36.0.1 the textarea in forms has no carriage returns. Earlier versions the forms work. Is there a fix for this?

Prior to this version of Firefox 36.0.1, the <textarea> in my HTML forms was working; displaying carriage returns. In version 36.0.1 they no longer function properly. Instead when I enter a carriage return, it displays a space instead of a newline. I went to the most basic textarea testing
<textarea> name="comments" cols=20 rows=10 </textarea>
to make sure I wasn't introducing anything with other languages.
I am using Windows 8.1 Pro. I rolled back to Firefox 35.0 and everything works fine. I install 36.0.1 and it stops working.
I have access to another Laptop also running the same version of windows and Firefox and it appears to be doing strange things as well. I am suspicious in that I started noticing this immediately after a windows upgrade last night. The laptop also experienced the issues it is having immediately after a windows update yesterday evening.
I have yet another PC running a different version of windows and Firefox and it too works fine. It looks like the issue is where there is windows 8.1 Pro and Firefox 36.0.1.
Do you guys have any idea what is going on here?
Thanks
JMRAUPE57

The current release supports the white-space property for a text area and it is possible that the website uses white-space: pre instead of white-space: pre-wrap.
The former will prevent Firefox from wrapping the text.
You can check that in the Inspector via the right-click context menu.
*https://developer.mozilla.org/Tools/Page_Inspector
See:
*https://developer.mozilla.org/en-US/Firefox/Releases/36#CSS
<blockquote>The white-space property is now working on <textarea> HTML elements (bug 82711).</blockquote>
See also:
*[[/questions/1050456]] Word wrap problems in 36.0

My webpage is massive in Safari and Firefox but fine in Chrome...

Hi,
I've been working in Dreamweaver CS5, my pages are all working fine across all browsers it's just the size which is different and I can't figure out why.
The sites not live yet but here's the code:
<html>
<head>
<title>Homepage2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

</style>

</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">

<div id="wrapper">
<div id="Table_01">
<div id="Homepage2-03"> <a href="Source/Gallery_Street.html"><img src="images/Homepage2_03.png" width="497" height="251" alt=""></a>
</div>
<div id="Homepage2-06">
<img src="images/Homepage2_06.png" width="308" height="439" alt="">
</div>
<div id="Homepage2-09"> <a href="Source/Lions.html"><img src="images/Homepage2_09.png" width="389" height="507" alt=""></a>
</div>
<div id="Homepage2-12">
<img src="images/Homepage2_12.png" width="33" height="18" alt="">
</div>
<div id="Homepage2-15"> <a href="Source/Gallery_Street.html"><img src="images/Homepage2_15.png" width="299" height="82" alt=""></a>
</div>
<div id="Homepage2-16"> <a href="Source/Gallery_Flash.html"><img src="images/Homepage2_16.png" width="273" height="186" alt=""></a>
</div>
<div id="Homepage2-18">
<img src="images/Homepage2_18.png" width="47" height="46" alt="">
</div>
<div id="Homepage2-22"> <a href="Source/Gallery_Street.html"><img src="images/Homepage2_22.png" width="215" height="99" alt=""></a>
</div>
<div id="Homepage2-25">
<img src="images/Homepage2_25.png" width="53" height="43" alt="">
</div>
<div id="Homepage2-31"> <a href="Source/Gallery_Flash.html"><img src="images/Homepage2_31.png" width="77" height="74" alt=""></a>
</div>
<div id="Homepage2-32"> <a href="Source/Gallery_Flash.html"><img src="images/Homepage2_32.png" width="269" height="205" alt=""></a>
</div>
<div id="Homepage2-35"> <a href="Homepage2.html"><img src="images/Homepage2_35.png" width="69" height="342" alt=""></a>
</div>
<div id="Homepage2-38">
<img src="images/Homepage2_38.png" width="57" height="21" alt="">
</div>
<div id="Homepage2-41"> <a href="Source/Contact.html"><img src="images/Homepage2_41.png" width="56" height="22" alt=""></a>
</div>
<div id="Homepage2-43">
<img src="images/Homepage2_43.png" width="4" height="131" alt="">
</div>
<div id="Homepage2-47">
<img src="images/Homepage2_47.png" width="264" height="419" alt="">
</div>
<div id="Homepage2-50">
<img src="images/Homepage2_50.png" width="620" height="378" alt="">
</div>
<div id="Homepage2-54">
<img src="images/Homepage2_54.png" width="266" height="321" alt="">
</div>
</div></div>

</body>
</html>
I've found that if I make it smaller either by changing the wrapper or exporting a smaller size from photoshop, the size is fine on Safari and Firefox but really small on Chrome. Prefer bigger rather than smaller but would be so great if there was something I could do to get them all the same...
Help. Thanks

Since we can't see your images without a link to your work in progress, my guess would be your zoom settings in those browsers are set to something other than 100%.
You are also shooting yourself in the foot in a major way with all that absolute positioning. APDivs have been removed from DW in newer versions because Adobe finally came to their senses and stopped allowing the marketing department to dictate how design should be done.

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;

How to get background image to fill the browser and remain fixed in both IE and Firefox?

Basically what it says in the title. I've come very close in achieving this but something just doesn't tie up in the html and css code...
First of all, I'm using IE8 and the latest version of Firefox to test this.
I used 2 sources of information for getting this done: 1) http://css-tricks.com/perfect-full-page-background-image/ and 2) http://stackoverflow.com/questions/8958697/css3-background-size-cover-doesnt-make-image-co ver-vertically
In Case 1 the example on the page called CSS-Only Technique #1 gives code that works almost perfectly for me, except that obviously I need a background image, however the CSS provided there is clearly just for an image dropped in the body of a page with no regard for other content that may already be there. The html code that I put on the page is simply <img class="bg" src="../images/background_image.jpg">
Obviously I used the CSS code provided in the example, minus the last bit which is "@media screen" etc etc, which seems irrelevant to me. Obviously substituting values to suit the image on my page.
So what happened is that it almost worked as intended in both the browsers (which means the image filled both browsers width-wise as intended and also remained fixed when I zoomed in or out in each case) except that the image went over the top of the current content that I had there already precisely because it's not a background in this "technique". (A curious side-note is that the image didn't push down the content, as I'd have expected in normal circumstances, but went right over the top of it so it hid it (like z-index).
One thing that does bother me about this "technique" is that if you click on View Demo just below the code provided you will see on the working example page (forest background) the image clearly works as a background and the content sits happily on top! So I don't know whether the person providing the example was trying to mislead people or what! Or he got lazy and showed a different page that didn't use the exact code he provided. No matter.
In any case this leaves me with the job only half finished, as I still need a background image that works like the 'normal image' code provided.
On to Case 2 and on this page the first example provided gives the CSS for the background image - namely the code within html {...} part and also shows the same 'normal image' code as given in Case 1. In this case however, although the person provided a suggestion, the css and html doesn't really tie up properly plus some of the css and html seems a bit redundant. So this time when I used the 'html portion' of the CSS code (i.e. just the bit that was most relevant) I got two different behaviours in each browser and neither of which was quite what I'm looking for. In IE8 initially the page looks fine (background fills the page and content is on top) however when I zoom in or out the background also zooms in or out accordingly so is NOT fixed. In Firefox the background image DOES stay fixed, however because the image originally is not the whole height of the browser I'm guessing the code stretches it downwards (while keeping proportions - so the image essentially enlarges) to fill all of it. The quick way to get around it is to probably add some white space to the bottom of the image just to give it enough height that it doesn't stretch/resize automatically. But it would be nice to find out anyway how to get around this in the code. Overall I would say that the result in Firefox comes closest to the desired solution but of course it doesn't help matters with IE8.
Apologies for the lengthy description but that should at least provide plenty info for anybody that might have a possible solution for me. Essentially what would be great is if somebody could advise me how to take the code from Case 1 and apply it to a 'background' piece of coding like the type that's contained within html {...} in Case 2. Like I said, it's so nearly there but I just can't make it work atm after trying to combine the various bits of code this way and that... Alternatively, if somebody has another html-css version that works nicely for achieving this then please by all means let me know! Thanks v much in advance!

This works in modern CSS3 supporting browsers. But not pre-IE9.
http://alt-web.com/TEST/Resizable-BG.shtml
Nancy O.

CSS and Firefox

Similar Messages

Maybe you are looking for