2

I'm working through an example on making configurable drop-downs, from here. It's still a work in progress, but I was trying to keep things clean, and move my inline style declarations to an internal style sheet in the head of the html file.

Here's a fiddle for it.

What's weird is line 9 of the html, shown here as the second span line:

<dl id="sample" class="dropdown"> <dt><a href="#" class="uiwidgetcontent uiborderall" style="width: 200px;"> <span>Please select the country</span> <span class="ui-icon ui-icon-triangle-1-s" style="float:right;"></span> </a></dt>

This works fine, as I would expect, across all browsers. But in the styling in the header, I put the same thing, in the span:last-child line. (I left the whole style section for context):

 .uiborderall { border-radius: 18px; } .uiwidgetcontent { background-color: #abc; } .dropdown dd, .dropdown dt, .dropdown ul { margin: 0px; padding: 0px; } .dropdown dd { position: relative; } .dropdown a, .dropdown a:visited { text-decoration: none; outline: none; display: inline-block;} .dropdown dt a:hover, .dropdown dt a:focus { color: #5d4617; border: 1px solid #5d4617;} .dropdown dt a {display: inline-block; border: 1px solid #d4ca9a;} .dropdown dt a span:first-child {cursor: pointer; padding: 5px; display: inline-block; } .dropdown dt a span:last-child {cursor: pointer; float: right; margin-right: 10px; } .dropdown dd ul { display:none; left:0px; position:absolute; top:1px; width:auto; min-width:170px; list-style:none; } .dropdown span.value { display:none;} .dropdown dd ul li a { padding:5px; display:block;} .dropdown dd ul li a:hover {}

I should be able to delete the inline style from the <span> element, and it should fall back to the internal style sheet. In Firefox and IE, this works fine. However, in Chrome and Safari, when I do this, the float: right from the internal style sheet seems to be ignored. For what it's worth, in chrome at least, float:right is still set on the appropriate span. The renderer just seemingly ignores it.

Is there a way for me to use the float:right in a style sheet on the big 4 browsers, or must I put it inline in the element?

Thanks!

Improve this question
4
  • Possible to post a link to a functional example so we can tinker with it? Commented Apr 18, 2013 at 23:48
  • Try adding !important in your stylesheet - perhaps it's being overridden by other styles. Inline styles have a higher weight than those in a stylesheet. Commented Apr 19, 2013 at 0:00
  • @showdev - See my OP, under "Here's a fiddle for it". jsfiddle.net/3xbcF Commented Apr 19, 2013 at 2:32
  • @MarkParnell It was worth a shot, but adding !important into the fiddle and then removing the inline style gave me the same result. Commented Apr 19, 2013 at 2:34

1 Answer 1

Reset to default
2

Don't you need to place your float elements before the content you wish it to float around?

I reversed your :first-child and :last-child css styles, reversed the order of your spans, and removed the inline style and it works: http://jsfiddle.net/3xbcF/1/

<dl id="sample" class="dropdown"> <dt><a href="#" class="uiwidgetcontent uiborderall" style="width: 200px;"> <span class="ui-icon ui-icon-triangle-1-s"></span> <span>Please select the country</span> </a></dt>

css:

.dropdown dt a span:last-child { cursor: pointer; padding: 5px; display: inline-block; } .dropdown dt a span:first-child { cursor: pointer; float: right; margin-right: 10px; }
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks, it looks great. I'm still getting used to CSS layouts, and I'm sure there's a general rule I can get from this. Is it "always put elements you want to float ahead of the inline ones"? And do you know why it worked in IE and FireFox? Thanks again!
I'm pretty sure that's the rule. The fact that it worked in IE/FF and Chrome (if you used inline style) is probably due to the browsers trying to help you out when you break the rule.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.