473,739 Members | 2,602 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

My page works fine in IE but css div is not recognised in firefox

5 New Member
Im very new to the who css lark so am struggling quite a bit.

ive managed to build a basic div centred box with css embedded in my html. It looks fine in IE but loses all size in firefox.

Any sugestions guys.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEd itable name="doctitle" -->
<title>Untitl ed Document</title>
<!-- TemplateEndEdit able -->
<!-- TemplateBeginEd itable name="head" -->
<!-- TemplateEndEdit able -->
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #fff;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
ul {
list-style-type: none; /* suppression of useless elements */
width: 100%; /* precision for Opera */
}
li { float: left;} /* lists aligned to the left */

.menu a {
margin: 0 1px;
width: 80px;
height: 14px;
float: left;
display: inline;
text-align: center;
border: 0px solid gray;
color: #000;
background: #fff;
font-size: 10px;
}

.menu a:hover {
background: #ccc;
border: 0px solid gray;
}

.menu a:active {
background: gray;
border: 0px solid gray;
color: #fff;
}
.thrColFixHdr #container {
position:absolu te;
left: 50%;
top: 50%;
width: 650px;
height: 400px;
margin-top: -200px; /* half of the height */
margin-left: -325px; /* half of the width */
}
.thrColFixHdr #header {
position:fixed;
background: #fff; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
height: 0px;
width:650px;
}
.thrColFixHdr #mainContent {
position: fixed;
margin: 0; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
height: 330px;
width: 650px;
overflow: auto;
}
.thrColFixHdr #footer {
position:fixed;
width: 700px;
height: 30px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.style1 {color: #DDDDDD}
.style2 {color: #000000}
.style3 {
font-size: 85%
}
-->
</style><!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
.thrColFixHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--></head>

<body class="thrColFi xHdr">

<div id="container" >
<div id="header">
<ul class="menu"><l i><a href="/home.html">Home </a></li> <li><a href="/about.html">Abo ut</a></li> <li><a href="/portfolio.html" >Portfolio</a></li> <li><a href="/crafts.html">Cr afts</a></li> <li><a href="/photography.htm l">Photograp hy</a></li> <li><a href="/classes.html">C lasses</a></li> <li><a href="/contact.html">C ontact</a></li></ul>
<h1 class="style3"> </h1>
<!-- end #header -->
</div>
<div id="mainContent ">

<h1> Main Content </h1>
<p>&nbsp;</p>
</div>
<div id="footer"><sp an class="style2"> <strong>Miria na D'ambrosio</strong></span> Artist Designer Tutor
<!-- end #footer -->
</div>
<!-- end #container --></div>
</body>
</html>
Jun 13 '07
11 2520
Benny123
5 New Member
Thanks guys but ive been trying to create a centered css <div> container.

asmanand- Thanks for the code but its not quite what i wanted as i need a set sized centrally located div box to standardize the page with overflow:auto

Hmm its not easy
Jun 14 '07 #11
drhowarddrfine
7,435 Recognized Expert Expert
Well, I'm confused as to whether you got the initial problem fixed. Here is the markup that works for me:
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- TemplateBeginEd itable name="doctitle" -->
<title>Untitl ed Document</title>
<!-- TemplateEndEdit able -->
<!-- TemplateBeginEd itable name="head" -->
<!-- TemplateEndEdit able -->
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #fff;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #CCCCCC;
}
.thrColFixHdr #container {
left: 50%;
top: 50%;
width: 650px;
height: 400px;
margin-top: -200px; /* half of the height */
margin-left: -325px; /* half of the width */
position: absolute;
}
.thrColFixHdr #main {
width:650px;
height:340px;
}
.thrColFixHdr #top {
width:650px;
height:20px;
}
.thrColFixHdr #bottom {
width:650px;
height:40px;
}
ul {
list-style-type: none; /* suppression of useless elements */
width: 100%; /* precision for Opera */
}
li { float: left;} /* lists aligned to the left */

.menu a {
margin: 0 1px;
width: 80px;
height: 14px;
float: left;
display: inline;
text-align: center;
border: 0px solid gray;
color: #000;
background: #fff;
font-size: 10px;
}

.menu a:hover {
background: #ccc;
border: 0px solid gray;
}

.menu a:active {
background: gray;
border: 0px solid gray;
color: #fff;
}
-->
</style>

<!--[if IE 5]>
<style type="text/css">
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]-->
</head>

<body class="thrColFi xHdr">

<div id="container" >
<div id="top">
<ul class="menu"><l i><a href="/home.html">Home </a></li> <li><a href="/about.html">Abo ut</a></li> <li><a href="/portfolio.html" >Portfolio</a></li> <li><a href="/crafts.html">Cr afts</a></li> <li><a href="/photography.htm l">Photograp hy</a></li> <li><a href="/classes.html">C lasses</a></li> <li><a href="/contact.html">C ontact</a></li></ul>
</div>
<div id="main">MAINC RAP</div>
<div id="bottom">Mir iana D'ambrosio Artist Designer Tutor</div>
<!-- end #container -->
</div>
</body>
</html>[/HTML]
Does anybody really use IE5 anymore?
Jun 14 '07 #12

Sign in to post your reply or Sign up for a free account.

Similar topics

8
2391
by: Dave Thomas | last post by:
I have developed a web site using asp pages that use both vbscript and javascript. Run the site on my PC and everything is fine. Ftp to my web hosting provider which hosts asp pages and look on my site only to find my vbscript is not recognised. It is treated as pure text so you see <% =Request.Form("LoginId") %>. Also see all the vbscript when you "View Source". I have e-mailed my host provider but thought this may be quicker! Any ideas...
3
2644
by: Rhino | last post by:
Yesterday, I reworked the index on my site - http://sfl.london.on.ca - so that they used list markup and I'm quite pleased with them. However, I'm having a problem with one small aspect of the menu and could use some help in fixing it. The problem is that I want the index to always highlight the link for the content which is currently being displayed on the right hand side of the page. This behaviour should be over and above the...
3
3393
by: KBuser | last post by:
I recently developed an internal website with various queries against our SQL server. I added buttons with Response.Redirect. These buttons do not work with Internet Explorer, however when using Firefox the page works flawless. Does anyone know why this is happening or how to fix it?
4
7472
by: evgenyg | last post by:
Hello ! We have the following situation - when Ajax request is sent what's being returned by the server is usually an XML (which is used for DOM updates) but sometimes it's HTML which is a whole new page that should replace an existing one. I.e when we issue an Ajax request we don't know what will be returned and analyze the response to act accordingly. Now, the way to replace the current document with a new one used to be easy and...
23
5932
by: Peter | last post by:
I have a problem with a page show_image.asp that returns a jpg image under Windows XP Pro SP2. The page sets content type as: Response.ContentType = "image/jpg" While this works perfectly fine on most machines, on some machines I experience this problem: When loading the page a window pops up that asks if I want to open the document show_page.asp. When I click "Open" Interdev pops up and opens up a
9
1996
by: =?Utf-8?B?Sm9obiBCYWlsZXk=?= | last post by:
I have a ASP .Net page that allows moving around items on the page through javascript. This page works fine in IE. In FireFox however, I have found that if the page is using XHTML 1.0 Transitional as the doctype, you cannot set the style.left and style.top properties of image or div tags. If you remove the doctype from the page it works just fine, although I would rather not do this. You can work around this by setting the cssText...
4
6044
by: iamaporkaholic | last post by:
The main page of the site has this script which determines the language settings of the OS. This works fine for IE but not for firefox. Is there any other codes which i have to insert to make sure Firefox would be able to load it? <script type="text/javascript"> function detectlang() { var lang=navigator.userLanguage var langs=navigator.systemLanguage
3
2131
by: dmorand | last post by:
I have a page where I'm using ajax to retrieve some employee info when a user clicks a "Retrieve Employee Info" button. The issue I'm having is that when the user updates the employee info, saves the data, then hits the retrieve employee info button again the data being retrieved is the original data, not the updated data. This only occurs in any IE browser, firefox works fine. In firefox everytime I hit the retrieve employee info button,...
8
4746
by: Harvey Schmidlapp | last post by:
I have a fairly complex form (generated by means of an ASP 3 page). The form is used to define a query against a database. After running a query, the user hits their browser's back button and goes back to the form, where their selections show up. They can change whatever they want to change and resubmit the new query. Mostly, everything works fine, with radio buttons, selection lists, check boxes all coming back in the state they were in...
0
8969
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9476
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
9263
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9208
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8210
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6751
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6053
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
2
2745
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2193
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.