YAFLogo

marinette2
17 years ago

I can't find the spot in the style sheet to format images with css max width attributes that are browser specific CSS for attachments only or img only.

Firefox supports maxwidth , but IE does not (but there is a trick)).

http://www.svendtofte.com/code/max_width_in_ie/ 

http://www.css3.com/css-max-width/ 

Could use guidance.

example

Code:/* */

img

{

border: 0;

max-width: 300px;

max-height: 300px;

}

Still testing to try...

Code:

<!--[if IE]>
width:expression(Math.min(parseInt(this.offsetWidth), 300 ) + "px"); 

<![endif]-->

I'd like to only use this on YAF img tags and attachments, but the style sheet approach doesn't seem to do that. Any guidance?

Sponsor
marinette2
17 years ago
theme.css for the StandardLarge theme is below. With the width trick.

Not yet tested.


body, td
{
	font-family: Verdana, Arial,Helvetica,sans-serif;
	font-size: 10pt;
}

input{font:10pt Verdana,Arial,Helvetica,sans-serif}

select{background:#ffffff;font:10pt Verdana,Arial,Helvetica,sans-serif}

textarea{background:#ffffff;border:1px solid #000000;
font:10pt Verdana,Arial,Helvetica,sans-serif;padding-bottom:2px;padding-left:2px}

form{display:inline}

input{border:1px solid #606060;font-size:10pt}

input.pbutton{background:#ffffff;}

/* For BBCode Post Buttons */
.ButtonOut
{
	filter: alpha(opacity=70);
	border: #7F9DB9 1px solid;
}
.ButtonOver
{
	background-color: #FFE1AC;
	border: #FFAD55 1px solid;
}
.ButtonChecked
{
	background-color: #FFCB7E;
	border: #FFAD55 1px solid;
}
.ButtonOff
{
	filter: gray() alpha(opacity=30);
	background-color: #C0C0C0;
	border: #7F9DB9 1px solid;
}

/*  */
img 
{
	border: 0;
	max-width: 500px;
	max-height: 500px;
<!--[if IE]>
width:expression(Math.min(parseInt(this.offsetWidth), 500 ) + "px");
<![endif]-->
}

/* hyperlinks */
a			{ text-decoration: none; color: #000080; }
a:hover		{ text-decoration: underline; }

/* Header 1 - Main header */
.header1 {
	background-image: url('bg_header1.png');
	background-color: #7D8CFF;
	color: #FFFFFF;
	font-weight: bold;
	height: 32px;
	font-size:12px;
}

/* Links in header1 */
tr.header1 a		{color:#FFFFFF;text-decoration:none}
tr.header1 a:hover	{color:#C0C0FF;text-decoration:none}

/* Header 2 - Sub header */
.header2 {
	background-image: url('bg_header2.png');
	background-color: #7D8CFF;
	color: #000000;
	font-weight: bold;
	height: 28px;
}

/* Footer1 - Bottom of tables */
.footer1 {
	background-image: url('bg_footer1.png');
	font-size: 9pt;
	height: 28px;
}

.footer1 select, .footer1 td
{
	font-size: 9pt;
}

.postformheader 
{
	background-color: #B2C8F6;
	font-weight:bold;
}

/* Header of posts */
.postheader 
{
	background-color: #B2C8F6;
}

/* User info and post/article */
.post 
{
	background-color: #CFDDF8;
}

.post_alt
{
	background-color: #e0e8f8;
}	

.post_priority
{
	font-weight:bold;
}

.post_link
{
	font-weight: bold;
}

/* Footer of posts */
.postfooter 
{
    background-color: #95B4F3;
}

/* Area between posts */
.postsep 
{
	background-color: #2163E8;
	height: 1px 
}

/* most tables are class 'content' */
.content {
	font-family: Verdana, Arial,Helvetica,sans-serif;
	font-size: 10pt;
	border: solid 1px #2163E8;
	color: #000000;
	padding: 0px;
	background-color: #FFFFFF;
}

.content td {
	padding: 3px;
}

#RichEdit td 
{
	padding: 0px;
}

/* links inside content table*/
.content a			{ color: navy; text-decoration: underline; }
.content a:hover	{ color: #000000; text-decoration: none; }

/* used for quoting messages */
.quote 
{
	margin-left: 16px;
	padding-left: 16px;
}

.innerquote 
{
	padding: 4px;
	background-color: #B2C8F6;
	border: solid 1px #95B4F3;
}

/* used for code */
.code
{
	margin-left: 16px;
	padding-left: 16px;	
}

.innercode
{
	padding: 4px;
	/*background-color: #B2C8F6;*/
	background-color: #FFFFFF;
	border: solid 1px #95B4F3;
	/*color:#014C00;*/
	color:#000000;
	font-family:Courier New,Courier;
}

/* font sizes */
.smallfont	{ font-size: 9.5pt; }
.largefont	{ font-size: 11pt; }

/* Image Links */
a.imagelink 
{
	font-size: 10pt;
	font-weight: bold;
	color: #000080;
}
a:hover.imagelink
{
	text-decoration: underline;
	color: #0000FF;
	/*background-color: #D0D0D0;*/
}

/* Used for editor textarea */
.posteditor 
{
	width: 100%;
	height: 200px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 10pt;
}

/* Table just above and below tables */
table.command 
{
	/*border: solid 1px blue;*/
	padding: 3px;
}

/* p-tag at the top of pages with navigation links */
.navlinks { font-weight: bold; color: #000000; }
.navlinks a { color: #000080; text-decoration: none }
.navlinks a:hover { color: #808080; }

/* for printing */
.print 
{
	border: solid 1px #C0C0C0;
}
.printheader 
{
	background-color: #DDDDDD;
	color: #000000;
	padding: 4px;
}
.printbody 
{
	background-color: #FFFFFF;
	color: #000000;
	padding: 4px;
}

/*
Use this to setup overflow feature for your site.
On IE that would mean specifying a width so that the overflow will work properly.
This CSS already works on FireFox.
*/
div.postdiv
{
	width: 100%;
	min-height: 100px;
	overflow: auto;	
}
marinette2
17 years ago
Still not working right yet. Will try to wrap around img tags.

IE css is horrid.

marinette2
17 years ago
Still not working....

Anyone who knows anything on the IE conditional tags would help.

img

{

border: 0;

max-width: 500px;

max-height: 500px;

}

marinette2
17 years ago
Found this note...

After struggling with max-width in IE7 (they said it was supported) I discovered a little line of text on a Microsoft developer support page that solved my problem. The max/min-width property will work if you declare "XHTML 1.0 Strict" in your DTD. I was flogging away at it unsuccessfully while "HTML 4.01 Transitional" was perched up in the rafters of my document, silently mocking me. A quick revision of that got me full max/min-width control in IE7. Nice.

Full documentation here.

Note: IE7 is the first version of Explorer that supports the max-width & min-width property.

http://msdn2.microsoft.com/en-us/library/ms530811.aspx 

This needs to be in the page header for IE7 and firefox

Neven
16 years ago
conditional comments don't work in CSS, and are not needed, anyway.

Other browsers will just ignore the declaration.

This can be done if we change the behavior of [IMG] BBCode tag so it is parsed as a div containing image.

the size, and behavior of the overflow is then dealt in theme.css.

*CSS*
.imgwrapper {
width:100px; 
height:100px; 
overflow: hidden; /*or scroll*/
}

*html*
<div class="imgwrapper"><img src="http://forum.yetanotherforum.net/images/logoTop.gif"></div>
I think that client side css cropping is better than server side dot net cropping, because it doesn't use server's bandwidth nor CPU/RAM/HD resources.

Now, as for MS dynamic CSS properties  - they allow script insertion  and execution, cookie and form theft and things like this. I recommend we don't recommend them for our themes.


... But trust me on the sunscreen!

-----

There not bugs(in YAF)...it's either un-defined features or exceptions to expected behavior!!

test2005 wrote:

classpass
10 years ago
share with some image resizing sample codes  i am using

private void button1_Click(object sender, EventArgs e)

{

string fileName = "c:/Sample.png";

REImage reImage = REFile.OpenImageFile(fileName);

ImageProcessing.ApplyResize(reImage, 500, 500);

REFile.SaveImageFile(reImage, "c:/reimage.png", new PNGEncoder());

but how can i make it auto resizing, this codes only support resizing image munully, how can i change this situation?