THL Toolbox > Developers' Zone > Web Development > CSS Issues
CSS Issues in THL
Contributor(s): ?? and Than Grove
Topics: Images In Essays | Search Forms
Images in Essay
You'll notice the images working pretty well now, it just requires that you not space them immediately after each other. Let a little text wrap, even a few lines spill in between them when you line them up on the right like some of the essays have.
Also the text is set for the default width of 300px which is what all pictures in essays I assume will soon be. If you want to actually code in a larger size and msaller size class name into the markup then I could get control.
Additionally, you do not need to add extra classes on the h6 and the essay-img, I can target these with the body class for the minor temporary styles the essay images need until the MMS in on board and all the images are set at 300px width.
Now that said, there is one thing you'll need to do for Internet Explorer, and possibly other broesers I've not checked, and that is to put a unique wrapper around the whole of the essay contents and have this clear it all. IN fact you may just have to use the double wrapper all of the templates I made for the portals have. See the following wrappers from the layout style sheet:
/*
Main wrapper for the clearing of content floats
*/ .container-wrapper { clear:both; width:100%; margin:0 0 5px !important; margin:0; padding:0;}
/*
Single division of content
*/ .container-1col { overflow:hidden; float:left; width:99%; margin:0; padding:0;}
Try just the outer main wrapper but both would not hurt anything.
Also, I added a new style to give a little extra white space ont he left side. If you do not want this let me know.
Also, what did you do to change the side-column height on production? I was not sure if you reversed this already or not…? I never heard anything back about this.
Then the images should be okay with no extra styles or classes for essays…I'll do some further browser testing in my next life but I don't expect you needing to add any extra markup as long as you use the images carefully and let text wrap them. Otherwise, you can try to make the best use of tables in a nice xhtml way…
One other thing about the essays.... I just noticed that would be more intuitive and conventional for the users would be if the print document call came from a link on the top right of the document itself. Having this in the dropdown and in the navigation column is not natural based on my Web experience. Just add an ID tag to some text, "Print", in a P tag and I'll add an icon to it, like the envelope for email contacts.
- That said it's nice to have this print feature at all, and the overall page and table of contents area is looking slick.
this is not a small issue actually as we are getting into lots of essays without working this template out and I still don't even know where I can work on the template so if Than wants to pass this location onto me I'll work something up…somewhere in teh javascript....also I wonder how this is all going to change with the images coming from the MMS…?
Than, the images may also behave much better is you put the width and height on them (in that order), it's sort of required…though you can get by I forget what the impact is on other browsers and devices.
- also sorry to say I just noticed you have set in the img tag:
*title="image caption info"*
what should be… *alt="image caption info"*
That alt statement in the img tag may be a simple fix switching from the title since this comes from the javascript I assume. The width and height however we'll need to adddress with Andres when that time comes. All img tags must have the height and width and an alt tag as the norm. The title is fluff most people don't use at all.
first you cannot float image right and left and expect them to do that -
there are layout containers created for dividing content in columns 5050 and such, these things importantly will clear the floats - THE FOOTER is moving intot he content area in other browesers like Interet Explorer
note: you can wrap text around a floated image but don;t epect another floated image to go along like the text does.
use the containers in the templates for clearing the floats - I"m seeing the footer crawling halfway up the page in IE and I may have no other way to do this without you adding container and wrappers liek we use in the main portal templates.
lastly the essay image style is created for a 300 pixel wide image so the text is spilling out on images larget han that.
When do we convert to all images being from the MMS - then we only have 300px images
Than you have to addd the style manually to the td tag to set the width about 30px larger than the image to control the text for different width images. We've been emailing about this in recent weeks -
better yet - keep the darn captions to a reasonable length
sorry to make this sound more dire than it is - I"ll expermient for a day and see what I can do without adding the extra containers but I'm not confident on this
/m
BTW - also, i've realized that the proper way to have several classes on one style is NOT to have them touching - so I corrected this one I just found and will go back and check one or two I"ve done it with also.
div.img-right-shadow .essay-img { clear:both; margin-bottom:10px; } #ie-root div.img-left-shadow .essay-img, #ie-root div.img-right-shadow .essay-img {padding-bottom: 8px;}
Search Forms
If you go to 
http://dev.thlib.org/, you will see a search form in the middle of the page, but if you go to the same page on stating, http://staging.thlib.org/, the search form will not be there. This is not do to a difference in the markup but to a difference in styling. All the sites contain the basic search form and search forms on other pages but on staging and development they are hidden. The search forms are all wrapped in the same div:
<div id="search-wrapper"> … </div>On staging and production this div is hidden by a style in /global/css/thdl-temp.css with the following command:
/*------- hide search box */
div#search-wrapper { display:none; }But this is absent from the same file on development. Taking out that line in thdl-temp.css on staging or production would result in all the search forms throughout the site appearing, which at this time (July, 2011) is not advisable. Instead to get a specific search form to appear, one should override that general instruction with an instruction on the portals unique CSS stylesheet. This is done for the page at: http://www.thlib.org/places/maps/ in the CSS file (http://www.thlib.org/places/maps/css/maps.css), the following line has been added to make the search form show:
div#search-wrapper { display: block !important; }This will make the search form appear for any page that uses the maps.css stylesheet.