Position Prob

socoolbrewster · June 16th, 2006, 08:06 AM

Hi

I have created a TAB based web page using an unordered list. Everything works fine, apart from when viewed in FireFox 1.5 where
the TABS all shift to the left. Not sure if a problem with code? or
a bug in the browser itself?

Screen grab of problem:

http://www.mediamole.net/screen3.gif

CSS used to create TABS:

Code:

ul { margin:0; padding:0; list-style: none; width:800px; float:left; }

ul li { float:left; background: url(images/tab-right.gif) no-repeat top right; white-space:nowrap; }

li a { display:block; padding: 0 0.4em; 
    background: url(images/tab-left.gif) no-repeat top left;
    text-decoration:none;
    color:#666; float:left; font-size:0.66em; line-height:2.5em; 
    }

ul a:hover { color:#f60; text-decoration:underline; }

The page can be viewed here:

http://www.mediamole.net/vivanco/master2/index2.html

Not sure why it's doing this? any ideas?

Gaz

socoolbrewster · June 16th, 2006, 11:18 AM

Also when increasing the FONT size in FireFox the top and bottom search bar break causing the text to overflow onto another DIV and a white space to appear below the input box of the form. Is there a way I can resolve this?

Gaz

richard.york · June 22nd, 2006, 05:07 PM

As to your second question, setting a height with an 'em' unit should fix your overflow problem.

First question, do you mean your other left? I see the tabs going to the right of the logo and they appear to want to be positioned below the logo. Is that what you're going for? If that is the case, remove "float: left;" from the rule for the[list] element.

HTH!

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html

richard.york · June 22nd, 2006, 05:09 PM

I'm guessing you also don't need "float: left;" specified on the <a> element. Just "float: left;" on the <li> element will do.

The tabs will also flow much nicer if you combine them into a single[list] container. Presently they become ill-distributed when adjustments in resolution or font size are made.

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html

socoolbrewster · June 24th, 2006, 05:48 PM

Hi Richard

Was off to bad start there! I did mean left, not right lol. Thanks for all your help.

Not sure why, but for some reason I didn't think I could use EM to set heights of DIVs.

Does this mean, I don't have to use the code below anymore? to resolve DIV overflow / height issues?

.fixclear:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

* html .fixclear { height:1%;}
.fixclear { display:block; }

Gaz

richard.york · June 24th, 2006, 08:58 PM

No worries! I have those days too. :-)

Not sure, what happens when you take it away? Although you might retain the Holly hack (height: 1%), since you probably were fixing some IE bug with that, but I'd keep it in as:

.fixclear {
zoom: 1;
}

Since IE 7 fixed the star html hack, and the overflow: visible; issue (height: 1%, really is height 1% in IE7). zoom: 1; still invokes layout in IE7, and other browsers ignore it.

Why are you tacking on the clear: both; to an :after pseudo-element? Why not just put that on the .fixclear itself?

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html

socoolbrewster · July 8th, 2006, 11:16 AM

Hi Richard

Thanks once again for all your help. I think at the moment I keep buulding onto what I have, and havent got round to removing unwanted code :-(

On the height issue, I still have a problem, on the sites Home Page I have DIV contained in a table that act as containers for an image and text. When viewed in IE it's fine, but when viewed in Firefox my heights are all over the place. Do I need another hack?

The site is at testing phase, and can be viewed at www.testmole.co.uk

Gaz