0

Hello, I have a few links that I have given a relative position. They have the widths set to 200px, however they do not follow this at all and only have the width wrap around text. When they had the position of float, they followed the width rule of 200px. I have no idea why they are not following the width rule, here is the CSS

ul a{
  background:rgba(0,0,0,.4);
  font-size: 15px;
  position:relative;
  height:50px;
  left:0px;
  color:#FFFFFF;
  width:200px;
  padding:2px;
  margin:0px;
  padding-right:15px;
  padding-left:20px;
  margin-left:-40px;
  font-family:"Arial Black", Gadget, sans-serif;
  text-decoration: none;
  text-shadow: 3px 3px 3px #333;
}

Thanks for looking!

This is the HTML

<ul>
    <li><a href="#" id="toggle1" class="slide_links">Contact Us</a></li>
    <li><a href="contact.asp" id="toggle2" class="slide_links">Parts Inventory</a></li>
    <li><a href="about.asp" id="toggle3" class="slide_links">Boats For Sale</a></li>
    <li><a href="about.asp" id="toggle4" class="slide_links">Marine Services</a></li>
    </ul>
2
Contributors
1
Reply
8
Views
3 Years
Discussion Span
Last Post by nauticalmac
0

Apply the width and positioning to a block level tag (e.g. li) instead of inline (a)
Without knowing what the other constraints of layout are (menu animation?), here's a place to start from.

ul li {
  background:rgba(0,0,0,.4);
  position:relative;
  height:50px;
  left:0px;
  width:200px;
  padding:2px;
  margin:0px;
  margin-left:-40px;
}
ul li a {
  font-size: 15px;
  color:#FFFFFF;
  padding:2px;
  margin:0px;
  padding-right:15px;
  padding-left:20px;
  font-family:"Arial Black", Gadget, sans-serif;
  text-decoration: none;
  text-shadow: 3px 3px 3px #333;
}
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.