15 replies [Last post]
d41
d41's picture
Offline
Enthusiast
Last seen: 12 years 2 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

Please view latest post, the problems in the first post have already been solved.

Hi... I have a problem with a CSS layout I am making.EDIT: Please view latest post, the problems in the first post have already been solved.
This layout has a sidebar that is floated to the left. Then the "content" is on the right. On the right side, there is some text, and then a few tabs that lead to sub-pages. The problem is that the tabs are made by floating <a>'s. After I float the tabs, then I need to clear it so that the content in the sub-page doesn't begin after the last tab. So I need to clear the tabs, but when I clear them, it also clears the sidebar on the left, bringing the text down too far. Is there a way that I can only clear the tabs but not the sidebar? I tried clear:left and clear:right, but the tabs and the sidebar are to the left. Here is an image to show what I mean:
Free Image Hosting at <a href=www.ImageShack.us" />
And here is a link to the page: http://d41games.freehostia.com/stuff/AESA/layout2.php

I've tried using absolute positioning for the sidebar, but that doesn't work with my faux columns if the content is shorter than the sidebar, and also does strange things in IE6. I also tried using display:inline; for the tabs but it doesn't really work very well.

Does anyone know how to just clear certain elements? Thanks! Let me know if you need any more info

Please view latest post, the problems in the first post have already been solved.

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

Did you fix this? Looks OK

Did you fix this? Looks OK as far as I can tell.

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

d41
d41's picture
Offline
Enthusiast
Last seen: 12 years 2 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

No, I didn't. When there are

No, I didn't. When there are lots of tabs, and the window gets smaller, the tabs take up multiple lines, and then since I haven't cleared the tabs, the content gets pushed off the screen.

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

Can you post an example of

Can you post an example of the page with the broken behaviour because I just resized it in FF and nothing untoward happens (in IE6 if you make the window small enough, everything below your header disappears)?

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

d41
d41's picture
Offline
Enthusiast
Last seen: 12 years 2 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

Ok I updated it to show the

Ok I updated it to show the problem. Notice how the table begins after the last tab. If you make the window small enough, the entire table goes out of the content area. I've been using min-width to keep this from happening most of the time, but on pages with lots of tabs, it can still happen. I need a better solution that raising min-width -- I want my min-width small enough to be viewable on 800x600

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

Add clear: both to whatever

Add clear: both to whatever follows the tabs (which really should be in a list instead of just free-floating anchors) and then make #content overflow: hidden instead of margin-left. More details on this approach here: http://www.search-this.com/2007/11/12/two-column-layout-with-a-twist/

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

d41
d41's picture
Offline
Enthusiast
Last seen: 12 years 2 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

Thank you! That worked

Thank you! That worked great!

One problem, though. It doesn't seem to work in IE6 and I really have no idea why. Just no content displays. I tried fooling with it for a while and nothing will make it work in IE6. Do you know why?

Also, about the free-floating anchors... I did try it first with <ul>'s and <li>'s, but it doesn't display correctly. When I removed the list, it worked fine. I'll give the list another try after posting this.

EDIT: I updated it and put in a list for the tabs... Resize the window and it will do strange things. (tabs go off the edge, some take up two lines)

d41
d41's picture
Offline
Enthusiast
Last seen: 12 years 2 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

I still need help. Can

I still need help. Can someone please help me with this? I can't get it to work in IE6, it just shows no content. Thanks Smile

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

Appears to be working for me

Appears to be working for me in IE6 :shrug: have you sorted things out?

One thing, I wouldn't use font size keywords, you have quite a large discrepancy between computed font size in FF Vs. IE

Edit/ Ok see now that your link is in the first post, please carry page links down especially when threads get fairly long.

You seem to be understating rules for the tab navigation, IE is never going to be happy with things the way they are. You will need to do something along the lines of adding float left to the LI elements and then take steps to ensure that you are not falling pray to IE bugs as at present. Display inline on any floats with a margin in the same direction as the float direction, hasLayout needs to be triggered fo the UL to contain the floated items, and you will probably need to state height for the #primarynav div, also again importantly you need to get control of yourr font-sizing, you do not want the cross browser discrepancies that you have at the moment.

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

d41
d41's picture
Offline
Enthusiast
Last seen: 12 years 2 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

Sorry I didn't realize

Sorry I didn't realize people would click my signature instead of the link in the topic. Here's the link again
http://d41games.freehostia.com/stuff/AESA/layout2.php

The problem with the tabbed navigation is that it works just fine if I float <a>'s and don't use a list (both in IE and Firefox). When I start using a list instead, it doesn't work even in Firefox, as you can see in that example -- instead of the tab going to the next line, it just breaks the words in the tabs and makes the text outside of the tab. I haven't even tested the tabs in lists in IE yet, because I still can't get them to work in Firefox. I'll probably just leave it out of a list.

IE and Firefox look like about the same font size. I only used one font-size keyword, "larger" in table caption. Everywhere else I used %'s. Is there something else I should be doing?

The only real problem I'm having is that IE6 won't display any of the text since I changed #content margin-left: to overflow: hidden;. Anyone have any ideas why this won't work? I tried removing the 3px IE bug fix, and some of the content shows up but in the wrong place... It's really strange...

Thanks

Edit: #primarynav doesn't have a set height so that when the window gets small, the tabs take up two lines.

Edit: I got lists and tabs working (locally. I haven't uploaded updated CSS yet)

I found the problem with IE is that in the 3px IE error where it says height: 1%; if I change the height it shows that much content
I have no idea how to fix this though. Does anyone know?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 23 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

The "height: 1px;" is there

The "height: 1px;" is there to trigger hasLayout, IE's buggy version of the new block formatting context. Try using {zoom: 1;} instead. It's not a valid property, but it won't cause side effects.

You will need to specify which version(Drunk of IE you're talking about. There are serious bug fixes in v7 that will break v6 hacks that depend on a given bug.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

d41
d41's picture
Offline
Enthusiast
Last seen: 12 years 2 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

Thanks, zoom:1; worked

Thanks, zoom:1; worked great!
And... now I have another problem.
I used negative margins to make the selected link in the sidebar seem like it is "connected" to the content. Now look at this in IE6. The selected link in the sidebar doesn't stretch into the content -- it is a few pixels short. No matter how much I change the negative margins, it doesn't move out any farther.
http://d41games.freehostia.com/stuff/AESA/layout2.php
How could I fix this? I tried moving everything over to the right 5px and then using negative margins to bring the content to the edge, but that doesn't work in IE6 either.

EDIT: IE6 seems to be putting the link in the sidebar under the #contentbackground div. If I set the background in #contentbackground to transparent, it will work. I tried messing with z-index, but it won't show up above it. I even tried relative and absolute positioning to move it over but it still goes under it... can anyone help me with this? (argh I hate IE :curse: )

ps. I got the tabs in the list to work by adding display:inline to the li's.

EDIT: now i have another problem... IE6 and IE7 let the text in the tabs go down to the next line when they are on the edge. Also, IE6 won't make tabs go to the next line unless they are at the edge of the window, not the edge of the content.

Note: The background has some messed up colors that don't flow smoothly together -- this is because I uploaded the current CSS, but not the new images which match the background-color's.

d41
d41's picture
Offline
Enthusiast
Last seen: 12 years 2 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

Sorry, my last post was

Sorry, my last post was kinda confusing... Ignore my last post and just read this one. I will try to re-explain it.
I am currently having two problems, and both are showing up it IE6 and 7. (works fine in Firefox, etc.)

Problem 1:
When a link in the sidebar is selected, I use negative margins to make it look like it is connected to the content. Works fine in everything except IE. It seems to get stuck underneath the content. If I remove the #contentbackground div, then it doesn't get stuck under anything. So it is somehow stuck under #contentbackground. z-index doesn't make it work either. I just can't get it to work! It just needs to move over 3 or 4 more pixels to look right! (IE is so frustrating Sad )
Image Hosted by ImageShack.us

Problem 2:
When the window gets too small to hold all the tabs, it should send them to the next line. But in IE, tabs with spaces just get broken at the space and it makes the tab too tall. I suspect this problem has to do with IE treating height like min-height, but I really don't know how to fix this. Look at the screenshot to see what I mean: the tab that says "Another Link" is taking up two lines and making the tab too tall, when the whole tab should just move to the next line.
Image Hosted by ImageShack.us

You can view the page here: http://d41games.freehostia.com/stuff/AESA/layout2.php

Thanks so much Smile (sorry I'm so stupid... I really can't figure this out.)

d41
d41's picture
Offline
Enthusiast
Last seen: 12 years 2 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

Can anybody help? I need

Can anybody help? I need this fixed soon. Entire explanation of the problem is in my previous post. (it's been 6 days so I think it's ok to bump this -- rules said wait at least 1 day. Should I post another topic since this is sorta a different problem than the one I started with?)

EDIT: I got problem 1 (in the previous post) fixed!!!!!!!! I finally figured out that when I tried using z-index before, I added it to the wrong div! :bigoops: I'd still like to get problem 2 (in the previous post) fixed, but that one isn't as important.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 23 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Take a look at the top

Take a look at the top global nav menu in the sig link. Same issue. Use a &nbsp; to tie the text together.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

d41
d41's picture
Offline
Enthusiast
Last seen: 12 years 2 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

Thank you, that worked

Thank you, that worked great.

But I just noticed another problem in IE6! :curse:
When you get the width of the browser just about where the first tab should move to the next line, all the tabs disappear for about 3px...
Open up the page http://d41games.freehostia.com/stuff/AESA/layout2.php to see (just resize your browser until the first tab is about to go to the next line, then slowly resize it.

Thanks for any help!! :thumbsup: