CSS tabs problem

[dalyea]

Hi CSS experts,

I'm still learning the finer points of CSS and have a problem to be
solved.
This is my new intended site front page:

http://www.qbike.com/i.shtml

and I think (from what I can see) that it works right in IE. But in
Firefox,
it doesn't.

1. The CSS tabs are "under" the area they should be in, in terms of
how
the bg image displays
2. The search bar which should be under the CSS tabs stays on the same
line, as if the block isn't taking effect - float problem?

Any suggestions on how to proceed would be great! I'm not even
looking
at Opera or Mac yet, just want to figure our IE and Firefox first.

Thanks!

 

[dalyea]

Oh yeah, I forgot to say, to make things easier to understand,
the relevant CSS is all in /css/top.css. The other 2 CSS files
don't matter in relation to the top section.

David

 

[dorayme]

Hi CSS experts,

I'm still learning the finer points of CSS and have a problem to be
solved.
This is my new intended site front page:

http://www.qbike.com/i.shtml

and I think (from what I can see) that it works right in IE. But in
Firefox,
it doesn't.

1. The CSS tabs are "under" the area they should be in, in terms of
how
the bg image displays
2. The search bar which should be under the CSS tabs stays on the same
line, as if the block isn't taking effect - float problem?

Any suggestions on how to proceed would be great! I'm not even
looking
at Opera or Mac yet, just want to figure our IE and Firefox first.

The problem as described does not show up on my Firefox.

 

[mbstevens]

http://www.qbike.com/i.shtml

1. The CSS tabs are "under" the area they should be in, in terms of
how the bg image displays

You might be able to see better if you got rid of the divitis
(excessive and useless nested divs).

The ul does not need a surrounding div, much less two. Just style the ul.

2. The search bar which should be under the CSS tabs stays on the same
line, as if the block isn't taking effect - float problem?

To relate the form to the ul in a particular way,
surround both with a single _common_ div.

The display:inline style for the form is probably not what you want.

 

[dalyea]

I must have div-itis. I try to fix things so that I only require 1
div, but I can't get it right.
Example: the pods I right. I need one pod for the body to define the
background at just
the right width, then I use another div to set the padding INSIDE the
body defined by that
div. I tried doing both at once but can't get it right.

But anyhow - back to the problem at hand. I tried to reduce the divs,
but can't. I can't
in mind see any div I defined as useless, though one or may be. In my
mind, I need each
one and can't combine them - that's where I need expert CSS help!

I see the point about having display:inline as a global for all
forms. That I can remove
and apply form by form as needed. So I tried just that, but that
didn't solve the problem
I mentioned in 2.

I could combine the tabs and the search bar in one div, but
unfortunately there are tabs
variations and search bar variations that I need to handle in separate
virtual includes.
So I'd rather keep them separate. Well, have to actually. But that
shouldn't present a
problem in terms of div tags if done right, since my virtual includes
just contain the HTML
and CSS related to just that content.

Anyhow - if anyone can get my i.shtml page to look right in Firefox,
that would be cool.
I just modified i.shtml so that it contains the relevant CSS right in
the file for the top part
of the page and the CSS tab navigation. I reckon if the search form
is part of the problem,
then that's deeper - that CSS is in /css/main.css.

Thanks in advance.

David

 

[Ben C]

Hi CSS experts,

I'm still learning the finer points of CSS and have a problem to be
solved. This is my new intended site front page:

http://www.qbike.com/i.shtml

and I think (from what I can see) that it works right in IE. But in
Firefox, it doesn't.

1. The CSS tabs are "under" the area they should be in, in terms of
how the bg image displays

You need to explain this better for people who don't have IE to compare
against.

2. The search bar which should be under the CSS tabs stays on the same
line, as if the block isn't taking effect - float problem?

Set clear: both on the table that contains the search bar.

 

[mbstevens]

I must have div-itis. I try to fix things so that I only require 1
div, but I can't get it right.

Like many commercial sites, this one has too much crammed into the page.
Stop wanting that.

Still, there may be a way to do it. Visit a lot of commercial
sites with search boxes, and look at how they relate the boxes to other
content.

 

[dalyea]

You need to explain this better for people who don't have IE to compare
against.


Set clear: both on the table that contains the search bar.

Excellent! clear:both worked like a charm. Then I added in the bg
image height
explicitly, wrapped the entire page in a div align center, and voila,
it works! Well...
so far on the two browsers I'm testing with. Thanks for the find,
that was great!

David