Border disappears when you hover mouse

[just_bri]

Hello. =)

I'm trying to create some fake "tabs":
Example #2 (how it looks on my actual layout)
The external CSS file

This layout looks fine in Internet Explorer. But in Firefox, when you hover on the tabs, the top border disappears. And NONE of the tabs are directly on top of the "table".

Please help. =(

[Coyotelab]

You need to take care of validation errors on your CSS first and move on from there.

[CSSNINJA]

.tabz {
	padding: 0px;
}

.tabz a {
	font: italic bold 14px #000 Verdana;
	color: #000000; text-decoration: none;
	padding:0 5px 0 5px;
	border-top: 2px solid #000;
	border-left: 2px solid #000;
	border-right: 2px solid #000;
	border-bottom: none;
}
.tabz a:hover {
	color: #008000;
	background: #FFF;
	padding:0 5px 0 5px;
}

[just_bri]

Thank you both for responding, and sorry I couldn't respond sooner!:

@Coyotelab: Thanks for the site; I didn't even think about validating my CSS. (I thought everything was already fine, hehe). I'll definitely use that site in the future. <3

@CSSNinja: Thank you for cleaning the code! =D
(Although that didn't solve the spacing problem. But I figured out what was wrong: I needed to group the "tabs" and the "table" inside of a DIV tag).

By the way, why do I have to type "#000000" as "#000"? I've noticed other people do this as well, but it just seems...strange.

[CSSNINJA]

By the way, why do I have to type "#000000" as "#000"? I've noticed other people do this as well, but it just seems...strange.

Any time you have a hexidecimal value that are all the same number, you only need to repeat 3 times.

[just_bri]

Is that a standard/official rule? Just curious. (If it is, then I'll really have to remember to do that, 'cuz I don't want my site to have any errors.)

Also, do you only do that when one letter/number repeats? If one of my colors was "#A0A0A0", could I just type "#A0"?

[Coyotelab]

he mentioned "same number"

[OctoberWind]

The value of "Red" "Green" and "Blue" need to be the same letter/number in order to shorthand.

#ffffff is the same as #fff
#336699 is the same as #369 ("Red" = 33 = 3, "Green" = 66 = 6, "Blue" = 99 = 9)

#c0c0c0 can not be shortened, because the value of "Red" (or "Green" or "Blue" for that matter) is c0, and cant be expressed any other way.

Likeway, #c0ffff can not be shortened to #c0ff, because HTML needs either a 3-digit or 6-digit hex code for colors.

It's not a "rule" per se that #ffffff must be written #fff, its just a lot faster and easier to shorthand what you can. I won't mention file weight, because shorthand hex colors won't save you that much space...

[just_bri]

Thanks for explaining that, OctoberWind. I'll definitely start doing that from now on. =)

[just_bri]

Sorry to resurrect an old thread (truth is, I've been busy with school and had to put this project on hold), but I'm having another problem with my fake tabs.

Basically, I want to make the tabs (and the iFrame they're attached to) have a liquid design: whenever you resize the page, everything will grow/shrink along with it, and they'll stay together.

I'm pretty sure I need to use "width=%" and "height="%" (and probably "position: absolute", or some other positioning code) -- and it might even work better if I use images instead of text (since images can be resized with %) -- but I can't quite make it work. =\

I made some example pages that you can access below:
Tabs Problem #1
Tabs Problem #2
The CSS File

...Please help! =(

[FourCourtJester]

<div style="float: left; border: 2px solid #000000; width: 60%">

The width is 60% of the current browser width, so thats why it scales. Try setting it to a pixel value, or set the min-height attribute to a pixel value.

[just_bri]

? - what's min-height? Haven't heard of that before. =O

Also, I want it to resize based on the size of the browser. Wouldn't % be the best way to do this, since pixels are a specific size?

[FourCourtJester]

Err, not min-height, min-width.

<div style="float: left; border: 2px solid #000000; width: 60%; min-width: 400px;">

%-scaling will definitely scale to the browser dimensions. and will continually browse on re-sizes. Try the min-width, see what happens.

[just_bri]

EDIT: Please ignore what was previously posted here. My friend's advice dealt with a separate issue I had.

[just_bri]

Again, my issue was NOT resolved. I'll try that min-width command, and see if it works.