Layout: Style doesn't work on one page, everything validat

started by Stan on May 2, 2005 — RSS Feed

Stan Stan
Posts: 44

When I apply the classes "lpic" and "rpic" to images, they work on every page but one (at least I've only found one where they don't work). The CSS and the markup all validate on the page where they don't work. The classes are intended to float the element to the left or right and put a margin between it and the text. Here's the css:

     .lpic  {
          float : left;
          margin-right : 14px;
          margin-bottom : 5px;
          display : inline;
     }
    .rpic {
          float : right;
         margin-left : 14px;
         margin-bottom : 5px;
         display : inline;
     }


and here's the markup for one of the three pix that fail to float:

<a href="tm03dcole.html" title="Larger picture of Deborah Coleman" class="rpic">
<img src="tm03dcole80.jpg" height="80" width="120" alt="Deborah Coleman, Fireworks" class="rpic" /></a>

The page I'm having trouble with is here:
http://www.mvbs.org/fest.htm
the floating fails to take place at the following fragments:
http://www.mvbs.org/fest.htm#tix
http://www.mvbs.org/fest.htm#maplink
http://www.mvbs.org/fest.htm#vol
Here is an example of a page where the same code works:
http://www.mvbs.org/frishell04.html

Another puzzling thing is that when I put those pictures on that page a couple of weeks ago, they all floated like they were suposed to. I've made changes to the page since then, but none that should affect those parts. And everything still validates with W3C.

Joe Gillespie Joe Gillespie
Posts: 528

Stan, you have declared class="rpic" twice. I don't know if that has anything to do with it. The sure fix would be to wrap the images in a div.

Stan Stan
Posts: 44

Forum said:
Stan, you have declared class="rpic" twice. I don't know if that has anything to do with it. The sure fix would be to wrap the images in a div.
Are you referring to using the classboth in the IMC tag and the A tag? I've tried it several ways. putting the class in the IMG tag, in the A tag and in both. The text still doesn't wrap.

This fragment http://www.mvbs.org/fest.htm#vol does have the picture wrapped in a DIV. Still no wrapping.

I'm sure I'm missing something really simple, but it's invisible to me.

Joe Gillespie Joe Gillespie
Posts: 528

I couldn't find any selector for .rpic in your style sheets. If I put

<div class="rpic" style="width: 66px; height: 80px; float: left">
it does what you expect (I think).

BTW, W3C *is* reporting errors in your CSS.

http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A//www.mvbs.org/fest.htm%23vol

Stan Stan
Posts: 44

Thanks for finding that typo in my code. I don't know why the W3C didn't find it a couple of days ago. I fixed it but it didn't affect my problem.

.lpic and .rpic are in the stylesheet "mvbs5.css". I'm using @import for that one because I found those two styles obliterate text when NN4 is used. I don't relly care how things look in that browser, but I want its few remaining users to be able to see the text.

I'm using the same method on at least two dozen other pages with no problems. I can't see what's different on this page.

I tried copying and pasting the CSS from mvbs5.css to mvbsx.css and that fixed everything. Of course, that makes mvbs5.css redundant and pointless. Still scratching my head over why that page behaves differently.

You must login to reply