WordPress.org

1. fluentdesigns
   Member
   Posted 3 years ago #

   Ok so here is the CSS that I added to style.css

   #content {
   margin: 0;
   padding: 0;
   }

   #content ul {
   width: 580px;
   float: left;
   margin: 0;
   padding: 0;
   }

   #content li {
   float: left;
   width: 290px;
   border: 1px, solid, #000000;
   list-style-type: none;
   }

   #content a, #content a:visited {
   display:block;
   text-align: center;
   }

   p, h5, h3 {
   text-align: center;
   }

   </style>

   Here is the code that I added to the Page in html mode:

   <div id="content">

   <p>Welcome to our Digital Editions home page. Here you can select a digital edition for instant viewing.</p>

   <ul id="issues">

   <li id="35"><img src="http://www.sandaddiction.com/wp-content/uploads/2007/11/digital-edition35.jpg" />
   <p><h5>April 2009</h5><h3>Issue 35</h3></p>
   <li id="34"><img src="http://www.sandaddiction.com/wp-content/uploads/2008/12/digital-edition34.jpg" />
   <p><h5>February 2009</h5><h3>Issue 34</h3></p>
   <li id="33"><img src="http://www.sandaddiction.com/wp-content/uploads/2008/10/issue33-digital.jpg" />
   <p><h5>December 2008</h5><h3>Issue 33</h3></p>
   <li id="32"><img src="http://www.sandaddiction.com/wp-content/uploads/2008/09/digital-edition32.jpg" />
   <p><h5>October 2008</h5><h3>Issue 32</h3></p>
   <li id="31"><img src="http://www.sandaddiction.com/wp-content/uploads/2008/07/digital-edition31.jpg" />
   <p><h5>August 2008</h5><h3>Issue 31</h3></p>
   <li id="30"><img src="http://www.sandaddiction.com/wp-content/uploads/2008/05/issue30.jpg" />
   <p><h5>June 2008</h5><h3>Issue 30</h3></p>
   <li id="29"><img src="http://www.sandaddiction.com/wp-content/uploads/2008/05/issue29.jpg" />
   <p><h5>April 2008</h5><h3>Issue 29</h3></p>
   <li id="28"><img src="http://www.sandaddiction.com/wp-content/uploads/2008/01/issue28.jpg" />
   <p><h5>Feb 2008</h5><h3>Issue 28</h3></p>
   <li id="27"><img src="http://www.sandaddiction.com/wp-content/uploads/2007/11/issue27.jpg" />
   <p><h5>Dec / Jan 2007</h5><h3>Issue 27</h3></p>
   <li id="26"><img src="http://www.sandaddiction.com/wp-content/uploads/2007/09/issue26.jpg" />
   <p><h5>Oct / Nov 2007</h5><h3>Issue 26</h3></p>
   <li id="25"><img src="http://www.sandaddiction.com/wp-content/uploads/2007/07/sa-i25cover.jpg" />
   <p><h5>Aug / Sep 2007</h5><h3>Issue 25</h3></p>

   </div>

   The problem is it seems to not be styling the html. It works locally but not within wordpress. Did I miss something?

2. fluentdesigns
   Member
   Posted 3 years ago #

   nobody have any suggestions or help?

3. stvwlf
   Member
   Posted 3 years ago #

   Hi - Not to be rude, but do you understand you are asking someone to invest a fair amount of time reading through your code, and then you don't even say what they are looking for? WHAT is not working?

   If you post a URL and specific examples of what is not working correctly, you will find more people able to help you.

4. fluentdesigns
   Member
   Posted 3 years ago #

   The problem is that its not styling the html file. there is nothing wrong with the code with the CSS embedded into an xhtml file. When I remove the CSS and add it to the styles.css file the html code does not get styled by wordpress. So its a wordpress step that I am missing, I figured it would automatically work just as if it was embedded right above the html. So I am in no way asking for anyone to look though my code for bugs.

   The page im trying to style is http://www.sandaddiction.com/digitaleditions/

5. stvwlf
   Member
   Posted 3 years ago #

   Hi

   Here are some things I found:

   1) #content ul that you posted above is not showing as being in the style.css file at all

   2) #content li - list-style-type: none is being overriden because this CSS on line 634
   

   .entry ul li {
   list-style-image:none !important;
   list-style-position:inside !important;
   list-style-type:circle !important;
   margin-left:15px;
   padding:3px 0;
   }

   is declared with !important on it, thus it overrides your #content li assignments, even though #content li IS more specific

   The rest of your CSS above is being applied as it should.

   I ran your URL above through the page validator and there are 109 errors on it. It might be a good idea to clean some of them up.
   http://validator.w3.org/check?uri=http://www.sandaddiction.com/digitaleditions

   Hope you find this useful

6. fluentdesigns
   Member
   Posted 3 years ago #

   Thanks so much stvwlf! I was able to get a little bit closer to getting this worked out! I removed all the !important tags which helped out but I have a feeling there is still some css that is not letting the ul float:left.

Topic Closed

This topic has been closed to new replies.