Search jQuery

jQuery Forum

Tabs and floating sidebar

in Using jQuery • 12 years ago

Hello, I have a page with a left floating sidebar and a main content div into which I am trying to place a JQueryUI Tabs widget. Seems that the widget header extends down to the length of the left floating sidebar. The only way to make this render as expected is levaing the sidebar empty. You can see it here: http://www.palomos.es

Strange thing is: if I remove or set an invalid <!DOCTYPE html> declaration, IE8 renders it ok. Firefox won't render it ok, no matter what. Another sample of the same problem with tabs can be seen here: http://www.traperia.com/noticias_murcia_traperia.php

¿Any ideas about what may be happening? Thanks in advance.

Miguel Ángel

Replies(4)

superfici..

Re: Tabs and floating sidebar

12 years ago

Invalid doctype triggers quirks mode, this leaves all the rendering decisions to the browser.

Basicly your browser saying, hmm ill see what i can do with this.

IE is good at guessing what you would like to see since they have a long history of non-compliantness.

If you want to have it look the same in different browsers don't go there :)

But to try and answer you question:

First example you mix 80px (left and right both 40px) padding with %width (20% + 74% = 94%) which means you'll be getting in trouble with the width when the browser is less than 1333 pixels.

I haven't taken tho 20px margin on the content into account here but you get the idea.

In the second example you didn't set a height in the CSS, if you set it to 30px or something like that it works.

miguelang..

Re: Tabs and floating sidebar

12 years ago

Thanks for your answer. I thought IE was getting into quirks mode because of the invalid doctype. I agree that's not the way to go. That's why I want to know how do it right.

Anyway, I think you may have seen the page after I played a little with the CSS in order to achieve what I wanted. Originally, right div (maincontent) was not "floated" and size was not specified, only a 24% left margin to leave room for the sidebar. I've put it back to the original status, so you can see it again, if you want.

In this version, you can clearly see the problem. Widths do not explain the reason why the header of the tabs widget, having two top level divs, and being nested into one of them, extends down to exactly the height of the left div, which is in an upper nesting level. I have 1680x1050 resolution set on my development computer. Makes no sense to me. May tabs header definition be overriding the containing div properties in some way?

BTW, I think someone could move this question to the Using JQueryUI forum, where it belongs better.

superfici..

Re: Tabs and floating sidebar

12 years ago

I Probably wasn't very clear with that last sentence in my post.

I'll try to explain it better.

In the second example in the <div id="tabs"> the <ul> has no height.

If you specify a height (about 30px or so) it will work i think.

miguelang..

Re: Tabs and floating sidebar

12 years ago

Thanks again! You put me on the right track with your answer. Setting a fixed height to the <ul> tag prevents the browser from rendering the wrong height. The only problem is, I think I will have to set the height for every tab I use. I wish tabs were not affected by the rest of elements of the page (at least not this much).

Thanks for your time and knowledge.

Miguel Ángel

Top Reply

Response title

Attachments

jQuery Forum

Tabs and floating sidebar

Replies(4)

Re: Tabs and floating sidebar

Re: Tabs and floating sidebar

Re: Tabs and floating sidebar

Re: Tabs and floating sidebar

Statistics

Tags

Actions