Defeated by.....a horizontal rule!

[wickywills]

Hi everyone!

Apologies for no formal introduction in the "new members forum", but i've got this problem that i just can't seem to figure out!

I recently started building my personal website to show off some of my 3D work, however i've currently been defeated by.....a Horizontal Rule!!

If someone could kindly take a look at [link] (my website in progress), i have placed a horizontal rule in between two of my nested div boxes (my recent work examples), however it is spaced unevenly and doesn't even show up in firefox!!

Would any of you CSS gurus be able to take a look and let me know where i'm going wrong? Its bound to be a simple setting somewhere, but i'm still getting to grips with CSS (and pulling hair out in the process!).

thanks in advance for any help!

EDIT:
just changed the "<hr>" to a div, as per a suggesstion from one of my friends online...but to no avail. all i want is a dotted line to seperate my "recent work" submissions, but CSS doesn't like me today!

James

[ukgeoff]

If you want it where I think you want it, try this css:

Code: Select all

#box-recentsubmissions p {
   border-bottom: 1px dashed #000;
}

This will add a border to the bottom of the <p> tag at top of the relevent <div>.

Add some bottom margin if you want a bit more space between the title and the line.

Also get rid of the frames. They have no place in modern xhtml layouts.

You have no end of sysntax errors. Run your page through th W3C validator.

There is scope for quite a few less <div>'s.

[wickywills]

Originally Posted by ukgeoff

If you want it where I think you want it, try this css:

Code: Select all

#box-recentsubmissions p {

Code: Select all

  border-bottom: 1px dashed #000;
}

This will add a border to the bottom of the <p> tag at top of the relevent <div>.

Add some bottom margin if you want a bit more space between the title and the line.

Also get rid of the frames. They have no place in modern xhtml layouts.

You have no end of sysntax errors. Run your page through th W3C validator.

There is scope for quite a few less <div>'s.

Thanks very much for the info. I can't get rid of the frames as they are put in by "1and1.com" who iFrame my site under my domain with them, if that makes sense. Though i am considering going elsewhere, as i don't rate 1and1 at all. THis is also the reason why I get some rather nasty W3C validation errors when i try to validate it from my 1and1 domain ("no doctype found" for example!!). Though if i validate from my actual webspace address, things are a bit less harsh, and only requires some small changes.

I'm just playing around with adding border-bottoms to a couple of the divs to achieve a dashed divider between "recent submissions", though is there any reason why when i put an <hr/> between the two "recent work" boxes things go out of hand? An HR i thought, would be the 'correct' solution, as if i added a border-bottom to each of the "recent work" boxes, it would also be added to the bottom one on the page, and i only want the "divider effect" to appear in-between the boxes if that makes sense.

again, i very much appreciate your help with this