X-Cart forums - CSS Issue in head.tpl

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - CSS Issue in head.tpl (https://forum.x-cart.com/showthread.php?t=30584)

CSS Issue in head.tpl

I am trying to eliminate gif boxes and create css link boxes but with some links it shows the box, with some not.

I added this part of css to create boxes around text on the head.tpl (www.harrismichaeljewelry.com/test/)

Code:

.maddlinks a:link, .addlinks a:hover, .addlinks a:visited, .addlinks a:active {

border: solid 2px #DDE1E8; width:190px;height: 30px;padding: 2 2 2 2; margin-top: 3px;margin-bottom: 3px;margin-left: 2px;margin-right: 2px; background: 66778F; font-size:12px; color:#FFFFFF; font-weight: bold; text-decoration: none;}

Works on <a href="#">LINK 03 </a> & <a href="www.harrismichaeljewelry.com">HMJ </a> but NOT on
<a href="/Luxury-Gifts-c-771.html">GIFTS </a> or <a href="http://www.harrismichaeljewelry.com/Luxury-Gifts-c-771.html">GIFTS</a>

On the last two it just creates a link without the box┘

Code:

 <td class="maddlinks" height="25" align="center" valign="middle"><div align="right"><a href="http://www.harrismichaeljewelry.com/Luxury-Gifts-c-771.html">GIFTS </a> <a href="/Luxury-Gifts-c-771.html">GIFTS </a> <a href="#">LINK 03 </a>  <a href="www.harrismichaeljewelry.com">HMJ </a>  </div></td>

Any suggestions why this is happening and what I can do about this?

Thanks

MC

Re: CSS Issue in head.tpl

Moving to Template Editing.

Re: CSS Issue in head.tpl

in firefox on a mac, all the buttons appear with the white border. Have you solved this then?

If not, you might want to change the css you posted to this:

Code:

 .maddlinks a:link, .addlinks a:hover, .addlinks a:visited, .addlinks a:active {

border:2px solid #DDE1E8;

width:190px;

height:30px;

padding:2px 2px 2px 2px;

margin:3px 2px; 

background:#66778F; 

font-size:12px; 

color:#FFFFFF; 

font-weight:bold; 

text-decoration:none;

}

background didn't have a # before the hex number.
padding cannot accept values without units, i.e.

Code:

padding:2 2 2 2;

is not acceptable,

Code:

padding:2px 3px 4px 5px;

Code:

padding:1em 0 4em 5%;

is fine.

Also, you have a height of 25px set on the .maddlinks td as well as a height of 30px on .maddlinks a
Unless it's your intention, in general you should try to avoid conflicting rules such as this, as they may confuse certain browsers.

regards,
n00bert