DIV in Firefox not working properly. - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

DIV in Firefox not working properly.

duckxtales

1:01 am on Feb 16, 2007 (gmt 0)

10+ Year Member

Hi,

I just redid one of my sites and made it tabless CSS. it works fine in IE, but not in firefox.

What has to be changed to the DIV to make it compatible in firefox to make it look like IE?

Here's my CSS file:

====================================

#header {
display: block; width: 752px; height: 95px; text-align:left; background: url(images/beaconsun_02.gif); background-repeat: no-repeat; background-position:left top;
}

#header_bottom {
width: 514px; height: 22px; float:left; top: 73px; display:block; position:relative; background: url(images/beaconsun_07.gif); background-repeat: no-repeat; background-position:right top;
}

#container { height: 100%; }

#menu {
display: block; width:180px; float:right; display:block; position:relative; top: 35px; right: 30px;
}

#main_body_container {
display: block; display: block; width: 752px; text-align:left; background: url(images/beaconsun_09.gif); background-repeat: no-repeat; background-position: center top;
}

#main_body_container2 {
margin-top:70px; width: 752; text-align: center; background: url(images/beaconsun_11.gif); background-repeat: repeat-y; background-position: left top;
}

#title {
top: -28px; left: 45px; width:250px; display:block; position:relative; float:left;
}

#footer {
display: block; display: block; width: 752px; height: 72px; text-align:left; background: url(images/beaconsun_12.gif); background-repeat: no-repeat; background-position: left top;
}

=====================================
Thanks,
p@

[edited by: encyclo at 2:04 am (utc) on Feb. 16, 2007]
[edit reason] no links to personal sites please, see forum charter [/edit]

cmarshall

3:22 am on Feb 16, 2007 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

You'll need to supply some XHTML as well...

duckxtales

5:08 am on Feb 16, 2007 (gmt 0)

10+ Year Member

oops forgot about that. So this is called XHTML? I thought i was coding in regular HTML all this time:

========================================
<body>

<div id="container">
<div id="header">
<div id="header_bottom">
<a href="../index.php" class="button_home"><strong style="visibility:hidden;">Home</strong></a>
<a href="../contacts.php" class="button_contact"><strong style="visibility:hidden;">Contacts</strong></a></div>

<div id="menu" >
<span><a href="../acupuncture.html" class="button">Acupuncture</a></span><br>
<span><a href="../far-infrared-therapy.html" class="button">Far Infrared Therapy</a></span></div>
</div>

<div id="main_body_container">
<div id="main_body_container2">
<div id="title"><strong>Welcome to Beacon Sun...</strong></div>

<div id="contents" style="width: 706px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="29%">Body_Edit<br></td>
<td width="71%"> </td>
</tr>
</table>
</div>
</div>
</div>

<div id="footer">
<div id="footer_menu" style="text-align: center; margin-top:75px;">
<a href="index.php">Home</a> ¦ <a href="../contacts.php">Contacts</a> ¦ <a href="../acupuncture.html">Acupuncture</a> ¦ <a href="../far-infrared-therapy.html">Far Infrared Therapy </a><br><br>
Beacon Sun - Copyright 2007
</div>
</div>
</div>

</body>
=======================================

cmarshall

11:37 am on Feb 16, 2007 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

The official term is XHTML/CSS. You should code XHTML 1.0 Transitional most of the time, and make your pages validate. This allows you to use a validator as a debugger. I usually code XHTML 1.1, because it isn't much more work than XHTML 1.0 Transitional, and I can do a bit more with 1.1 pages.

In my testing, they look exactly the same.

It may be because you don't specify a valid DOCTYPE.

I reworked the code a bit for XHTML 1.1. This involved making the <td> widths into styles and adding closing slashes on the <br> tags.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
/* <![CDATA[ */
#header {
display: block; width: 752px; height: 95px; text-align:left; background: url(images/beaconsun_02.gif); background-repeat: no-repeat; background-position:left top;
}
#header_bottom {
width: 514px; height: 22px; float:left; top: 73px; display:block; position:relative; background: url(images/beaconsun_07.gif); background-repeat: no-repeat; background-position:right top;
}
#container { height: 100%; }
#menu {
display: block; width:180px; float:right; display:block; position:relative; top: 35px; right: 30px;
}
#main_body_container {
display: block; display: block; width: 752px; text-align:left; background: url(images/beaconsun_09.gif); background-repeat: no-repeat; background-position: center top;
}
#main_body_container2 {
margin-top:70px; width: 752; text-align: center; background: url(images/beaconsun_11.gif); background-repeat: repeat-y; background-position: left top;
}
#title {
top: -28px; left: 45px; width:250px; display:block; position:relative; float:left;
}
#footer {
display: block; display: block; width: 752px; height: 72px; text-align:left; background: url(images/beaconsun_12.gif); background-repeat: no-repeat; background-position: left top;
}
/* ]]> */
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="header_bottom">
<a href="../index.php" class="button_home"><strong style="visibility:hidden;">Home</strong></a>
<a href="../contacts.php" class="button_contact"><strong style="visibility:hidden;">Contacts</strong></a>
</div>
<div id="menu" >
<span><a href="../acupuncture.html" class="button">Acupuncture</a></span><br />
<span><a href="../far-infrared-therapy.html" class="button">Far Infrared Therapy</a></span>
</div>
</div>
<div id="main_body_container">
<div id="main_body_container2">
<div id="title">
<strong>Welcome to Beacon Sun...</strong>
</div>
<div id="contents" style="width: 706px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:29%">Body_Edit<br /></td>
<td style="width:71%"> </td>
</tr>
</table>

</div>
</div>
</div>
<div id="footer">
<div id="footer_menu" style="text-align: center; margin-top:75px;">
<a href="index.php">Home</a> � <a href="../contacts.php">Contacts</a> � <a href="../acupuncture.html">Acupuncture</a> � <a href="../far-infrared-therapy.html">Far Infrared Therapy </a><br /><br />
Beacon Sun - Copyright 2007
</div>
</div>
</div>
</body>
</html>

SuzyUK

5:59 pm on Feb 17, 2007 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

What has to be changed to the DIV to make it compatible in firefox to make it look like IE?

first off you might like to make it work in FF first then go back and fix for IE as it's easier FF/Opera et al are usually correct, and adjustments if any are needed are ususally easier to make for IE - but secondly I think do this is all about Doctypes, which if any are you using?

Suzy

[edited by: SuzyUK at 3:05 pm (utc) on Feb. 18, 2007]

System

8:28 pm on Feb 17, 2007 (gmt 0)

redhat

Off topic messges cut to new thread in Browsers.

New thread at: Choosing XHTML over HTML [webmasterworld.com]

[edited by: SuzyUK at 3:04 pm (utc) on Feb. 18, 2007]