HTML - Firefox/safari Rendering Issue

I have run into a problem when using tables in Firefox. I code for IE 6.0 and I like my browser to determine when to put text on a new line once the table width has been reached. Rather than put breaks <br> in my text I just let the browser decide.

When I open a page in Firefox it does not wrap the text within the table it just allows the text to flow to the right until the end of the text occurs. To fix this I now have to use <br> whenever I want a new line to begin but this creates other problems when others view my pages in IE 6 or IE 7 as the line breaks are now choppy sometimes consisting of one word on a line. My screen resolution is 1280x1024 but if someone does not have this resolution the page is a mess.

I am using Dreamweaver as my editor and Firefox 2.0.0.15. Works just fine with IE 6 or IE 7.

Can anyone help me with this? Here is an example of a page that I been forced to put <br> at the end of each line: http://www.outdoorphotographycanada.com/dwilson.html

Thanks,

Dave

Why do they render differently? For example look at my myspace

www.myspace.com/markster106

The profile box (the one with all the text about me) is in one position in firefox, and when you open it with Internet Explorer, it is different. How should I deal with this?

Code:

.profile
{
height: 130px;
width: 440px;
background-image: url('http://www.freewebtown.com/markster106/myspacelayoutmunit/myspacepicture.jpg');
z-index: 2;
overflow: automatic;
background-color: #9c9c9c;
border-style: solid;
border-width: 0px;
font-family: sans-serif;
text-align: left;
padding: 2px
}

The above is the CSS used

Hello,

I am building a website for a client :

http://timhawarah.com/testing.php

In Firefox (my favorite browser) there is about a 15 px space in the rooftop of the house which is wrong.

In IE the website looks like it should.

What can I do to correct this problem.

Any help would be most appreciated!

Thanks,
TaylorJumbo

MY CSS looks like this:


Quote:
body {


background-color: #202020;

font-family: Arial, Verdana, sans-serif;
font-size:12px;
color:#202020;
text-align: left;


}

#topnavigation li
{
display: inline;
list-style-type: none;
padding-right: 13px;

}


#top2 li
{
display: inline;
list-style-type: none;
padding-right: 13px;

}


a:link, a:visited {
text-decoration:none;
font-weight: none;
font-family: Arial, Verdana;
padding: 0px;
marging: 0px;
font-size: 10px;
background-color: transparent;
color: #202020;
border-bottom: 1px dashed #3e9446;


}

a:hover {
text-decoration:none;
font-weight: none;
font-family: Arial, Verdana;
padding: 0px;
marging: 0px;
font-size: 10px;
background-color: transparent;
color: #fff;
border-bottom: 1px dashed #3e9446;


}


a.imagelink:link, a.imagelink:visited, a.imagelink:active {
text-decoration:none;
font-weight: bold;
font-size: 12px;
background-color: none;
color: #202020;
border: 0px;


}

a.imagelink:hover {
text-decoration:none;
background-color: none;
color: #fff;
border: 0px;;

}

#outercase {
width: 790px;
background-color: #fff;
margin: 0px auto;
padding: 0px;
border: 0px;
text-align: left;


}

#top1 {
width: 790px;
height: 57px;
margin: 0px;
padding: 0px;
text-align: left;
background-color: #fff;
background: url("/images/wip1.jpg") no-repeat;
border: 0px;


}


#top2 {
width: 790px;
height: 122px;
margin: 0px;
padding: 0px;
text-align: right;
background-color: #fff;
background: url("/images/wip2.jpg") no-repeat;
border: 0px;


}




#topnavigation {
width: 780px;
margin: 0px;
padding-right: 10px;
padding-top: 5px;
text-align: right;
background-color: #fff;
border: 0px;


}



#middle {
width: 750px;
height: 300px;
margin: 0px;
padding: 20px;
text-align: left;
background-color: #fff;
border: 0px;


}

#banners {
width: 770px;
margin: 0px;
padding: 10px;
text-align: left;
background-color: #fff;
border: 0px;


}

#bottom {
width: 780px;
height: 10px;
font-size: 9px;
margin: 0px;
padding: 5px;
text-align: left;
background-color: #3e9446;
border: 0px;


}
and my xhtml looks like this

Quote:
<?include("header.php");?>

<div id="outercase">

<div id="topnavigation">

<?include("navitop.php");?>

</div>


<div id="top1">

</div><div id="top2">

<?include("teasertop.php");?>

</div>

<div id="middle">

</div>

<div id="banners">

<?include("banners.php");?>

</div>

<div id="bottom">

<?include("footer.php");?>

Here is the code:
EDIT:

I missed part of the code:

<id class = "vision">
CLEAN is founded </class>on the belief that education is the essential foundation for global climate change solutions. CLEAN is a program designed to supplement existing elementary (1st-8th grade) science education. First, children learn the fundamental scientific background they need in order to understand global climate change. Second, CLEAN provides them with the tools and support they need to take positive action. Particular emphasis is placed on climate change as a concern that is not only individual and local, but equally collective and global. This emphasis is supported through the development of communication and collaboration between classrooms locally and internationally. The problems presented by global climate change can seem overwhelming, often leading to apathy and inaction. By combining practical information with a fun, engaging, play-based learning environment, CLEAN fosters a positive attitude that empowers children to take meaningful action.

and the "Vision" code in my css is very simple:

.vision {
font: bold 25px Tahoma, 'trebuchet MS', Sans-serif;
}


In firefox it renders like this:



while here it is in Explorer:


Why the difference and how do I fix it? I have read that Microsoft doesn't follow the "rules" established by the web boards about how code should be done. Is this the problem in this case? Thanks!

Hi,

I have a site that loads fine on Chrome and IE.

Don't see a section of it on Safari or Firefox. Page comes up blank. its supposed to show flash object.

The site is

kidsooda.com

The section page that does not work in Safari and FF is

kidsooda.com/inside/#/contact

If you have any ideas I'd really appreciate it.


THANK YOU !!

I have a simple slide over menu for navigation in a div. Safari and Firefox both work. ON IE it's shifted over to the right a little more and the slide over menus wont appear. Any options?

Can anyone tell me why all the content jumps to the right in Safaria for page of my website?

It looks fine in all other major browsers...

http://www.kasedesign.co.uk/ysm/business.htm

Thanks in advance…

The opening page for a site I am developing does not display correctly in Safari or Chrome, but does in Firefox and IE7. It passes the w3c validation. Not sure what I have missed?

site
Todd

Solved by myself.

Hello, my problem is simple, my code works in Safari and Firefox but does not work in Internet Explorer. The code is supposed to open up my other site inside a frame when visiting drewandjess.net. Works perfectly except with IE... it just displays some text that should be commented out. Any advice would be appreciated!

Domain: www.drewandjess.net

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<title>Andrew and Jessica's Wedding</title><!-->incase they have javascript turned off<!-->

<script type="text/javascript"><!-->changes title bar to match title on current page in frame<!-->
function changeTitle()
   {
   if (top.frames['main'].document.title)
      {
      top.document.title=top.frames['main'].document.title;
      }
   }
</script>
</head>


<frameset>
<frame name="main" src="http://www.weddingwire.com/youandme"scrolling="auto" target="main" ONLOAD="changeTitle();"><!-->You need the onload handler to make the javascript work<!-->

<noframes>

<body>
If you can see this message it is because you are using a browser that does not support frames. Please retry viewing this page with a browser such as Mozilla Firefox.
</body>

</noframes>

</frameset>

</html>

Hello, stuck again!!!

Right well i have an swf file and it's playing fine in safari but not in firefox - the place where it's supposed to be is just blank. Any ideas?

http://www.absolute-websites.com/portfolio#animation

Here is the code:

HTML Code:

  <object id="peepShow" type="application/x-shockwave-flash" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"
				    data="video/peep_show.swf" 
				    width="550" height="400">
				    <param name="movie" value="video/peep_show.swf" />
				    <param name="quality" value="high"/>
				    </object>

Hi,

Im trying to develop a simple HTML interface for virtual tours but I cant get the site to look the same in all browsers. The problem comes when I view the page in IE. I want the bottom table to only be the length of the window as done in both safari and firefox. My site can be viewed on:

http://www.fullvisual.com/informatic...tual_tour.html

why doesn't the width=100% work?

Thanks

http://www.ptacnik.com/index102.html

When previewing through Dreamweaver in ANY of these 3 browsers it looks fine. (from my local drive) But once online it only loads in Firefox. Is there something fishy with the frames perhaps? missing an XML doc on my end? I can't figure out what is causing this. Any help would be very much appreciated.

http://www.ptacnik.com/nav1.html is the top frame and the list below are the frames loaded under nav1.

http://ptacnik.com/about101.html

http://ptacnik.com/design.html

http://ptacnik.com/illustration.html

Okay well I have a bit of a problem... it's not major but it's enough to annoy a perfectionist.

On my website I have set up a table (100% wide) with three columns in, the middle column is 700px wide. (I presumed this would balance out the two side columns placing the middle column in dead center. It does(ish). I am guessing this might be a way that is frowned upon but, I am thinking of adding extra little bits of info in them outside columns later on...

In safari (my main browser) it works fine and places it exactly however, in firefox (on mac) there is a slight one pixel nudge to the right which stands out significantly. (In fact, it was the first thing I noticed!)

The background image is obviously the problem but this seems like the only route as I have found this error half way down the line and I do not want to go back and do a load of HTML code editing! Screenshots below:

Firefox: http://img231.imageshack.us/img231/5249/picture7mfq.png
Safari: http://img219.imageshack.us/img219/4269/picture6kpd.png

Is there any possible fix to this solution?

Only logged in users can see this page so I could store a users screen width in a $_SESSION variable using PHP and then adjust this on each page? Just an idea I thought of but I doubt... any help is highly appreciated!!!!!!

P.S: I have not tested in IE yet... I will in a minute...

UPDATE ////////////////////////////////

I just tested it in Firefox on Windows Vista.... there was no problem.
And as for Internet Explorer.. everything is fine..

Hi, I am new to this borad, hope someone good at HTML can help me.

I am building a website www.blazeauto.co.uk/shop/ there is a problem with the navigation menu. It work perfects in Firefox and Safari but not in IE.

The following are the code I use.

<ul id="mainmenu-nav">
<ul class="ul-nav"
<li class="li-nav"><a href="index.php?act=viewCat&amp;catId=1" class="txtDefault">Test Category</a></li>
</ul>

<ul class="ul-nav"
<li class="li-nav"><a href="index.php?act=viewCat&amp;catId=2" class="txtDefault">Level1</a></li>
</ul>

<ul class="ul-nav"
<li class="li-nav"><a href="index.php?act=viewCat&amp;catId=4" class="txtDefault">Level2</a></li>
</ul>

<ul class="ul-nav"
<li class="li-nav"><a href="index.php?act=viewCat&amp;catId=5" class="txtDefault">Level3</a></li>
</ul>

</ul>

And this is the CSS code

.li-nav a{
font-size: 14px;
width: 150px;
display: block;
text-indent: 2px;
font-family: "Trebuchet MS", Verdana, Arial;
color: #000000;
text-decoration:none;
font-weight: bold;
background-image:url(/shop/img/linkout.gif);
}

.li-nav a:hover{
width: 150px;
display: block;
text-indent: 2px;
font-family: "Trebuchet MS", Verdana, Arial;
color: #FFFF00;
text-decoration:none;
background-color: #0066FF;
background-image:url(/shop/img/linkover.gif);

-----------------------
Can anyone tell me what is wrong? I have been trying for two days with no luck.

Thanks
Per