13 replies [Last post]
fambi
Offline
Enthusiast
Last seen: 13 years 35 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

Hi all!

I am currently redeveloping the css layout of our site to resolve this problem which is caused by too may layers.

This is what i've come up with so far which is fantastic and solves the problems.

However, i am trying to make the menu look like it does on our current site. This is done using display:block, but when i include that it causes the float:left of the left menu to fail as shown here.

Can someone please tell me what i should do to keep the nice type of menu that we already have and still get away with this layout.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

2-col Layout Content First

You aren't controlling the padding on #menu. By default browsers indent ul and ol elements a small amount. Some use margin-left, some (incl. FF) use padding-left.

ul#menu { padding: 0; }

fambi
Offline
Enthusiast
Last seen: 13 years 35 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

2-col Layout Content First

Thanks for the suggestion, but i tried it and it still doesn't seem to work!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

2-col Layout Content First

You need to explain what you are after a bit more, including which browser shows the problem. The one thing that stood out when I looked at your original (in FF) was the menu items shifted right and overlapping the main content area. That was caused by the default padding-left + width:100%. Looking at the page now, that's fixed, I have no idea what it you don't like with the current page.

fambi
Offline
Enthusiast
Last seen: 13 years 35 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

2-col Layout Content First

If you look at the menu on the sending sms page of our website, the display: block; has allowed me to style each menu item as a whole - so if you hover over any part of a grey menu item it becomes white (for example).

However, this same display: block; causes the float:left of #menu to fail in IE6 and the left menu ends up on the bottom left of the content container.

I hope that makes things clearer and apologise for the previous lack of clarity. I have noticed that it looks find in FF.

fambi
Offline
Enthusiast
Last seen: 13 years 35 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

2-col Layout Content First

OK! I am currently reading http://www.w3.org/TR/REC-CSS2/visuren.html#q1 which is helping me to understand what is going wrong (whilst blowing my brains to pieces).

fambi
Offline
Enthusiast
Last seen: 13 years 35 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

2-col Layout Content First

OK. Basically, what was going wrong was the menu elements had a border-right:1px and so the width (200px) was not enough to contain the menu and so the float was getting pushed down to accomodate 201px.

Sorry to trouble y'all.

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

2-col Layout Content First

Only at a quick glance but I would have thought that the border on this rule set was a problem:

ul#menu a

Change width 100% for height.

It is important to clearly state the browsers the problem occurs in I couldn't se a problem in either FF or IE, but maybe your working on it.

Hugo.

X-posted with above, minutes too late :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

fambi
Offline
Enthusiast
Last seen: 13 years 35 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

2-col Layout Content First

OK. Everything is fixed except one thing.

I've used the faux column trick for the line that goes along the right side of the menu.

However, with FF and NS the line lines up with the menu but not with IE.

If i modify it for IE it doesn't line up when using FF or NS.

Any ideas?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 14 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

2-col Layout Content First

If it's because the width of something is behaving differently in IE, you could always use * html #yourelement { width: xx; } to give IE a slightly different width.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

fambi
Offline
Enthusiast
Last seen: 13 years 35 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

2-col Layout Content First

Quote:
You could always use * html #yourelement { width: xx; }

Forgive my CSS ignorance, but what does that do?[

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 14 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

2-col Layout Content First

It's a hack to feed rules to IE only.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

fambi
Offline
Enthusiast
Last seen: 13 years 35 weeks ago
Joined: 2004-08-26
Posts: 269
Points: -1

2-col Layout Content First

Tyssen wrote:
It's a hack to feed rules to IE only.

Oh! That's nice.

1) Are there any bad side effects?

2) Is there any particular place in my stylesheet that it should be kept?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 14 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

2-col Layout Content First

1. None that I'm aware of. Maybe others would care to contribute if they do.
2. It should ideally go in your stylesheet near the rule that it is a hack for, e.g.:

#yourelement { width: xx; }
* html #yourelement { width: xx; }

just so you know what it's referencing.
The other way to do it would be to create a separate stylesheet for IE and use IE conditional comments to add it to your page.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference