Member Avatar for anniej

hi there, i am new to this site and new to web design also. i recently designed a site (html and css)which displays fine in firefox and safari but Internet Explorer is displaying the photos as very very very large. i am hoping there is a simple comment for IE that i can add to fix this?

  • 2 Contributors
  • 2 Replies
  • 122 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by anniej

Dani AI

Generated

The behavior you described is almost always caused by invalid markup or CSS that some browsers tolerate while Internet Explorer does not. supplied enough code to spot a few concrete problems: the image tag is malformed (so the browser can ignore the width), the universal reset uses the wrong property name, and there are a couple of CSS syntax mistakes that can make rules be ignored. was right to ask for the code — fixing those small errors will usually fix the size mismatch.

Quick, practical fixes (apply and re-test in IE):

<!-- use a valid HTML width attribute or CSS; don't include "px" inside the HTML attribute -->
<img src="ShipInnMilfordNJ.jpg" width="330" alt="Irish Music NJ" title="Ship Inn NJ" />
/* correct the reset and constrain the image in CSS */
* { margin: 0; padding: 0; }

#right img { max-width: 330px; height: auto; }

Notes and troubleshooting checklist:

  • Fix the malformed img attributes so browsers actually see the width. Invalid attributes are commonly ignored.
  • Replace margins with margin in your reset and correct any other typos (extra # in a color value, 1 em -> 1em, missing colons). CSS syntax errors cause declarations to be ignored.
  • If you need broad compatibility, use the HTML width="330" plus height:auto in CSS; max-width is useful for responsiveness.
  • Validate the page with the W3C validator to catch markup/CSS errors: W3C Validator. For reference on image attributes and sizing see MDN: HTML img element.

After correcting the markup and CSS, use IE’s developer tools (F12) to inspect the computed width/height and confirm the fixes.

Recommended Answers

All 2 Replies

Member Avatar for peter_budo

Please provide code reading magic ball is outdated :D

Member Avatar for anniej

ha ha, sorry about that, here is the html for the main page of the site, there is one picture on this page and it is located about 20 lines up from the bottom of the html code if that helps,
the css code is underneath, thanks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns= "http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/xml; charset=utf-8" />
		<meta name="description" content= "Irish Music for your Bucks County PA wedding, Irish music for your NJ wedding"/>
		<meta name="keywords" content="Irish music NJ, Irish music PA, Irish wedding NJ, Irish wedding PA, Irish music Bucks County PA"/>
		<meta name="robots" content="index,follow">
		<meta name="Googlebot" content="index,follow">
		<title>Irish music NJ, PA, NY, Bucks County PA and NJ weddings and special events</title>
		<link rel=
		"stylesheet" 
		type="text/css" 
		href="stylesirish.css">
	</head>
	<body>
		<div id = "head">
			<h1>Traditional Irish Music for your Wedding and Special Events <br>
			<span>Bucks County PA, NJ, NY</span></h1>
		</div>
<div id="content">
		<div id = "left">
		<div id = "menu">
		
			<ul>
				<li><a href="irishabout.html" target="_blank">About</a></li>
				<li><a href="irishcontact.html" target="_blank">Contact</a></li>
				<li><a href="irishlinks.html" target="_blank">Links</a></li>
				<li><a href="irishrecordings.html">Recordings</a></li>
				<li><a href="indexirish.html" target="_blank">Home</a></li>
			</ul>

		</div>
		</div>
		<div id = "right">
			
			<div id="specialmargins"><p>Live Irish Music</p>
			
			<p>Traditional and Contemporary Irish songs and Irish fiddle &nbsp;&nbsp;&nbsp;&nbsp;</p>
				
			<p>Click below to listen to demo:</p>
			<!-- START WIMPY BUTTON: Standard HTML -->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="35" height="35" id="wimpybutton934">
<param name="movie" value="" />
<param name="loop" value="false" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="bgcolor" value="#1C5D2F" />
<param name="flashvars" value="theFile=http://www.irishmusicnj.com/NedOfTheHill.mp3&autoplay=yes&loopMe=yes&playingColor=A23333&arrowColor=000600&grinderColor=663333&theBkgdColor=8EBF9D&rollOverColor=8EBF9D&wimpyReg=NyUyQSU1RCU1RTRCJTJBWXMlODAlNjBiJTNCamZoNEolNUQ3MlglM0RYOTAxRiU1QnMlM0F5UFI0&myid=wimpybutton934" />
<embed src="" flashvars="theFile=http://www.irishmusicnj.com/NedOfTheHill.mp3&autoplay=yes&loopMe=yes&playingColor=A23333&arrowColor=000600&grinderColor=663333&theBkgdColor=8EBF9D&rollOverColor=8EBF9D&wimpyReg=NyUyQSU1RCU1RTRCJTJBWXMlODAlNjBiJTNCamZoNEolNUQ3MlglM0RYOTAxRiU1QnMlM0F5UFI0&myid=wimpybutton934" width="35" height="35" bgcolor="#1C5D2F" loop="false" 
menu="false" quality="high" name="wimpybutton934" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>
<!-- END WIMPY BUTTON: Standard HTML -->

Ned of the Hill
			<p>Solo, duo and band set-ups available - flexible to your budget - and can include guitar, bodhran, piano, Irish step-dancing</p></div>
		  
		   <img src="ShipInnMilfordNJ.jpg" "width=330px" alt="Irish Music NJ" title="Ship Inn NJ"; />
		<div class = "clearthefloats"></div>
		   
		   
		   
		   <p>~I work with different area musicians and will put together a group --depending on your needs and budget – 
		   including Irish songs and traditional Irish fiddle, and can include also guitar and/or bodhran, and Irish step-dancing.~</p>

		</div>
		</div>
		<div class="clearing"&nbsp;/>
		<div id = "footer">
			
			Traditional Irish Music and Celtic Music for your Wedding or Special Event, NJ/PA/NY<br>
			<a href="mailto:jj@jennifer-johnson.com">Contact</a><br>
			<a href="http://www.buckscountywedding.com" target="_blank">www.buckscountywedding.com</a><br>
			<a href="" target=_"blank">www.irishmusicnj.com</a><br>
		</div>
	</body>
</html>
/*style sheet for wedding music website*/
*  {
	margins: 0;
	padding: 0;
}
body {
	background-color:  #1c5d2f;
font-family:  Baskerville;
	color:  #8ebf9d;	
}
a:link {color: #8ebf9d;
		font-weight: bold;
}

a:hover {
	background-color: #8ebf9d;
	color:  #1c5d2f; 
}
#content  {
	width:  100%;
	float:  left;
}

p  {
	font-family:  "Century Gothic", Arial, sans-serif;
	}
h1 {
		float:  right;
	}
h1#recordings  {
	float:  left;
}
p#aboutheader {
	float:  left;
	margin-left:  200px;
	clear:  right;
	font-weight:  normal;
	font-size:  1.3em;
}
h1#links  {
	float:  left;
	clear:  right;
}

h2  {clear:  both;
	}
h3  {color:  #663333
	}
span {float:  center;
	  }		
#head {
	letter-spacing: -.5pt;
	font-weight: normal;
	background-color:  #1c5d2f;
	color:  #8ebf9d;
	border-bottom:  1px #8ebf9d solid;
	text-align:  center;
	float:  left;
	width:  960px;
    clear:  both;
	margin-left:  -8px;
	margin-top:  -10px;
	}
	
#left {
border-right:  solid;
float: left;
width:  200px;
clear:  left;
border:  none;
	}

#menu li{
	text-decoration:  none;
	list-style-type:  none;
	border-bottom:  4px #336633 outset;
	border-right:  3px #336633 outset;
	border-top:  3px #336633 outset;
	border-left:  3px #336633 outset;
	font-size:  larger;
	font-weight:  bold;
	color:  #663333;
	background-color:  #669966;
	width:  8em;
	height:  1.5em;
	text-align:  center;
	margin-left:  0;
}	
#menu a{
	font-style:  normal;
	text-decoration:  none;
	color:  #663333;
	display:  block;
	border: none;
	background-color:  #669966;
}
#menu 
    a:hover{
	border:  3px #663333 outset;
}

#right {
	float:  right;
	width:  680px;
	clear:  right;
	}
div#specialmargins  {
	float:  left;
	width: 330px;

}
div#specialmargins p{
	font-size: 1 em
}
div#specialmargins a {
	color: #8ebf9d;
	font-weight: bold;	
}
div#specialmargins a:hover {
	background-color: #8ebf9d;
	color:  #1c5d2f;
}
p#about {
	margin-top:  20px;
	font-size:  .9em;
}
p#about1 {
	font-size:  .9em;
}
p#about1 a {
	color: #8ebf9d;
	font-weight: bold;	
}
p#about1 a:hover {
	background-color: #8ebf9d;
	color:  #1c5d2f;
}
img {
	float:  left; 
	margin: 20px 0px 0px 20px;
	}
img#recordings {
	float:  left;
	margin:0px 20px 20px 20px; 
}
img#about  {
	float:  left;
	margin:  0px 20px 0px 0px;

}
p#ken {
	float:  right;
}
p#largetext  {
	font-weight:  bold;
	font-size:  1.5em;
}
p#linkstext {
	font-size:  1.3em;
}

p#displace {
	position:  relative; top 100px;
}

.clearthefloats  {
	clear:  both;
}
.clearing {
  height: 0;
  clear: both;
 }
 
#footer a{
	color: #8ebf9d;
	font-weight: bold;
	text-decoration: none;
}
#footer a:hover {
	background-color: #8ebf9d;
	color:  #1c5d2f;
}
#footer {
float:  right;
width:  960px;
clear:  both;
	text-align:  center;
	margin-top:  20px;
background-color:  #663333;
color:  ##8ebf9d;
font-weight:  normal;
font-size:  small;
margin-left: -8px;
border-top:  1px #8ebf9d solid;
border-bottom: 1px #8ebf9d solid;
	}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.