WordPress.org

Ready to get started?Download WordPress

Forums

CSS class not working in wordpress (6 posts)

  1. s33ds
    Member
    Posted 8 months ago #

    I've put this in the page editor:

    <style>
    div.a{
      float:left;
    }
    
    div.b{
      float:left;
    }
    
    </style>
    
    <div class="b">
    	<a href="http://www.1.com">
    		<img alt="1" src="http" width="110" height="90" />
    	</a>
    </div>
    
    <div class="a">
    	<a href="http://www.2.com">
    		<img alt="2" src="http" width="110" height="90" />
    	</a>
    </div>
    
    <div class="a">
    	<a href="http://www.3.com">
    		<img alt="3" src="http width="110" height="90" />
    	</a>
    </div>

    I know that both of the classes do the same thing, but that's the point. If I call class b it seems to ignore it and just clear right and the last 2 images are sent onto the next line.
    This only happens in the wordpress editor.
    If I call class a on the first image it works as it should, just not class b.

  2. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    We need to see an actual page to help with CSS issues.

  3. s33ds
    Member
    Posted 8 months ago #

    It was an error on my part. I spent over an hour trying to figure this out.. it's because I didn't put the classes in separate <style>.
    Original:

    <style>
    div.a{
      float:left;
    }
    
    div.b{
      float:left;
    }
    
    </style>

    edit:

    <style>
    div.a{
      float:left;
    }
    </style>
    
    <style>
    div.b{
      float:left;
    }
    
    </style>

    ...frustrating.
    Funny how I also figure it out as soon as I open a discussion on here.

  4. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    LOL - yeah, that happens a lot!

    BTW, it's really much better practice to put CSS in an external file - or custom CSS plugin rather than in the content. Also avoid inline CSS wherever possible as well.

  5. blacklinemedia
    Member
    Posted 8 months ago #

    BTW, it's really much better practice to put CSS in an external file - or custom CSS plugin rather than in the content.

    Link to a custom css plugin http://wordpress.org/plugins/my-custom-css/

    The Jetpack plugin also has this feature.

  6. s33ds
    Member
    Posted 8 months ago #

    Thanks guys.
    Also, in case anyone else comes across my problem. It can be rectified using:

    <style><!--
    --></style>

    Instead of putting each class in its own <style>.

Reply

You must log in to post.

About this Topic

Tags

No tags yet.