Forum Moderators: not2easy
I reduced my Problem to the following ( i try to make it as short as possible but i am not good in that):
=> i have 2 links (they are part of a tabed design)
if i apply the css class .menuSys to both of the links everything looks fine and how it is expected to do.
BUT:
if i apply the css class .menuSys only to one link and use an exact copy of the class .menuSys on the other (name of the class is .menuSys2 then) the whole design gets smashed and only the first used link (no mather which class used) gets the right design, the other one is then like half around the first link (they have a grey backround).
Do you know such problems? I mean i am realy an Css beginner but i am also a java developper and in my view the name of the class is just the name of the memory address where the informations are located at...
The reason why i want to use two classes (just additional info if you was asking for that:D):
This is just because the links are part of a self made tab (register) design and id like to use another css class on the tab (register) that is active. Since that hasnt worked i reduced the problem to the written points.
Sorry for my not specific 'Css language' but how i said i am just about to learn it, please feel free to ask me anything and i will try to find that informations out.
Thank you all for your time.
Regards
Balsi
I am so sorry, i thought the e-Mail notification is on. Ok, here is the code (all of it, but no worries, its nothing^^)
#top
{
margin: 2%;
}
ul.menuSys
{
float:left;
width:9%;
padding:0;
margin:0;
list-style-type:none;
}
li.menuSys
{
display:inline;
width:50%;
margin:0;
padding:0;
}
a.menuSys
{
text-decoration:none;
color:blue;
background:url(../pics/lihar.gif) no-repeat;
padding: 26%;
margin:0;
font-family: arial;
font-size: 75%;
font-style: normal;
font-variant: normal;
font-weight: bold;
}
a.menuSys2
{
text-decoration:none;
color:blue;
background:url(../pics/lihar.gif) no-repeat;
padding: 26%;
margin:0;
font-family: arial;
font-size: 75%;
font-style: normal;
font-variant: normal;
font-weight: bold;
}
a:hover
{
background: url(../pics/liharHover.gif) no-repeat;
}
And that little jsp code (there is only this code that uses the css)
<div id="top">
<ul class="menuSys">
<li class="menuSys"><a href="#" class="menuSys"/>WSR</li>
<li class="menuSys"><a href="#" class="menuSys"/>BWR</li>
</ul>
</div>
How i said, this code is now acctually doing what it is expected to do. BUT if i apply the class .menuSys2 which is an exact copy of .menuSys to one of the links, the design isn working anymore.
If you see that i make the typical beginner faults, feel free to tell me what i should read before asking again.
Sorry for that long waiting time again and thank you so much for your time.
Regards
Balsi
[edited by: DanA at 6:19 pm (utc) on Jan. 19, 2007]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Tabs</title>
<style type="text/css">
<!--
*{padding:0; margin:0; border:0;}
.menuSys
{
margin:10px;
float:left;
}
.menuSys ul
{
list-style-type:none;
}
.menuSys li
{
display:inline;
}
.menuSys a
{
float:left; /*moved float here */
text-decoration:none;
background:#c99 url(../pics/lihar.gif) no-repeat;
color:blue;
padding:5px;
font: 75% arial, sans-serif;
font-weight: bold;
border:1px solid #999; /* added so I could see where this is */
}
.menuSys a:visited
{
background:#c99 url(../pics/lihar.gif) no-repeat;
color:#fefefe;
}
.menuSys a:hover
{
background: #939;
color:#000;
}
.activetab a:link, .activetab a:visited
{
background:#cfc;
color:#333;
}
.activetab a:hover
{
background: #6c6;
color:#000;
}
-->
</style>
</head><body>
<div class="menuSys">
<ul>
<li><a href="http://www.webmasterworld.com/css/3224685.htm">been there</a></li>
<li><a href="someplace">unvisited tab</a></li>
<li class="activetab"><a href="#">active tab</a></li>
</ul>
</div>
</body></html>
*{padding:0; margin:0; border:0;}
This will set *all* to 0 and then you can set it to what you want for each element after. Depending on the rest of your site this may make a mess in unexpected places (forms etc.). I tend to use that since each browser has it's own idea of what the defaults are. This just sets it to a standard 0 for all.. a clean slate sort of. That taken out, you will have to add padding:0; margin:0; back where you want it in this code.
The biggest problem I could see was that you were using % for margin and padding. Each browser seemed to have a very different idea what it was a percentage of, but all agreed that padding: 26%; for both a.menuSys2 and a.menuSys meant that they overlapped each other. I tried a set padding (5px) and it worked fine.
(Put .menuSys a back to padding 26%; and look at it in IE, Firefox and Opera and you'll see what I mean. Not knowing the rest of the code, maybe percentages work on your page?)
I also changed a.menuSys to .menuSys a etc. for each. Mostly just because that's the way I tend to write them so it's habit. There is a difference between the two, I just don't remember offhand what it is.
I added float to .menuSys since the links inside were set to float so the container must float as well otherwise they fall outside the div (add a border around it and remove the float to see what I mean). I also moved the float to .menuSys a from the li, IE (6 and 7) were showing the links in a different size than Firefox and Opera otherwise.
I rearranged the onpage code as well, just streamlined it a bit.. oh, and of course the images would need added back.. and pardon my color choices ;)
No idea if this will work at all in your page, or even with images. I'm off work with the flu today so I'm bored and decided to give it a shot, so if the entire thing doesn't work at all.. I'm blaming the combo of a fever and a few doses of cold medecine ;)
[edited by: LunaC at 11:16 pm (utc) on Jan. 19, 2007]
Regards
Balsi
