Firefox trouble with DIV

**marwov** · 11-07-2006, 01:34 PM

I build a website and i used css. I used div. the website functional normally with IE. but with firefox the div's are positioned each one alone. please check the website in IE and in firefox to see what i am talking about.
www.3alakat.org . and here's an examle of how i wrote the div :
div.center{
position:absolute;
top:53px;
left:130px;

float:left;
width :844px;
height : 80px;

}
but with firefox, left and top, are changing in a catastrophic way.

thank you

**mwinter** · 11-07-2006, 08:19 PM

Originally Posted by marwov

I build a website and i used css. I used div.

Though you still seem to be using tables to effect layout, rather than CSS.

the website functional normally with IE. but with firefox the div's are positioned each one alone.

Your style sheet is served incorrectly as text/plain, rather than text/css. As a result, Firefox ignores it completely. Either you, or your host, need to correct the server configuration.

Even so, you have (at least) one other issue with your style sheet: an element cannot be both floated and absolutely positioned. A user agent should choose to position the element in this case, but you should eliminate the problem by removing the one you don't want.

Mike

**marwov** · 11-08-2006, 09:27 AM

Thanks Mike for your reply. I am using Macromedia Dreamweaver, so how can I correct the server configuration,although with IE the website is functioning normally.
here 's the link for the css sheet
<link rel="stylesheet" href="style.css" type="text/css">

(it is text/css and not text/plain ) :-)
( i removed the float from the css )
Thank you for your help. I am waiting for your reply.

Here's the code for the index.html :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta name="Description" content="3alakat,الشباب">

<title>3alakat</title>
<meta name="Description" content="description of page">
<meta name="Keywords" content="keywords, for, search engines">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<link rel="stylesheet" href="originalstyle.css" type="text/css">
<style type="text/css">

</style>

<script language="JavaScript" type="text/javascript">function infoscroll(seed,looped){var text1 = "Welcome to 3alakat";
var text2 = " Enjoy your time";
var msg=text1+text2;var putout = " ";
var c = 1;
if (looped > 10) {
window.status="<Thanks !>";
}
else if (seed > 100)
{
seed--;
var cmd="infoscroll(" + seed + "," + looped + ")";
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 100 && seed > 0) {
for (c=0 ; c < seed ; c++) {
putout+=" ";
}
putout+=msg.substring(0,100-seed);
seed--;
var cmd="infoscroll(" + seed + "," + looped + ")";
window.status=putout;
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 0)
{
if (-seed < msg.length)
{
putout+=msg.substring(-seed,msg.length);
seed--;
var cmd="infoscroll(" + seed + "," + looped + ")";
window.status=putout;
timerTwo=window.setTimeout(cmd,100); // 100
}
else {
window.status=" ";
looped += 1;
var cmd = "infoscroll(100," + looped + ")";
timerTwo=window.setTimeout(cmd,75); // 75
}
}
}
// -->

</script>
</head>

<body>

<div class="col">
<p><img src="img/tile_main.gif" width="21" height="653"></p>
</div>

<div class="heading">
<table width="759" height="47" border="0">
<tr align="center" bgcolor="lightgrey">
<th width="104" bgcolor="#999999"><b><a href="files.html">ملفات ساخنة</a> </b></th>
<th width="104"><b> <a href="family.html">عائلتي</a></b></th>
<th width="104"><b><a href="youth.html">قضايا الشباب</a></b></th>
<th width="104"><b><a href="marriage.html">العلاقات الزوجية</a></b></th>
<th width="104" ><b><a href="work.html">العلاقات في العمل</a></b></th>
<th width="104"><b><a href="why3alakat.html">لماذا العلاقات</a></b></th>
<th width="105"><b><a href="index.html"> الصفحة الرئيسية</a></b></th>
</tr>
</table>
</div>
<div class="center">

<p><img src="img/img_main.jpg"></p>
</div>

<div class="left">

<p><img src="img/banner_youth.jpg" width="174" height="186"></p>
</div>

<div class="right">
<table width="502" height="178" border="0">
<tr>
<th width="174" height="40" valign="top"> <div align="right">:أهم المشاكل المذكورة </div></th>
<th width="318" valign="top"><p align="right">أهلا" وسهلا" بكم في موقع علاقات</p>
<p></th>
</tr>
<tr>
<td height="132" valign="top"><div align="right">
<table width="179" border="0">
<tr>
<td><div align="center"><a href="marriage.html">الزواج السعيد</a></div></td>
</tr>
<tr>
<td><div align="center"><a href="family.html">سنواتهم الأولى</a></div></td>
</tr>
<tr>
<td><div align="center"><a href="files.html">ماذا؟ حامل؟؟؟؟ </a></div></td>
</tr>
<tr>
<td><div align="center"><a href="youth.html">لا اريد أن أتزوج</a> </div></td>
</tr>
<tr>
<td><div align="center"><a href="youth1.html">لا تجرب عبثاً</a> </div></td>
</tr>
</table>
<td align="right" valign="top"><p align="right" class="style3"> موقع علاقات صمم خصيصا ليلقي الضوء على العلاقات بين الناس أجمع , مثل العلاقات في مركز العمل, بين الموظفين , والعلاقات بين الرجل والمراة في الزواج وخارجه .كما ويطرح بعض المشاكل التي يمر بها الشباب في فترة البلوغ ويقدم حلول لهذه المشاكل ونصائح يمكن أن تساعد في تربية جيل صالح </p>
<a href="why3alakat.html"><img src="img/btn_more.gif" alt=""></a> </td>
</tr>
</table>
</div>

<div class="col2">
<p><img src="img/tile_main.gif" width="20" height="653"></p>
</div>

<div class="copy">
<p class="style6"> © 2006 3alakat.org. All rights reserved </p>
</div>

</body>
</html>

HERE"S the css style.css

@charset "windows-1256";
/* CSS Document */

html{ width :100% }
body{margin:0; padding:0;
background-color:#dfdfde; }

div.heading{
position:absolute;
left:0px;
width :950px;height :75px;
z-index:2;
}

div.center{
position:absolute;
top:53px;
left:130px;
width :844px;
height : 80px;

}

div.col{
position:absolute;
top:10px;
left:102px;
width:26px;
height:593px;
z-index:1;

}

div.col2{
position:absolute;
top:14px;
left:893px;
width:22px;
height:70%;

}

div.left{

border-bottom:20px solid #006600;border-right:20px solid #006600; border-left:20px solid #006600; border-top:20px solid #006600;
width :10%;
height : 80px;
position:absolute;
top:338px;
left:130px;
}

div.right{
background-image:url(img/tile_contenttable.gif);
background-repeat:repeat-x;
border-bottom:20px solid #006600;border-right:20px solid #006600; border-left:20px solid #006600; border-top:20px solid #006600;
width :502px;
height : 186px;
position:absolute;
top:338px;
left:345px; }

div.copy {
width :197px;
height : 27px;
position:absolute;
top:580px;
left:393px; }

a { text-decoration:none;
color:#990000;
border:#666666;
}

a:hover { text-decoration:none;
color:#CCCCCC;
background-color:#006600}

**mwinter** · 11-09-2006, 12:13 PM

Originally Posted by marwov

Thanks Mike for your reply.

You're welcome.

I am using Macromedia Dreamweaver,

That isn't really relevant. The problem is with your server, not your markup or the software you use to create it.

so how can I correct the server configuration,

You need to contact your host and inform them that their server is configured incorrectly. They need to investigate why files with a .css extension are served with a text/plain MIME type, rather than text/css.

As a temporary solution, you might try creating a .htaccess file (that's the full name, including the dot) in the same directory as your style sheets containing the line:

  AddType text/css css

Your server appears to be an Apache installation, but your host might have disabled the use of distributed configuration files.

although with IE the website is functioning normally.

It's not that IE is functioning normally, it's that it either doesn't care that the incorrect MIME type is used, or that it second-guesses that type. Either way, it's arguably the wrong behaviour (especially the latter).

Mike

Thread: Firefox trouble with DIV

Thread Tools

Search Thread

Firefox trouble with DIV

Bookmarks

Bookmarks

Posting Permissions