www.webdeveloper.com
Results 1 to 15 of 15

Thread: Border disappears when you hover mouse

  1. #1
    Join Date
    Jan 2007
    Posts
    63

    Question Border disappears when you hover mouse

    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. =(

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

  3. #3
    Join Date
    Aug 2008
    Location
    Seattle
    Posts
    29
    Code:
    .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;
    }
    Last edited by CSSNINJA; 08-19-2008 at 01:28 AM.

  4. #4
    Join Date
    Jan 2007
    Posts
    63
    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.

  5. #5
    Join Date
    Aug 2008
    Location
    Seattle
    Posts
    29
    Quote Originally Posted by just_bri
    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.

  6. #6
    Join Date
    Jan 2007
    Posts
    63
    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"?

  7. #7
    he mentioned "same number"

  8. #8
    Join Date
    Jul 2007
    Location
    Wisconsin
    Posts
    468
    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...

  9. #9
    Join Date
    Jan 2007
    Posts
    63
    Thanks for explaining that, OctoberWind. I'll definitely start doing that from now on. =)

  10. #10
    Join Date
    Jan 2007
    Posts
    63

    Still having problems...

    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! =(

  11. #11
    Join Date
    Sep 2008
    Location
    Canada
    Posts
    246
    <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.

  12. #12
    Join Date
    Jan 2007
    Posts
    63
    ? - 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?

  13. #13
    Join Date
    Sep 2008
    Location
    Canada
    Posts
    246
    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.

  14. #14
    Join Date
    Jan 2007
    Posts
    63
    EDIT: Please ignore what was previously posted here. My friend's advice dealt with a separate issue I had.
    Last edited by just_bri; 09-19-2008 at 05:43 PM.

  15. #15
    Join Date
    Jan 2007
    Posts
    63
    Again, my issue was NOT resolved. I'll try that min-width command, and see if it works.
    Last edited by just_bri; 09-19-2008 at 05:54 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles