CSS - Css Image Scaling Works In Chrome Not In Ie

Can anyone help me get this to work in IE? Here's the link to the page I'm working on, which I'll be moving from my site to the proper domain soon.

...
(annoyed - can't post urls as a new user, which makes this forum limiting - is there a way around this? How about if I try "#" = "." and "|" = "/"
http:||krisbunda#com|bb|db-series-planters#html
)
...


Here's the "thumbnails" CSS I'm using:

CSS Code:
Original - CSS Code .gallerycontainer{ position: relative; text-align:right; margin-left: 0em auto; margin-right: 0em auto; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } .thumbnail img{ border: .25em solid #FFF; margin: .5em .5em .5em .5em; height: 8.5em; width: 8.5em; } .thumbnail:active{ background-color: transparent; } .thumbnail:active img{ border: 0em solid #3F0; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: #999; padding: 0em; left: -250em; border: .25em dashed gray; visibility: hidden; color: #FFF; text-decoration: none; text-align:center; height:auto; width:auto; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: .25em; padding: 0em; height:auto; width:auto; } .thumbnail:active span{ /*CSS for enlarged image*/ visibility: visible; top: 0em; left: 1.5em; /*position where enlarged image should offset horizontally */ z-index: 5; height:auto; width:auto; }

  

  


 .gallerycontainer{


 position: relative;


 text-align:right;


 margin-left: 0em auto;


 margin-right: 0em auto;


 /*Add a height attribute and set to largest image's height to prevent overlaying*/


 }


  


 .thumbnail img{


 border: .25em solid #FFF;


 margin: .5em .5em .5em .5em;


 height: 8.5em;


 width: 8.5em;


 }


 .thumbnail:active{


 background-color: transparent;


 }


 .thumbnail:active img{


 border: 0em solid #3F0;


 }


 .thumbnail span{ /*CSS for enlarged image*/


 position: absolute;


 background-color: #999;


 padding: 0em;


 left: -250em;


 border: .25em dashed gray;


 visibility: hidden;


 color: #FFF;


 text-decoration: none;


 text-align:center;


 height:auto;


 width:auto;


 }


  


 .thumbnail span img{ /*CSS for enlarged image*/


 border-width: .25em;


 padding: 0em;


 height:auto;


 width:auto;


  


 }


  


 .thumbnail:active span{ /*CSS for enlarged image*/


 visibility: visible;


 top: 0em;


 left: 1.5em; /*position where enlarged image should offset horizontally */


 z-index: 5;


 height:auto;


 width:auto;


 }


  

And here's the HTML:

(well, the html will have to be viewed in the browser because of the "No URLs" rule)

Thanks in advance for any help.

I have an issue with an image that just doesn't show up in IE6-8 no matter what I do. I even tried just putting in the url for the image and it still wouldn't show it. I took it into Photoshop to make sure it was properly saved as a jpeg and it is.

The file validates (with some minor color warnings).

I tried to post the url by putting url tags but that didnt work so here it is obscured mandp dot lamster dot org/contacts dot shtml

and the photo alone is at mandp dot lamster dot org / images / MP65APhoto dot jpg

Another issue with the url for the page is that I can't seem to get the width of the right pane smaller.

Any help would be appreciated.

Thanks/Hal

Hi, okay I am working on a website for a friend, and it is peak-performance.biz I want the background image to fill up the page and be unscrollable. I made it work and look very good in chrome but it only takes up half the page in firefox. I was wondering if anyone have any ideas how to fix this. Thanks for your advice in advance.

I have used

html{
background-color:#000000;
background-image:url(images/background.jpg);
background-repeat:no-repeat;
background-size:1300px;
height:1000px;
background-attachment:fixed;
}

and

html{
background-color:#000000;
background-image:url(images/background.jpg);
background-repeat:no-repeat;
background-size:100%;
background-attachment:fixed;
}

Hello All,
I have an image with a text label to the right that is linked. Now, I want a little whitespace between the image and the text, so that the text doesn't butt up right against the image. To accomplish this, I could use a non-breaking space ( ) However, the space then becomes part of the link and it gets underlined. So, by adjusting the image's margin (or padding) CSS, I can achieve the desired result... at least in Internet Explorer.
Firefox/Safari/Chrome seem to underline a linked image's margin as well. I tried using "padding" CSS instead, but produced the same result.

How can I get Firefox/Safari/Chrome to underline JUST the text in a link, and not the image (and it's margin) as well?

This is how the code is displayed in IE:
http://img407.imageshack.us/img407/2360/pfieeu9.jpg

Firefox/Safari/Chrome:
http://img407.imageshack.us/img407/5421/pffirefoxvv1.jpg


You can see the little extra "nubbin" of underline between the icon image and the text.

CSS:
Code:

a.red10ullink:link	     {color: #a80000;
		     font-size: 10pt;
		     font-family: arial;
		     text-decoration: underline;}

a.red10ullink:visited    {color: #a80000;
		     font-size: 10pt;
		     font-family: arial;
		     text-decoration: underline;}

a.red10ullink:hover     {color: #333333;
		     font-size: 10pt;
		     font-family: arial;}

img.icon    {vertical-align: middle;
               border-width: 0px;
               margin: 0px 5px 0px 0px;}

HTML:
Code:

<a href="somepage.html" class="red10ullink"><img src="icon_pf.gif" alt="" width="20" height="20" class="icon" />Printer Friendly</a>

Thanks!

Hi all,

Wondering if anyone knows a tweak to make the following work in IE7 using pure CSS?

I have an image that grows when it is rolledover.

Css simply as follows:

.graph {
width: 200px;
height: 50px;
}
.graph:hover {
width: 600px;
height: 150px;
}

Works fine in FF (as usual!)

Regards

Charlie

Hi Everyone,

I'm having a problem with IE rendering correctly. I'm experimenting with using all div's in my pages now, and I'm not very familiar with the quirks of IE.

I have created a sample page, and I'm really confused as to what is going on in IE. FF renders the page exactly as I expect. IE renders the page with everything in the correct location, but it seems to double the background image for a sub-div section that is moved up using a negative margin (#menu { ... margin-top: -200px; ... }). Also, this "duplicate background" seems to "flicker" on and off in certain areas, but part of it is always there. (I think there may be more than one duplicate?)

To view what's happening, check it out in FF, and then in IE:
example.com/HTML
example.com/CSS

I have very little code, and I'm not sure what is the relevant part:

CSS:
Code:

.logo_banner { background-image:url(../images/new/logo_web1.png); background-repeat:no-repeat; background-position:left top; height:188px; }
.spacer { height:10px; }
.spacer_10px { height:10px; }
.spacer_40px { height:40px; }
.spacer_50px { height:50px; }
.spacer_separator { height:1px; background-image:url(../images/bg_separator.png); background-repeat:repeat-x; background-position:center top; }

#menu { height:50px; margin-left:200px; margin-top:-80px; }

#home_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; }
#home1_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:120px; margin-top:-50px; }
#home2_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:240px; margin-top:-50px; }
#home3_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:360px; margin-top:-50px; }
#home4_btn { background-image:url(../images/new/home_btn_web.png); background-repeat:no-repeat; background-position:left; height:50px; margin-left:480px; margin-top:-50px; }

.spacer_dotted_line { background-image:url(../images/new/dotted_line.png); background-repeat:repeat-x; width:860px; height:2px; margin-left:auto; margin-right:auto; }

.div_body_top { background-image:url(../images/backgrounds/bg_dark_body_top1.png); width:900px; height:20px; background-repeat:no-repeat; }
.div_body_middle { background-image:url(../images/backgrounds/bg_dark_body_middle1.png); height:auto; background-repeat:repeat-y; padding-left:20px; padding-right:20px; }
.div_body_bottom { background-image:url(../images/backgrounds/bg_dark_body_bottom1.png); width:900px; height:20px; background-repeat:no-repeat; }

.footer_bar { background-color:#2B2D20; height:60px; text-align:center; }
.footer_text { font-family:Geneva, Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF; line-height:60px;}

.text_style_body { text-align:left; font-family:Geneva, Arial, Helvetica, sans-serif; color:#CECECE; font-size:10px; }
.content_body { height:auto; width:900px; margin-left:auto; margin-right:auto; }

.text_area { padding-top:10px; padding-left:20px; padding-right:20px; padding-bottom:20px; width:860px; margin-left:auto; margin-right:auto; }

And here is the HTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page 1</title>
<link href="styles/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">

	<div class="content_body">
		<div class="div_body_top"></div>
		<div class="div_body_middle">
			<div class="logo_banner"></div>
			<div id="menu">
				<div id="home_btn"></div>
				<div id="home1_btn"></div>
				<div id="home2_btn"></div>
				<div id="home3_btn"></div>
				<div id="home4_btn"></div>
			</div>

			<div class="spacer_10px"></div>
			<div class="spacer_dotted_line"></div>
			<div class="spacer_40px"></div>

			<div class="text_style_body">
				Here is some content. Love that content. One day this text will actually say something.
				...
				<br/>
				<br/>
				Here is some content. Love that content. One day this text will actually say something.
				Here is some content. Love that content. One day this text will actually say something.
				Here is some content. Love that content. One day this text will actually say something.
				...
			</div>

			<div class="spacer_50px"></div>
			<div class="spacer_40px"></div>
		</div>
		<div class="div_body_bottom"></div>
	</div>
	<div class="spacer">&nbsp;</div>
	<div class="footer_bar footer_text">Copyright 2008</div>
</div>
</body>
</html>

Any help is GREATLY appreciated. Thanks!

I've bee fooling around with something that has no real purpose (but could) to try to understand an image positioning problem that I'm trying to avoid solving with tables. I hacked this CSS out, and it looks exactly and acts exactly like I want, but I can't help thinking it's not correct, especially how I deal with the "up" and "down" control images...

Originally, I had thought the way to do this thing would be 5 distinct DIVs inside a container DIV, but as it turned out, one of the five turned into the container for all...

This looks the same in FF and IE, which is what I want...

The code can be seen in a browser he SiliconSatan.com/test.html
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>Test</title>
	<style>
	.col_tab_left {
		position: relative;
		width: 36px;
		height: 30px;
		left: 0px;
		top: 0px;
		background-image: url(./images/col_tab_left.gif);
	}
	.col_tab_middle {
		width: 430px;
		height: 30px;
		position: absolute;
		left: 36px;
		top: 0px;
		background-image: url(./images/col_tab_bg.gif);
		text-align: center;
	}
	.col_tab_right {
		width: 26px;
		height: 30px;
		position: absolute;
		left: 466px;
		top: 0px;
		background-image: url(./images/col_tab_right.gif);
		text-align: center;
	}
	.col_tab_title {
		font-family: "Comic Sans MS", san-serif;	
		font-size: 10pt;
		font-weight: bold;
		line-height: 30px
	}
	.block_up {
		width: 36px;
		height: 30px;
		border: 0px solid #003366;
		left: 5px;
	}
	.block_down {
		width: 36px;
		height: 30px;
		border: 0px solid #003366;
		position: absolute;
		left: 13px;
		top: 0px;
	}
	.image {
		position: relative;
		display:block;
		left: 7px;
		top: 12px;
	}
	</style>
</head>
<body>
<table border="1">
	<tr>
		<td width="200">This is some text</td>
		<td>		
			<div class="col_tab_left">
				<div class="block_up">
					<img class="image" src="images/block_up2.gif" width="9" height="9" border="0" alt="">
				</div>	
				<div class="block_down">
					<img class="image" src="images/block_down2.gif" width="9" height="9" border="0" alt="">
				</div>	
				<div class="col_tab_middle"><span class="col_tab_title">TEST</span></div>	
				<div class="col_tab_right"></div>	
			</div>
		</td>
	</tr>
</table>
<br>
<div class="col_tab_left">
	<div class="block_up">
		<img class="image" src="images/block_up2.gif" width="9" height="9" border="0" alt="">
	</div>	
	<div class="block_down">
		<img class="image" src="images/block_down2.gif" width="9" height="9" border="0" alt="">
	</div>
	<div class="col_tab_middle"><span class="col_tab_title">TEST</span></div>	
	<div class="col_tab_right"></div>	
</div>
</body>
</html>

Hi all,

I've tried both the "shorthand" and regular version of BORDER attribute, and neither works, Yet outline works fine (but I don't want to use that since IE7 doesn't support it).

Anyone able to troubleshoot this? Here's part of the CSS code (the ".thumb" class at the end is what's not working) and below that is the url.

CSS Code:
Original - CSS Code .gallerycontainer{ position: relative; text-align:right; margin-left: 0em auto; margin-right: 0em auto; /*Add a height attribute and set to largest image's height to prevent overlaying*/ } #thumbBox{ /*Outermost DIV for thumbnail viewer*/ position: absolute; left: 2.5em; top: -4em; width: auto; height: auto; padding: .5em; padding-bottom: 0em; background: #313131; visibility: hidden; z-index: 5; cursor: hand; cursor: pointer; } #thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */ font: bold 1em arial; line-height: 1.1em; color: white; padding: .5em 0; text-align: right; } #thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */ background-color: #CCC; } #thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/ position: absolute; visibility: hidden; border: .125em solid black; background-color: #EFEFEF; padding: .5em; z-index: 6; } .thumb { margin: .5em .5em .5em .5em; height: 8.5em; width: 8.5em; border-style: dashed; border-color:#CCC; border-width:.125em; }

  

 .gallerycontainer{


 position: relative;


 text-align:right;


 margin-left: 0em auto;


 margin-right: 0em auto;


 /*Add a height attribute and set to largest image's height to prevent overlaying*/


 }


  


 #thumbBox{ /*Outermost DIV for thumbnail viewer*/


 position: absolute;


 left: 2.5em;


 top: -4em;


 width: auto;


 height: auto;


 padding: .5em;


 padding-bottom: 0em;


 background: #313131;


 visibility: hidden;


 z-index: 5;


 cursor: hand;


 cursor: pointer;


 }


  


 #thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */


 font: bold 1em arial;


 line-height: 1.1em;


 color: white;


 padding: .5em 0;


 text-align: right;


 }


  


 #thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */


 background-color: #CCC;


 }


  


 #thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/


 position: absolute;


 visibility: hidden;


 border: .125em solid black;


 background-color: #EFEFEF;


 padding: .5em;


 z-index: 6;


 }


  


 .thumb {


 margin: .5em .5em .5em .5em;


 height: 8.5em;


 width: 8.5em;


 border-style: dashed;


 border-color:#CCC;


 border-width:.125em;


 } 

I don't think I have the 5 requisite posts, so here's the url in question (# = .) & (| = /)

http:||www#bauerbuiltmfg#com|db-series-planters#html


Thanks in advance for any help!

This is my code essentially:

<div id="bottom">
<div style="float:left">store hours</div>
<img src="map">
<div style="float:right">contact info</div>
</div>

It looks fine in Safari but it messed up in Firefox. I fixed it a bit by adding overflow:auto to the parent item (bottom div), so it actually has the red background and doesn't collapse. I haven't yet uploaded that fix yet as the problem still isn't solved. Now the div is expanding too much because the 3 items aren't being displayed inline. In firefox the image is pushing the first div beneath it. Any solutions please?

Got it sorted now

Thanks - Dan.

I've made an image to explain my problem pretty well :


imgur dot com /n8uOX

(apparently I am not allowed to posts links , however its kinda hard for me to explain the problem so its easier to just show it)

basically i want my page to always be rendered as I intended it to.
I am pretty sure my coding is quite bad and thats what caused the problem , yet if anyone have any way to fix this please post in this thread.


Thanks

Hello, I'm new to these forums and I have a question. I am making a website (c-pj.net/lowercase/), and I'm having a problem. If I add too many posts or make a post to long it goes off the page, or at least the text does. What I mean by that is that the text ends up going onto the header and past my content holder image. Can anyone take a look at the source code, and my style sheet and tell me how I could make the height of my content area scale to the proper size, when I try to set it to auto it doesn't display at all. This could be caused by the fact that my content are is absolutely positioned but I'm just looking for some advice hopefully you guys understand my question. My style sheet is located he c-pj.net/lowercase/stylesheets/default.css

Is there a way to tell a browser to NOT zoom it when the user tries to zoom the text... I ask because I use text in a menu bar that I do not want to scale at all. Thanks