I have a select box then I have a link underneath it which has a padding on the left and right of 14px then top and bottom of 2px and for some reason the select box makes the left side of the link box appear outside of the div. I've tried everything but I can't figure it out. I've posted the code. It only does this in the opera 10.10 browser. It is perfect, in IE8, Firefox, and Safari

<div id="list">
<h2 align="center">J.I.P.</h2>
<select id="jiptext"></select>
<a id="barterlinklist" href="">Submit</a>
</div>



#jiptext{
width:100px;
margin-left: 4px;
position: relative;
top: 30px;
}

h2{
font-size: 35px;
font-style: italic;
border-bottom: 4px solid #6D7B8D;
margin-top: 3px;
color: white;
}

a#barterlinklist{
background-color: #AC0000;
border-style: inset;
border-color: black;
color: white;
font-size: 20px;
padding: 2px;
padding-right: 14px;
padding-left: 14px;
position: relative;
top: 85px;
left: 22px;
text-decoration: none;
}
  • Got a link so I can investigate further? Gary Hepting over 9 years ago

2 answers

0
points
This was chosen as the best answer

It might just be because your CSS isn't in the <head>. Opera is very strict.

Answered over 9 years ago by Gary Hepting
  • What do you mean my css isn't in the head? canyonchase1 over 9 years ago
1
point

Also, list elements have different default settings across various browsers. Get in the habbit of using CSS reset styles to get everything on the same page to begin with.

I personally like Eric Meyers, because he is my CSS hero: http://meyerweb.com/eric/tools/css/reset/

Answered over 9 years ago by Gary Hepting