Alignment inconsistencies in IE in Firefox

Does anyone know the best solution or approach for getting a
webpage you designed in dreamweaver to look the same in both IE and
Firefox? When I load it in IE...it looks great...just like
dreamweaver shows. However, in Firefox it takes some of my elements
and moves them around. its not much..maybe a few pixels or
so....but when doing a crisp template layout...those few pixels
throws everything off. Any ideas or things to try?

Jeo_james wrote:
> Does anyone know the best solution or approach for
getting a webpage you
> designed in dreamweaver to look the same in both IE and
Firefox? When I load it
> in IE...it looks great...just like dreamweaver shows.
However, in Firefox it
> takes some of my elements and moves them around. its not
much..maybe a few
> pixels or so....but when doing a crisp template
layout...those few pixels
> throws everything off. Any ideas or things to try?
>
Post a link so folks can see your code. It's likely IE that's
off, so
the trick generally would be to make it look right in FF and
then add
conditional comments for only IE to read; however, we need
code to get
more specific.
Bonnie
in California
8 ^ )

Similar Messages

Alignment problem in IE and Firefox

i am using this code for creating a table in my jsp, code is working fine for IE but in mozilla firefox its giving unnecessary spaces. i am not getting,why in firefox this problem is coming or which tag is not acceptable in firefox......
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="blueText13" valign="bottom"><strong>Partnering Interest</strong> </td>
</tr>
<tr align="left" valign="top">
<td valign="top"><img src="images/greystrip1.gif" width="100%" height="1"></td>
</tr>
</table>

I would need the blueText13 CSS class and the image (or at least the width and height) in order to help you. But this is more an HTML question, rather than a JSP one.

Table alignment issues in firefox

Hi all,
I've just finished designing a site for my business and after uploading it to the net I've been told by a friend that the main table cells on my index page aren't aligning properly.
The original page which can be found at http://www.darksun.net.au works fine in Safari and more or less fine in Explorer (with a strange white bar to the side), but the alignment is all out in Firefox.
I have tried aligning everything in the table I could find to align and it has helped but not fixed the issue. This attempt can be found at http://www.darksun.net.au/indextesting.html
Any suggestions? I'm not a pro or anything, so any help would be greatly appreciated!!!
Thanks heaps,
Jon

I've worked out another option with a friend of mine so the www.darksun.com.au address is now no longer the problem page.
Just click on the http://www.darksun.net.au/indextesting.html link to see an example of what I'm trying to solve.

Trouble with aligning swfs in firefox and IE

I have a html site that has flash elements and I am having
trouble getting it to look right in both IE and Firefox. The main
problem comes with an area where I have two small swfs (300x110) on
one line next to each other touching then a <br> and then a
large swf(470x300). Now if I leave the align default then it looks
fine in IE, If I make the top left left align it looks fine in
Firefox. If I make the top two left align then I get problems with
IE. And Same with all three left align. They are in a table cell
together right now and I think if I put them into their own cells I
could possible have better control but there is too many pages to
edit for this project to make that practical. Any ideas on what I
coould do to correct this problem.

Can you post a link to a webpage please.
You haven't really explained your problem ... how do you want
the three swf files to actually align
Off hand .. assuming that the cell which has three swf files
is 600px wide, the top 2 add upto 600px, the third file is only
470px and maybe thats where you're having the alignment problem.
The simplest solution, in my opinion, would be to edit the
470px wide .fla file, increase the width to 600px, make sure that
the actual content is where you need it to be (as it was in the
470px wide file earlier) and publish the swf file. You get a swf
file which is 600px wide spanning the entire cell width, but the
actualy content you're showing is still 470px.

IE8 distorting Flash

I have page headers made with Flash that are 750 px wide. I noticed that recently they appeared 1px too narrow and the pixel fonts were blurry. If I change the Flash width in the HTML code to 751, it looks fine (right width, fonts get crisp), even though the Flash document dimension says 750px width. I run many websites with similar headers and see this problem on lots of them.
I'm running IE8 and Flash Player 10. Since this appeared only recently, I suspect that it started with an IE update, since I haven't updated Flash Player recently. It looks okay in Firefox.
Has anyone seen a similar problem? Is there a fix? (I don't want to change all those widths to 751 and then have them be wrong if/when IE8 or whatever is causing it gets fixed.)
Thanks
Harry Tennant

Here's an example where I increased the width of the Flash piece by 1 px to make it work for IE8
http://www.sunrayisd.net/academic/Directory.cfm
You can see in this snippet of code that the Flash piece is now 751 wide and it matches the table below which is 750 wide.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="751" height="220">
<param name="movie" value="../14Header.swf?SP=../" />
<param name="quality" value="high" />
<embed src="../14Header.swf?SP=../" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="751" height="220"></embed>
</object></noscript>
</div>
<table class="BodyTable" width="750" border="0" align="center" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" height="365">
In the following example, both the Flash and table below are 750 wide. With IE8 you can see a misalignment along the left edge.
http://www.millsapisd.net/academic/Directory.cfm
The snippet:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="750" height="179">
<param name="movie" value="/43Header.swf?SP=" />
<param name="quality" value="high" />
<embed src="/43Header.swf?SP=" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="750" height="179"></embed>
</object></noscript>
</div>
<table class="BodyTable" width="750" border="0" align="center" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" height="365">
I was able to fix the text distortion problem within Flash for the pixel fonts by setting Stage.scaleMode="noScale" but I still have the width/alignment problem. These align properly in IE7 and Firefox. It appears that IE8 makes a too-small-by-one sizing error for Flash.
Harry

Table displays wrong at specific site - intermittent but stubborn

in v4.0b1 - The "Name" column is compressed while there is a *lot* of unused white space to the right of the table. It is intermittent and frequently an F5 reload will fix the problem and the table will expand to fill available white space. It normally takes three or more tries. Sometimes it won't correct at all until I've gone to another site and returned.
== URL of affected sites ==
http://nzbmatrix.com/nzb.php?cat=2

Assuming that the table showing various choices .. Bronze ..
Silver etc is
the one thats not aligned properly.
In your stylesheet
.priceMatrix {
margin: 15px 75px;
padding: 0px;
You have given a margin-left and margin-right , both of 75px
each. If you
want the table to align towards the left, change the code
above to
.priceMatrix {
margin: 15px 75px 15px 0;
padding: 0px;
You cannot lose until you give up !!!
"destind4film" <[email protected]> wrote in
message
news:eqrdtc$htj$[email protected]..
> New to the forums...thought I would try and solicit some
help from the DW
> gurus
> here.
>
> I recently began the difficult process of rebuilding my
entire site from
> scratch. I say difficult because I originally designed
this site using
> iWeb
> (Apple's wonderfully simplistic but completely limited
wysiwyg web
> program) and
> because DW has a pretty steap learning curve. I don't
know much about
> html and
> am still reading everything I can about how to really
utilize CSS. I
> actually
> bought a few of those missing manual books about DW,
Flash, and CSS and
> have
> been going through chapter by chapter to try and get a
handle on these
> robust
> programs.
>
> Be that as it may, I have tried everything I can think
of to get this
> table
> looking right...I have created CSS classes for what I
think is correct and
> have
> tried changing the height and width setting
appropriately. The table is
> not
> aligned correctly when viewed in Firefox or Safari but
displays much
> better in
> IE.
>
> If anyone here knows how I can fix this problem I would
appreciate it.
>
> the page in question is located here:
>
http://homepage.mac.com/dvdflashbacks/New_DVD_FB_Site/Pricing.html
>
> and the original page which will display more
appropriately what look I am
> trying to achieve with this table can be found here:
>
http://www.dvdflashbacks.com/
>
> Thanks in advance.
>

Incorrect fonts displayed on the website of ClustalW

ClustalW is a web-based program to align protein sequences. In order to read these alignments properly, they must be displayed in fixed-width font. However, firefox on mac displays them in sans-serif font.
This behavior is reproducible even when I create a new profile and use that. I have tried the same on firefox 8 on a Ubuntu Linux machine and there it works as expected.

It is a website that anyone can access. All you need is input protein sequences which can be downloaded for free from a database like uniprot.
Anyhow, I just realized that the additional information I have posted along with the question is buried under the 'More System details...' link. Please follow these steps to see what I am talking about:
1. Go to http://www.ebi.ac.uk/Tools/msa/clustalw2/
2. Enter the following as-is in the 'STEP 1' box: ('>Seq1' should be in first line and the sequence should be in the second line. Leave an empty line and do the same for seq2)
>Seq1
ACDEFGHIKLMNPQRSTVWY
>Seq2
ACEEFGGIKLMNPQRRTVWY
3. Hit 'Submit'
A sequence alignment will appear. In firefox, the protein sequence is displayed in sans-serif font instead of monospace.

IE8 Rendering

Hello all, I am a new user of this wonderful program that is called Fireworks. I am really enjoying this program quite a bit and have learned a lot about design and layout, which is made so easy with this program. The only question I have is that is lately when I have been creating layouts and when I view them in IE 8 they all float to the right. I tried to export and set the alignement to center, but it still shows up aligned to the right. Firefox does not seem to do this and it displays this properly. Is the an issue with IE, or am I maybe not doing something correctly?
For example, say I have a background, 1000 x 800 for example, and I have a rectangle content section over that background. When I hit F12 or export IE shows everything aligned to the right. I may try messing with the CSS, but it is just weird that it shows ok in Firefox, which I have gathered is the norm for IE.

It depends on how the code was written... sounds like there's a 'right alignment' somewhere
Exporting html from a graphics program (even a good one like FWs :-) is never a good idea, unless you are using it for protyping.
You should create your layout in FWs, export your images and then build the site in a html editor - Dreamweaver for example.
Maybe if you posted a link to your pages, we can see if there's something in the code causing this issue.
PS: Here are some tutorials that may help with moving from a FWs concept to Dreamweaver markup:
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html
http://www.macromedia.com/devnet/mx/dreamweaver/css.html
http://www.macromedia.com/devnet/dreamweaver/articles/tableless_layout_dw8.html
http://www.macromedia.com/devnet/dreamweaver/articles/css_concepts.html

How do I align a drop down menu in Firefox (using HTML)? My site works in Chrome and Explorer how I want it to, but not Firefox.

There are 2 issues that arise in Firefox but not other browsers.
1. The "All Categories" drop down menu is not aligned with the search field and search button.
2. The company logo appears pixelated.
The website is www.fortune3.com/evereadyhardware
Please view in Firefox and in Chrome to note the differences. Thank you.

Try posting at the Web Development / Standards Evangelism forum at MozillaZine. The helpers over there are more knowledgeable about web page development issues with Firefox. <br />
http://forums.mozillazine.org/viewforum.php?f=25 <br />
You'll need to register and login to be able to post in that forum.

Orange Firefox Button Is No Longer Aligned With Tabs In Firefox 28

A few days ago I was extremely happy with the browser that I was using, although after I was forced into upgrading to what was probably one of the ugliest and most unusable interfaces ever conceived (really, what is it with the internet and thinking that forcing gigantic changes on users with no option to revert is a good thing? If I had no problems using Firefox before, then I most certainly wasn't asking for a terrible change that would completely move (or in some cases even remove) all of features that I frequently used), I had no choice but to downgrade to Firefox 28 (please don't give me a lecture about the security risks, after trying to use 29 and getting extremely frustrated about how it was far LESS easy to use that 28, I really don't care at this point).
So, since reinstalling Firefox 28, the Orange Firefox button (which most definitely didn't need to be replaced with some other terrible button, as the Firefox Button already worked perfectly fine) is no longer aligned on the same line as my tabs, and instead floats above them for some reason. If anyone can help me fix this problem I would greatly appreciate it.
Thanks

The problem exists whether the window is maximized or not, although I do usually like to keep all of my windows maximized.
Thanks for the reply.

My Lexmark X2670 printer doesn't work right since I reinstalled the Firefox 3,6 version. I keep getting the alignment page to print over and over. Is there a problem between the two? Do I need a new printer driver? What?Daisynew66

I had to change my hrowser to Firefox because Internet Explorer 9 doesn't work with my ancestry.com program. I can't uninstall Internet Explorer 9. I got Firefox 4 and it didn't work either. I started having problems with my printer working at all then. l was told to go to Firefox 3.x. I looked and there is no 3.x it is 3.5 or 3.6. I downloaded 3.6. Now I keep getting a alignment page and end up having to shut off my printer. I'm using way too much ink. I'm almost out with no hope of getting more ink until I get paid. I can't find anyplace that says to update a driver or that I need a plug-in or what might be I've done everything I know to do.wrong. It has new port cables. Do you have any idea what could be wrong? Do I need to uninstall the printer and reinstall it again? daisy

I just figured out the print quality issue for my wife with her new iMac and new printer.
She replaced both at once and she couldn't understand why her Artisan 730 was lower quality then her Epson R280 when they had the same specs.
Turns out the newer printer had the option to connect via wifi which we used during setup.
The driver options are completely different depending on how you connect.
Once I connected via USB the correct options were available and the print quality was better.
Looking at the R2400 it dies not have wifi, but while researching the problem for my wife someone esle was having an issue updating to the latest printer driver.
If you go into the print utility from the Printer and Scanner system preference and under the general tab you should have driver 5.5.
One user had to delete the old printer driver before Software Update loaded the newer printer driver.
https://discussions.apple.com/message/15947486#15947486
On my MacBook Pro (w Snow Leopard) I always had to reconnect my wifi at home when it woke up. I upgraded my router from an old Netgear to a newer N D-Link and stopped having to do that.
I would be surprised you would have that problem with an Airport Extreme, you might check to see if there is a firmware update for it.

Aligned in Firefox but not in IE.

I'm a complete newbie to webdesign have a wee problem. Whilst designing a website I was testing totally out of firefox, website goes live and check it at
work... not aligned. Can anyone help?
Have posted the code below.
Huge thanks to anyone inadvance.
Fen
Edited - Cos I some linked the webpage not the code.
<!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=iso-8859-1" />
<title>Scorrier House Cross Country Course</title>
<style type="text/css">

</style>
</head>
<body>
<table width="101%" height="100%" border="0">
<tr>
    <td width="180" height="0"> </td>
    <td width="460" height="1000" valign="baseline" bgcolor="#FFFFFF"><table width="100%" border="0">
      <tr>
        <td><a href="/index.html"><img src="Images/place holder.JPG" width="900" height="150" border="0" /></a></td>
      </tr>
    </table>
      <table width="100%" border="0">
        <tr>
          <td width="100"><div align="center" class="a"><a href="index.html" class="a">Home</a></div></td>
          <td width="100"><div align="center" class="a"><a href="/jumps.html" class="a style1">Jumps</a></div></td>
          <td width="100"><div align="center" class="a"><a href="/course.html" class="a style1">Course</a></div></td>
          <td width="100"><div align="center" class="a"><a href="/prices.html" class="a style1">Prices</a></div></td>
          <td width="100"><div align="center" class="a"><a href="/location.html" class="a style1">Location</a></div></td>
          <td width="100"><div align="center" class="a"><a href="/contact_us.html" class="a style1">Contact us</a></div></td>
        </tr>
      </table>
      <table width="100%" border="0" cellpadding="20" cellspacing="0">
        <tr>
          <td><p> </p>
          <p> </p></td>
          <td><div align="center"><img src="Images/horses 048.JPG" width="700" height="450" /></div></td>
          <td> </td>
        </tr>
      </table>
      <blockquote>
        <p>Welcome to Scorrier House cross country course. The course is in the breathtaking Cornish countryside, set in rolling farmland and woodland. </p>
        <p>The course is just over two miles long and securely fenced. Due to a good grass covering, we have a good going all year around. </p>
        <p>With a vast range of jumps and open fields, it is ideal for schooling, or simply hack around in a relaxed atmosphere taking in the beautiful countryside. All of our jumps have options to avoid them, so you can jump as much or as little as you wish. There is also plenty of flat space to warm up in. </p>
        <p>We are ideally situated, just a short distance from the A30. Once you arrive at the course, there is plenty of parking with some hard standing. </p>
        <p> </p>
      </blockquote></td>
    <td width="180"> </td>
</tr>
</table>
</body>
</html>

Try pasting this code into a new, blank HTML document in Code View.
<!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=iso-8859-1" />
<title>Scorrier House Cross Country Course</title>
<style type="text/css">
body {
background-image: url(Images/background_047.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 900px;
margin: 0 auto;/**centers page**/
text-align: center; /**centers page in older browsers**/
font-size:90%;
p {
font-size: 0.8em;
line-height:1.3em;
text-align:left;
padding: 0 6em 0.5em 6em;
margin: 0 0 0.5em 0;}
/**links**/
a {font-size: 14px;text-decoration: none;}
a:link {color:#000;}
a:visited {color:#0033CC;}
a:hover, a:active, a:focus {font-weight:bold}
/**menu**/
.menu td { text-align: center; width: 100px;}
</style>
</head>
<body>
<table width="100%" border="0">
<tr>
<td><a href="/index.html"><img src="Images/placeholder.JPG" alt="placeholder" width="900" height="150" border="2" /></a></td>
</tr>
</table>
<table class="menu" width="100%" border="0">
<tr>
<td><a href="index.html">Home</a></td>
<td><a href="/jumps.html">Jumps</a></td>
<td><a href="/course.html">Course</a></td>
<td><a href="/prices.html">Prices</a></td>
<td><a href="/location.html">Location</a></td>
<td><a href="/contact_us.html">Contact us</a></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="20" cellspacing="0">
<tr>
<td><div align="center"><img src="Images/horses048.JPG" alt="horses" width="700" height="450" border="2" /></div></td>
</tr>
</table>
<p>Welcome to Scorrier House cross country course. The course is in the breathtaking Cornish countryside, set in rolling farmland and woodland. </p>
<p>The course is just over two miles long and securely fenced. Due to a good grass covering, we have a good going all year around. </p>
<p>With a vast range of jumps and open fields, it is ideal for schooling, or simply hack around in a relaxed atmosphere taking in the beautiful countryside. All of our jumps have options to avoid them, so you can jump as much or as little as you wish. There is also plenty of flat space to warm up in. </p>
<p>We are ideally situated, just a short distance from the A30. Once you arrive at the course, there is plenty of parking with some hard standing.</p>
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Why does the mandatory field indicator (*) not aligned in Firefox 4.0?

[http://i56.tinypic.com/24ng1vt.png Asterisk not aligned in Firefox 4.0]

Who makes your mouse? Is it a Logitech? If so, please see this post: http://forums.mozillazine.org/viewtopic.php?f=38&t=206293

Firefox search bar is now right-aligned, how can I fix this?

My toddler randomly played with my keyboard and now text in the Firefox search bar is right-aligned. Very strange. How can I fix this?

You can flip the bidi text direction from right-to-left to left-to-right with "Shift+Ctrl+X".

Firefox's kerning is so bad that it ruins text alignement?

Here, I made an image of my issue, http://i.imgur.com/gv9jXnY.png
Firefox on the top, IE10 is on the bottom
As you can CLEARLY see, the repeat kerning failures in Firefox are so bad that they throw off the entire alignment of text, I searched for atleast six hours on how to resolve this, I could not find an answer
Could you tell me how I can tell firefox to display text in the same way that IE does?
I'm a DieHard IE fan who finally decided to stop using IE, I find Firefox (Personally Waterfox) to be a good alternative, the issue is that the text Literally Hurts My Eyes to read and look at, on Every webpage
What the hell do I need to do to Force firefox to render text the same way as IE?

Okay, so for example: http://battlelog.battlefield.com/bf4/forum/threadview/2955064785067990285/2/
What I notice is that Chrome does not break the URLs and Firefox does: Firefox breaks by moving the / to the beginning of the next line. (I can't test IE newer than 8 on this system.)
That forum has a typo in its style rule for that signature block:
word-break: break-word;
break-word is not a valid value for the word-break property, so it is ignored and the browsers are using their default rules. If the site intended to use
word-break: break-all;
then the [https://developer.mozilla.org/docs/Web/CSS/word-break MDN article on word-break] suggests that all browsers would display that text like Firefox does.
You can override what Firefox is doing in that signature block with a custom style rule:
.forum-threadview-post-signature {
word-break: keep-all !important;
(Demo of the change attached.) Custom style rules can be applied to a page automatically each time you load it in Firefox by creating/editing a userContent.css file in your settings folder, or by using the Stylish extension.
But it depends on how motivated you are... also, I might find time to research why Firefox and other browsers have different defaults when it comes to breaking words at slashes. Aren't we all supposed to follow the same standards??

Alignment inconsistencies in IE in Firefox

Similar Messages

Maybe you are looking for