1

I am trying to neaten up some admin pages in an MVC 4.0 web project, and I'm running into some issues when applying both a class="" and a style="" to an html element. It seems that the class will override the inline styling.

CSS:

.adminHeader
{
   display: block;
   background: #3e3e3e;
   color: #fff;
}

.adminLabel
{
   display: inline;
   padding: 5px;
   font-size: 1.25em;
   font-weight: 600;
}

HTML:

<div style="width: 1000px;">
    <div class="adminHeader">
        <span style="width: 200px;" class="adminLabel">bleh</span>
        <span style="width: 400px;" class="adminLabel">blaaaaaaaaaaah</span>
        <span style="width: 150px;" class="adminLabel">blu</span>
        <span style="width: 250px;" class="adminLabel">bluhh</span>
    </div>
</div>

What's happening is, the style="width:x;" will not be applied unless I remove the class attribute. I know I can use multi-classing, but I don't want to have to create a million different CSS classes like .width150px, .width200px, etc.

What am I missing here?

Thanks in advance! Alex

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Alex Saurus
  • 49
  • 6
  • shouldn't be. css's priority order makes `style=...` be the highest priority. anything in there should override anything applied via a "mere" class, unless the class has a `!important` override. Probably it's the `inline` directive. Spans are already by definition inline anyways. – Marc B May 07 '13 at 17:48
  • Hi!, thanks for your quick response! The class does not have any !important tags in it. I just seems to be straight up ignoring anything I put into a style tag and using only the CSS from the class. :( – Alex Saurus May 07 '13 at 17:50

2 Answers2

5

Inline elements do not have width. Your CSS specifies that the elements of that class should be inline.

There's a number of other questions covering this already. For example, Setting the width of inline elements.

Community
  • 1
  • 1
matt.moser
  • 171
  • 4
  • 1
    If you want them to have a width, they either have to have `display: block;` or `display: inline-block;` – Colin DeClue May 07 '13 at 17:51
  • I removed the display:inline; from my adminLabel class but the inline style is still not applying... – Alex Saurus May 07 '13 at 17:52
  • Sorry, I was not aware that it was an issue of it being an inline element. inline-block fixed it, thank you – Alex Saurus May 07 '13 at 17:55
  • Give the link I've edited into my answer a once over. I suspect that there is a semantically more appropriate way to accomplish your goal without using spans. It looks like you are trying to create some sort of tabbed navigation, in which case a UL with float:left would serve you better. – matt.moser May 07 '13 at 17:58
  • It's actually just a table, I changed it to divs and spans because prior research lead me to believe that tables don't play nice when you try to set specific widths. – Alex Saurus May 07 '13 at 18:05
1

Set your <span> css to display: block;. Span elements display inline by default.

span {display:block;}

Inline styles will always override stylesheet styles. See here in this example. Also there is an example of using display block.

http://jsfiddle.net/AHg7J/1/

khollenbeck
  • 16,028
  • 18
  • 66
  • 101