CODEWITHSUNDEEP
csshtml-listsoperapadding
Wizard
Wizard

Reputation: 11275

css padding ignored in opera

I have form in page index.html 

<div class = "bottom_r">
    <h1>Get in Touch</h1>
    <form action="index.html" method="post">
      <ul>
        <li><input class = "input" type="text" name="fname" value = "Name:" /></li>
        <li><input class = "input" type="text" name="lname" value = "Email:" /></li>
        <li><textarea class = "textarea" >Message:</textarea></li>
        <li><input class="text_button" type="submit" value="Submit" /></li>
      </ul>
    </form>
</div>

and css style in style.css

.bottom_r {
    float: left;
    width: 262px;
    height: 215px;
    margin: 0;
}


.bottom_r ul {
    list-style: none;
    padding-left: 0;
}


.bottom_r li {      
    margin: 0;    
    padding-left: 50px;           
}

But padding: padding-left: 20px; work only with first <li>, this problem is only in opera, in all browser it working pretty, I can't find the problem, please help :)

Code online: http://cssdesk.com/8xrgD

Upvotes: 0

Views: 949

Answers (4)

Vlad Ciureanu
Vlad Ciureanu

Reputation: 1

In the last instance if nothing else works, use :

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
      .class {proprieties}
 }

Works only for opera.

Upvotes: 0

Leo
Leo

Reputation: 1809

change line 62:

.main > ul li

Upvotes: 1

Sindhara
Sindhara

Reputation: 1473

By the way... your problem ist your

.main li {
    display: inline;
}

Just define ist where you need it and not in the whole .main

Upvotes: 1

Luca
Luca

Reputation: 9715

I don't know what's the reason for this, I can reproduce it but can't see what's the problem, however if move the 50px padding from the <li> to their <ul>, it works fine:

.bottom_r ul {
    padding: 50px;
}

see http://cssdesk.com/WERUf

Upvotes: 0

Related Questions