What am I doing wrong? (Css)

py2006 · 05-08-2007 1:23pm #1

Hiya,

I am teaching myself a bit of CSS and I am creating a little site at the moment. It looks okay so far in IE yet if you look at the image on the bottom left in Firefox or Safari it is slightly raised by a few pixels.

http://www.irishwebdevelopment.com/frames.html

Thanks in advance!

Goodshape · 05-08-2007 1:28pm

Probably a margin and/or padding issue. IE treats these differently to everything else.

Huggles · 05-08-2007 1:48pm

Py Have a look at this, its called the box model hack and it is the method used to get around the issues that Goodshape has mentioned

http://tantek.com/CSS/Examples/boxmodelhack.html

Also I reccommend Dan Cedarholms books on CSS, they start with the basics and are quite clearly laid out.

www.simple-bits.com

py2006 · 05-08-2007 2:50pm

Thanks, I will have a look at that!

I fixed it earlier today but I can't remember how I did it!

py2006 · 05-08-2007 7:13pm

Ok, I think it has something to do with the doctype code at the top. I removed it completely and the page worked perfectly in Firefox but was all over the place in IE.

The code I am currently usings is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]" xml:lang="en">

Then I tried different one and it fixed the problem in FireFox but produced the same problem in IE.

Oh the headaches!

louie · 06-08-2007 8:12am

by the looks of it you have so much to learn.
have a look into nested divs and floating (left, right).
that page can be designed with half the code you have already, keeping the important content at the top of the page instead forcing the "footer" and "hand" divs position.

py2006 · 06-08-2007 9:23am

louie wrote:

by the looks of it you have so much to learn.
have a look into nested divs and floating (left, right).
that page can be designed with half the code you have already, keeping the important content at the top of the page instead forcing the "footer" and "hand" divs position.

Thanks for that. I only started learning this stuff a couple days ago!

I tried doing float: right; but it didn't work. Do you have an example of a nested div?

Seth Brundle · 06-08-2007 9:31am

taken from another site...

#parentbox {
position: absolute;
width: 200px;
float: left;
border: solid #ffffff 10px;
background-color: #cc9966;
text-align: center;
}
#nestedbox {
position: relative;
width: 200px;
border: solid #000000 2px;
background-color: #33ccff;
}

<body>

<div id="parentbox">
<div id="nestedbox">Title</div>
<a href="#">link #1</a><br>
<a href="#">link #2</a><br>
<a href="#">link #3</a><br>
</div>

</body>

py2006 · 06-08-2007 9:47am

Ah ok, that looks straight forward enough! Would that sort out my image problem though?

You see originally the main part of the page was supposed to scroll down and the footer and hand image was to stay intact! Hence the name frame.html! I had it working originally but I am not sure what I did to feck it up.

louie · 06-08-2007 10:06am

look into autoscroll css but for that you need to know the height of the user screen making sure the footer sticks to the bottom.

py2006 · 06-08-2007 10:08am

louie wrote:

look into autoscroll css but for that you need to know the height of the user screen making sure the footer sticks to the bottom.

Well I was using the overflow one as I was working from an example. The way I have the footer at the moment seems to stay at the bottom at different resolutions.

py2006 · 06-08-2007 10:22am

I managed to fix the image problem. It was the doctype as I originally thought!

What am I doing wrong? (Css)

Comments