Hi all,

Back again - sorry ~

I really could use some help with this website: http://nageela.einfal.com/

All seems to view ok in Firebox and such, but not in IE when viewing in compatibility view.

The First time campers link/div is pushed hard to the right and should be sitting below the navigation.

The bulletin board in the sidebar is cut off half way down and the link posted on the footers notepad isn't aligned properly.

I've been trying to fix things by looking up how to's via Google and such, but to no avail. Also, any validation errors seem to be due to a bold tag being used in the time script, so I'm assuming that wouldn't have anything to do with it.

The sideboard is using a negative value because the client would like the board overlapping the footer on the main page, not sure of how else to do this ... this is a design that's been converted into a wordpress theme by the way.

Any help would be greatly appreciated ... thank you!


3 answers

Guffa 316
This was chosen as the best answer

You have a div element inside the a element.

A block element can contain block elements and inline elements, but an inline element (like a) can only contain inline elements.

If you want the link to work like a block element, use display:block; instead of putting a block element inside it.

If you need a block element inside a link, use an inline element (like span) and apply display:block; both to the a element and the element inside it.

Ok, that rules out the invalid tags.

You have set absolute positioning on the div, but you have set margin-left instead of left. That means that the absolute position is not complete, and different browsers tries different things to fill in the gaps. I don't know exactly why, but IE7 places the element at the top of the parent (that part makes sense as you have top:0;) and way out to the right.

If you change margin-left to left the div ends up where you want it.

Answered almost 8 years ago by Guffa
  • FYI, HTML5 allows <a> to contain block elements. Olly Hodgson almost 8 years ago
  • @Olly: Interresting, but it will be quite a while before it can be widely used, as all browsers that doesn't specifically support HTML 5 will choke on block elements inside inline elements. Guffa over 7 years ago

Thanks Guffa, but it didn't work for me ... wondering if I've just too much going on in this stylesheet. :( Any other suggestions regarding the board being cut off?


Answered almost 8 years ago by Jennifer
  • Don't mean to be a grumpy old geek, but this isn't a forum interaction-wise. It's an questions-answer site. You ask a question, you get answers. And then if you have comments, you use the "Add a comment" button. Not adding answers to the primary question, as you are doing now. Thanks! :) Jens Hedqvist almost 8 years ago
  • I added an answer in my previous answer, perhaps you missed that... Guffa almost 8 years ago

Stay with it, you'll get it and it's a beautiful design already. Here's something the CSS Validator pointed out that is, unlike most of it's fluff, directly related to that class.

In .newcampers you have a cursor:hand; but hand is not a valid cursor value. Seems silly that it could cause your problem but sometimes strange things make all the difference.

Answered almost 8 years ago by Jim Sewell
  • Yes, cursor:hand; is an IE specific style, it should be cursor:pointer; to follow the standard. That's not causing the problem, though. Guffa almost 8 years ago