15 replies [Last post]
Niteshift
Offline
Regular
Last seen: 14 years 7 weeks ago
Joined: 2005-12-06
Posts: 19
Points: 0

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;
}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Niteshift
Offline
Regular
Last seen: 14 years 7 weeks ago
Joined: 2005-12-06
Posts: 19
Points: 0

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

larmyia
Offline
Elder
London
Last seen: 12 years 19 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

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

Anonymous
Anonymous's picture
Guru

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.

Niteshift
Offline
Regular
Last seen: 14 years 7 weeks ago
Joined: 2005-12-06
Posts: 19
Points: 0

where's it gone???

In the HTML I have declared a doctype, that is the CSS

larmyia
Offline
Elder
London
Last seen: 12 years 19 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

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

Niteshift
Offline
Regular
Last seen: 14 years 7 weeks ago
Joined: 2005-12-06
Posts: 19
Points: 0

where's it gone???

What is in my post above

larmyia
Offline
Elder
London
Last seen: 12 years 19 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

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...

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 2 years 12 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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

larmyia
Offline
Elder
London
Last seen: 12 years 19 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

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.

Anonymous
Anonymous's picture
Guru

where's it gone???

Well, basically, show the page and not a screenshot or we can not help.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

where's it gone???

Like what I did say at the start :roll:

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Anonymous
Anonymous's picture
Guru

where's it gone???

Hugo wrote:
Like what I did say at the start :roll:
Do you think if more people say it maybe it will happen? Wink

Niteshift
Offline
Regular
Last seen: 14 years 7 weeks ago
Joined: 2005-12-06
Posts: 19
Points: 0

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">

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

where's it gone???

Ah stress, our constant companion and friend Smile

BTW you ought to have:
xml:lang="en" lang="en"
at the end of your name space declaration.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me