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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<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:absolute;
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="thrColFixHdr">
<div id="container">
<div id="header">
<ul class="menu"><li><a href="/home.html">Home</a></li> <li><a href="/about.html">About</a></li> <li><a href="/portfolio.html">Portfolio</a></li> <li><a href="/crafts.html">Crafts</a></li> <li><a href="/photography.html">Photography</a></li> <li><a href="/classes.html">Classes</a></li> <li><a href="/contact.html">Contact</a></li></ul>
<h1 class="style3"></h1>
<!-- end #header -->
</div>
<div id="mainContent">
<h1> Main Content </h1>
<p> </p>
</div>
<div id="footer"><span class="style2"><strong>Miriana D'ambrosio</strong></span> Artist Designer Tutor
<!-- end #footer -->
</div>
<!-- end #container --></div>
</body>
</html>
11 2499
I'm editing this as I go through your page:
1) Your doctype is incorrect. Should be:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
2) You declare HTML but then you use this Xhtml tag:
<html xmlns="http://www.w3.org/1999/xhtml">
Change that all to just <html>
3) You are also using Xhtml end tag, />. Remove the slash.
4) You are using 'position:fixed' which does not work in IE6 but has been fixed for IE7. If you viewed this in IE7, you will see that it appears the same as Firefox.
With 4) in mind, you might want to re-think what you are trying to do.
I'm editing this as I go through your page:
1) Your doctype is incorrect. Should be:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
2) You declare HTML but then you use this Xhtml tag:
<html xmlns="http://www.w3.org/1999/xhtml">
Change that all to just <html>
3) You are also using Xhtml end tag, />. Remove the slash.
Thanks for the help!
Rite ive chaged my doc type.
ive got rid of the <html xmlns="http://www.w3.org/1999/xhtml"> tag and the /. But im unsure what should be in its place.
it seems that now it neither is displaying the div in either ie or firefox?!?!
4) You are using 'position:fixed' which does not work in IE6 but has been fixed for IE7. If you viewed this in IE7, you will see that it appears the same as Firefox.
With 4) in mind, you might want to re-think what you are trying to do.
ok im slowly getting there
can seem to get this right!
now its working in firefox its blank in ie...
Whats going on! cant work it out.
any help please?!?!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<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="thrColFixHdr">
<div id="container">
<div id="top">
<ul class="menu"><li><a href="/home.html">Home</a></li> <li><a href="/about.html">About</a></li> <li><a href="/portfolio.html">Portfolio</a></li> <li><a href="/crafts.html">Crafts</a></li> <li><a href="/photography.html">Photography</a></li> <li><a href="/classes.html">Classes</a></li> <li><a href="/contact.html">Contact</a></li></ul>
</div>
<div id="main">MAINCRAP</div>
<div id="bottom">Miriana D'ambrosio Artist Designer Tutor</div>
<!-- end #container -->
</div>
</body>
</html>
Merged threads. Let's keep this all under one roof.
I didn't say to remove all of the <html> line. Just leave <html> there like that. It's not the fix, though.
The closing style tag is missing from the first one. You closed the conditional comment one but not the top one.
I think the following code will solve your problem
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background-color: #ffffff;
margin: 0px;
padding: 0px;
text-align: center;
color: #CCCCCC;
}
#container {
padding-top:20%;
text-align: center;
margin: 0 auto;
width: 650px;
height:400px;
}
.thrColFixHdr #main {
width:650px;
height:340px;
}
.thrColFixHdr #top {
width:650px;
height:20px;
}
.thrColFixHdr #bottom {
width:650px;
height:40px;
}
ul {
list-style-type: none;
width: 100%;
}
li { float: 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>
</head>
<body>
<div id="container"><div id="top">
<ul class="menu"><li><a href="/home.html">Home</a></li> <li><a href="/about.html">About</a></li> <li><a href="/portfolio.html">Portfolio</a></li> <li><a href="/crafts.html">Crafts</a></li> <li><a href="/photography.html">Photography</a></li> <li><a href="/classes.html">Classes</a></li> <li><a href="/contact.html">Contact</a></li></ul>
</div>
<div id="main">MAINCRAP</div>
<div id="bottom">Miriana D'ambrosio Artist Designer Tutor</div>
</div>
</body>
</html>
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
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">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<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="thrColFixHdr">
<div id="container">
<div id="top">
<ul class="menu"><li><a href="/home.html">Home</a></li> <li><a href="/about.html">About</a></li> <li><a href="/portfolio.html">Portfolio</a></li> <li><a href="/crafts.html">Crafts</a></li> <li><a href="/photography.html">Photography</a></li> <li><a href="/classes.html">Classes</a></li> <li><a href="/contact.html">Contact</a></li></ul>
</div>
<div id="main">MAINCRAP</div>
<div id="bottom">Miriana D'ambrosio Artist Designer Tutor</div>
<!-- end #container -->
</div>
</body>
</html>[/HTML]
Does anybody really use IE5 anymore?
Sign in to post your reply or Sign up for a free account.
Similar topics
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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,...
|
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...
|
by: taylorcarr |
last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: aa123db |
last post by:
Variable and constants
Use var or let for variables and const fror constants.
Var foo ='bar';
Let foo ='bar';const baz ='bar';
Functions
function $name$ ($parameters$) {
}
...
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
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,...
|
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,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
| |