11 replies [Last post]
flashbot
flashbot's picture
Offline
Regular
Last seen: 14 years 26 weeks ago
Joined: 2007-08-01
Posts: 22
Points: 0

Hi,

I can't work this one out. I'm working on this site (http://demos.ttcampus2.com/rv/site/), which has a css menu.

I must surely be forgetting to declare something in my css file, 'cause it's adding an extra area of margin-top for no reason.

Can anyone suggest an answer or link me to a previously posted thread?

Thanks,

Sebastian.

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 11 years 20 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Padding can also make boxes

Padding can also make boxes larger:

#container {
padding-top:15px;

flashbot
flashbot's picture
Offline
Regular
Last seen: 14 years 26 weeks ago
Joined: 2007-08-01
Posts: 22
Points: 0

True, but that doesn't seem

True, but that doesn't seem to be the problem.

Took out the padding-top:15px and still looks the same way.

In Firefox the nav bar seems to be displaced vertically. In IE7 it looks ALMOST perfect, except for that 2px spacing in between the header + nav bar.

Any ideas... hit reply!

thanks!

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 11 years 20 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

I copied your code, took the

I copied your code, took the padding-top out, and it shifted up for me... So, unless you have another style sheet conflicting, I don't know what to say. It does not appear as though you have removed the padding-top on the online version, though.

I'm at school now with no access to Firefox, but I'll look at the nav positioning error when I get home.

flashbot
flashbot's picture
Offline
Regular
Last seen: 14 years 26 weeks ago
Joined: 2007-08-01
Posts: 22
Points: 0

Weird ... very weird

Weird ... very weird ..

I've taken the padding-top out, tested in FF, IE6 & IE7. Still looks the same way. Check out the css source code. I have taken it out.

Since you're at school studying hard + browsing css forums whilst the teacher looks away Wink , I have attached a couple of screenshots, so that you can see what I'm seeing.

Cheers and thanks for replying, I feel we're gonna hit the spot soon.

AttachmentSize
FF.jpg 57.71 KB
IE6&IE7.jpg 62.56 KB
Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 11 years 20 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Apologies, I was not looking

Apologies, I was not looking at the same area as you - you may want to put that 15px back, so that your content shifts down the page as you originally had it. I will look at the code shortly and see why that space would be there.

Edit: have you tried assigning negative margins on the affected elements?

flashbot
flashbot's picture
Offline
Regular
Last seen: 14 years 26 weeks ago
Joined: 2007-08-01
Posts: 22
Points: 0

Well ... yeah, I mean .. I

Well ... yeah, I mean .. I want to leave that as my last resource. I don't like patching things.

I know there's a "browser compatibility law" I'm breaking, either by using wrong css markup or maybe ignoring certain css rules which are crucial.

I don't really want to start playing with the negative margin values, as it will look ok in FF, but not in IE and so forth.

I prefer to wait and see if you (or anyone else) can come up with the definite answer.

Cheers Aequitas!

Flashbot. :scared:

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 13 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Try ul {margin:0;padding:0;}

Try
ul {margin:0;padding:0;}

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 11 years 20 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

I know it would be a

I know it would be a "patch," but you can style for Firefox and IE independently of one another, so an IE style won't affect a Firefox style.

As I said, at school I can't really say what is causing the issues, but I'll look when I get home in three hours.

flashbot
flashbot's picture
Offline
Regular
Last seen: 14 years 26 weeks ago
Joined: 2007-08-01
Posts: 22
Points: 0

YEY!

Hi Dana!

WOW! 1 down, IE to go :mad:

Thanks!

flashbot

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

Set all your inline images

Set all your inline images in the header region to either display:block or vertical-align:bottom and ensure that you control all margins on any block level elements.

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

flashbot
flashbot's picture
Offline
Regular
Last seen: 14 years 26 weeks ago
Joined: 2007-08-01
Posts: 22
Points: 0

Thanks Hugo, that certainly

Thanks Hugo, that certainly did the trick...

Cheers MODERATOR oh' mighty!

just a regular...