9 replies [Last post]
miss_mushroom
Offline
newbie
Last seen: 15 years 31 weeks ago
Joined: 2006-06-18
Posts: 6
Points: 0

Hi,

This is my first attempt in creating a CSS based website. I have a couple of problems but my utmost concern is regarding the 3rd column layout. I used absolute positioning mainly because my previous attempt in using float : right (taken from http://css.maxdesign.com.au/floatutorial/tutorial0916.htm) resulted in the column to float bottom right and not top right (just next to the 2nd column). Hence, I used the absolute positioning but it looks different in various browsers and now I want to ditch it but can’t get around to fixing my initial float problem.

My Website: www.naturalmalaysia.com
CSS-validated-code: www.naturalmalaysia.com/css-validated-code.html
CSS-not-validated-code: www.naturalmalaysia.com/css-not-validated-code.html

The following is a list of my main worries:
1. Right column not positioned properly – as a result of using absolute positioning. Using float: right doesn’t solve the problem rather it positions the column to the bottom right of the main content.

2. Top navigation bar margins or padding – I cant get around this issue. I have already added margin:0 to all of my top navigation bar but it seems to fly out and land on another element below it. It looks the same in both IE 6 and Netscape 7.2 so I am sure its not an issue of browser compatibility but my code that needs fixing.

3. Wrong margins in left column navigation– In Netscape 7.2 the first and second boxes of my navigation links gets literally squeezed out of its box and to the right. In IE 6 some of my boxes have unwanted bottom margins added to them (I have put margin:0 but this doesn’t seem to help).

Could someone kindly pinpoint me in the right direction especially regarding the right column positioning? Thank you.

Lastly, I have only tested my site in IE 6.0 and Netscape 7.2. As such I can only imagine how awful it must look like in other browsers.

Regards,
MissMushroom *turning 21 soon*

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

3-column layout problem and unwanted margins arnd navigation

Don't use position:absolute for the right hand column. It brings about a whole host of problems of its own and is likely to result in a brittle layout that causes you more headaches than its worth.

For your problem 1. It sounds like one of two issues (its sunday morning and I am being too lazy to look at your code Smile)

- floated content must come before adjaccent unfloated content. Solution: move right hand column before unfloated column.

- your widths add to more than the available space.
Test: radically reduce your column widths and see if they now all appear side by side. If they do, you can now add widths back until you get the max widths that you can use and still have the elements appear all in a row.

/edit --- I peeked Laughing out loud,

- its the first possibility above

- for one of your other issues, don't float the box titles and don't give them a width. Block elements naturally fill the available space (the width of their parent block) which is what you want to happen.

miss_mushroom
Offline
newbie
Last seen: 15 years 31 weeks ago
Joined: 2006-06-18
Posts: 6
Points: 0

Unwanted margins around navigation bar still present

Hi Chris...

Thank you for answering Smile

I have solved 1 of the 3 issues I raised up in my previous post with your help.Laughing out loud

Quote:
floated content must come before adjaccent unfloated content. Solution: move right hand column before unfloated column.

I did exactly that and voila now all my columns are aligned as it should be.

I still can't get around the other issues though. Both involves the navigation bar (one at the top and the other on the left-hand column)

Quote:
for one of your other issues, don't float the box titles and don't give them a width. Block elements naturally fill the available space (the width of their parent block) which is what you want to happen.

I have removed the float and width from the box titles but I am still left with unwanted margins in IE 6.0. I could use negative margins on my left column div i.e.

#leftcol li {
	margin: 0;
}

but doing this only makes it worse in Netscape 7.2 and I am sure it will look even horrific in the other browsers that I haven't tested on. Any ideas to solve this?

Thank you.

Regards,
MissMushroom turning 21

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

3-column layout problem and unwanted margins arnd navigation

Do you have a link to the updated page?

miss_mushroom
Offline
newbie
Last seen: 15 years 31 weeks ago
Joined: 2006-06-18
Posts: 6
Points: 0

3-column layout problem and unwanted margins arnd navigation

Hi Chris...

I am in school right now so I can't upload my page Sad . Will do so as soon as I return back home (approximately 8hrs from now) *sigh*. Thanks for replying.

miss_mushroom
Offline
newbie
Last seen: 15 years 31 weeks ago
Joined: 2006-06-18
Posts: 6
Points: 0

3-column layout problem and unwanted margins arnd navigation

Okay here are the links:

My Site: www.naturalmalaysia.com
CSS-not-validated-code: www.naturalmalaysia.com/css-not-validated.code.html

Thanks.
MissMushroom

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

3-column layout problem and unwanted margins arnd navigation

Can you explain (or show an image) of where your topnav should go.

miss_mushroom
Offline
newbie
Last seen: 15 years 31 weeks ago
Joined: 2006-06-18
Posts: 6
Points: 0

3-column layout problem and unwanted margins arnd navigation

Well my top navigation should look like the following

--------- -------- ---------- --------
| a aa || bbbb| | ccccc | |dddd|
---------------------------------------------------------------------
e
---------------------------------------------------------------------

Of course the lines are connected to each other. a, b, c and d are my top nav, There are actually navigation tabs, hence i have included a base, e. However right now, a, b, c and d is overlapping e.

Thanks again for helping.

missmushroom

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

3-column layout problem and unwanted margins arnd navigation

I still don't get whats wrong with the top nav.

For your #leftcol menu in IE. IE has a "special" mode called "hasLayout" which changes the way it behaves. In many cases its important to get IE into this mode (read all the gory details in the link "On Having Layout" in my signature. In your case, the gaps in the #leftcol menu are caused by the <UL> and <LI> elements not having layout. One of the mechanisms for triggering layout is to give the element a dimension, in your page you should be able to use width:100% - which will be neutral in its effects on all browsers

#leftcol ul, #leftcol li { width: 100%; }

fyi - its needed because the <A> element is display: block.

miss_mushroom
Offline
newbie
Last seen: 15 years 31 weeks ago
Joined: 2006-06-18
Posts: 6
Points: 0

3-column layout problem and unwanted margins arnd navigation

Thank you Chris for your valuable input this past week. I truly appreciate it. What you said about the left column is so true. I have set the #leftcol ul and #leftcol li widths and the unwanted margins dissappeared. Laughing out loud

Thanks again Wink

~MissMushroom (21 soon)