SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
Thread: IE not displaying images
-
Nov 16, 2007, 10:57 #1
- Join Date
- Jul 2006
- Posts
- 72
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
IE not displaying images
I'm starting to get the hang of this CSS. I can't figure this one out though. I am working on a project for school and, as always, I run into IE problems. IE is not displaying a few img's in the header and I can't determine what is causing this to happen. Here is the code:
Any ideas?
Code HTML4Strict:<!--Begin Header--> <div id="topsection"> <img src="images/MadLibsTM.gif" width="" height="" alt="" /> <a href="index.html"><img src="images/homeDOWNtab.gif" width="" height="" alt="" id="Home" class="tabs"/></a> <a href="about/index.html"><img src="images/aboutDOWNtab.gif" width="" height="" alt="" id="About" class="tabs"/></a> <a href="play/index.html"><img src="images/playDOWNtab.gif" width="" height="" alt="" id="Play" class="tabs"/></a> <a href="make/index.html"><img src="images/makeDOWNtab.gif" width="" height="" alt="" id="Make" class="tabs"/></a> <a href="help/index.html"><img src="images/helpDOWNtab.gif" width="" height="" alt="" id="Help" class="tabs"/></a> <img src="images/RightSpace.gif" width="" height="" alt="" style="margin-top:38px"/> </div> <!--End Header-->
Code CSS:body,html{ background: #95c9b8; margin:0; padding:0; height:100%; } #maincontainer{ background: #fcffa3; width: 47.5em; /*Width of main container*/ margin: 0 auto; /*Center container on page*/ height:100%; } #topsection{ background: #fcffa3; height: 78px; /*Height of top section*/ padding:0; margin-bottom:-8px; } #topsection img{ float:left; } #contentwrapper{ background: #fcffa3; float: left; width: 100%; } #contentcolumn{ margin: 0 43px 0 82px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/ height:100%; } #leftcolumn{ float: left; width: 82px; /*Width of left column in pixel*/ margin-left: -47.5em; /*Set margin to that of -(MainContainerWidth)*/ height:92%; background: #fcffa3; background-image: url(images/LeftMargin.gif); background-repeat: repeat-y; background-position: 0px 30px; } #rightcolumn{ float: left; width: 43px; /*Width of right column*/ margin-left: -43px; /*Set left margin to -(RightColumnWidth)*/ height:92%; background: #fcffa3; background-image: url(images/RightMargin.gif); background-repeat: repeat-y; background-position: 0px 30px; } #footer{ clear: left; width: 100%; background: #fcffa3; text-align: center; padding: 0px 0; } .innertube{ margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/ margin-top: 0; } .tabs{ border:none; width:82px; height:32px; float:left; display:block; margin-top:38px; /*margin-left:-1px; margin-right:-4px;*/ }
-
Nov 16, 2007, 11:12 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
HI,
I can't really tell without seeing the images but I'd hazard a guess that this is causing you some problems.
Code:<img src="images/MadLibsTM.gif" width="" height="" alt="" />
-
Nov 16, 2007, 15:52 #3
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Also note that what you have is a list of links, so a list would be the appropriate markup to use here. As for the link paths, there's no need to declare index.html after the directory path since index.html is the default on most servers anyway (though IIS uses default.htm or default.html instead).
If you could show me the images you're using (preferably via a live link to a test page) I could show you how to mark this up so it works properly (practically) regardless of what browser is being used.Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Nov 16, 2007, 16:18 #4
- Join Date
- Jul 2006
- Posts
- 72
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
OK, so you can't declare an empty height and width for img tags for IE, good to know. Thanks Paul.
-
Nov 16, 2007, 16:28 #5
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
And it's never a good idea either since the browser has to waste processing time trying to guess how wide and tall those images are in the first place. By giving them the information they need, browsers can speed up the time it takes to render a Web page.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
Bookmarks