Thu, 2005-12-15 10:20
Hi Guys,
this is a screen shot of my page in Firefox, any tips as to why it looks like this in Firefox and yet looks normal in IE??
http://www.badongo.com/pic.php?file=Layout+of+e-mailout__2005-12-15_layout.jpg
Here is the CSS code:
ul
{
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:101px;
text-align:center;
text-decoration:underline;
color:black;
background-color:white;
padding:0.1em 0.1em;
border-right:1.5px solid white;
}
a:hover {background-color:#0099FF;color:white; text-decoration:underline;}
li {display:inline}
html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background-color:#CCCCCC;
font-size:76%;
font-family:verdana, arial, sans-serif;
overflow: hidden;
}
h1
{
text-align: center;
font-size: 200%;
text-decoration: underline;
}
#body {
height:100%;
max-height:100%;
overflow:hidden;
padding:0;
margin:0;
border:0;
background:rgb(209,205,193);
}
#content {
display:block;
overflow:auto;
position:absolute;
z-index:3;
top:150px;
width:640px;
margin-left:-321px;
left:50%;
border-left:1px solid#000;
border-right:1px solid#000;
background:#fff;
overflow:scroll;
text-size:75%;
}
* html #content {
top:0;
bottom:0;
height:100%;
width:642px;
border-top:154px solid #fff;
border-bottom:50px solid #fff;
}
#head {
position:absolute;
margin-left:-321px;
left:50%;
top:0;
width:640px;
min-width:640px;
height:150px;
background:#fff;
z-index:5;
border:1px solid #000;
overflow:visible;
}
* html #head {
top:2px; width:642px; height:148px;
}
#foot {
text-align:center;
position:absolute;
margin-left:-321px;
left:50%;
bottom:0;
width:640px;
min-width:640px;
height:50px;
background:#0099FF;
font-size:1em;
z-index:5;
border:1px solid #000;
font-family: verdana, arial, sans-serif;
font-weight:bold;
color:#000;
}
* html #foot {
bottom:2px; width:642px; height:48px;
}
Thu, 2005-12-15 10:42
#1
where's it gone???
What's normal? if your going to ask this sort of question then you really should post up a comparison image of how it should look or better still provide a live link which is preferable.
I see no sign of a background image so surmise that it's foreground in the HTML? if that is the case you really need to show all the code including markup Trying to work out problems with the CSS alone don't always work.
I see a lot of absolute positioning in your rules, bad.
Please post up a comparison image and or the html markup.
Hugo.
Thu, 2005-12-15 10:53
#2
where's it gone???
I have resolved it now as there was no bottom set.
I have read a lot on the use of position: absolute what is the alternative?
Regards,
Lee
Thu, 2005-12-15 12:38
#3
where's it gone???
Hi.
you might want to consider using floats as an alternative.
but I did notice that not only have you not validated you code, but you're not using a doctype. this will inevitably lead to further problems so it'll help you to sort it out.
larmyia
Thu, 2005-12-15 14:51
#4
where's it gone???
If things look correct in IE and bad in FF the first place to look is the doctype. I noticed you don't have one.
Best advice is to stop designing for IE and trying to get it to look right in FF. Design for FF and then hack for IE.
Thu, 2005-12-15 18:47
#5
where's it gone???
In the HTML I have declared a doctype, that is the CSS
Thu, 2005-12-15 19:05
#6
where's it gone???
Niteshift wrote:
In the HTML I have declared a doctype, that is the CSS
er...no you haven't.
your website wrote:
<html> <head> <title>Layout of e-mailout - Layout of e-mailout</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="STYLESHEET" type="text/css" href="styles/styles.css"> </head>
and what do you mean by "that is the css"????
larmyia
Thu, 2005-12-15 21:25
#7
where's it gone???
What is in my post above
Thu, 2005-12-15 21:30
#8
where's it gone???
I'm sorry but you're not making any sense. would you care to explain and they maybe someone can help...
Thu, 2005-12-15 21:57
#9
where's it gone???
Niteshift wrote:
What is in my post above
I think he means that by using css he has declared a doctype automatically. Errrr. No.
Check out the link in my sig.
Trevor
Thu, 2005-12-15 22:49
#10
where's it gone???
:roll:
Niteshift you're not being clear, and if ClevaTreva is correct then you really need to read up more on doctypes.
Thu, 2005-12-15 23:00
#11
where's it gone???
Well, basically, show the page and not a screenshot or we can not help.
Thu, 2005-12-15 23:30
#12
where's it gone???
Like what I did say at the start :roll:
Thu, 2005-12-15 23:56
#13
where's it gone???
Hugo wrote:
Do you think if more people say it maybe it will happen? Like what I did say at the start :roll:
Fri, 2005-12-16 11:50
#14
where's it gone???
Sorry guys for the confusion, I've resolved it!! You are dealing with a very stressed Man at the moment so you will have to excuse the vagueness of everything.
What I meant was that the code I have posted is the external CSS code and not the HTML which has the following doctype:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Fri, 2005-12-16 15:59
#15
where's it gone???
Ah stress, our constant companion and friend 
BTW you ought to have:
xml:lang="en" lang="en"
at the end of your name space declaration.
Hugo.